皆さま引き続きコロナには気をつけてお過ごしください！

【WordPress】アンダーラインをアニメーションにしよう

アニメーションアンダーライン WordPress

Webサイトで特に見ていただきたいところなどは、

文字を大きくしたり、

囲かこったり、

アンダーラインを引いたりと、いろいろな工夫をされていると思います。

 

今回はアンダーラインを、スクロールでその箇所かしょが表示されたときにアニメーションさせる方法をご紹介したいと思います。

 

contents
  1. アニメーションアンダーラインの種類
  2. 必要な編集箇所
  3. function.phpを編集しよう
  4. JavaScriptを編集しよう
  5. 投稿記事に使おう
  6. クイックタグに追加しよう
  7. 編集内容を確認しよう
    1. function.php（アニメーションアンダーライン用）
    2. JavaScript
    3. function.php（クイックタグ用）
  8. まとめ
スポンサーリンク

アニメーションアンダーラインの種類

下記のように、色やスピードを簡単に変更できます。

下線青で、3秒でアニメーション

 

下線デフォルトの#ffdc00色で、1秒でアニメーション

 

また、もう少し手を加えれば、下線を引きたい文字にも装飾そうしょくを施ほどこすことができます。

[ani2 sec=0.5]点線付きの文字色赤で、下線デフォルトの#FFCCFF色で、0.5秒でアニメーション[/ani2]

 

スポンサーリンク

必要な編集箇所

アニメーションアンダーラインを使うには、以下3か所での設定が最低限必要となります。

場所 内容
function.php 下線を定義する
javascript アニメーションを定義する
投稿記事 使いたい場所でアニメーションアンダーラインの関数を呼び出す
スポンサーリンク

function.phpを編集しよう

必ず事前にバックアップを取ってから編集作業をしましょう。

function.phpを編集するには、以下のいずれかを行います。

①外観＞テーマエディターからテーマのための関数 (functions.php)を開き、追記する

もしくは、

②プラグイン「Snippets」＞「Add New」から追記をします。

 

プラグイン「Snippets」を入れていない方もいらっしゃると思いますので、

今回はテーマエディターからの追記方法を記載します。

 

function.php編集手順

①外観＞テーマエディターを開く。

テーマエディター

②テーマのための関数 (functions.php)を開く。

テーマのための関数

③以下を追記し、保存する。

function ani_under($atts,$content = null){
  extract(shortcode_atts(array(
        'color' => (string)'#ffdc00',
        'sec' => '2'
    ), $atts));
  $sc = 'color: #333;text-decoration: none;background: -webkit-linear-gradient(transparent 60%,'.(string)$color.' 40%);background: -o-linear-gradient(transparent 60%,'.(string)$color.' 40%);background: linear-gradient(transparent 60%,'.(string)$color.' 40%);background-repeat: no-repeat;background-size: 0% 100%;transition: background-size '.$sec.'s;';
 return ''. $content .'';
 }
 add_shortcode('ani', 'ani_under');

コードの意味は下部でご説明します。

スポンサーリンク

JavaScriptを編集しよう

プラグインの「カスタムCSS&JS」を使って、JavaScriptを登録したいと思います。

JavaScript登録手順

①カスタムCSS&JS＞カスタムJSの追加をクリックする。

②Code欄に以下を記入し、保存する。

jQuery(function(){
 jQuery(window).scroll(function(){
  var windowHeight =jQuery(window).height();
  var windowTop =jQuery(window).scrollTop();
  jQuery('.underz').each(function(){
   var objectImage =jQuery(this).offset().top;
   if(windowTop > objectImage - windowHeight*3/5){jQuery(this).css('background-size','100% 100%')};
  });
 });
});

コードの意味は下部でご説明します。

 

スポンサーリンク

投稿記事に使おう

登録したショートコードを呼び出し、使いましょう。

投稿画面で下部コードを書くと、

［ani color=#a8dafb sec=3］下線青で、3秒でアニメーション［/ani］
※［］は半角に変えてください。

