Bloggerテーマの基礎知識 - 「HTML/JavaScript」ガジェットについて知ろう

Bloggerでは「レイアウト」メニューからガジェットを追加できます。
追加されたガジェットがどのような構造を持っているかは「テーマ」の「HTML編集」から確認できます。

「HTML/JavaSctipt」ガジェットの構造について確認してみましょう。

「HTML/JavaScript」ガジェットとは

「HTML/JavaScript」ガジェットはサードパーティの機能や独自のスクリプトコードを追加する為のガジェットです。

「HTML/JavaScript」が出力する構造

他のガジェットと同様に"widget"というクラス名がつけられたDIVの中に、<h3のタイトルと"widget-content"というクラス名が付けられたDIVが作られます。

ガジェットの設定画面で入力したHTMLやJavaScriptの内容が、"widget-content"のDIVの中に出力されます。

「HTML/JavaScript」ガジェットのソース

<b:widget id='HTML1' locked='false' title='' type='HTML' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='content'>
    </b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
     <data:content/>
  </div>
</b:includable>
</b:widget>