ホーム / ブログ村 /

Bloggerテンプレートカスタマイズ ブログ村のバナーを入れる

2025年1月18日土曜日

Blogger Bloggerカスタマイズ QooQ ブログ村

t f B! P L

ブログを始めたときに集客の第一歩としてブログ村に登録してバナーを貼りました。当時はBloggerテンプレートが全く理解できず、毎回記事を作成するたびに本文にバナーを人力コピペしてきました。

記事が多くなり、難解な最近テンプレートも少しずつ理解できるようになってきたため、人力コピペを卒業しテンプレートをカスタマイズしたので記録を残します。

テンプレートはQooQを使っていますが、他のテンプレートでも同じような感じだと思います。

バナーを挿入する位置

バナーの入れる位置は悩むところですが、記事の本文が終わった直後にしました。

Bloggerのメニューでテーマを選択し、プルダウンでHTMLを編集。 

<div expr:class='data:blog.pageType in {&quot;item&quot; , &quot;static_page&quot;} ? &quot;width-100&quot; : &quot;&quot;' id='main'>
  ...
  <b:section id='記事表示部分' maxwidgets='1' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>
      ...
      <b:includable id='main' var='top'>
        ...
        <b:if cond='data:blog.pageType in {&quot;item&quot; , &quot;static_page&quot;}'>
          <b:loop values='data:posts' var='post'>
            <div id='single'> 
              ...
              <div id='single-footer'>
                <!-- ここにバナーHTMLを挿入 -->

QooQ（2022年10月1日更新版）の場合、817行目の <div id='single-footer'> 直後にバナーのHTMLをコピペし保存します。これで投稿、ページの表示で記事本文のあとにバナーが表示されます。

ブログ村のバナーについては下記記事もご参考ください。

まとめ

Bloggerのテンプレートを編集し、記事（投稿、ページ）の直後にバナーを挿入できました。これで地味に面倒であった記事作成ごとのバナーコピペ作業から開放されます。

あとは、関連記事も人力コピペしているのも大変です。意図した記事が表示されるか不安でまだ使ったことがなかったのですが、QooQにも機能がある自動化も試してみたいと思います。

関連記事

QooQ