MANO-LOG

本から学んだこと、日々の生活で感じたことなどをまとめる雑記ブログ

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

はてなブログを利用の皆さん、お疲れ様です。

f:id:manochang:20190314115951j:plain 

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

 

では、蛍光ペン式アンダーライン」使ってますか?

蛍光ペン式ラインマーカー」ともいうかもしれません。

 

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

 

通常の「下線」ではあまり強調感がなく、微妙です。

蛍光ペン式アンダーライン」を使えば、ブログをオシャレに見やすくカスタマイズできます。

 

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

 

HTML編集を入れる方法もあるみたいですが、 その都度入れるのはかなり手間です。

ここでまとめるのは「斜体」ボタン一発でできる超簡単な方法です。

   

超簡単!な設定の仕方

f:id:manochang:20190314120929j:plain

では、設定方法をまとめます。

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>

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

 

以上。

超簡単!

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

 

自分流にカスタマイズ

f:id:manochang:20190314120732j:plain

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

色の変更方法

上記コードの「#ffd700」の部分を変えることで色を変更できます。

 

お好きな色のコードをこちらのサイトから選んで入れ替えてください。

www.colordic.org

 

線の太さの変更方法 

上記コードの「transparent 60%」の数字部分を変えることで太さを変更できます。

数字を大きくするほど細く、数字を小さくするほど太くなります。

 

太字を普通に

上記コードは「太字」の設定になっています。

もし「太字」ではなくしたい場合は、「font-weight:bold;」の部分「font-weight:normal;」に変更してください。

 

注意点

f:id:manochang:20190314211708j:plain

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

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

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

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

1種類のみです。

 

まとめ

f:id:manochang:20190314120357j:plain

はてなブログにて、『「斜体」ボタン一発で簡単に「蛍光ペン式アンダーライン」を使う超簡単な方法』をまとめました。

 

POIINT!

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

 

上に書いたように、この方法には注意点がありますが、「斜体」ボタン一発で済みますのでめちゃめちゃ簡単です。

 

「HTML編集」で行う方法は、その都度コードの挿入が必要で、非常に面倒くさくて時間がかかります。

しかし、色分けしたい人もいると思うので、そういう人はHTMLコードで使用する方法があります。

こちらで紹介されている方法が非常にわかりやすいです。

maroharu16.hatenablog.com

 

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

 

その前に、文字サイズをカスタマイズしていない方はいませんか?

はてなブログは、デフォルトだと文字サイズが小さいので見にくいです

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

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

www.manochang.com

 

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