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

広告
eyecatch

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

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

フォントや色に関する設定画面を表示するには Blogger の管理画面左側に表示されている「テーマ」をクリックしてください。

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

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

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

「ブログで使用中」の下に表示されている「カスタマイズ」をクリックしてください。

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

テーマの編集画面が表示されます。

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

画面左上に表示されている「上級者向け」をクリックしてください。

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

サブメニューが表示されます。一番下に表示されている「CSSを追加」をクリックしてください。

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

カスタム CSS を記述するテキストエリアが表示されます。

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

ブログに追加したい CSS を記述してください。

カスタムCSSの例

カスタム CSS を追加する機能は Blogger で用意されていますが、ブログでどのような HTML タグが使われているのか確認する機能は用意されていません。ソースコードを表示したり、ブラウザの検証機能を使って対象となる HTML タグを自分で調べる必要があります。

カスタムCSSの例(1)

では例として現在左詰めで表示されているタイトルを中央揃えにしてみます。タイトルが文字で表示されている場合、 <h1> タグが使用されているのでカスタム CSS に次のように追加します。

h1{
text-align:center;
}

カスタムCSSの例(2)

追加が終わりましたら画面右上に表示されている「ブログに適用」をクリックしてください。

カスタムCSSの例(3)

テーマに対する変更が保存されました。それではブログにアクセスしてどのように変わったのかを確認してみます。

カスタムCSSの例(4)

タイトルが中央揃えで表示されていることが確認できました。

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

.post-title{
border-bottom:2px solid #303030;
}

カスタムCSSの例(5)

追加が終わりましたら画面右上に表示されている「ブログに適用」をクリックしテーマに対する変更が保存してください。それではブログにアクセスしてどのように変わったのかを確認してみます。

カスタムCSSの例(6)

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

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

-- --

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

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

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