THE THORカスタマイズ！スクロールする蛍光マーカーの実装方法！

ザ・トール

ここあです。

こちらの記事にも書かせていただきましたが

「THE THOR」もリリースされてから１年が経ち

だいぶ利用ユーザーも増えてきました。

なので、

ぼちぼちきちんと「他のサイトと差別化したい」と

考えている方もいらっしゃると思います。

ということで、今回は

「スクロールで開始する蛍光マーカー」をTHETHORで表示させる方法

について解説させていただきます。

今回の画面スクロールによる表示されるマーカーは、THE THOR以外でも設定が可能ですので、興味のあるあなたはぜひチャレンジしてみてください。

1 スクロールで開始する蛍光マーカーとは？
2 スクロールで開始する蛍光マーカーにはJQueryを
3 蛍光マーカーのCSSコードを新たに追記
4 スクロールマーカーのカスタマイズ方法
5 スクロールで開始する蛍光マーカーの表示方法まとめ

スクロールで開始する蛍光マーカーとは？

THE THORにはデフォルトで

テキストにマーカーを引く機能があります。

スタイル → マーカー（太）→ レッドなどで色や太さを選択

THE THOR蛍光マーカー

なので、

「THE THOR」ユーザーであれば誰でも簡単に

自分が書いた記事にマーカーを引くことができます。

しかし、どのテーマもそうですが

デフォルトの機能ばかり使っていては

他のサイトとうまく差別化することができません。

もちろん、記事を書く内容で差別化するのは大事ですが

やはり「どれも似たようなサイト」と思われないためには

デザインによる差別化というのも重要となります。

ということで、今回あなたにご紹介するマーカーは

「THE THOR」のデフォルト機能を使ったマーカーではなく

新たに「JQueryとCSS」を使ったマーカーアニメーションを

表示させる方法です。

あなたも他のサイトでよく見かけると思いますが

画面スクロールで開始するマーカーというのは

以下のようなマーカー。

画面スクロールするとマーカーが引かれる蛍光マーカー。

見逃したあなたは画面をリロードしてみてください。

※画面をスクロールさせると左からマーカーが引かれるというアニメーション付きのマーカーです。

もしもあなたが上記のような画面スクロールと同時に開始する

蛍光マーカーを使ってみたいという場合は

このまま読み進めてくださいね。

コピペだけで簡単に設定できますので＾＾

スクロールで開始する蛍光マーカーにはJQueryを

私がいつも紹介しているカスタマイズ方法というのは

基本的に「HTMLとCSSのみ」でできることがほとんどですが

今回はHTMLとCSSのみでというわけにはいきません。

なので、マーカーアニメーションを使うためには

簡易プログラムである「JQuery（ジェイクエリー）」を使います。

ということで「THE THOR」をご利用中にあなたは

ダッシュボードメニューから外観 → カスタマイズ →

基本設定［THE］→ 高度な設定をクリックしてください。

そうすると以下のような「</head>直上の自由入力エリア」

という表示項目がありますので、

THOR高度な設定

その部分に以下「JQueryのコード」を追記しましょう。

ただし、設定は必ず自己責任でお願いしますね。

高度な設定にコピペ: <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');
}
});
});
</script>

上記コードがコピペ出来たら、設定を保存してください。

蛍光マーカーのCSSコードを新たに追記

先にも説明した通り、THE THORにはデフォルトで

あなたが書いたテキストにマーカーを表示させる機能がありますが

今回は、それ以外のマーカーとして

新たに画面スクロールに対応する

蛍光マーカーのCSSを追記します。

追記コードは以下の通り

追加CSSにコピペ: .marker-animation.active{ background-position: -100% 0.5em; } .marker-animation { background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%); background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%); background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%); background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%); background-image: linear-gradient(left, transparent 50%, rgb(255,250,204) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 0.5em; transition: all 2s ease; font-weight: bold; }

こちらのCSSコードをダッシュボードメニューから

外観 → カスタマイズ → 追加CSSとクリックすると

CSSコードの記述ができます。

追加CSS記述欄

ここにCSSコードを貼り付けましょう。

ここまでできたら、あとは記事を書くだけです。

とは言え、記事を書く際には上記CSSを

読み込む必要がありますので

スクロールマーカーを表示させる場合は

以下のHTMLコードを使って文章を書くようにします。

HTMLコード: <span class="marker-animation">ここにマーカーをつけたい文章をいれてください</span>

また、毎回上記HTMLコードを書くのは非常に面倒ですので

WordPressのプラグイン「Add QuickTag」に

HTMLコードを登録しておくと便利です。

例えば、私の場合であれば

上記コードを以下のように「Add QuickTag」へと設定しています。

Add QuickTag

そうすることで、記事を書く際には

いつでもコードが簡単に呼び出せますので

