Bloggerの最新日本語テンプレート「Smart」 

僕が運営している汎兮堂関連サイトはすべて、Googleの「Blogger」というサービスを利用しています。他のブログサービスと同様に、デザインはカスタマイズでき、標準のデザインテンプレートもたくさん用意されているのですが、それらは日本人の目から見るとどれもイマイチです。

日本では、他のブログサービスが充実しているためか、Bloggerの利用者はそれほど多くないようですが、それでも、日本語テンプレートを作成して無料公開してくれている方もいて、僕はこれまでラムネグさんという方が作成された「Tokyo」というテンプレートを使用してきました。


「Tokyo」テンプレートについてはこちら↓

https://blog.dododori.com/create/program/blogger-tokyo/


Tokyoテンプレートに特に問題があったわけでもないのですが、たまたま、ふでたまごさんという方の作成された「Smart」というテンプレートのことを知り、使ってみたくなったので、今回、汎兮堂関連サイト6サイトのテンプレートをすべて「Smart」に変更してしまいました。


「Smart」テンプレートについてはこちら↓

https://blogger-learning-rab.blogspot.com/2020/09/smart.html


テンプレートをSmartに変更することに決めた理由

昨年9月リリースでとにかく新しい

Bloggerに限らず、Gmailでもなんでも、Googleは一方的にいきなり仕様を変更してきます。作成から時間が経って更新もおこなわれていないテンプレートだと、現在のBloggerの仕様に対応していない可能性があるので、新しいに越したことはありません。一方で、あまりにリリース直後すぎると、バグが残っている可能性がありますが、リリースから数カ月経ってすでにたくさんの人が利用していれば、すでにあらかたのバグは見つかって修正済みと思われます。

シンプルかつ高機能

シンプルですっきりした見た目ながら、機能は充実していて、ページトップボタンや番号付きページナビなどが標準で備わっています。特にすぐれているのはモバイル対応で、スマホ表示の場合はヘッダーナビは折り畳み式になり、サイドメニューへ飛ぶボタンも付きます。今では、僕のサイトも、デバイス別の閲覧数を見ると、モバイルがPCの倍ほどになっています。モバイルでの視認性・操作性を基準にしてサイトのデザインを考えないと閲覧してもらえません。

ソースコードの編集の敷居が低い

ソースコードに日本語のコメントが豊富なので、Bloggerの仕様変更への対応でコードの書き換えが必要になった場合にも、処理しやすいと思われます。また、コードを直接編集しての細かいカスタマイズもしやすいと言えます。

細かいカラー設定が容易

コードを編集しなくても、Bloggerのテーマデザイナーを使用して、かなり細かく色を設定できるので、カスタマイズの自由度が高く、自分好みのデザインが実現できます。僕の場合、サイトごとにテーマカラーを分けているので、自由なカラー設定が容易なのはありがたいことです。


というわけで、デザインテンプレートをTokyoからSmartに変更する作業を始めていきます。以下、備忘録代わりの作業メモですが、これからSmartを利用する方の参考になれば幸いです。


Smartテンプレートの適用

Smartテンプレート入手

上で紹介したSmartテンプレートのサイトから、テンプレートのファイルをダウンロードします。


テンプレートファイルは、

  • テーマデザイナー非対応・目次機能あり
  • テーマデザイナー非対応・目次機能なし
  • テーマデザイナー対応・目次機能あり
  • テーマデザイナー対応・目次機能なし

の4種類あります。テーマデザイナーは絶対使わないという人は非対応版でよいと思いますが、普通は対応版でよいと思います。僕は基本的に目次はつけない（SEO的にはつけたほうがいいのでしょうが）ので、「テーマデザイナー対応・目次機能なし」版にしました。


ダウンロードしたファイルは圧縮ファイルなので、解凍しておきます。


テンプレートファイルのアップロード

テンプレートファイルが入手できたら、これをサイトに適用するわけですが、その前に、現状のバックアップを取っておかないといけません。何か不測の事態が起きたときに、元に戻せなくなることを避けるためです。


Bloggerの管理画面で、「テーマ」の画面を開き、「カスタマイズ」ボタンの横にある◀ボタンをクリックし、「バックアップ」を選択します。




すると、現状のデザインテーマの設定がXMLファイルとしてダウンロードされます。万一のときにはこのファイルを使って原状回復することになります。

バックアップが入手できたら、同じ画面から今度は「元に戻す」を選択します。


ファイル選択画面が開くので、ここで、最初にダウンロードしたSmartテンプレートのファイルを選択します（なお、トラブルが起こったり、使ってみてSmartが気に入らなかったりして元に戻したい場合、この画面で、先ほどダウンロードしたバックアップファイルを選択することになります）。


これで、Smartテンプレートの適用は完了です。

ガジェットのレイアウトを修正する

Smartテンプレートは適用できましたが、この段階ではサイトのレイアウトがグチャグチャになっています。


色については後でテーマデザイナーで変更していくので、まず、レイアウトを修正していきます。

管理画面の「レイアウト」画面を開き、ガジェットを移動・追加・削除して本来のレイアウトにしていきましょう。僕の場合は、以下の修正が必要でした。

attributionガジェットの削除

著作権表示をしているattributionガジェットはもともとフッターにあったはずですが、なぜかヘッダーのブロックに移動してしまっているので、もとのフッターブロックに戻しました。


ところが、プレビューを見てみると、フッターに著作権表示が2つもあります。


どうやら、Smartではわざわざガジェットを設置しなくても標準で著作権表示がされるようです。なので、attributionガジェットは削除しました。

ブログリストガジェットの移動

6サイトのうち、汎兮堂HOMEはポータルサイトという位置づけでもあるので、ブログリストガジェットを利用して、汎兮堂関連サイトの最新記事を表示するようにしているのですが、その位置がなぜかヘッダーブロックに移動していたので、これも本来の位置であるメインブロック内のブログ記事の下に戻しました。


ヘッダーナビのメニューバー再作成

汎兮堂HOMEでは、ヘッダーナビブロックのメニューバー（ページガジェット）に、関連各サイトへのリンクを設置していたのですが、テンプレート変更により、メニューバーの内容が初期化されてしまっていました。

これは手作業で復元するしかないので、ガジェットの設定画面を開き、サイトを一つ一つ追加していきました。



全部追加し終わると、元のようなメニューバーが出来上がりました。


このほか、サイドバーブロックのいくつかのガジェットが消えていたり、他のブロックに移動していたり、不要なガジェットが追加されていたりしたので、それぞれ、追加・移動・削除しました。なお、Smartでは、サイドバーブロックに標準で「最新記事」というガジェットがついているのですが、現状では僕は不要だと思ったので非表示にしています。

以上で、レイアウトの修正は完了。次は色のカスタマイズですが、長くなったので、続きは別の記事にします。

つづきは
Bloggerテンプレート「Smart」導入メモ #2