Recommended!2020年オススメする有料WordPressテーマ7選 Read More
はてなブログカスタマイズ

はてなブログに蛍光マーカー風ラインを引くようなアニメーションを実装

最近、投稿記事内の強調したい文章や文節に蛍光ペンでラインマーカーを使用しているサイトが特に目立ちます。

パッと見た目のインパクトはありますし、何を強調しているのかわかりやすいですよね。

ではもう少し強調して、今この文節のように、読む直前に蛍光マーカーでラインを引いていけばより目立つのではないでしょうか?

はてなブログのカスタマイズで蛍光マーカー風ラインを下線を引くように動かしていく方法をご紹介いたします。

はてなブログをやるなら、制限が少ないはてなブログProがオススメ!

HTMLコードとCSSでマーカーの装飾

 

一般的にマーカーを実装する場合、CSSに下記のように記述すれば良いのです。

一例として、黄色のマーキングをしてみます。

.marker-y {
 background: linear-gradient(transparent 60%, rgb(255,255,0) 60%);
}

「.marker-y」は自分がわかりやすければ「.m-y」「.marker-yellow」などでも問題ありません。頭に「.」は入れて下さい。

CSSでは「.」が入っているとHTML上で「class」と判断します。

rgb(***,***,***)は#ffff00でも構いません。

そして本文のHTML編集で下記の様に記述すると上の「黄色のマーキング」になります。(WordPress上ですので、変化していません。)

<span class="marker-y">ここに文章</span>

ここまでは割と簡単ですね。

 蛍光マーカーをアニメーションで動きをつけて引く

こ〜〜〜〜〜〜んな感じで、伸び〜〜〜〜〜〜〜〜るアニメーション。

ここではWordPressにてプラグイン実装し、マーカーアニメーションしています。

スクロールするとクラス指定をした箇所にスゥーっと蛍光ペンを引いたような動的なアニメーションです。

では動きをつけてマーカー線を引くにはどうしたら良いのでしょうか・・・

これにはCSSとjqueryを使用します。

まずはhead部分へjqueryのコード記述を行います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
 $(".ani-marker").each(function(){
 var position = $(this).offset().top; //ページの一番上から要素までの距離取得
 var scroll = $(window).scrollTop(); //スクロールの位置取得
 var windowHeight = $(window).height(); //ウインドウの高さ取得
 if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎた時
 $(this).addClass('active'); //クラス「active」を与える
 }
 });
});
</script>

ちなみに(“.ani-marker”)が要素になります。

そして上記CSSと同じように「デザイン」→「デザインCSS」に下記コードを貼り付けます。

どのブラウザにでも対応できるようにしています。

.ani-marker.active{
 background-position: -100% .5em;
}
.ani-marker {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2s ease;
font-weight: bold;
}

rgb(232,115,131)の部分はお好きな色に変更して下さい。

ピンク色     #ffdfef 100,87,94
ブルー色     #cce5ff 80,90,100
イエロー色 #ffffbc 100,100,74 →黄色は白がバックグラウンドだと見にくいですね ^^;
など、お好きなように変更して下さい

上記マーカー同様、本文のHTML編集で下記の様に記述すると「蛍光マーカーをアニメーションで動かして引く」ようになります。

 

<span class="ani-marker">ここに文章</span>

スニペットを作成するアプリ

HTML編集でスニペットを作成するにアプリ(ソフト)を使用するとよいのではないでしょうか。

Windowsソフトは数多くあると思いますが、私はMacを使用しており「Clipy」がとても使いやすいので利用しています。

 

これはとても便利なアプリですね。

使い方は色んなサイトで紹介していると思いますのでここでは割愛いたします。

まとめとして

記事の文節や文字を装飾する方法はいくつもありますが、文字背景に色がついただけよりアニメーションでラインが引かれるマーカーの方が、読んでくれる人に分かりやすいです。

誘導したいリンク周りやボタン周りのアクセントとしてインパクトが有り、より有効ですので、活用されてみてはいかがでしょうか。

はてなブログを運営していましたが、訳あって閉鎖しました。

そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。

フォントの変更や文字色の変更など、WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするため
です。

2020年11月

関連記事
はてなブログカスタマイズ

役に立つ!はてなブログのカスタマイズ20選

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。…
はてなブログカスタマイズ

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログはWordPressみたいにカスタマイズできるというもので…
はてなブログカスタマイズ

はてなブログのカスタマイズ!シンタックスハイライトを挿入する

はてなブログのカスタマイズを紹介する際、CSSやHTMLのシンタックス…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。
各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です