↓ 下部のように表示されます。

下線青で、3秒でアニメーション

 

投稿画面で下部コードを書くと、

［ani sec=1］下線デフォルトの#ffdc00色で、1秒でアニメーション［/ani］

※［］は半角に変えてください。

↓ 下部のように表示されます。

下線デフォルトの#ffdc00色で、1秒でアニメーション
スポンサーリンク

クイックタグに追加しよう

繰返し使うことが想定されるため、

テキスト編集画面で表示されるクイックタグに追加したいと思います。

 

ここでは、AddQuicktagなどの有名なプラグインは利用せず、

function.phpに追記したいと思います。

 

上記同様、以下2つのいずれかの方法で登録が可能ですが、

すでにクイックタグを追加していた場合、

同じ関数名は定義できないため、既存のクイックタグの追加関数の中に定義するようにしてください。

①外観＞テーマエディターからテーマのための関数 (functions.php)を開き、追記する

もしくは、

②プラグイン「Snippets」＞「Add New」から追記をします。

function.php編集手順

①外観＞テーマエディターを開く。

テーマエディター

②テーマのための関数 (functions.php)を開く。

テーマのための関数

③以下を追記し、保存する。

function add_button_quicktag() {
?>
}
add_action(‘admin_print_footer_scripts’, ‘add_button_quicktag’);

 

スポンサーリンク

編集内容を確認しよう

使えるようになったところで、

追加したコードの内容を1つずつ確認したいと思います。

 

function.php（アニメーションアンダーライン用）

function ani_under($atts,$content = null){
　　〜〜〜
}

2つの引数を必要とするani_underという関数を定義しています。

 

1つ目の引数「$atts」でコードに入力された引数を取得します。

2つ目の引数「$content = null」で、コードに囲まれた項目を取得（デフォルトでは空の状態）します。

 

extract(shortcode_atts(array(
  'color' => (string)'#ffdc00',
  'sec' => '2'
 ), $atts));

extract関数は、array配列を別々に扱うことができるようにする関数です。

extract関数を使わないと、

array配列は電車のように、電車全体を考えなければいけません。

これを電車全体を意識せず、車両単体で扱うことができるようにするのがextract関数です。

 

array(
  'color' => (string)'#ffdc00',
  'sec' => '2'
)

array配列に2つを入れています。

1つ目は色で、指定がなければデフォルトの■#ffdc00が適用されます。

2つ目は秒数で、線を引くための時間です。

 

