swell カスタマイズ : cssとjavascriptだけで文中に動くアンダーラインを引く方法

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

swell カスタマイズ : ブロック単位で効かせるCSSではできない芸当を実現

前回の記事で色々とcssとjavascriptだけでSWELLのブロック単位で効かせる

ぬるぬる動くCSSの記事を書きましたが

文中で強調表示したい場所とかに一部分だけ動きのある強調下線とか効かせてみたいと思いませんか？

まずjavascriptです

前回使用したものと基本的には同じですが

SWELLで使用できるカスタム書式の .swl-format-1と.swl-format-2も反応するように

少し仕掛けを作ります。

このjavascriptを使うことにより SWELLの標準機能のエディター設定内に存在する

カスタム書式の .swl-format-1と .swl-format-2に対して

スクロールイベント発生時の仕掛けCSSをコールするための

.swl-format-1.onと .swl-format-2.on を作り出すことが可能になります。

このスクリプトを 外観＞カスタマイズ＞高度な設定の bodyタグ終了直前に出力するコード に

そのまま貼り付けてください。

<script>
var adj=100;
var svRect=[];
var svTop=[];
var winY=window.pageYOffset;
var winH=window.innerHeight;
var sview=document.querySelectorAll('.slideview');

var svRect1=[];
var svTop1=[];
var sview1=document.querySelectorAll('.swl-format-1');

var svRect2=[];
var svTop2=[];
var sview2=document.querySelectorAll('.swl-format-2');

window.addEventListener('resize',function(){
  winH=window.innerHeight;
});

for (var i=0; i<sview.length;i++){
  svRect.push(sview[i].getBoundingClientRect());
}
for (var i=0; i<svRect.length; i++){
  svTop.push(svRect[i].top+winY);
}

for (var i=0; i<sview1.length;i++){
  svRect1.push(sview1[i].getBoundingClientRect());
}
for (var i=0; i<svRect1.length; i++){
  svTop1.push(svRect1[i].top+winY);
}

for (var i=0; i<sview2.length;i++){
  svRect2.push(sview2[i].getBoundingClientRect());
}
for (var i=0; i<svRect2.length; i++){
  svTop2.push(svRect2[i].top+winY);
}


window.addEventListener('scroll',function(){
  winY=window.pageYOffset;
  
  for (var i=0; i<sview.length; i++){
    if(winY>svTop[i]-winH+adj){
      sview[i].classList.add('on');
    }else{
      sview[i].classList.remove('on');
    }
  }

  for (var i=0; i<sview1.length; i++){
    if(winY>svTop1[i]-winH+adj){
      sview1[i].classList.add('on');
    }else{
      sview1[i].classList.remove('on');
    }
  }

  for (var i=0; i<sview2.length; i++){
    if(winY>svTop2[i]-winH+adj){
      sview2[i].classList.add('on');
    }else{
      sview2[i].classList.remove('on');
    }
  }

});
</script>

.swl-format-1と .swl-format-2の動きの説明

基本的にこの予約された2つのclassはSWELL設定の中のエディター設定内のカスタム書式タブ内の最下部に設定画面が存在します。

この二つのクラスを利用すると文中に一部だけ装飾したりするために このクラスが有効化された span タグが挿入されます。

話が脱線しましたｗ

ブロックエディターで見た場合こんな表示

HTMLで表示するとこんな感じ

<p>完全に面白半分なんですが<span class="swl-format-1">javascriptとcss</span>だけで記述しているので jQueryは使ってません</p>

私の設定の場合 strongタグ使用しないので .swl-format-1 を以下のように設定してます。

.swl-format-1{
display: inline-block;
font-weight:bold;
}

現在 .swl-format-2は使用していませんのでこちらに仕掛けを作ります。

こんな感じ

仕掛けの部分はメインのCSSに記載しても良いのですがメンテナンス性を優先してこの１画面で結論出せるように

あえてこちらに必要なCSSを書きます。

もちろん前回のメインのCSSに .swl-format-2.on を追加記述して

そちらに処理を書いていただいても結果は同じになりますのでお好きな方で。

この処理は前述のjavascriptさえ宣言していただければこのエディター設定画面のCSS記述単独で動作します。

.swl-format-1{
display: inline-block;
font-weight:bold;
}

.swl-format-2{
 display: inline-block;
 position: relative;
font-weight:bold;
}

.swl-format-2.on:before{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #0f6aaa;
  transform: translateX(-50%);
  animation: xborder_anim 2s linear forwards;
}

@keyframes xborder_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

実際の仕掛けが動作するとこんな感じ。

この本文中の途中に仕掛けた部分が発動します。注目させる時なんかに役に立ちますね。

今は指定した文字列の中央から左右に伸ばす設定してますが 左から順当に表示させたいのなら

以下の様に差し替えてください。

.swl-format-2.on:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #0f6aaa;
  animation: xborder_anim 2s linear forwards;
}

線の太さ線の種類や効果時間などはお好みで変更してください。

実際の使い方は

ブロックエディター上で文中の好みの位置で左クリックで範囲指定してください。

こんな感じ

出現しているSWELLの小メニューのSWELLマークをクリックするとペロンとコマンド一覧が出ますので

その中から自分で作成したコマンドを指定してください。 僕の場合なら下動ラインって名前つけてます。

これで文中の一部だけ範囲指定した部分に文字種を太字で文字下に左右に広がる下線が付加されます。

ちょとややこしいかもですが 文中にアイキャッチ効果を付加できるのは

他ブログからの差別化が可能になりますね！