日足チャート始めました

セミFIREしたいSIer勤め30代SE。お得情報、技術、ゲームアニメ関連情報などを発信。

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

 

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

 

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

 

 

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

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

 

 

 

手順

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

はてなブログでマーカーが引けるようになります。 · 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>

 

参照元

こちらを参考させていただきました。ありがとうございます。

はてなブログでマーカー(蛍光ペン)のアニメーション -

 

このほかのサイトで紹介されている方法も試したのですが、うまく動作しないものがあり、上記サイト様の方法を利用させていただいています(感謝です)。

 

 

追記:ブログに他の機能を追加していたので競合しました・・・

はてなブログにマーカー機能を追加したところ、他の機能追加とバッティングしてしまい、意図したとおりに動かなくなってしまいました。こちらの記事では、解消方法を記載しています。