初心者がBloggerの無料日本語対応テンプレートMateriapolloテーマを導入する！

 　Blogger向けに日本語対応のテンプレートをいろいろ検討しています。いままで、QooQ,Smartと導入してみていろいろなことがわかってきました。

　今回、新たにMateriapolloテーマという日本語対応テンプレートを見つけました！

　とってもカッコイイです。

　ということで、今回はMateriapolloテーマを実際にブログに導入した体験を具体的にわかりやすくまとめて記事にしています

Bloggerの無料日本語対応テンプレートMateriapolloテーマを導入

　みなさんはBloggerというブログサービスをご存知ですか？
　Bloggerとは、レンタルブログサービスではてなブログやアメーバブログなどとなじように無料でブログを作ることができます。

　今回は、そのBloggerにMateriapolloテーマの導入を行っています。

　導入後に、ナビゲーションバー周りとパンくずリストを修正する必要があります。
　このカスタムポイントについて興味がある方はこちらの記事をごらんください。

　この記事では、初心者がBloggerとは？テンプレートとは？というところから調べながら実際にBloggerに導入するところまでを説明していきます。

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

Bloggerとは

　Bloggerとは、パイララボ（英語版）が1999年に開始したサービスを2003年に、Googleが買収し、運営している無料のブログサービスです。

　また、2020年に細かなアップデートがありより使いやすいサービスとなっています。

　Bloggerは、レスポンシブル ウェブデザインに対応した素晴らしいテーマもあり、すぐブログを始められます。

　今回は、このテーマを外部からもってきてBloggerのブログに適用するお話です。

無料日本語対応テンプレートとは

　Bloggerには標準でテーマが準備されています。

　一方で、外部からこのテーマを導入することができるのです。
　この外部からのテーマをテンプレートと呼ぶ場合があります。

　厳密には複数のテンプレートファイルの集合体がテーマと呼ばれることが一般的のようです。
　しかし、Bloggerでは、テンプレートファイルが一つのファイルになっていますので、テーマと同じ意味合いになっています。

　このテンプレートは海外においては無料、有料でテンプレートやテーマという名目でたくさんあり、テンプレート集のサイトまであるらしいです。

　しかし、日本ではあまり数があるわけではありませんし、テンプレート集のようなサイトもありません。

　そのような状況ですが、無料日本語対応テンプレートも探すとあります。
　例えば、QooQというテンプレートもあり、このブログへの導入記事もありますので興味があればご覧ください。

　今回はその中のMateriapolloテーマを導入します。

Materiapolloテーマとは

　Materiapolloテーマとは、マテリアルデザインのCSSフレームワークである Materializeを採用したレスポンシブデザイン対応テンプレートです。
　レスポンシブデザイン対応とは、モバイル用・パソコン用の両方で最適な画面構成に可変するデザインで、最近はSEO的にも必須になっています。

　 Materializeとは、よく使われるスタイルをあらかじめ定義したフレームワークですです。

　ペン鰭 (Penhata)様の”Cottpic”という日本のサイトで無料で配布されています。
　詳細はこちらのサイトを参照ください。

Materiapolloテーマを導入

　Materiapolloテーマを導入してみましょう。

　まずは、テンプレートをペン鰭 (Penhata)様の”Cottpic”こちらのサイトから入手しました。

テンプレートの入手

　わたしは、以下のバージョンのテンプレートをダウンロードしました。

Materiapollo-v1-0-9.xml

　

　ダウンロード時はZip形式ですが、Windows10がサポートしている形式ですので、ダブルクリックし、任意のフォルダーに解凍してください。　

テーマのバックアップ

　現在のBloggerのテーマをバックアップしてください。

　バックアップ方法は、

　Bloggerの管理画面のテーマ→カスタマイズの右側の▼をクリック→バックアップをクリック
　です。

　バックアップのファイルがダウンロードされますので、任意のフォルダーに保管してください。

　もし、採用したテーマが気に入らなければ、バックアップしたファイルを”元に戻す”で復元が可能です。

　復元を行う際に、復元前のガジェットや設定が残っている場合があるようです。

　お好みになるとは思うのですが、必要と思う場合は以下の初期化を実施してください。
　導入前のテーマのガジェットなどが残る場合があることに対する対処です。
　残っていても、手動で削除することもできますので必須ではありません。

