こんにちは、ジブリッシュマンブログのエイジです。
今回はアンダーラインの設定方法を紹介していきたいと思います。
ブログカスタマイズとしては、アンダーラインはかなり重要で必要な一つではないでしょうか？
実際にブログの記事を読んでいる人は、軽く流し読みみたいな感じで読む傾向があるため、重要な部分がわからないと、すぐに離脱してしまうことがあります。
しっかりと読んでほしい所はアンダーラインでわかりやすく読者に届けられることが重要になってきます。
- アンダーラインの設定方法
- 斜体を押すだけでアンダーラインを引く方法
- アンダーラインをHTML編集にコードを直接入れる方法
- アンダーラインを何色にも変えることができる方法
- アンダーラインのコードを定型文に入れて簡単にHTML編集に打ち込む方法
ではいきましょう。
さらに私のブログで他に必要な絶対入れたほうがいいカスタマイズ１６選を下記の記事で紹介しています。
蛍光ペンで鮮やかなアンダーラインを引く設定方法『はてなブログ』Minimalisｍ
１つ目のアンダーラインの設定方法（コピペOK）
ではまずは、サクッとコピペしてその後に説明していきたいと思います。
『デザイン』➡『カスタマイズ（レンチマーク）』➡『デザインCSS』に下のコードをコピペ！！！
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:linear-gradient(to bottom, transparent 70%, #87ceeb 70%) !important;
}
article i{
font-style:oblique !important;
}
コピペが終わったら次にいってみましょう。
アンダーラインの太さ
上記のコードの緑色の７０％になっている部分を変更するとアンダーラインの太さを決めることができます。数字が大きいほど太さが小さくなります。逆に数字が少ないと太さが広くなるので私の上記のアンダーラインを参考にして見てみてください。
ちなみに、青色が７０％・黄色が６０％・赤色が８０％になっています。
色の変更
上記のコードの青色になっている部分を変更することによって、アンダーラインの色を変えることができます。
参考
- 青色 #87ceeb
- 黄色 #ffff00
- 赤色 #ff0000
違う色にしたい場合はこちらのカラーチャートから選んで決めてください。
ここまで設定できたら、はてなブログの記事作成画面（下図）で文字を指定して、左上のBの横のｉ（斜体）をクリックすれば、アンダーラインを引くことができます。
この設定をやることによって斜体ボタンが使えないことになります。
もし斜体ボタンを使って斜体にしている人は、次の２つ目のアンダーラインの方法をお使いください。
２つ目のアンダーラインの設定方法
もう一つ直接HTML編集にコードを入れてアンダーラインを引く方法があります。
上記と違い一回一回と打ち込まないといけないのが、面倒ではありますが一色に限らず何色も使うことができます。
あまり色を使いすぎると汚らしく感じてしまいますが、２色や３色くらいなら使い分ければいいかなと思います。私もずっと一色ってつまらないなと感じていてせいぜい２色くらいは使いたいと思ってました。
まずはコピペ作業から！！！
『デザイン』➡『カスタマイズ（レンチマーク）』➡『デザインCSS』に下のコードをコピペしてください。
/* アンダーライン */
article u{
text-decoration: none;
background: linear-gradient(transparent 60%, #ffff00 60%);
}
HTML編集に入力
次にHTML編集にこちらのコードを入力してください。
<u>~~~~~~~~~~~</u>
<u>と</u>の間にアンダーラインを引きたい文字を挟みます！！！
そうすることによって、アンダーラインを引くことができます。
上のコードの最初に article u と書いてある u の部分を変えることによって２つ３つと色が変わったアンダーラインを引くことができます。
例
/* アンダーライン */
article u{
text-decoration: none;
background: linear-gradient(transparent 70%, #ff0000 70%);
}
/* アンダーライン */
article t {
text-decoration: none;
background: linear-gradient(transparent 80%, #87ceeb 80%);
}
このように、uの部分を t に変えて新しくコードを作ることで<t>~~~~~~~</t>で挟めば違う色が使えることになります。
HTML編集に入れるコードをあらかじめ定型文に
はてなブログで記事作成部分のサイドバーの中に定型文作成とと言う所があります。（下記の図）
この定型文を作成しておけば、一回一回コードを打ち込まなくてもいいので、簡単にアンダーラインを引くことができます。
上記のようにタイトルはわかりやすくアンダーライン（イエロー）その下の枠にコードを打ち込んでおきます。保存を忘れずにしましょう。
最後にHTML編集の部分でアンダーラインを引きたいところにいき、選択して定型文を貼り付けを押しましょう。その後に、アンダーラインを引きたい部分を<u></u>で挟めば完了になります。（下記の図）
まとめ
今回は２つのアンダーラインの引き方について説明しました。
斜体のボタンを押してアンダーラインを引くか、HTML編集に直接コードを入れてアンダーラインを入れるかになります。
１つ目は簡単にできてさっと使えますが、ただ１色のみしか使えません。
２つ目の方はちょっと面倒かもしれませんが、定型文にいれることによって簡単に使えて何色もいけます。
なので、私は両方使って色を分けてます。
よく使う色は斜体ボタン、ちょっと色を変えたい時はHTML編集に入れるやり方、そうすることで、より簡単に色分けもできて一石二鳥ではないでしょうか！！！
今回参考にさせていただいた記事は、こちらのいちcafe日記さんの記事です。すこしコードを消させていただきました。ありがとうございます。
では、今回もありがとうございました。
コメント