モミジは饅頭

読書・美容・健康・日常に関する情報発信ブログ

【はてなブログ】簡単!文章に蛍光アンダーラインを引く方法【画像で解説】

こんにちは。モミジです!

f:id:seichooa:20200121073922j:image

他の方のブログを見ている中で文章に黄色の蛍光アンダーラインを使っているブログを何個も発見しました。

蛍光アンダーラインがあるとブログが見やすくて、こんな事が出来るの?凄い!と思っていました。

 

こんな感じのやつ

 

特殊な有料ブログを使ってるのかな?と思っていましたが、調べてみると『はてなブログ』でも簡単に設定ができるとの事!

これは早速ブログに取り入れたい!!

という事で早速設定をしてみる事にしました。

画像が荒く見づらいかと思いますが、良かったら最後まで見て下さい。

 

 

はてなブログでの蛍光アンダーライン設定方法

f:id:seichooa:20200120205041j:image

はてなブログを開いてデザインを選択

f:id:seichooa:20200120205459j:image

パナマークを選択

f:id:seichooa:20200120205553j:image

デザインCSSを選択

f:id:seichooa:20200121170502j:image

④下記のコードをデザインCSSに貼り付け→変更を保存するを選択

 

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

f:id:seichooa:20200120210346j:image

スマホでも表示されるように設定します。

スマホの形をしたマークを選択

f:id:seichooa:20200120205935j:image

ヘッダを選択

f:id:seichooa:20200120210335j:image

スマートフォン用にHTMLを設定するの場所に先程CSSに貼り付けたものと同じコードを貼り付け

 

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

f:id:seichooa:20200120210725j:image

⑧こんな感じに貼り付けます。

貼り付けが完了したら変更を保存するを選択

これで、蛍光アンダーラインを引く為の下準備は完了です♪

ここからは実際に記事を書いていこうと思います!

f:id:seichooa:20200121074042j:image

記事を書くを選択して試しに記事を作成!

f:id:seichooa:20200121074311j:image

見たままモードで文章を入力

f:id:seichooa:20200121074445j:image

HTML編集を選択するとこんな感じになっています。

f:id:seichooa:20200121074856j:image

⑫HTML編集でアンダーラインを引きたい文章に下記の記号を書き加えます。

<u>テキスト</u>

f:id:seichooa:20200121075441j:image

⑬プレビューを選択するとアンダーラインが現れました♪

f:id:seichooa:20200121075951j:image

スマホでも表示されているかプレビューで確認

蛍光アンダーラインが引けました!

思ったより簡単に設定が出来ました。

蛍光アンダーラインがある事で、文章も見やすくなりますね!

他の方のブログを見ていると、コレどうやってるの?!と思う事が沢山あるので少しずつ調べて試していきたいと思います。

 

ここまで見て下さりありがとうございました。