Bloggerの日本語対応外部テンプレート　Materiapolloテーマがカッコイイ！必須カスタマイズポイントはここだ！

　現在、QooQとSmartで揺れる中、新たに Materiapolloというテーマを見つけました。

　初心者にはちょっと敷居が高そうですが、カスタマイズポイントの情報がありましたので、いじってみたくなりました。

　今回は、まずは、Materiapolloとはどんなもので何をカスタマイズしないといけないかを探っていきます。

Bloggerの外部テンプレート　Materiapolloテーマがカッコイイ！カスタマイズポイントはここだ！

　今回は新しい無料テンプレートになる”Materiapolloテーマ”について調査しました。

　まず、一言でいうとカッコイイ！

　で、ちょっといっしょにみてみましょう！

Materiapolloテーマとは

　Materiapolloテーマとは、ペン鰭 (Penhata)様の”Cottpic”という日本のサイトで無料で配布されているBlogger用のテンプレートです。

　このテンプレートは Templateismopen_in_new の MLB Apolloopen_in_new というテンプレートをもとに、ペン鰭 様が Materialize を導入した外枠改造版とのことです。

　Materializeとは、Googleが推奨するマテリアルデザインのWebサイトを簡単に構築できるCSSフレームワークです。

　また、Bloggerには標準テーマがありますが、別途導入できるテーマがあります。
　例えば、日本人の方が配布されているものには、QooQやSmartなどがあります。
　海外では有料、無料を含めたくさんのテーマがあるようです。

　正直、わたしには消化不良気味ですが、Bloggerで使える日本語対応のテンプレートということですね。

とにかくカッコいい！

　さて、このテーマはとにかくカッコいいです。

　わたし的なカッコイイポイントをあげてみます。

• ハンバーガーメニュー対応
• ハンバーガーメニューでサイドバーが出てくる
• 記事一覧がカードタイプでみやすい
• ナビゲーションバー部分が固定（スクロールしても画面上部に残る）
• 記事一覧に記事の詳細がでる。（READ　MOERがイイ！）

具体的な画面イメージは以下になります。

PC画面

スマホ画面

　ハンバーガメニュークリック時サイドバーがでてくる様子

　ペン鰭 (Penhata)様の”Cottpic”サイトに”Live Preview”（デモサイトです）がありますので、詳細な動作を確認したい方はどうぞ。

　では、Materiapolloテーマはどのようなものか確認しましょう！

PageSpeed Insights（ページスピードインサイト）でスピード確認

　やはり、テンプレートを使用した時の読み込み速度が気になりますので、PageSpeed Insights（ページスピードインサイト）のスコアを確認しました。

　合わせて、過去に確認したQooQとSmartの結果も＜参＞考に記載します。
　同じサイトでの比較ではありません。
　QooQとSmart比較に関しては、こちらの比較記事もありますのでご興味があればご覧ください。

ーPageSpeed Insights（ページスピードインサイト）のスコアー
　Materiapollo：　PC画面　スコア９３　スマホ画面：スコア７０

　＜参考＞
　QooQ         ：　PC画面　スコア９９　スマホ画面　スコア９４
　Smart        ：　PC画面　スコア９０　スマホ画面　スコア５６

詳細は以下になります。

　PC画面

　スマホ画面

Google構造化データテストツール（ structured data testing tool）の確認

　また、Google構造化データテストツール（ structured data testing tool）の確認しましたがこちらも特にエラーはありませんでした。

　こちらもQooQとSmartを確認した結果を参考に記載します。
　また、確認記事がありますのでご興味があればご覧ください。

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

Materiapollo：”エラー無し、問題なし”

＜参考＞
Smart         ：”8 件のエラー4 件の警告”
QooQ          ：”エラー無し、問題なし”

　とても優秀なスコアだと思います。

　ただ、わたしの調査ですと使用に先立って最低限のカスタマイズが必要のようです。　

カスタマイズポイントはここだ！

　カスタマイズのポイントにHTML編集が必須な個所が3点あります。

ナビゲーションバー周りのHTML編集

　ナビゲーションバー周りは、2点ありQooQでいうナビゲーションバー部分のリンクをHTML編集画面から直接コードの編集が必要になります。
　こちらは文字列を検索してリンク先、名称を入れる感じで対応できそうです。

パンくずリストのコード差し替え

　残りの1点がパンくずリストのコードの差し替えが必要です。
　差し替え方法は、a fan of WRX STI様の【Blogger】テーマ［Materiapollo］の紹介とカスタマイズ方法に記載されている”構造化データ［data-vocabulary.org］のGoogle検索エンジンでの取り扱いについて”の章に沿ってコードを差し替える必要があります。

　理由は、a fan of WRX STI様によると、パンくずリストの構造化データ［data-vocabulary.org］のサポートが2020年4月6日に終了したことにより、Google Search Console にて警告が出るので、［Schema.org］に変更したほうがよさそうとのことです。

　また、その他のカスタマイズポイントの記載もあるので、テンプレートとして採用する際は参考にさせていいただこうかと思っています。

まとめ

　カッコいいので取り扱ってみたいテンプレートとして調査しました。

良いポイントは以下になります。

• 見た目がカッコイイ
• 機能美も優れている
• サイトの読み込みも十分早い

一方で、初心者には難しいそうというポイントは以下になります。

• レイアウトに不自然なガジェットがある
• パンくずリストが古い形式になっている（差し替えが必要）
• コードの知識が必要（HTML編集でナビゲーションバー周辺をいじる必要あり）

というところです。

　2018年頃リリースされたものですのでちょっと古めなのかもしれません。
　適用時にデザイン面だけではなく、機能的な部分でコードの修正が必要というのは、初心者にはちょっと重いかもしれませんね。

　わたしの結論としては、保留。
　今後も引き続き情報を収集していきたいと思います。

編集後記

　2018年頃にはBloggerのテーマとして配布されていたようです。

　わたしの知識不足によるものですが、調査するたびに新しいことがわかり驚きとワクワクがとまりません。

　Bloggerは自由度が高いくて、面白いですがもう少し入門手引き書的なサイトがあると嬉しいですね。

　また、今回　Blogger標準テーマのカスタマイズも意外にカッコイイものがありそうということがわかりました。
　いまは、外部テーマより、標準テーマの方が面白そうという感じになっています。

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

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