Blogger Labo:【Blogger】シンプルテンプレートのセレクタ一覧表

Bloggerのシンプルテンプレートをカスタマイズする時に使うセレクタを一覧表にしました(基本的に自分用)。

他所からダウンロードしたテンプレートにも応用が効くことがあるので参考にしてみるといいかも。

※カスタマイズ詳細については「こちら」の記事を参照


記事ページ



項目セレクタ備考
記事タイトル(h1)
.entry-title{}
h3.post-title{}
見出し(h2).entry-content h2{}
小見出し(h3).entry-content h3{}
準見出し(h4).entry-content h4{}
文章(標準).post-body {}
画像.post-body img{}「padding:0;」で余白削除

コメント



項目セレクタ備考
コメント見出し.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{}