Materiapolloテーマのパンくずリストを全部表示して階層化風にする。-monocotoyom

　Materiapolloテーマに使用されているパンくずリストには投稿記事のラベルが一つだけ表示されます。

　しかし、一つの投稿記事い複数のラベルを割り当てることって多いですよね。
　そこで、パンくずリストにすべてのラベルを表示させてみます。
　見た目が、ラベルが全部でたほうが階層化されたっぽい感じになります。

　ということで、今回はMateriapolloテーマのパンくずリストにすべてのラベルを表示させるカスタマイズをした体験を具体的にわかりやすくまとめて記事にしています。

Materiapolloテーマのパンくずリストを全部表示

　今回は、Materiapolloテーマの投稿記事のパンくずリストに投稿記事に割り振ったラベルをすべて表示させる変更です。

　上図の赤枠で囲った箇所を見ていただけると4つのラベルがまるで階層化されたように表示されているがわかりますよね。

　一方で、記事本体のタイトルの下には、あらかじめラベルがすべて表示されています。

　両方表示されると、パンくずリストと記事本体にタイトルとラベルが表示されて変な感じがします。

Materiapolloテーマのパンくずリストを階層化風表示

　そこで、QooQ風にパンくずリストからはタイトルを消して、記事本体のラベルを消すことにしました。

　パンくずリストの部分は階層化され、タイトルとラベルの重複感もなくなりました。

　パンくずリストにラベルを全部表示させるデザインとして、かなりスッキリしましたね。

　特にスマホ画面もスッキリします。

Google構造化データテストツール確認

　この変更を実施しましたサイトを、Google構造化データテストツールで確認しました。

　結果は、上図のように”エラーなし、警告なし”ですので問題はなさそうです。

Google構造化データテストツール確認からの考察

　ただ、このGoogle構造化データテストツールの結果を見てみると、

　ホームはposition　1、パンくずリストはposition　2、タイトルはposition　3で報告されています。

　これが構造化データになると考えます。

　しかし、パンくずリストにはラベルすべてを表示するので、position　2は複数報告されることになります。

　もしかするとMateriapolloテーマは、わざわざラベルを一つにしている可能性があります。

　理由は、ホーム、ラベル、タイトルの３つで構造化と見せかけたい。
　そもそも、階層が一つしかないBloggerでは、パンくずリストとして、代表のラベルを便宜上、階層を示すために一つだけ表示させるのではないか。

　そう考えると、ラベルを全部表示（複数同じ階層のラベルを報告）してタイトルを削除する（見せかけの一つ階層削ってしまう）のは構造化データとしてはちょっと問題ありかもしれませんね。

　とはいえ、Google構造化データテストツールでは警告がないのでGoogle検索エンジン的には問題は無いのだろうと思うことにしました。

　それでも、興味がある方は、わたしが修正したポイントをご紹介しますので参考にしてください。

パンくずリストとタイトルの表示を変更する修正

　それでは、具体的な変更点を見ていきましょう。

　コードを変更しますのでテーマのバックアップを行ってください。

　具体的には、テーマ→カスタムの右側の▼をクリック→バックアップです。

　また、コード変更は、Bloggerの”HTMLを編集”で編集します。

　具体的にはテーマ→カスタムの右側の▼をクリック→HTMLを編集です。

　コード変更箇所はHTML編集画面でCtrl＋Fを同時に押下しでてきたダイアログに指定の文字をいれて検索しするとわかりやすいです。

　尚、わたしがやった内容を記載するものであることを、ご了承いただき、参考にする場合は自己責任で実施してください。

パンくずリストを全部表示するコード変更

　修正は、パンくずリストの構造化データを変更したものをベースに説明します。

　パンくずリストの構造化データの変更は、こちらの記事を参照ください。

のコメントの下側にある以下のオリジナルコードを探してください。

<b:if cond='data:label.isLast == "true"'>

›

<data:label.name/></a>

</li>

</b:if>

　上記の赤文字を削除してください。

　この部分で、Bloggerが指定する最後のラベルを検索して表示しています。

　赤文字を削除することで、結果的に、すべてのラベルが表示されます。

　結果、以下のコードになります。

›

<data:label.name/></a>

</li>

パンくずリスト部からタイトルを消すコード変更

のコメントの下側にある以下のオリジナルコードを探してください。

›

<data:post.title/>

</li>

　上記の赤文字を削除してください。

　この場所が、タイトルを付与しているカ所になります。

との2カ所に存在しますので両方削除願います。

ちなみに投稿時にラベルは張り付ける前提であればは変更不要です。

　また、ラベルが無い場合、”Unlabelled”と表示されます。

　もし文言を変更したい場合は以下のコードを検索して修正ください。

Unlabelled

　赤字部分が修正箇所です。

投稿記事本体からラベル一覧を消すコード変更

” <b:if cond='data:post.labels'>”を検索し、以下のオリジナルコードを探してください。

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a class='post-per-page' expr:href='data:label.url' rel='tag'>label<data:label.name/></a><b:if cond='data:label.isLast != "true"'/>

</b:loop></b:if>

<b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>forum<b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if>

　上記の赤字の文字を削除してください。

　こちらは、コメント数も表示しているのですが簡単にするためにラベルと合わせて削除します。

　興味のある方はちょっといじってみるのも楽しいです。

全て終了後に、テーマを保存してください。

具体的にはHTML編集画面の右上のフロッピーマークを押下する。

　フロッピーってみたことありますか？ないですよね。

　ちょっとアイコンわかり難いきがします。

まとめ

　Materiapolloテーマのパンくずリストを全部表示して階層化風にカスタマイズしました。

編集後記

　今回は、パンくずリストの表示を階層化風にするという変更をしました。

　変更に合わせて調べていくと構造化データに対して問題ありそうだなぁと感じています。

　実際のブログへの反映はどうしようかちょっと悩んでいます。

ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！

Materiapolloテーマのパンくずリストを全部表示して階層化風にする。

Materiapolloテーマのパンくずリストを全部表示