【 QooQ カスタマイズ 】 パンくずリストと関連記事にラベルすべての要素を追加する

2019/08/20

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

t f B! P L

こんにちは HARU( @HARU )です。

今回は Blogger のテンプレートである QooQ のパンくずリストと記事欄下部に表示される関連記事についての表示を変更したいと思う。

QooQ において、パンくずリストと関連記事はラベルで管理されているが、デフォルトの状態だと複数のラベルを設定した場合、最後にあるラベルが表示されるようになっている。

もちろんひとつの記事に対して、一つしかラベルを設定していない人であれば問題になることではない。

しかし Blogger には記事をカテゴリとして確立する手段がないため、ラベルでカテゴリも補っているブロガーからすると、QooQ デフォルトの状態では関連記事に表示したい内容が表示されない可能性がある。

関連記事にラベルすべての関連記事を表示したい人は、本記事の内容が参考になるかと思うので是非読んでください。

※テンプレートの編集( ソースコード改変 )するときは、必ずバックアップを取ってから編集すること。

パンくずリストとは

パンくずリストとは QooQ のテンプレートで言えば、記事表示画面のブログ名の直下に表示されている「 ホーム / XXXX 」というようなやつ。

パンくずリストイメージ

閲覧している人がブログやサイト内において、どこを表示しているのか分かりやすくするためのもので、SEO 対策としてもなくてはならないものらしい。

ラベルについて

ラベルとは Blogger の機能であり、一般的なタグとしての機能を持っている。

Blogger のラベルイメージ

ブログやサイトの記事において、大きいくくりとしてカテゴリ、その中の小さいくくりとしてタグを使い分けて分類別に区分けするのが一般的である。( 例 : 家電機器( カテゴリ ) > 洗濯機( タグ ) )

しかし Blogger は冒頭でも述べたようにカテゴリとタグの区別をすることができない。

Blogger を使ってブログを書いている人はカテゴリやタグを必然的にラベルを使って表現しなければいけないため、使いづらさは否めない。

今回のテンプレート HTML 変更について

パンくずリストの表示と記事欄下部に表示する関連記事についてはQooQ のテンプレート内にある同じソースコードを削除することで完了できる。

ただし同様のソースコードが複数あることから、削除してはいけないコードを削除してしまう可能性もあるため、しっかりとバックアップを取ってから編集すること。

QooQ パンくずリストの表示を変更

QooQ のデフォルト表示では複数のラベルが設定されている場合、一番最後のラベルのみ表示されるようになっている。

カテゴリとタグのような表示はできないけど、カテゴリとしたラベルが表示されない可能性があるので、すべてのラベルを表示するように HTML を編集する。

パンくずリスト HTML 編集

(1)以下のコードを QooQ のテンプレートにて検索する。

  
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
  

(2)先ほど検索したコードの下にある以下の2つのコードを削除する。

  
    <b:if cond='data:label.isLast == &quot;true&quot;'>
  
  
    </b:if>
  

上記2つのコードは他の場所にもあるため注意して削除すること。

パンくずリスト編集イメージ

パンくずリストに設定したラベルすべてが表示されるようになる。

例では「 ブログ 」「 持論 」という2つのラベルが表示されている。

パンくずリスト編集前
パンくずリスト編集後

QooQ 記事欄下部に表示される関連記事の変更

QooQ の記事欄下部に表示される関連記事は、パンくずリストと同様に一番最後のラベルの関連記事が表示されるようになっている。

今回の例にした「 ブログ 」と「 持論 」の場合、デフォルトで表示されるのは「 持論 」の方で、本来カテゴリとしている「 ブログ 」の関連記事が表示されない。

そこでこちらも、設定したラベルすべての関連記事が表示されるように HTML を変更したいと思う。

関連記事 HTML 編集

(1)以下のコードを QooQ のテンプレートにて検索する。

  
    <div id='mrp-content'/>
  

(2)先ほど検索したコードの下にある以下の2つのコードを削除する。

  
    <b:if cond='data:label.isLast == &quot;true&quot;'>
  
  
    </b:if>
  

上記2つのコードは他の場所にもあるため注意して削除すること。

関連記事編集イメージ

関連記事に設定したラベルすべての関連記事が表示されるようになる。

関連記事編集前
関連記事編集後

QooQ 関連記事数の変更

今回の内容から少し離れるが、記事欄下部に表示できる関連記事の数は以下のコードの var mrpMax=6; の数値を変更することで変えることができる。

  
    <script type='text/javascript'>
      var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
      var mrpMax=6;
      mrp_output();
    </script>
  

デフォルトでは 6 となっており、5個までの関連記事が表示されるようになっている。

10個の関連記事を表示したい場合、11 と設定することで表示するようになる。

まとめ

今回のカスタマイズではコードを追加するのではなく、削除して機能の改変をやってみた。

少しでも参考になればうれしいです。

QooQ