スクロールマーカーを表示させたい時にはすごく便利です。

Add QuickTag

なので、面倒臭がり屋さんこそ、ちょっと一手間かけて

「Add QuickTag」にHTMLコードを設定してみてくださいね。

スクロールマーカーのカスタマイズ方法

今回は、画面スクロールによるマーカーの表示だけですので

あまりカスタマイズする部分はありませんが

念のためスクロールマーカーのカスタマイズ方法も記載しておきます。

スクロールマーカーの色を変更する方法

まずは無難にスクロールマーカーの色を変更する方法ですが、

色を変えるための場所というのは以下の部分になります。

background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);

マーカーの色はRGBカラーrgb(255,250,204)で指定してあります。

なので、通常のカラーコード#000000で表示させる場合は

このように、rgb(255,250,204)の部分を#000000と

background-image: -webkit-linear-gradient(left, transparent 50%, #000000 50%);

6桁のカラーコードを入力しても大丈夫です。

ただし、カラーコードの入力項目は全部で5カ所ほどありますので

background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);

もしも色を変更する場合は、必ず5箇所とも同じ色に変更してくださいね。

また、以下のサイトを使えば6桁のカラーコードを

PEKO STEP

RGBカラーに変換することもできますので

カラーコード変換

6桁のカラーコードを入力し変換された数字を

rgb(255,250,204)ここの数字を入れ替えていただいても大丈夫です。

ちなみに数値の並びは左から順にR、G、Bとなりますので

上記コードの場合であればrgb(255,251,125)と打ち変えれば

色見本と同じ、黄色にすることができます。

なので、色を変更したい場合は

カラーコードを6桁のコードに変更する
6桁のカラーコードをRGBに変換する

いずれにしても

あなたがやりやすい方でカスタマイズしてみてくださいね。

マーカーの表示速度を変える方法

スクロールマーカーは表示速度の変更もできます。

表示速度を変更する場合は以下の部分

transition: all 2s ease;

こちらのコードにある秒数2sの部分で調整します。

上記コードは簡単にいうと

マーカーを全て表示させるのに2sつまり、

2秒かけて行うという設定です。

なので「マーカーの表示速度が少し遅い」と感じる場合は

1sや1.5sなどにすると表示速度が速くなりますし

逆に3sや4sなどにすることで、さらに表示速度を遅くすることもできます。

表示速度に関しては、完全にあなたの好みとなりますので

適度に数字を調整してみて、あなたが一番「心地よく感じる」

表示速度というのを割り出してみてください。

フォントの太さを変更する方法

今回、スクロールマーカーのコードに関しては

マーカーを引きながらより目立つよう文字を太字にしてありますが

特に太字じゃなくても良いというあなたは、以下のコード

font-weight: bold;の表記をfont-weight: normal;に打ち替えるか

もしくは、font-weight: bold;の行を丸々削除するなど

してみてください。

そうすることで、フォントの太さは通常の太さに戻りますので

フォントの太さに関してもお好みで設定してみてくださいね。

スクロールで開始する蛍光マーカーの表示方法まとめ

今回のスクロールマーカーに関しては以下の記事

「スクロールで開始！CSSとjqueryで作るマーカー（蛍光ペン）アニメーション」という

ぐりおさんのブログを参考にTHE THORに反映するならコードをどこに書くか？

ということで、検証しながら、解説させていただきました。

とは言え、最初にも記載しておりますが

今回ご紹介させていただいたコードは

JQuery、HTML、CSSの記述先さえ分かれば

どのテンプレートでも使えるコードとなっています。

なので、私のテーマ「STORK」でも

やろうと思えば簡単に実装できますので

他のサイトと差別化したい
もっと読者に要点をきちんと伝えたい

というあなたは

ぜひ、今回の記事を参考にチャレンジしてみてください。

正直、私もJQueryやJavaScriptに関してはほとんど知識がありませんが

それでもきちんと検証しながら、コードさえ実装できれば

簡単に使うことができるんですね。

つまり、何事もそうですが、好奇心を持って自ら学び

それを自分のものにするかどうかはあなた次第だということです。

だから、今回ご紹介した記事もそうですが

まずは「できない」とは決めつけず

とにかく「やってみよう」という気持ちを大事にして

ぜひ色々と試してみてください。

ただし、基本的にサイトをカスタマイズする場合は

いつどんなリスクがあるかも分かりませんので

必ず何かをする時は

「バックアップを取る」という習慣も

つけるようにしてくださいね。

何かあってからでは遅いですし

あとで泣くのはあなたですので…

ということで、少しでもあなたのブログライフが

楽しくなることをお祈りしています＾＾

最後までお読みいただきありがとうございました！

次のページビジネスに効果的なデザインの考え方と作り方を無料公開中！

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか？

詳しくはこちら