Wordpressを使用しているブロガーさんだと、プラグインや設定一つで簡単にショートコードを設定することができる蛍光マーカー。
しかし、はてなブログだと蛍光マーカーを引くことができるショートコードは常備されていないので、一見するとできなそうに感じませんか？
安心してください、簡単にできます！！
正直、1分もあればできます。
下手したら1分もかからないかもしれません。
それくらい簡単に設定できるので、是非試してみてください。
蛍光マーカーの設定方法
はてなブログの場合は、ショートコードを設定するのではなく、HTMLコードを書きこむことでショートカットキー一つで設定するようなやり方になります。
HTMLコードなんてわかんないよ・・・って声が聞こえてきそうですが、大丈夫です。
順番に手順を紹介しながら、最後にコードも貼っておきます。
蛍光マーカーの設定の手順
まずははてなブログのダッシュボードからデザインをクリックしてください。
デザインが開けたら赤枠で囲んだスパナの箇所をクリックします。
この画面内で作業をしていくことになります。
画面が開けたらヘッダの箇所をクリックしましょう。
ヘッダが開いたら「タイトル下」と書かれている部分の枠の中にHTMLコードを書きこんでいきます。
蛍光マーカー設定用のHTMLコード
HTMLコードは以下のものをコピペして使用すればOKです。
<style type="text/css">
/* 強調表示を蛍光ペン（ピンク）風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}/* 斜体表示を蛍光ペン（黄）風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}/* アンダーライン表示を蛍光ペン（緑）風に */
article u{
font-weight:bold;
text-decoration: none;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}</style>
書きこめたら保存をしてください。
早速蛍光マーカーを使ってみよう！
ここまでできたらもう蛍光マーカーを引くことができるようになっています。
早速使ってみましょう。
蛍光マーカーのショートカットキーは以下になります。
- Windows：control＋B、control＋I
- Mac：command＋B、command＋I
このショートカットキーを、引きたい文章を選択した状態で使えば蛍光マーカーが引けるようになります。
これを実際に使ってみるとこうなっているはずです。
control＋B
control＋I
黄色い蛍光マーカーの方は大文字の「アイ」です。小文字の「エル」ではないので注意してください。
HTMLコードの中には緑の記載もありますが、緑はショートカットでは作れません。
なので、HTML編集画面で緑にしたい文章を「<u></u>」で挟み込む方法を使って引くしかありません。
先ほどのもので挟むことこうなります。
緑だけはちょっとだけ手間がかかりますが、基本的には黄色が多いと思いますので、極端に「この色じゃないとダメ！！！」っていうことがなければ使わなくても良いと思います。
補足
ショートカットキーで説明しましたけど、実はこれ、strongタグに反応するので、はてなブログの「B」を使うと自動的にマーカーが引かれるようになります。
なので、今まで文字色と「B」を両方使って文字装飾をしていた場合、文字色だけを赤くしてマーカーを引きたくない時には「B」は使わない方がいいかもしれないですね。
あと、今回はデザインのヘッダ部分に入れましたけど、「詳細設定」の中のheadの中に入れても反応します。
好きな方を使うと良いでしょう。
まとめ
蛍光マーカーは、使うだけでブログを華やかにしてくれますし、見栄えも良くなります。
どんどん使って読みやすいブログを作っていきましょう！
はてなブログの設定記事
はてなブログの設定に関する記事です。
良ければ読んでみてください。