Blogger Bloggerカスタマイズ css

Bloggerの表示位置とCSSコードの対応

Bloggerで、『記事をちょっと上に移動したいんだけど、CSSでどう指定するんだっけ？』『色を変えたいんだけど』というときに、役に立つかもしれないCSSコードの記録です。

表示位置とCSSコードの対応

テンプレートはシンプルで、2カラムの右サイドバーを基準にしています。

図にすると上の画像のような感じです。

①ブログタイトル
#Header1

②ヘッダー
#header

③メニューバー（ナビゲーションバー）
.tabs

④日付
.date-header

⑤記事タイトル
h3
.entry-title

⑥記事
#main

⑦続きを読む
.jump-link

⑧SNSボタンなど
.post-footer

⑨ウィジェットタイトル
h2
検索など一部のウィジェットタイトル
h2.title

⑩右サイドバー
#sidebar-right-1

⑪メイン
#main

⑫フッター
footer

⑬ボディ
body

⑭ボディ？
不明

左カラムの場合は大体、rightの部分がleftに変わるだけだったり、カラム数が増えると1だったのが2になるだけだったりします。

コードの探し方

GoogleChrome系ブラウザの場合

調べたい場所で右クリックすると、下の画像のように表示されるので、要素の検証をクリックする。

Firefoxの場合

調べたい場所で右クリックすると、下の画像のように表示されるので、要素の調査をクリックする。

スポンサーリンク