ホーム / qooq /

【Blogger+QooQ+動くマーカー+ADSense】最近流行の動くマーカーを取り入れてみた！

2020年2月27日木曜日

ADSense blog qooq

t f B! P L
続・続【驚き！】Blogger + QooQ + ADSense が最強の件 

動くマーカーを使ってみたい！

最近流行りの動くマーカー！！


・・・本当に流行っているかは、はっきりしませんが。
ご覧になったことありますか？

「すーーー」っとアンダーラインを引くアニメーションは、カッコイイし、読ませたい部分が一目で分かります。
これは、ぜひとも取り入れたい！！

ところで、この動くマーカーって正式名称は何なんですかね。
マーカーアニメーションとか、アニメーションマーカーとか・・・。
う～ん・・・
このブログでは動くマーカーと呼んでいきましょう！

さて、調べてみると、WordPressのプラグインのようです。
有料のもので、ZEBLINEというプラグインは、３，０００円！！
結構お高めなんですね。

なんとかBloggerでも対応する方法はないものか？
出来れば無料で・・・。

実際に設定してみたものが下記の動くマーカーとなります。

動くマーカーのテストです。短い文章ですと一瞬で終わってしまいますので、長い文章でテストしますね。動くマーカーはこんな感じのアニメーションとなります。いかがでしょうか？

この動くマーカーのポイントは、マーカーを引く部分が、画面内に表示された瞬間からアニメーションがスタートするところです。
記事が読み込まれた瞬間だと、見ている方が記事を読んでいる間にアニメーションは終わっていますので、普通のマーカーと何ら変わりありません。
表示された瞬間というのが大切なポイントとなっています。

動くマーカーの設定

このスクリプトは３つのパーツからなっています。
１つ目が、HTMLのヘッダ部分にコピーするパーツ、２つ目が、CSSに追加するパーツ、３つ目が、投稿時に利用するパーツです。
Bloggerの画面を例にあげながら、設定していきましょう！

でも、待ってください！
このスクリプトを追加して、上手に動かなかった場合のために、現在のテーマを必ずバックアップしておきましょう。
テーマの画面内、右上に、　バックアップ／復元　ボタンがありますので、まずはバックアップ作業をおこなってください。

１．HTMLのヘッダ部分にコピーしましょう！
　HTMLのヘッダ部分は
テーマ　->　HTMLの編集　ボタンを押して
　HTMLを表示して追加しましょう。
　検索でヘッダの終了タグ　＜／ＨＥＡＤ＞　を見つけると早いと思います。
　見つかったら、＜／ＨＥＡＤ＞の前あたりにコピーしましょう！




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




２．ＣＳＳの追加



　テーマ　->　カスタマイズ　ボタンを押して





テーマデザイナーを表示させます。

　さらに

　上級者向け　->　CSSを追加　を選択して

　カスタムCSSを追加の画面を表示します。

　この白いフィールドの中に下記ＣＳＳをコピーします。



/*マーカーアニメーション*/
 
.marker-animation.active{
    background-position: -100% .5em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(178,255,178) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(178,255,178) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(178,255,178) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(178,255,178) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(178,255,178) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 5s ease;
    font-weight: bold;
}





３．記事を投稿中に下記を追加すれば完成です！

　Bloggerの投稿　->　編集　->　作成　画面



<span class="marker-animation">
　動くマーカーで強調したい文章を入力
</span>









マーカー色とアニメーションスピード



マーカー色とアニメーションスピードは、２でコピーしたＣＳＳの中で指定していきます。マーカー色は、(178,255,178)と書いてある、５ケ所の部分をＲＧＢで指定します。（０から２５５の範囲）

マーカー色のサンプルを示しておきます。


気に入った色がありましたら、各色の上段部分を使用してください。








255,153,153

#ff9999		
255,204,255

#ffccff		
204,204,255

#ccccff		
204,255,255

#ccffff		




204,255,153

#ccff99		
255,255,102

#ffff66		
255,204,102

#ffcc66		
153,204,255

#99ccff		






アニメーションのスピードは、ｔｒａｎｓｉｔｉｏｎ：　ａｌｌ　５ｓ

とある　５ｓ　が５秒で線を引きましょうという意味ですので、この秒数を変更して好みのスピードに調整してください。




これで、動くマーカーが完成です！

ぜひ、使ってみた感想など教えてくださいね！



参考にしたＨＰはこちらです。
ありがとうございました！


https://gurio.work/marker-animation01/






























QooQ