うぇぶ活

沖縄に移住していたが、故あって名古屋へ移住したカップルweb人がアフィリエイトでダブルフリーランスを目指すための活動雑記

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

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

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

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

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

 

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編集で下記の様に記述すると上の「黄色のマーキング」になります。

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

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

 

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

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

 

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

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

これにはCSSjqueryを使用します。 

まずは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」がとても使いやすいので利用しています。

 

 

clipy-app.com

 

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

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

まとめとして

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

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