当ブログではアフィリエイト広告を利用しています

QooQ ガジェット追加エリアの新設【Blogger】

QooQ ガジェット追加エリアの新設【Blogger】

ナビゲーションバーの下(ピンクの部分:記事一覧とサイドバーの上にドーンと)に、アピールエリアという新しいガジェットを追加できる場所を作ってみます。

カルーセルを置いてもいいし、どどんと1枚TOP画像を置いてもいいかも。

※この場所に限らずアイディア次第でいろいろ応用が利きます。

数行のHTMLを追加するだけで、後は管理画面のレイアウトからガジェットの追加ができるようになるので、簡単にカスタマイズしやすいかと。(設定しても使わない場合は表示されないのでご安心を)

基本HTMLの追加

管理画面TOP:テーマ>マイテーマ>HTMLの編集より、

<div class='width-100' id='main'>

の部分を見つけてください。その直前に以下をコピペします。この場合、アピールエリアは全ページに表示されます。(使用中テンプレートはQooQリスト版 Ver.1.27です)

<div id='appeal-content'>
 <div class='container'>
  <b:section id='アピールエリア' />
 </div>
</div>

保存した後、レイアウトを見てみると、新しく「アピールエリア」+ガジェットを追加 が表示されます。

CSSで見た目の調整

そのままだと、背景の色は画面横幅いっぱいの薄いグレーになります。(パンくずリストと同じ背景)

「container」で括ってあるので、ガジェットを入れた時の横幅は既に設定されていますが、余白や背景色などを変えたい時などは、上記コードではidを設定してあるので「#appeal-content」でCSS設定する必要があります。

アピールエリアをTOPページにだけ表示させる

細かな条件づけは私には難しいのですが、BlogのTOPページにだけアピールエリアを表示させたい場合には、以下のようなHTMLをコピペ。(上記基本HTMLも含まれています。追加する場所は同じ場所です)

<div id='appeal-content'>
 <div class='container'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:section id='アピールエリア'/>
  </b:if>
 </div>
</div>

条件を変えて、data:blog.url == data:blog.homepageUrl の「==」部分を「!=」にすると、TOPページ以外で表示となります。

おまけ:記事表示部分にガジェットを追加したい場合

QooQ初期設定では、レイアウト>記事表示部分にはガジェットの追加ができないようになっていますが、ちょっと手を加えると追加できるようになります。

管理画面TOP:テーマ>マイテーマ>HTMLの編集より、

<b:section id='記事表示部分' maxwidgets='1' showaddelement='no'>

を探して、maxwidgets='1' showaddelement='no' を削除するだけ。

HTML編集後、作業内容を保存して管理画面TOP:レイアウトを確認すると、+ガジェットを追加が表示されていると思います。

参考

当ブログ内、QooQカスタマイズ記事をまとめました

次の記事へ 前の記事へ
コメントはまだありません
コメントを書く
comment url