@パパです。こんにちは。
今回はスクロールするマーカーを導入してみましたので、ご紹介します。
今回参考にさせていただいたのはＮＯＲＩＬＯＧさんのホームページです。
もちろん「Open Live Writer」を使って、便利にブログ記事を作成する方法もお伝えします。
「Open Live Writer？」という人は、是非この記事をご覧ください。
スクロールマーカーとは
スクロールマーカーはこのようなマーカーが自動で引かれるものです。
記事がその場所を訪れると左から右へマーカーがスクロールします。
ただ、１回切りなので見落としてしまうと、マーカーが引かれている状態になるだけになります。
※今は私の記事でスクロールマーカーを使ってはいません。設定は以下の方法で可能です。
ゆっくりページを見ていただいていれば、強調されている部分がよりはっきり分かるようになるのでおすすめです！
もう一度見るには前のページに戻るか、ページを更新すると表示されるようになります。
スクロールマーカーの作り方
jQueryの導入
スクロールマーカーを導入するために、まずは「jQuery」と呼ばれる「JavaScriptのプログラム」を設定します。
「jQuery」は、クリックしたら画像が変わったり、マウスのカーソルを合わせるとアニメーションが発生したりと、様々な機能を使うことができます。
今回の「スクロールマーカー」もその機能の一部です。
難しそうに感じますが、全く難しくありません。
下記のコードをはてなブログの「設定」→「詳細設定」→「headに要素を追加」の部分にコピペで貼るだけです。
はてなブログの設定画面です。
ダッシュボードから「設定」をクリックしたのち、「詳細設定」をクリックします。
下までスクロールして、「headに要素を追加」の部分に上のコードを貼り付けます。
最後に「変更する」ボタンを押して、完了です。
CSSの貼り付け
次に、CSSの方にも下記のコードを貼り付けます。４色分なので、かなり長いコードになります。これもコピペで大丈夫です。
色やスクロールのスピードは自由に変えることができます。
例えば青色なら、変更部分は以下の通りです。
変えることによって、好きな色やスクロールのスピードの調整などの変更ができます。ただ、CSSの一番上にある黄色のスクロールマーカーはそのままにしておいてください。
貼り付ける場所は、今度はダッシュボードから「デザイン」をクリックして
「レンチ」のマークをクリックします
「デザインCSS」をクリックして、そこに貼り付けます
最後に「変更を保存する」を押し忘れない様に注意してください。
「Open Live Writer」の設定
「Open Live Writer」にも同じように設定を行います。
いつものように「Dynamic Template」を開いて、「New」をクリックします。
今回は「スクロールマーカー黄色」と名付けました。
入力するコードは次のようになります。
「Open Live Writer」の便利なところは、先に文章を書いて、その部分を選択して「Dynamic Template」の挿入を使えば、その部分にマーカーが適用されることです。
この「%= _selection %」部分が「選択した文章」という意味になります。
これをここに貼り付けてください。
もし「Open Live Writer」を使わない場合は、HTML編集で下のコードを入れてください。
「ここに文章を」入力の部分に文章を入れると、その文字に黄色のスクロールマーカーが加わります。
他の色も載せておきます。こちらは青色のスクロールマーカーの場合です。
黄色だけは「marker-animation」のみでしたが、他の色の場合は後ろに「m-blue」等、上のＣＳＳで対応したものに変更すれば大丈夫です。
緑色なら「m-green」等に変更して、それぞれ登録しておくと便利ですよ。
さいごに
スクロールマーカーいかがでしたか？
特に目立たせたい部分に使えば、通常のマーカーよりも強調されること間違いなしです！
太字にするのも忘れずに！
初期の色は好みが分かれると思うので、他の色も是非試してみてください。
「Open Live Writer」をまだ導入されていない方はこのG.Wを利用して是非導入してみてください。
それから、前回紹介した「アンテナサイト」ですが、登録ブログ数が２５を超えました！
「アンテナサイト」のアクセスは７００/日を超えています！ありがとうございます。
最後まで読んでいただき、ありがとうございました。
読者登録＆ブックマーク＆応援よろしくお願いします！
