ゆうりの日常

フリーライター、イラスト制作ブロガー、シンプリスト。ちびキャラ記事、シンプル生活の記事、商品レビュー、イベントレポートを中心に記事を執筆中

【1分で簡単にできる】はてなブログで蛍光マーカーを引く方法

f:id:redberry072169:20200116122800j:plain

Wordpressを使用しているブロガーさんだと、プラグインや設定一つで簡単にショートコードを設定することができる蛍光マーカー。

 

しかし、はてなブログだと蛍光マーカーを引くことができるショートコードは常備されていないので、一見するとできなそうに感じませんか?

 

安心してください、簡単にできます!!

 

正直、1分もあればできます。

 

下手したら1分もかからないかもしれません。

 

それくらい簡単に設定できるので、是非試してみてください。

蛍光マーカーの設定方法

はてなブログの場合は、ショートコードを設定するのではなく、HTMLコードを書きこむことでショートカットキー一つで設定するようなやり方になります。

 

HTMLコードなんてわかんないよ・・・って声が聞こえてきそうですが、大丈夫です。

 

順番に手順を紹介しながら、最後にコードも貼っておきます。

蛍光マーカーの設定の手順

まずははてなブログのダッシュボードからデザインをクリックしてください。

f:id:redberry072169:20200116122250j:plain
デザインが開けたら赤枠で囲んだスパナの箇所をクリックします。

f:id:redberry072169:20200116122311j:plain
この画面内で作業をしていくことになります。

 

画面が開けたらヘッダの箇所をクリックしましょう。

f:id:redberry072169:20200116122337j:plain
ヘッダが開いたら「タイトル下」と書かれている部分の枠の中にHTMLコードを書きこんでいきます。

f:id:redberry072169:20200116122412j:plain

蛍光マーカー設定用の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の中に入れても反応します。

 

好きな方を使うと良いでしょう。

まとめ

蛍光マーカーは、使うだけでブログを華やかにしてくれますし、見栄えも良くなります。

 

どんどん使って読みやすいブログを作っていきましょう!

はてなブログの設定記事

はてなブログの設定に関する記事です。

 

良ければ読んでみてください。

www.yurimani.xyz

www.yurimani.xyz