理系男子のIoTライフ

理系男子があなたの生活を少し「ラク」にする情報をお届けします。

スポンサーリンク

【はてなブログ】蛍光ペン風に強調する方法

はてなブログで文章中の文字部分に蛍光ペン風のラインが引かれているのを、目にしたことがある方も多いのではないでしょうか。これはCSSという文字のデザインをプログラムコードでしていているため、このような表現ができます。

今回は、はてなブログで文章中の文字を蛍光ペン風に強調する方法についてご紹介します。

CSSのコピー先を修正しました(7/23)。

f:id:rikei_iot:20170721231804j:plain



はてなブログで使える文字装飾は?

はてなブログでは、記事執筆エリアの上部にあるアイコンを使って文字の装飾ができます。

デフォルトのはてなブログでは、

  • 太字
  • 斜体
  • 文字色変更

などのWordなどでおなじみの文字装飾を編集画面より設定することができますが、蛍光ペン風はデフォルトの設定ではできません


蛍光ペン風に表示するように設定すると、

f:id:rikei_iot:20170721233012p:plain:h40

蛍光ペン風の文字装飾はどうやっている?

この蛍光ペン風の文字装飾は、CSSCascading Style Sheets)という文字の体裁や見栄えを表現するプログラム言語を使っています。
プログラム言語というと難しいかもしれませんが、基本的にはカッコで囲んだ部分の文字の色や大きさなどをコンピュータにもわかる言葉で書いている、と理解してください。

このCSSを使うことで、記事の編集画面上で囲んだ文字を蛍光ペン風に表示することができます。しかし、編集画面で毎回蛍光ペン風にするCSSをコピーして貼り付けるのも面倒なので、今回は編集画面のアンダーラインが蛍光ペン風に強調するように設定してみましょう。


f:id:rikei_iot:20170722001905p:plain
↑ここを押すと蛍光ペン風になるようにします



はてなブログでの設定方法

それでは、はてなブログでアンダーラインボタンを押すだけで、指定した文字が蛍光ペン風に強調するように設定する方法をご紹介します。

はてなブログ「管理画面の詳細設定」->「headに要素を追加」に以下をコピーします。

※以前はデザイン->カスタマイズ->フッタにコピーと記載していましたが、
スマホ版に反映されないとご指摘をいただきました。

/*「詳細設定」->「headに要素を追加」にコピー*/
<style type="text/css">
/* アンダーライン表示を黄色蛍光ペン風に */
article u{ /*アンダーラインを編集*/
    font-weight:bold; /*太字にする*/
    text-decoration: none; /*下線などは引かない*/
    margin:0 0.1em;
     /*枠外の余白は、上下なし、左右はフォントサイズの0.1倍*/
    padding:0.1em 0.2em;
     /*コンテンツと枠内の余白は、上方向なし、右左はフォントサイズの0.1倍、下はフォントサイズの0.2倍*/
    background:#fcfc60 !important; /*背景色は黄色*/
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
    /*上から下に、透明60%から黄色に対してグラデーション*/
}
</style>

少しだけCSSを解説

CSSコードのうち、”article u{}”がアンダーラインの定義を設定しています。
本設定では、アンダーラインを変更していますが、同じように斜体や太字を編集することができます。

参考情報

ちなみにCSSソースは、こちらのブログを参考にさせていただきました。
こちらのブログでは、太字や斜体も蛍光ペン風になるように設定されています。

gadgerepo.com

また、以下ブログで本記事を参考として取り上げていただいています。

www.ichihanism.com
www.seer1118.work




まとめ

今回はブログを蛍光ペン風に強調する方法についてご紹介しました。
CSSでデザイン設定をすることでブログ記事が見やすくなりますので、ぜひ試して見てください。

押していただけると励みになりますので、お願い致します。