【初心者ブログカスタマイズ】～蛍光ペンでアンダーラインを引く～
どうも。こんにちは。アラサー投資家K2です。 初心者で試行錯誤しながらブログのカスタマイズをしていますが、備忘も含めて手順を超簡単に残していこうと思います。
今日は「アンダーラインを蛍光ペン風に引く」やり方です。
手順①
以下をコピーする
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}
手順②
はてなブログの管理画面の左側にあるメニュー欄の
デザイン→スパナマークのカスタマイズ→一番下の【デザインcss】をクリック
テキスト入力領域があらわれますのでそこ手順①でコピーしたコードを貼り付けしてください。
手順③
編集画面見たままで文字を入力→HTML編集でアンダーラインを引きたい部分を以下の
通り<u>～</u>で囲みます。
<u>○○○○○○○○○○○○○○○</u>
以上です！
色や太さを変えたい場合
説明は黄色でアンダーラインを引きましたが別の色でも可能です。
色の濃さや太さも変えられます。
CSSに埋め込んだコードを変更すればOKです
(transparent 50%, #ffff00 50%)
→色の太さ・色・色の濃さを表しています。
左の【50%】・・・色の太さ(数値が大きいほど細い)
真ん中の【文字列】・・・色
右の【50%】・・・色の濃さ(数値が大きいほど薄い)
色の文字列の例は以下を利用してもらえれば変更できます。
赤：#ff0000
青：#0000ff
黄：#ffff00
緑：#008000
紫：#ee82ee
ピンク：#ff00ff
オレンジ：#ffa500
こちらのカスタマイズもご覧ください。
リンク
