ホーム / BloggerのHTML構造とCSSの追加方法をわかりやすく解説！ /

BloggerのHTML構造とCSSの追加方法をわかりやすく解説！

Bloggerでカスタマイズを始めたいけど、「HTMLの構造がわからない…」「CSSはどこに書けばいいの？」と迷っていませんか？

この記事では、Bloggerの基本的なHTMLの構造を図解のようにざっくり把握し、CSSを追加する場所も用途別にわかりやすく解説します！

BloggerのHTML構造をざっくり図解！

Bloggerのテンプレートは少し独特で、<b:section> や <b:widget> などの専用タグがありますが、基本の構造は以下のようになっています。


<!DOCTYPE html>
<html b:version='2'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[
      /* ここにテーマ全体のCSSが書かれている */
    ]]></b:skin>
  </head>

  <body>
    <header id='header'>
      <b:section id='header-section'>
        <b:widget type='Header' ... />
      </b:section>
    </header>

    <nav id='navbar'>
      <b:section id='navbar-section'></b:section>
    </nav>

    <main id='main'>
      <b:section id='main-section'>
        <b:widget type='Blog' ... />
      </b:section>
    </main>

    <aside id='sidebar'>
      <b:section id='sidebar-section'>
        <b:widget type='Profile' ... />
      </b:section>
    </aside>

    <footer id='footer'>
      <b:section id='footer-section'>
        <b:widget type='Attribution' ... />
      </b:section>
    </footer>
  </body>
</html>

CSSはどこに書くのがベスト？

1. <b:skin> に直接書く（おすすめ）

Bloggerのテンプレート内には <b:skin> という専用タグがあり、ここに書いたCSSはテーマ全体に適用されます。


<head>
  <b:skin><![CDATA[
    .my-custom-style {
      color: red;
      font-size: 16px;
    }
  ]]></b:skin>
</head>

・テーマ全体に適用される
・Blogger公式の正しい書き方
・管理しやすく、反映も確実

2. <head> に <style> を追加する

<b:skin> ではなく、通常のCSSのように <style> タグで書くこともできます。


<head>
  <b:include data='blog' name='all-head-content'/>
  <style>
    .my-custom-style {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

・手軽にCSSを追加できる
・テンプレートによっては反映されないことがあるので注意

3. 外部CSSファイルを読み込む

自分のサーバーなどにアップしたCSSファイルを読み込んで適用する方法です。


<head>
  <link href='https://example.com/style.css' rel='stylesheet' type='text/css'/>
</head>

・複数ページや複数サイトで共通スタイルを使いたいときに便利
・CSSファイルのホスティング環境が必要

まとめ

方法 おすすめ度 特徴
<b:skin> ◎ テーマに最適、管理しやすい
<style> in <head> ○ 軽く追加したいときに便利
外部CSS △ ホスティング環境が必要

補足：ウィジェットや特定記事だけに適用するには？

ウィジェットIDや <body> に付与されるクラスを活用すれば、特定のパーツやページだけにCSSを適用することができます。

以下で具体的なパターンを紹介します！

1. 特定のウィジェットにだけスタイルを適用したい場合

Bloggerのウィジェットには自動でIDが割り振られています。例えば、サイドバーにある「プロフィール」ウィジェットのIDが Profile1 の場合：


#Profile1 {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

このように #ウィジェットID を指定することで、特定のウィジェットだけにデザインをあてることができます。

2. 特定の記事だけにCSSを適用したい場合

記事ページ（個別記事）には、<body> タグに item-view というクラスが付きます。たとえば：


body.item-view .post-title {
  color: crimson;
}

このように書けば、個別記事ページのタイトルだけに色を変更することができます。

さらに、記事ごとに異なる data-post-id もHTML内にあるため、JavaScriptを使えば特定の投稿IDにだけ反応するCSSを当てることも可能です。

3. 特定のページ（トップページ・ラベルページなど）の判別

Bloggerではページによって <body> に以下のようなクラスが自動で付与されます：

  • homepage – トップページ
  • item-view – 記事ページ
  • static_page – 固定ページ
  • archive – ラベルページや月別アーカイブ

それぞれを使って、こんなCSSが書けます：


body.homepage #header {
  background-color: #ffeecc;
}

body.static_page h1.post-title {
  font-style: italic;
}

このように、ページ種別ごとにレイアウトやデザインを切り替えることができます。

おわりに

CSSを正しく使えば、Bloggerでも驚くほど自由にカスタマイズが可能です！

このような条件分けや特定要素への適用方法を活用して、あなただけのオリジナルデザインを作ってみてください。


QooQ