ブログにカスタムCSSを追加する

Blogger では任意の CSS を追加してブログをカスタマイズすることができます。管理画面で用意されているカスタマイズでは設定できない項目も CSS を追加することで変更できる場合があります。ここでは Blogger のブログにカスタム CSS を追加する方法について解説します。

(2022 年 04 月 12 日公開 / 2022 年 06 月 06 日更新)

カスタムCSSを追加する設定画面を表示する

ブログにカスタム CSS を追加する手順です。管理画面左側に表示されている「テーマ」をクリックしてください。

カスタムCSSを追加する設定画面を表示する(1)

「テーマ」画面が表示されます。

カスタムCSSを追加する設定画面を表示する(2)

一番上に現在使用しているテーマが表示されています。ここに表示されている「カスタマイズ」をクリックしてください。

カスタムCSSを追加する設定画面を表示する(3)

テーマのカスタマイズを行う画面が表示されます。

カスタムCSSを追加する設定画面を表示する(4)

カスタム CSS を追加するには、画面左側の「詳細設定」をクリックしてください。

カスタムCSSを追加する設定画面を表示する(5)

詳細設定を展開するとすぐ下にドロップダウンメニューが表示されています(デフォルトでは「ページのテキスト」が選択されています)。このドロップダウンメニューをクリックしてください。

カスタムCSSを追加する設定画面を表示する(6)

設定する項目の一覧が表示されます。この中の一番下にある「CSS を追加」をクリックしてください。

カスタムCSSを追加する設定画面を表示する(7)

カスタムCSSを追加する設定画面を表示する(8)

カスタム CSS を記述するテキストエリアが表示されます。ここにブログに追加したい CSS を記述していきます。

カスタムCSSを追加する設定画面を表示する(9)

カスタムCSSの例

では例として現在中央寄せで表示されているタイトルを左寄せにしてみます。現在のテーマの場合、タイトルを左寄せにするにはカスタム CSS に次のように追加します。

.Header h1{
text-align:left;
}

カスタムCSSの例(1)

すぐに右側に表示されているプレビューに反映されます。

カスタムCSSの例(2)

追加が終わりましたら画面右下に表示されている「保存」アイコンをクリックしてください。

カスタムCSSの例(3)

テーマに対する変更が保存されました。それではブログを表示してください。

カスタムCSSの例(4)

タイトルが左寄せで表示されていることが確認できました。

もう一つ例としてブログに表示される記事のタイトルに下線を引いてみます。先ほど追加したカスタム CSS の下に次のような CSS を追加で記述します。

.post-title{
border-bottom:5px solid #F00000;
}

カスタムCSSの例(5)

すぐに右側に表示されているプレビューに反映されます。

カスタムCSSの例(6)

追加が終わりましたら画面右下に表示されている「保存」アイコンをクリックしてください。そのあとでブログを表示してみます。

カスタムCSSの例(7)

記事のタイトルに下線が表示されていることが確認できました。

このようにカスタム CSS を追加することで、より自由にブログの見た目をカスタマイズすることができます。

-- --

Blogger のブログにカスタム CSS を追加する方法について解説しました。

( Written by Tatsuo Ikura )

広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。