Bloggerテーマをカスタマイズ - セクションを追加しよう

Bloggerでは投稿の本文やプロフィールなどのデータはガジェットという仕組みを使って出力されていきます。そのガジェットを配置する仕組みがセクションです。

テーマの<body>要素へセクションを追加していきましょう。



HTML5の文書構造

セクションを追加する前にHTML5の文書構造を使って文書を構成しましょう。
HTML5ではそれぞれのブロックがどのような意味合いを持っているかを示すための新たな要素が追加されています。
これらを使う事で検索エンジンなどへより明確に内容を伝える事が出来ます。

文書構造を表す主な要素は以下の通りです。
  • <header>       ・・・　ヘッダーに関するブロック
  • <nav>            ・・・　ナビゲーションに関するブロック
  • <main>          ・・・　ページの主要な部分であるブロック
  • <article>        ・・・　記事が収められたブロック
  • <aside>          ・・・　補足情報に関するブロック
  • <footer>         ・・・　フッターに関するブロック
こんな感じです。
  <body>
    <header>
    </header>
    <nav>
    </nav>
    <main>
    </main>
    <aside>
    </aside>
    <footer>
    </footer>
  </body>


<b:section>要素を追加

HTML5の要素が追加できたらその中にセクションを追加していきます。
<b:section>の詳細は「【Bloggerテーマの基礎知識】<b:section>について知ろう」を参照してください。
  <body>
    <header>
      <b:section id='header' name='Header'/>
    </header>
    <nav>
      <b:section id='page_list_top' name='Page List (Top)'/>
    </nav>
    <main>
      <b:section id='page_body' name='Page Body'/>
    </main>
    <aside>
      <b:section id='sidebar' name='Sidebar'/>
    </aside>
    <footer>
      <b:section id='footer' name='Footer'/>
    </footer>
  </body>

<b:section>を追加すると「レイアウト」画面でガジェットの追加が行えるようになります。



Label:

コメント

コメントを投稿

登録: コメントの投稿 (Atom)