Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする17】文にアンダーラインを引こう

どうもみなさん!Rikiです!

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第17弾となります。

前回は文章中にボックスデザインを入れる方法をお伝えしました。下記記事をご覧ください。

www.riki-riki.com

今回は文にアンダーラインを引く方法をお伝えします。

 

ブログを見やすくする17〜文にアンダーラインを引こう〜

文にアンダーラインを引く方法

デザインCSSの入力

デザインCSSに入力します。

”デザイン”→”デザインCSS”をクリックします。

f:id:Riki-Riki:20200319174736p:plain

 

ここに以下のテキストを入力します。

 

article u{ /*uについての設定*/

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 30%); /*透明度、カラー*/

}

 

これで保存します。

 

HTMLの入力

デザインCSSへ入力したことで"u”の設定は完了しました。

次に文章中の好きなところにボックスを入れるためにHTMLを入力する必要があります。

”記事を書く”→”HTML編集”をクリックします。

f:id:Riki-Riki:20200323221537p:plain

 

ここに以下のテキストを入力します。

 

<u>ここに文章</u>

 

”ここに文章”とありますが、この部分にアンダーラインを引きたい文を入力することでアンダーラインを引くことができます。

 

透明度やカラー、線の大きさなどを編集することで自分の好きなデザインへ変更することができます。好きにいじってみてください。

 

カラーコードについては原色大辞典をご参照ください。

https://www.colordic.org

 

デザインCSSの入力方法は以下の記事にも書いてありますので参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

これからも読者に読みやすいデザインに変える方法をお伝えしていこうと思います。