Rikiによる知識財産の共有

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

【ブログを見やすくする14】タイトルをセンターにしてヘッダーを狭くする方法

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

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

前回はタイトルの背景色を変える方法をお伝えしました。下記記事をご覧ください。

www.riki-riki.com

今回はタイトルをセンターにしてヘッダーを狭くする方法をお伝えします。

 

ブログを見やすくする14〜タイトルをセンターにしてヘッダーを狭くする方法〜

タイトルをセンターにしてヘッダーを狭くする方法

デザインCSSの入力

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

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

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

 

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

 

#title{

font-family: "Sawarabi Gothic"; /*フォントの種類*/

font-size: 65px; /*文字の大きさ*/

letter-spacing: 15px; /*文字の間隔*/

padding-top: 0px; /*ヘッダーの始まりから文字の始まりまでの余白の大きさ*/

padding-bottom: 0px; /*文字の終わりからヘッダーの終わりまでの余白の大きさ*/

height: initial; /*画像の高さ*/

text-align: center; /*文字をセンター化*/

}

 

4、5行目で余白を設定することできます。

7行目で文字のセンター化ができます。

他は以前記事にした通りです。下の記事をご覧ください。

www.riki-riki.com

 

いじってみて、好きなデザインにしてみてください。

 

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

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

 

今後

これからもタイトルについてデザインを変える方法をお伝えしていこうと思います。