Random Life Blog

日々のあれこれ

はてなブログでアンダーラインを蛍光ペン風にする方法

スポンサーリンク

アンダーラインを蛍光ペン風にする方法

アンダーラインを蛍光ペン風にする方法

みなさん、こんばんは。

他のブログを見ていて「これいいなぁ」「どうやってるのかなぁ」と思うことの一つにアンダーラインが蛍光ペン風になっている点があげられます。

太字や通常のアンダーラインより文章を目立たせることができて便利そうですよね。

今日ははてなブログでアンダーラインを蛍光ペン風にする方法を書いていきたいと思います。

 

無料版はてなブログでできる文字装飾

文字装飾

文字装飾

はてなブログの「編集みたまま」でできる文字装飾は全部で6つ。

太字・斜体・打消・アンダーライン・文字の大きさ・文字色の6つです。

太字やアンダーラインは結構使いますよね。

斜体や打消は個人的にはあまり使ってません。

 

はてなブログでアンダーラインを蛍光ペン風にする方法

www.masa5care.com

↑こちらのブログを参考にしました。

設定方法(下準備)

まず、はてなブログの管理画面の左側にあるメニュー欄の【デザイン】をクリック。

画面が切り替わったら左上のスパナマークの【カスタマイズ】をクリック。

メニューがあらわれたら一番下の【デザインcss】をクリックします。

テキスト入力領域があらわれますのでそこに以下のコードをコピペしてください。



article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

 

9から12行目までがペーストしたコードとなります。
コピペしたら【変更を保存する】をクリック。

以上で下準備は終わりです。

 

実際の操作方法

編集方法は【見たまま】で文字入力をして【HTML編集】を使います。

 

【見たまま】

 

【HTML編集】

 


<u>○○○○○○○○○○○○○○○</u>

アンダーラインを引きたい文章の部分を<u>~</u>で囲みます。



【見たまま】では通常のアンダーラインが引かれた状態になっていますが、【プレビュー】で見てみると下のようにアンダーラインが蛍光ペン風になっていることがわかります。

 

色の太さ・色・色の濃さ変え方

私は黄色でアンダーラインを引きましたが色は別の色でも可能です。

また、色の濃さや太さも変えられます。

CSSに埋め込んだコードを見てみましょう。

 

(transparent 50%, #ffff00 50%)

 

コードのいち部分を抜き出しました。

ここが色の太さ・色・色の濃さを表しています。

 

左の【50%】は色の太さ(数値が大きいほど細くなります)

真ん中の【文字列】は色

右の【50%】は色の濃さ(数値が大きいほど薄くなります)

 

この数値と文字列を変えればいろんなパターンが作れます。

色の濃さや太さはこのくらいでちょうど良いと思うので色を変えていきたいと思います。

色の文字列の例は以下。

色の部分に上書きして使ってみてください。

赤:#ff0000

青:#0000ff

黄:#ffff00

緑:#008000

紫:#ee82ee

ピンク:#ff00ff

オレンジ:#ffa500

 

色についてもっと詳しく調べたい人は、色の見本を以下のサイトで。

www.colordic.org

 

まとめ

デザインCSSにアンダーラインを装飾するコードを埋め込み、編集画面の【HTML編集】で<u>〜</u>タグでアンダーラインを引きたい部分をはさみます。

ちょっと手間がかかりますが、文章を目立たせるにはもってこいのアンダーラインとなります。

是非、お試しください。

 

randamlife.hatenablog.com