$sc = 'color: #333;
text-decoration: none;
background: -webkit-linear-gradient(transparent 60%,'.(string)$color.' 40%);
background: -o-linear-gradient(transparent 60%,'.(string)$color.' 40%);
background: linear-gradient(transparent 60%,'.(string)$color.' 40%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size '.$sec.'s;';

下線を引く文字列に関する設定をします。

 

  • color: #333;

色は■#333の少し暗い灰色にしています。

 

  • text-decoration: none;

名前のとおり、文字列を装飾します。

ここでは「none」を設定していますので、装飾はしていません。

# 内容
none 装飾なし
underline 下線を引く
overline 文字列に上に線を引く
line-through 取り消し線を引く
solid 実線を引く
double 二重線を引く
dotted 点線を引く
dashed 破線を引く
wavy 波線を引く
画面表示 コード
線無し
下線
上線
取り消し線
下線・実線
下線・二重線
下線・点線
下線・破線
下線・波線
下線・赤
  • <div style=”text-decoration: none;”>線無し</div>
  • <div style=”text-decoration: underline;”>下線</div>
  • <div style=”text-decoration: overline;”>上線</div>
  • <div style=”text-decoration: line-through;”>取り消し線</div>
  • <div style=”text-decoration: underline solid;”>下線・実線</div>
  • <div style=”text-decoration: underline double;”>下線・二重線</div>
  • <div style=”text-decoration: underline dotted;”>下線・点線</div>
  • <div style=”text-decoration: underline dashed;”>下線・破線</div>
  • <div style=”text-decoration: underline wavy;”>下線・波線</div>
  • <div style=”text-decoration: underline red;”>下線・赤</div>

 

background: -webkit-linear-gradient(transparent 60%,'.(string)$color.' 40%);
background: -o-linear-gradient(transparent 60%,'.(string)$color.' 40%);
background: linear-gradient(transparent 60%,'.(string)$color.' 40%);

線形（一方向）グラデーションを設定しています。

土のブラウザでも同じように表示させるように、3行設定しています。

60%までは透明にし、残り40%は指定した色にしています。

 

  • background-repeat: no-repeat;

繰返し表示はさせません。

 

  • background-size: 0% 100%;

背景画像の寸法を設定します。

背景領域に対する割合を幅、高さの順で指定します。

 

  • transition: background-size ‘.$sec.’s;’;

アニメーションを持続させる時間を設定します。

 

  • return ‘<span class=”underz” style=”‘.$sc.'”>’. $content .'</span>’;

spanタグに指定した文字列、秒数を設定して返します。

 

 

  • add_shortcode(‘ani’, ‘ani_under’);

定義したani_under関数を、aniというショートコードで定義しています。

これにより、投稿画面でaniのショートコードを使うと、

ani_underの関数が呼び出されることになります。

 

JavaScript

    •  jQuery(window).scroll(function(){
    • 　～～～
      });

ブラウザのウィンドウがスクロールしたときに処理をさせます。

 

    •   var windowHeight =jQuery(window).height();
    •   var windowTop =jQuery(window).scrollTop();

ウィンドウの高さと、

要素の上から、スクロールしたときに最も上に表示されているコンテンツまでの距離を取得し、

windowHeightと、windowTop という変数に入れています。

 

    •   jQuery(‘.underz’).each(function(){
    • 　～～～
    •   });

「underz」の名前がついたクラスの処理を行います。

 

    •    var objectImage =jQuery(this).offset().top;

指定した要素のtopの位置を取得して変数に格納しています。

 

    •    if(windowTop > objectImage – windowHeight*3/5){
    • 　　jQuery(this).css(‘background-size’,’100% 100%’)};
    •   });

以下の条件が成り立った場合に、背景画像の寸法を100%のサイズにします。

条件）コンテンツまでの距離　＞　指定した要素の位置－ウィンドウの高さ×3÷5

 

function.php（クイックタグ用）

  • function add_button_quicktag() {
  • 　～～～
  • }

クイックタグボタンを追加する関数です。

 

[cfview name=”タグボタン追加”]

 

# 内容
ani_underLine クイックタグに登録する関数名
アニメ下線 クイックタグに表示するボタン名
［ani color=#ffdc00 sec=3］下線内容［/ani］ クイックタグを1回押したときに投稿画面に表示される内容

 

もし、上記を、次のように記載すると、

クイックタグを1回押したときは、開始タグの［ani color=#ffdc00 sec=3］だけが表示され、

2回目には、閉じタグの［/ani］が表示されます。

  • 　QTags.addButton(‘ani_underLine’,’アニメ下線’,’［ani color=#ffdc00 sec=3］’,’［/ani］’);

 

 

  • add_action(‘admin_print_footer_scripts’, ‘add_button_quicktag’);

「admin_print_footer_scripts」がフックされたときに、

add_button_quicktagの関数が呼ばれ、処理されます。

簡単に言えば、関数を呼び出す処理タイミングを設定しています。

 

スポンサーリンク

まとめ

今回の方法は、でびきんさんのブログを参考にさせていただいております。

https://dstrikes.net/2019/02/06/cocoon_animate_underline/
dstrikes.net

アニメーションアンダーラインの実装方法はそのままに、

ショートコード部分は、プラグインを使わずに登録しています。

 

このアニメーションアンダーラインは、Cocoon以外でも実装できますよ✨

 

にゃこ
でびきんさん、ありがとうございました！
スポンサーリンク
ホーム
トップ
タイトルとURLをコピーしました