BloggerのXML編集-sectionタグの仕組み~

Google BloggerレイアウトソースのHTML編集とsection仕組みの解説

Google Blogger のタグを見て「なんじゃこりゃ?」とわけがわからなくなってしまうことはありませんでしたか?そんな人のために簡単に解説をしてみました。

Bloggerレイアウトタグ<b:section>~</b:section>

Bloggerの<body>~</body>タグの中には、<b:section>~</b:section>というタグがいくつか存在します。ここでは<b:section>~</b:section>について1つずつ見ていきましょう。

ナビゲーションバーセクション

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
      (中略)
    </b:widget>
  </b:section>

まずは1つ目の<b:section>です。
これは、ブログページ最上部にあるブロガーのナビバーのことを表しています。
ウィジエットを挿入するためには、このように<b:section>~</b:section>で囲まなければなりません。

showaddelementは、'yes' か 'no' のいずれかを指定できます。デフォルトは 'yes' です。[ページ要素] (つまりウィジエット追加)タブに、このセクションの [ページ要素を追加] リンクを表示するかどうかを指定します。

ヘッダーセクション

  <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Blogger 便利帳 サンプルページ (Header)' type='Header'>
(中略)
   </b:widget>
      </b:section>

こちらは、ヘッダー内のセクションです。ヘッダーとは、ブログのタイトルのあるあたりのことで、ナビバーの直下の領域にあたります。maxwidgets='1'とは、このセクションに1つのウィジエットしか追加できないことを意味しています。

タブセクション

      <b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'/>

      <b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'/>


maxwidgets='1'とは、このセクションで使用できるウィジェットの最大数です。指定しない場合、上限はありません。

メインセクション

    <b:section class='main' id='main' name='Main' showaddelement='no'>

  </b:section>


記事本文のセクションです。

フッターセクション

 <b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>


フッターのセクションです。

マクロタグセクション(Bloggerレイアウト)

  <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-1&quot;' preferred='yes' showaddelement='yes'/>

 <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>

 <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/>

  <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/>

  <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
  
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' showaddelement='no'/>

Bloggerのレイアウトを決めるコードです。
レイアウトはCMSのテンプレートカスタマイズから設定します。

サイドバーセクション

<b:section-contents id='sidebar-right-1'>
</b:section-contents>

サイドバーのセクションです。
書かれている内容から右カラムの[ページ要素]の編集ページにかかわるレイアウトであると思います。

フッターセクション

<b:section-contents id='footer-1'/>
<b:section-contents id='footer-2-1'/>
<b:section-contents id='footer-2-2'/>

アーカイブ(ここをタップすると開きます)

もっと見る

このブログの人気の投稿

硬い木、強い樹木のリスト(日本・世界)

Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法

【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった!

【挑戦】USBメモリー又はSDカードにUbuntuをインストールする方法

【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる(Windows10の話)

Package Name(パッケージ名)の決め方 - Android Studio プログラミング

デロンギのオイルヒーターを使ってみた!風呂場のヒートショックの予防策

時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について

Android Studio 3.3でメモ帳を作ってみた!初めてのプログラミング

BEAU SOLEIL(ボーソレイユ)スイスの名門寄宿学校