Rikiによる知識財産の共有

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

【ブログを見やすくする16】文章中にボックスデザインを入れよう

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

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

前回は見出しのデザインを変える方法をお伝えしました。下記記事をご覧ください。

www.riki-riki.com

今回は文章中にボックスデザインを入れる方法をお伝えします。

 

ブログを見やすくする16〜文章中にボックスデザインを入れよう〜

文章中にボックスデザインを入れる方法

デザインCSSの入力

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

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

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



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

 

.box1{ /*自分が設定したいボックスの任意の番号*/

    padding: 0.5em 1em;

    margin: 2em 0;

    color: #5d627b; /*文字の色*/

    background: white; /*背景の色*/

    border-top: solid 5px #5d627b; /*枠線上部の線の種類、太さ、色*/

    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); /*枠の影の設定*/

}

.box1 p {

    margin: 0; 

    padding: 0;

}

 

これで保存します。

 

HTMLの入力

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

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

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

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



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

 

<div class="box1">

    <p>ここに文章</p>

</div>

 

”ここに文章”とありますが、この部分にボックスに入れたい文章を入力することで記事にした時に文章中にボックスを入れることができます。

f:id:Riki-Riki:20200323221602p:plain



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

 

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

https://www.colordic.org

 

また私が参考にさせてもらっているサルワカさんでは様々なデザインをコピペできるようにしていますのでご覧ください

https://saruwakakun.com/html-css/reference/h-design

 

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

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

 

今後

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