はてなブログのデザイン「Minimalism」で、蛍光ペン風のアンダーラインを設定する方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
最近、ブログのデザインを集中的にカスタマイズしています。
今回は、蛍光ペン風にアンダーラインが引ける設定方法について、ググって実践してみました。
蛍光ペン風のアンダーラインについて
色んな方のブログ記事を読んでいると、蛍光ペン風にアンダーラインが引かれている文章をよく見ます。
普通の棒線のアンダーラインより、蛍光ペンで引いたようなアンダーラインの方が、カラフルで目を引くし、メリハリの効いた記事に見えるので、いいなぁと思ってました。
で、はてなブログで、蛍光ペン風にアンダーラインが引けるようになる方法をググっていたのですが。
その中で分かったのが、
✳︎ CSSで設定するけど、記事を作成する度に、アンダーラインを引く箇所をhtml編集画面にして、タグを打ち込まないといけないパターン
✳︎ 記事作成画面の中で、アンダーラインを引きたい部分を選択しておいて、斜体の「i」ボタンをポンと押すだけで、蛍光ペンのアンダーラインになる、というCSSの設定パターン
の2パターンがあるようです。
当然、後者の方が操作がラクです！(^ ^)
ということで、こちらのサイトを参考にさせて頂いて↓
はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法【1分で完了】│MANO-LOG
自分なりに設定方法を試行錯誤して、カスタマイズしてみました。
カスタマイズ前の注意点
上記の参考サイトにも書かれてありますが。
はてなブログの記事作成画面にある斜体ボタン（「i」ボタン）の設定が変わってしまうカスタマイズ方法になります。
そのため、カスタマイズ後は、この斜体ボタンを押しても斜体にはならず、「太字に蛍光ペンのアンダーライン」になります。
なので、このカスタマイズ方法は、ブログで斜体を使わない方にはおススメです。
また、過去の記事で斜体にしていた部分は、今回のCSS設定で「太字に蛍光ペンのアンダーライン」に変更されます。
また、蛍光ペンの色は、CSSで1色を設定するので、他の色を加えることができません。
蛍光ペン風のアンダーラインの設定方法
では、設定方法です！
上記の参考記事にあるCSSコードの中から最初と最後の1行を除いた、以下のコードをコピーします。
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;
}
それを、ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。
下から6行目のカラーコード「#ffd700」を、お好みの色のカラーコードに変更します。
ちなみに、私のブログは、「#F7DFE2」というピンク系のカラーコードです。
カラーコードは、こちらから見つけられます。↓
最後に「変更を保存する」をクリック。
これで、設定完了です！
蛍光ペン風アンダーラインのカスタマイズ
アンダーラインのカスタマイズとして、ひとまず蛍光ペンの色を変更しましたが。
その他にも、 上記の参考記事にあるように、
✳︎ アンダーラインの太さ
✳︎ アンダーラインを引いた部分の文字を太字にするか、しないか
なんかもカスタマイズできるようです。
記事を書く時に、蛍光ペン風アンダーラインを引く方法
CSSの設定ができたので、次は、記事を書くときの操作です。
記事作成画面を開いて、文字を入力してみます。
そして、蛍光ペン風アンダーラインを引きたい文字を選択して、編集画面の「i」のボタンをクリック。
すると、編集画面では、微妙に斜体になります。
プレビュー画面にすると、ちゃんと、蛍光ペン風にアンダーラインが引かれています！ ↓
蛍光ペン風アンダーラインを解除したいときは、また範囲を選択して「i」ボタンをクリック。
これで、普通の文字に戻ります。
以上です！ (´ｰ｀)
kayoko＠コメダ珈琲cafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
