【はてなブログ改造】ブログ内の文字に、蛍光マーカーをひくアニメーションを追加できる【こいつ、動くぞ！】

何気なく他の方のブログを見ていると・・・・

ブログの内容を、蛍光ペンを引くようなアニメーションが表示されたではありませんか！

これはすごい。やってみたい。

…という事で、自分のブログでも真似してみました。その際の手順の備忘録となります。

手順
PCだけでなくスマホでも問題なく動きました
注意点
参照元
追記：ブログに他の機能を追加していたので競合しました・・・

手順

①こちらのページのソースをコピー

はてなブログでマーカーが引けるようになります。 · GitHub

注意：上記ブログのまま適用すると、はてなブログに追加している他機能に影響が出るケースがありました。マーカーはブログ本文だけでよいという方は以下のブログを参考に一部コード修正をされることをお勧めします。

②ブログの管理画面から

「設定」→「詳細設定」→「<head>要素にメタデータを追加」欄に、先ほどコピーした内容を追加します。

③記事の編集で「HTML編集」モードで、蛍光ペンでマーカーを引きたい箇所を<hl>タグで囲む。

（エイチエルです。エイチイチでないので注意）

使い方例：

<hl color="#ffff00">蛍光ペンを引くようなアニメーションが表示されたではありませんか！</hl>

※colorの箇所は好きな色に変更してください。例の場合は、黄色になります。

以上。

おお、動いた！

・・・・・・・楽しい。

・・・・・・楽しい(*´ω｀)

PCだけでなくスマホでも問題なく動きました

スマホでも表示は大丈夫かな？と心配でしたが、私のスマホ（アンドロイドでChrome利用）で確認したところ、問題なく表示されました（ただしブラウザなどの条件によって異なる場合もあるかと思います。）

注意点

この方法で<hl>タグで囲った文字について、はてなブログの提供しているショートカットボタンで装飾ができなくなっていました。

あくまで、ショートカットボタンが使えないだけです。直接HTML編集すれば装飾が可能です。

「HTML編集」から、修飾をしたい文字の前後にタグを追加してください。

（<hl>(エイチエル)のタグはそのまま残してね）

例：

<hl color="#ffff00"><strong>太字にしたい</strong></hl>
<hl color="#ffff00"><em>斜体にしたい</em></hl>
<hl color="#ffff00"><span style="text-decoration: line-through;">打消ししたい</span></hl>
<hl color="#ffff00"><span style="text-decoration: underline;">アンダーラインを引きたい</span></hl>
<hl color="#ffff00"><span style="font-size: 150%;">文字の大きさを変えたい（150%)</span></hl>
<hl color="#ffff00"><span style="color: #ff0000;">文字色を変えたい</span></hl>