HTMLやCSSに慣れていないユーザーの場合、Bloggerのカスタマイズは専らテーマデザイナーを使うことになる。

しかし、テーマデザイナーで変更できる範囲は狭く、細かいデザインなどを設定することはできない。

Bloggerでは細かいデザインが用意されていないので、そうした部分は自分で調べていじっていくしかない。

そのため、CSSのカスタマイズ方法や、CSSで変更する場所の道標となるポイントをまとめておこうと思う。

なお、使用するテンプレートはシンプルテンプレートである。

CSSのカスタマイズを始める前に

テンプレートのバックアップを必ず取っておく

Bloggerにはテンプレートのバックアップ/復元機能がついている。

そのため、テンプレートをカスタマイズする前に、必ずテンプレートのバックアップをしておくことをオススメする。

なお、バックアップ方法は「テーマ」 → 「バックアップ/復元」 → 「テーマをダウンロード」の順で選択すればよい。

復元する場合は「バックアップ/復元」 → 「アップロード」を選択して復元する。

CSSの書き方

CSSは「セレクタ {プロパティ名:値;}」といった具合に記述する。

ここで登場する名称の説明は以下の通り。

・セレクタ：CSSを適用する対象（記事タイトルであれば「.entry-title」になる）
・プロパティ名：スタイルの種類（文字サイズ指定であれば「font-size」になる）
・プロパティ値：スタイルに対応した値（文字サイズ指定であれば「数値px」になる）

備考：スタイルシートリファレンス（CSSの基本）

CSSにコメントをつけておく

CSSにはコメントをつけるタグがあり、「/*コメント*/」という具合に左右を囲むとコメント化することができる。

CSSに慣れていない場合、このようなコメントを付けておくことで何を変更したのか把握しておける。

また、いちいちコメントを付けておくと、コードの内容を覚えやすくなるとも思う。

CSSのカスタマイズ方法

テーマデザイナーを使う方法

テーマデザイナーを使う方法であれば、HTMLに触らずにCSSを追加/編集することができる。

ただし、この方法は「CSSの追加」しかできず、元々のCSSやHTMLの設定を変更することはできない。

逆にその辺りをいじる心配がないとも言えるので、どちらかと言えば初心者向けの方法になる。

【方法】

・テーマデザイナーの「上級者向け」を選択
・上級者向けの一番下にある「CSSを追加」
・「カスタムCSSを追加」のフォームに追加したいCSSを書き加える

【備考】

・「カスタムCSSを追加」のフォームから追加したコードのみ編集可能

HTMLから直接編集する方法

HTMLから直接編集する方法であれば、元々書き込まれているコードも自由に変更できる。

反面、変な場所をいじって取り返しのつかないことになる可能性もあるので、初心者にはおすすめしない。

なお、この方法を使うとテーマデザイナーのフォームに書き込んだCSSは表示されなくなる。

この点に関しては「テンプレート」を再アップロードしても復元できないので注意が必要。

【方法】

・Bloggerの編集画面から「テーマ」を選択
・Bloggerのプレビューの下にある「HTMLの編集」を選択
・「<b:skin>…</b:skin>」の横にある▶をクリック
・一番下の「]]></b:skin>」の上にスペースを空け、そこから書き込む

【備考】

・CSSやHTMLを自由に変更することができる
・CSSを変更後に一度でも保存すると、テーマデザイナーのフォームに書き込んだCSSは表示されなくなる

※HTMLから直接編集する方法は こちらのページ の説明の方が分かりやすいかもしれない

CSSを設定する対象

記事ページ

記事タイトル（h1）

.entry-title{}

h3.post-title{}

見出し（h2）

.entry-content h2{}

小見出し（h3）

.entry-content h3{}

準見出し（h4）

.entry-content h4{}

文章（標準）

.post-body {}

画像

.post-body img{}

※初期設定の画像の余白を消すには「.post-body img{padding:0;}」をCSSに追加

コメント

コメント見出し

.comments h4{}

※「*件のコメント」「コメントを投稿」に影響

コメント部分全体の設定

.comments{}

コメント欄のみ

.main-outer p{}

.comments-content{}

返信欄

.comment-replies{}

※シンプルテンプレートの場合、背景色設定が困難（投稿のフッターの背景色と連動している）

返信欄のリンク部分

.continue{}

※フォントの指定は「返信」「コメント欄を追加」のリンク文字に影響

コメントの境界

.comment-block{}

サイドバー

サイドバーの見出し

.sidebar h2{}

サイドバーのコンテンツ

.widget-content{}

※全てのウィジェットの文字サイズを変えたい場合は「font-size:数値%;」を設定

人気の投稿

#PopularPosts1{}

※ウィジェットのタイトルで検索すると分かる（個数によって末尾の数字が変化）

フッター

フッター全体

footer{}

※.（ドット）は要らない

フッターの見出し

footer h2{}

ページナビ

前に戻るボタン

#blog-pager-older-link{}

※リンクの場合は「#blog-pager-older-link a{}」

新しい投稿ボタン

#blog-pager-newer-link{}

※リンクの場合は「#blog-pager-newer-link a{}」

ホームボタン

.home-link{}

※消したければ「.home-link{display:none;}」とする

Atom表示

.feed-links{}

※消したければ「.feed-links{display:none;}」とする

モバイル

記事タイトル

.mobile .entry-title{}

.mobile h3.post-title {}

トップページの要約

html .mobile-index-contents .post-body {}

文章（標準）

.mobile .post {}

.mobile .post-body {}

前に戻るボタン

.mobile #blog-pager-older-link a{}

新しい投稿ボタン

.mobile #blog-pager-newer-link a{}

CSSでカスタマイズできること

記入例

例えば、記事タイトルを画像のようにカスタマイズするには、以下のようにコードを記述する


※見出しデザインについては「サルワカ」さん が詳しく説明していらっしゃる

文字関係

文字サイズを設定する

font-size:値;

備考：スタイルシートリファレンス（font-size）

文字の太さを変える

font-weight:値;

備考：スタイルシートリファレンス（font-weight）

文字の色を変える

color:値;

備考：スタイルシートリファレンス（color）

文字に背景色をつける

background-color:値;

備考：スタイルシートリファレンス（background-color）

文字の種類を指定する

font-family:値;

参考：サルワカ
備考：スタイルシートリファレンス（font-family）

その他

枠線をつける

border:値;

※上下左右を指定することもできる

備考：スタイルシートリファレンス（border）

余白をつける（内周）

padding:値;

※上下左右を指定することもできる

備考：スタイルシートリファレンス（padding）

余白をつける（外周）

margin:値;

※上下左右を指定することもできる

備考：スタイルシートリファレンス（margin）