Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

SWELLの機能を使って文中に動くアンダーラインを引く方法

contents

ブロック単位で効かせる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やCSSをクラシックエディターや直書きで作成してた人からすればこう言う小手先を効かす時にかったるいと思いますが
その場合は手打ちでHTML入力モードもありますのでそちらでやっても良いのです

しかし本記事の趣旨から逸脱するのであえて書きませんw

下記のミニメニュー出している時に1番右の縦3ポチクリックすれば
HTMLとして編集モードに切り替えできます。

話が脱線しましたw

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

カスタム書式の宣言の仕方

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は使用していませんのでこちらに仕掛けを作ります。

こんな感じ

SWELLカスタム書式の設定
カスタム書式

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

あえてこちらに必要な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マークをクリックするとペロンとコマンド一覧が出ますので

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

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

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

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents