チョコベリーの暮らしをちょっと豊かにするブログ

3児育児中のワーママです。ワーママライフハック、子育てなど暮らしを豊かにするヒントや気づきを綴っています。

MENU

 

はてなブログで蛍光ペン風の強調表示!「斜体」クリックで簡単!

 

はてなブログの蛍光ペン風強調表示

こんにちは!

3児育児 ✕ ワーママ のチョコベリー(@chocoberry_k)です。

 

ブログを見ていると、時折蛍光ペン風の強調表示がありますよね。

これを、やってみたい!

 

そう思って調べてみたら、やり方がいろいろある・・・。

どうやったらできるの?

簡単な方法がいいのだけど・・・?

 

はい!

簡単な設定でできますよ。

蛍光ペン表示をしてみたい方のお役に立てば!

  

 

蛍光ペン風の強調表示をしたい

 

こういう感じのね。

 

調べてみると、解説してくださるブログが、たくさんあります!

ありがたい!

 

お、これ、できそうだな。

そう思った方法でやってみたら・・・

あれ?過去ブログの太字が、全部蛍光ペンになってしまった!(がーん)

 

いやいや、私がしたいのは、これから、特定の文字だけ蛍光ペン風にすることなんですよ・・・。

 

そうして調べること、紆余曲折。

とうとう、見つけました!

その方法とは、

「斜体」ボタンをクリックするだけ!

 

そう、斜体ボタンって、ほとんど使っていないんですよね・・・。

これって、もったいない!

普段使わない斜体を、蛍光ペン風表示にしてしまう方法。

これで蛍光ペン風表示ができます!

 

参考にさせていただいたのは・・・

 

参考にさせていただいたのは、こちらのブログです。

www.gadgerepo.com

 

mu2in.hatenablog.com

 

ありがとうございます!

 

方法は・・・?

 

ピンク色の蛍光ペン風表示です。

以下をコピーします。

/* 斜体表示を蛍光ペン(ピンク)風に */
<style type="text/css">
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(255,153,255,1) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

</style>

 

はてなブログの「設定」 -「詳細設定」-「検索エンジン最適化」-「headに要素を追加」に貼り付けます。

(すでに記述がある場合は、保存しておきましょう!)

 

f:id:chocoflowerheart:20190319130746j:plain

 

「変更」ボタンをクリックします。

f:id:chocoflowerheart:20190319130907j:plain

 

これで完成です!

 

確認してみよう!

 

はてなブログで新規記事を書きます。

蛍光ペン風表示にしたい文字を選択し、「斜体」ボタンをクリックしてみましょう。 

f:id:chocoflowerheart:20190319132714j:plain

 

見た目は変わりませんが、「プレビュー」で見てみると・・・

 

蛍光ペン風表示になっています! 

 

できた!

 

色を変えたいときは・・・?

 

「rgba(255,153,255,1) 」の部分が色の表示になります。

このブログでは、ピンク色を使っています。

ここを変更すると、色が変わりますよ。

 

まとめ

 

 

 ・蛍光ペン風表示をしてみよう!

 ・「斜体」クリックで簡単!

 

 

 文字の色も工夫して、読みやすいブログにしていきたいですね。

 

www.chocoberry-life.com

 

www.chocoberry-life.com