【無料配布】Cocoonでアニメーションアンダーラインを実装するショートコード

この記事は 約6 分で読めます。

Cocoonユーザーさんに朗報です！

ぐふふふ　作ったよん♪
Cocoonユーザーさん必見！！
あとでCocoonユーザーさんにプレゼントがあります！
乞うご期待！#cocoon #wordpress #themes
— でびきん@Googleカニバリスト (@debikingz) February 6, 2019

どんな奴かと言いますと。。。。

Animation_Underline

こんな奴です。

もちろん、同じページ内で色んな色が使えますしスピードも変更可能です。

そんな素敵なアニメーションアンダーラインをご紹介したいと思います。

アニメーションアンダーラインで出来る事
アニアンダーの使い方
実装手順
まとめと要望について

アニメーションアンダーラインで出来る事

アニメーションアンダーライン　名付けて【アニアンダー】と呼んで貰いましょう！
実はこれ作るのに少しハマってしまって昨日の朝方から7時間も掛かってしまいました。

それはさておき、アニアンダーで出来る事をご紹介します。

アンダーラインの色の変更
ページ内に複数のカラーを指定可能(赤・緑・黄色など好きな色が指定出来ます)
アニメーションの速度を好きな速度に変更出来ます。
ショートコードなのでボタン一発で手軽に使えます。

大きく以上の4点が【アニアンダー】で出来る事です。

使いたい時は

[ani]この文字列にアニメーションでラインが引かれます[/ani]

これだけです。

凄く簡単に使えるので、是非みなさまに浸かって頂きたいと思い無料配布と言う形を取らせて頂きました。

アニアンダーの使い方

アニアンダーには２つのパラメーターが設定出来るようになっています。

[ani color=blue]アンダーラインを引きたい部分[/ani]

blueの部分を好きなカラーコードかCSSで対応しているカラー名を入力する事で好きな色のアンダーラインを使う事が出来ます。

[ani sec=0.1]アンダーラインを引きたい部分[/ani]

更にアニメーションの速さを0.1単位で指定出来ます。

数字が小さくなるほど速いアニメーションが表示され、大きな数字を入れるとゆっくりになります。
文字列の長さにも寄りますが、5秒程度がマックスではないかと思います。

何も指定しない場合は、デフォルトカラー #ffdc00 の色が適用されます。

使い方は以上です。

実装手順

実装手順は３ステップでサクッと実装出来ますので身構えなくても大丈夫です。

ステップ１:function.phpにコピペ

外観→テーマの編集で編集ページに移動します。

function.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 '<span class="underz" style="'.$sc.'">'. $content .'</span>';
	}
	add_shortcode('ani', 'ani_under');

貼り付けが成功しましたら、ファイルを更新するボタンを押して保存します。

ステップ2:javascript.jsをコピペ

もちろんCocoonの子テーマである事も確認しておいて下さい。

選択を確認しましたら、次に以下のコードを貼り付けます。

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%')};
		});
	});
});

こちらも貼り付けが完了しましたら、ファイルを更新して保存して下さい。

ステップ3:ショートコードを登録

ステップ２の時点で一応完了はしていますが、ワンクリックで使えるようにするためにショートコードを登録します。

AddQuicktagと言うプラグインが必要になりますので、インストールして下さい。

プラグイン→新規追加　から『AddQuicktag』と入力して検索して下さい。

インストールが出来ましたら『有効化』ボタンを押して有効化しておいて下さい。

サイドメニューから　設定　→　addquicktag のメニューが出て来てるはずです。

以下のように設定を追加して下さい。

ani_underLine
Ani_Under
[ani color=#ffdc00 sec=3]
[/ani]

入力部分は上記のようにパラメーターを設定する事と、右側のチェックマークを画像と同じにして下さい。
アイコンとかも設定出来るのですが、今回は特に設定する必要はありません。

まとめと要望について

Cocoonと言う素晴らしいテーマを無料で配布して頂いている『わいひら先生』のテーマを広く使って欲しくて、アニアンダーを紹介させて頂きました。

感謝感激・開発支援・寄付がしたいぜ！と言う方は、こちらのページから『わいひら先生』にして頂けると嬉しく思います。

更に、文字の色を変えたいと言うような要望やアンダーラインの幅を変更したい、その他の要望については一定数の希望が集まり次第対応させて頂こうかと考えております。

基本的に当Scriptはフリーですが、再配布の際には当ブログの記事にリンクして頂く事を条件に許可させて頂きたいと思います。

最後までお読み頂きまして有難う御座いました。