はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法【1分で完了】

こんにちは、マノアキラ(@AkiraMano)です。
元はてなブロガーで、今はWordpressに移行しました。

「はてなブログの下線がショボすぎて使えない…」
「はてなブログで蛍光ペン式アンダーラインを使いたいけど、やり方がわからない」

今回は、こんな悩みを解決します。

はてなブログで蛍光ペン式マーカーを使いたい人向けに、「はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法」を解説していきます。

1分で完了する超簡単な方法なので、サクッと設定して見栄えの良いブログを書いていきましょう。

本記事の内容

はてなブログで蛍光ペン式アンダーラインを使う方法
蛍光ペン式アンダーラインのカスタマイズ方法
蛍光ペン式アンダーラインを使う際の注意点

はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法

蛍光ペン式アンダーライン

文章を書く時に「太字」「色文字」は、重要な部分を強調したい時に必要ですよね?

では、「蛍光ペン式アンダーライン」使ってますか?
「蛍光ペン式ラインマーカー」ともいうかもしれません。

正式な名前はよくわかりませんが、こういうやつです。

通常の「下線」ではあまり強調感がなく、微妙です。
「蛍光ペン式アンダーライン」を使えば、ブログをオシャレに見やすくカスタマイズできます。

他のブロガーさんのを見て「いいなー」と思っていたのですが、調べたら簡単だったのでやり方をサクッとまとめます。

HTML編集を入れる方法もあるみたいですが、 その都度入れるのはかなり手間です。
ここで解説するのは「斜体」ボタン一発でできる超簡単な方法です。

超簡単!な設定の仕方

では、設定方法をまとめます。
1分で終了します!

「管理画面」→「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」

ここに以下をコピペ!

<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%, #ffd700 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>

最後に「変更を保存する」をクリック。

以上、超簡単!

これで「蛍光ペン式アンダーライン」にしたいところを選択して、「斜体」ボタンを押せば使用できます。

はてなブログで蛍光ペン式アンダーラインを自分流にカスタマイズ

蛍光ペン式アンダーライン

蛍光ペン式アンダーラインの色や太さを、自分流にカスタマイズしたい場合も超簡単です。

色の変更方法

上記コードの「#ffd700」の部分を変えることで色を変更できます。
お好きな色のコードをこちらのサイトから選んで入れ替えてください。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

線の太さの変更方法

上記コードの「transparent 60%」の数字部分を変えることで太さを変更できます。
数字を大きくするほど細く、数字を小さくするほど太くなります。

太字を普通に

上記コードは「太字」の設定になっています。
もし「太字」ではなくしたい場合は、「font-weight:bold;」の部分「font-weight:normal;」に変更してください。

はてなブログで蛍光ペン式アンダーラインを使う際の注意点

蛍光ペン式アンダーライン

蛍光ペン式アンダーラインを使用する超簡単な方法ですが、この方法にはいくつか注意点があるのでまとめておきます

  • 過去記事の「斜体」にしていた部分が全て「蛍光ペン式アンダーライン」に変わってしまう。
  • 通常の「斜体」が使用できなくなる。
  • 色や太さなど、1種類の設定しかできない

ある程度記事を書いてあって、斜体を頻繁に使う人は全て手直ししなければいけないので注意してください。

あと、この方法では色分けして使用することはできません。
1種類のみです。

まとめ:はてなブログで蛍光ペン式アンダーラインを簡単に使おう

蛍光ペン式アンダーライン

はてなブログにて、「はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法」を解説しました。
はてなブログで蛍光ペン式マーカーを使いたい人は参考にしてください。

POIINT!

  • カスタマイズ方法は超簡単!1分で完了!
  • 「色」「太さ」も自分流に変えてみよう!
  • この方法には注意点もある!

上に書いたように、この方法には注意点がありますが、「斜体」ボタン一発で済みますのでめちゃめちゃ簡単です。
「HTML編集」で行う方法は、その都度コードの挿入が必要で、非常に面倒くさくて時間がかかります。

しかし、色分けしたい人もいると思うので、そういう人はHTMLコードで使用する方法があります。
こちらで紹介されている方法が非常にわかりやすいです。

ベテランの方々はお馴染みかもしれませんが、まだ「蛍光ペン式アンダーライン」の使い方を知らなかった方は参考にしてください。

その前に、文字サイズをカスタマイズしていない方はいませんか?
はてなブログは、デフォルトだと文字サイズが小さいので見にくいです

文字サイズは16px以上にしましょう。

こちらで設定方法をまとめていますので参考にしてください。

文章を見やすくして、たくさんの人にブログを見てもらいましょう!