ブログにカスタムCSSを追加する
Blogger では任意の CSS を追加してブログをカスタマイズすることができます。管理画面で用意されているカスタマイズでは設定できない項目も CSS を追加することで変更できる場合があります。ここではブログにカスタム CSS を追加する方法について解説します。
カスタムCSSを追加する設定画面を表示する
フォントや色に関する設定画面を表示するには Blogger の管理画面左側に表示されている「テーマ」をクリックしてください。
「テーマ」画面が表示されます。
「ブログで使用中」の下に表示されている「カスタマイズ」をクリックしてください。
テーマの編集画面が表示されます。
画面左上に表示されている「上級者向け」をクリックしてください。
サブメニューが表示されます。一番下に表示されている「CSSを追加」をクリックしてください。
カスタム CSS を記述するテキストエリアが表示されます。
ブログに追加したい CSS を記述してください。
カスタムCSSの例
カスタム CSS を追加する機能は Blogger で用意されていますが、ブログでどのような HTML タグが使われているのか確認する機能は用意されていません。ソースコードを表示したり、ブラウザの検証機能を使って対象となる HTML タグを自分で調べる必要があります。
では例として現在左詰めで表示されているタイトルを中央揃えにしてみます。タイトルが文字で表示されている場合、 <h1> タグが使用されているのでカスタム CSS に次のように追加します。
h1{
text-align:center;
}
追加が終わりましたら画面右上に表示されている「ブログに適用」をクリックしてください。
テーマに対する変更が保存されました。それではブログにアクセスしてどのように変わったのかを確認してみます。
タイトルが中央揃えで表示されていることが確認できました。
もう一つ例としてブログに表示される記事のタイトルに下線を引いてします。カスタム CSS に次のように追加します。
.post-title{
border-bottom:2px solid #303030;
}
追加が終わりましたら画面右上に表示されている「ブログに適用」をクリックしテーマに対する変更が保存してください。それではブログにアクセスしてどのように変わったのかを確認してみます。
記事のタイトルに下線が表示されていることが確認できました。
このようにカスタム CSS を追加することで、より自由にブログの見た目をカスタマイズすることができます。
-- --
ブログにカスタム CSS を追加する方法について解説しました。
( Written by Tatsuo Ikura+ )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。