【はてなブログ初心者必見】蛍光マーカーのラインを入れる！
この記事を読むと「ブログ初心者」でも簡単に、記事に蛍光ペンでラインを引くことができます！
大切なところには、蛍光ペンで線を引くのは、分かりやすいですよね！
この記事は以下の記事を参考にさせて頂いてます！
はてなブログに蛍光マーカー風ラインを引くようなアニメーションを実装 - うぇぶ活
該当箇所に蛍光マーカーラインを引く！
ラインを引きたいところに「黄色いマーカーライン」引きましょう！
「ダッシュボード」→「デザイン」→スパナの絵「カスタマイズ」→「｛｝デザインCSS」の四角のところへ、、
以下のコードをコピペして入れます
.yellowline {
background: linear-gradient(transparent 60%, #ffff00 60%);
}
そして本文のHTML編集で下記の様に記述すると、「黄色いマーカーライン」が引かれます。
<span class="yellowline">ラインを引きたい文章</span>
↓こうなります！
ラインを引きたい文章
（「編集 見たまま」では見られませんので注意です。「プレビュー」で見られます。）
該当箇所に読み手が来た時にマーカーラインが現れる！
読み手が該当箇所まで読み進めた時に、動的にラインを
こんな風に引けたら、最も注目すべきところかな！？
ってなると思います。
ほら、このように蛍光線が引かれたら、ここは重要だとわかりますな！
「設定」→「詳細設定」を選択し、下へスクロールします。
「head部分」の入力欄の一番下へ、以下のコードをコピペします。
<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>
次に、「ダッシュボード」→「デザイン」→スパナの絵「カスタマイズ」→「｛｝デザインCSS」の四角のところへ下記コードを貼り付けます。
.ani-marker {
background-image: -webkit-linear-gradient(left, transparent 50%, #ffdfef 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #ffdfef 50%);
background-image: -ms-linear-gradient(left, transparent 50%, #ffdfef 50%);
background-image: -o-linear-gradient(left, transparent 50%, #ffdfef 50%);
background-image: linear-gradient(left, transparent 50%, #ffdfef 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2s ease;
font-weight: bold;
}
そして、記事を書くときに、「HTML編集」で以下の記述すると完成です！
<span class="ani-marker">うまくピンクの蛍光線が引かれましたでしょうか！？</span>
うまくピンクの蛍光線が引かれましたでしょうか！？
まとめ
ときどき、この表現は見ると思います！
訴えたい文章に、是非この表現を使ってみてください！
初心者ブログ術のまとめはこちら↓
では、また！
■登録まだの方のために念のため：
↓誰もが推奨、まずは最大手のA8.net
↓Amazon、楽天とか直アフィリより簡単お得、もしもアフィリエイト
↓その他アフィリエイト老舗の２社
↓モバイルアプリのアフィリエイトなら！
もし未登録でしたらぜひ登録を！
