April 5, 2014

Bloggerのメインページの投稿の上にコンテンツを表示する

Bloggerではレイアウトの制限があるため、GUIからは投稿の上の部分に同じ幅でウィジットや独自コンテンツを入力することはできません。しかし、Templete>Edit HTMLから以下のように編集してやることで、独自のコンテンツを投稿の上に表示することができます。

注意事項

テンプレートの構造全体を把握できていないので、以下のコードは既存のテンプレートを破壊する恐れがあります。現在のテンプレートのバックアップ、復元方法が分からない方は決して使用しないでください。

 コード

強調した行の部分をテンプレートのHTMLに追加して使用します。
コード中のTitleとContentは実際に使うものに編集してください。いずれにもHTMLタグを使用することが出来ます。
使い途は色々考えられますが、「このサイトについて」、「サイトマップ」、「注目記事」、「共通の断り書き」などに適しているかと思います。

コード中で、if文は現在のページがブログのトップページであることを確認するために使っています。Titleのタグは他のウィジットにならってh2とし、Contentのタグもdivにクラス属性をwidget-conentとしています。
...
<b:includable id='main' var='top'>
  <b:if cond='data:mobile == "false"'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <h2>
        Title
      </h2>
      <div class="widget-content">
        Content
      </div><br/>
    </b:if>
 ...

No comments :

Post a Comment