　セツナワールド様のBlogger海外製テーマ「Seoify」の日本語化&アドセンス向けカスタマイズ方法の記事に記載されている”テーマの初期化が必要な理由”の章にある手順に従ってテーマを初期化してください。

　補足すると、初期化時はセツナワールド様の初期化コードをBloggerのHTML編集画面にコピペして、テーマを保存してください。

　詳細を以下に説明します。

　HTML編集画面はBlogger管理画面のテーマ→カスタマイズの右側の▼をクリック→”HTMLを編集”で遷移します。

　現在、記載されているコードをすべて選んで、初期化用のコードを貼り付けます。（初期化用のコードだけにします。）

　初期化コードの貼り付けが完了したら、HTML編集画面の右上の保存ボタンを押下します。

　この状態で、適用したサイトを見ると真っ白になればOKです。

　続けて、新しいテーマを導入するといった具合です。

　今回は、もつろんMateriapolloテーマを導入します。

Materiapolloテーマをアップロード

　Blogger管理画面の”テーマの元に戻す”を活用して、Materiapolloテーマをアップロードします。　

　”元に戻す”はBlogger管理画面のテーマ→カスタマイズの右側の▼をクリック→”元に戻す”を選択します。

　ここで、”テンプレートの入手”の章で入手したMateriapolloテーマを選択しアップロードします。

　アップロードすると、すぐにブログに反映されます。

　上記で赤枠でココと記したところはナビゲーションバー（以下　ナビバー）と呼ばれる箇所です。

　他のテーマでは、上記に示した箇所は”レイアウト”からガジェットを編集することでリンクを設定できますが、Materiapolloテーマでは対応していません。

レイアウトの設定

　ナビバーの他にハンバーガーメニューの設定位も”レイアウト”に対応していません。

　ナビバーとハンバーガーメニューに関してはこちらの記事を参考にしてください。

　同じ日本語テンプレートのQooQやSmartなどはヘッダー部分やナビゲーションメニューという箇所に該当機能（ページリスト）があり、設定できます。
　なぜか、Materiapolloテーマはフッターに配置されていてナビメニューと連動していません。

　これは、直接HTMLを編集する必要があります。

　一方で、サイドバーに”NavBar”という項目があるのですがレイアウトをはみ出しています。
　

　上記のように検索窓と見切れた文字が表示されています。

　これについては、レイアウトから以下のように消すことができます。

　赤枠の右下の”編集”をクリックします。

　上図で”オフ”を選び保存します。

　これは、環境によるかもしれませんが、謎の機能です。

　この他、フッターにはリンクと先に述べた”ページ”を表示させるガジェットがありますので、こちらは”レイアウト”から修正可能です。

まとめ

　Materiapolloテーマを実際にBloggerに適用させてみました。

　判明した初心者が出くわす問題、課題となるポイントは以下になります。

1. ナビバー、ハンバーガーメニューは”HTMLを編集”でコード編集が必要。
2. ”NavBar”というウエブデザインに収まらないガジェットが配置されているので
   ”オフ”にする。
3. ”レイアウト”にほとんど対応していない

　となります。

　２項目は今回の記事通りに文字通り”オフ”にしてしまえば解決します。
　３項目は、現状の配色でOKであれば問題ないです。しかし、懲りだして、カスタマイズしたいとなると１項と同様に”HTMLを編集”でコード編集が必要です。

　１項目に関しては別記事で具体的な作業を記事誌にします。
　しかし、”HTMLを編集”でコードを変種するのはハードル高いですね。
　引き続き対応していきたいと思います。

編集後記

　Materiapolloテーマは、かなり手ごわい感じのテンプレートでした。

　むしろ、QooQやSmartは”レイアウト”でもカスタマイズできるように作成していただいていることに改めて感謝です。

　一方で、Materiapolloテーマは、ワードプレスなどで運営するブログに近いことをBloggerでやれるというところが凄いのかもしれません。

　この辺は、知識度に合わせたテンプレート選択が必要だと改めて感じました。

　ナビバーとハンバーガーメニューは現在修正中で対応のめどが付きました！

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

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