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の場合

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