Bloggerのブログをレスポンシブデザインにできない5つの理由

昨日の日中は身体が重かったのでランニングはやめて、久々にブログ(Blogger.comです)のレスポンシブデザイン化に挑戦してみました。結論を言ってしまうと惨敗。半日あれこれ試しましたが納得のいくテンプレートがなく、結局デザインは元のまま。あー疲れた。でもせっかくトライしたので、うまくいかなかった理由を書いておきます(転んでもただでは起きないということで)。それと記事後半に、比較的良さげなテンプレートを私のブログに適用した例を、スクリーンショットで載せておきます。では行きます。

理由1: Blogger標準でレスポンシブデザインのテンプレートがない

最大の理由がこれ。なぜないかは分かりませんが、「ブロガー」はテンプレートのバリエーションも少なく、数年前に「動的ビュー」が追加されてからまったくアップデートがありません。GoogleはBloggerにあまり力が入っていないようですね。そもそも数年前にはもうモバイルの時代が見えていたはずなのに、モバイルで使えない「動的ビュー」とは一体何だったのか...? 高機能かつ高品質なのは確かなので、これがレスポンシブでないのが非常に残念です。そのうちアップデートされないかな?

理由2: サードパーティ製のテンプレートはデザイン品質がいまいち

Blogger.comにレスポンシブデザインのテンプレートはありませんが、サードパーティ製のものに目を向けると、メジャーなブログサイトだけあって、フリーから有料からいろいろあります。海外のテンプレート紹介サイトを見ると魅力的なものがたくさんあって、これだけあれば、テンプレートをダウンロードしてBlogger.comにアップして終わり！と思っていたのですが、これがうまくいきません。それはなぜか?

まずデザイン面からいうと、レスポンシブなのは確かだし、サンプル画面は非常に洗練されて見えるのですが、実際に適用して画面サイズを少しずつ変えてみると、途端に細部に不都合が見え始めます。例えばタイトルが折り返って記事エリアにかぶったり、写真がだんだん横方向にだけつぶれてみたり...。なんだかなー、という感じになるテンプレートがほとんどです。

またデザイン面以外にも問題があります。まず、カスタマイズするのにテンプレートのソースコードを編集する必要があるのはいきなり敷居が高いでしょうし、どうしても日付とタイトルが表示されないもの、消せないブログパーツがあるもの、PCで見ると広告がないのにモバイルで見ると勝手に広告が挿入されるもの(フリーの代償なので嫌なら使わないだけなのですが)など、普通にブログパーツを配置する感覚とは異なる点が少なくありません。開発元のQAコメント欄を見ても、うまくいかないから何とかして!という悲痛な叫びが必ず何件かあるような状態です。ほとんど個人運営なのか、サポート自体も貧弱みたいですね。

理由3: ほとんどが海外製で日本語とデザインの相性が良くない

アルファベット(ラテン語でしたっけ?)のサンプルはどれもとても見栄えがします。でも日本語にすると急に色褪せて見えることがよくあります。フォントサイズが日本語には大きめで間が抜けて見えたり、テンプレートで指定されたフォントがなくてデフォルトの荒削りなフォントになったり。フォントの問題は比較的容易に修正可能ですが、やっぱりテンプレートのソースコードに手を入れる必要があります。難易度は高くないとはいえ、HTMLやXMLをいじったことがない普通の人にとっては、敷居どころか高い壁が立ちはだかっているに等しいでしょう。

理由4: 日本語で作成されたテンプレートはほぼ皆無

海外製がダメなら日本製はどうかというと、これがほとんどありません。Blogger.comが日本ではマイナーだからという、至極まっとうな理由からでしょうね。ごく少数の方ががんばっていらっしゃるようですので、今後の展開を期待しております。

• シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していく

こちらのテンプレートは、各記事をサムネイル付きでリスト表示するタイプですが、写真は小さくなってしまいます。その点で私の用途(写真を大きく表示したい)に合いませんでしたが、それが合う方なら試す価値はありそうです。

理由5: 難読化されたコードが含まれていてセキュリティが不安

これはデザイン以上に大きな問題。難読化という表現から分かるように、パッと見何をしているのか全くわかりません。本来の目的はJavascriptのサイズを減らすことで読み込み/動作を軽くすることなのですが、スパム/マルウェアへのリンクが入っていないとも限りません。実際過去そのような事例があったようです。こうなると、インターネットの鉄則「自分が理解できないことはやらない」に従ってあきらめるか、信頼できる開発者のものを慎重に選んで使うか、いずれかになります。特にブログのテンプレートの場合、迷惑を被るのは自分よりも記事を読んでくれる訪問者の方々ですからね。
サードパーティのテンプレートを使う場合は、いきなり本番に適用する前に、テスト用のブログを新たに開設し、テンプレートを適用してからvirustotal.comやgoogleセーフブラウジングなどでチェックすれば安心でしょう。また、Blogger.comにはSPAM感染検知機能もありますから、それを定期的にチェックすることも必要です。(テンプレートの中から外部のスクリプトを呼び出していることがあり、テンプレート導入時は問題なくても、外部のスクリプトが悪質なものに置き換わった瞬間、自分のブログも悪質なものの仲間入りですから。)

■ 2015/7/2 追記：結局、後日レスポンシブ化してしまいました。単にテンプレートを適用するだけでは全然すまないですね。細部の調整が大変でした。【注意点などをまとめた記事はこちら】

■ 2015/12/9 追記：突然テンプレート部分が「マルウェアに感染」という判定を受けました。【その時の調査と対処の顛末をまとめた記事はこちら】

使えそうなBlogger用レスポンシブデザインのテンプレート

とまあ、今回ここまで書いてきたような状況でしたが、いろいろ見た中で、ある程度使えそうだったのが、以下に紹介する開発元のテンプレート。もう少し試してセキュリティ含め問題がなさそうなら、どれかを使ってみるかもしれません。(※テンプレートを多数集めている紹介サイトからダウンロードするのは、ソースが改変されている可能性があるのでやめるべきだそうです。オリジナルのサイトからダウンロードすることでリスクを減らせますね。0になるかどうかは開発元の信用次第ですけどね。)

開発元サイトのサンプルが魅力的に見えるのは、実は使っている写真が綺麗だというのも大きな理由です(実は半分以上それが理由だったりして)。というわけで、ここでは私のブログに適用した例を載せることにします。なお、私のブログは写真が多いので、先頭の方に写真を大きく表示して、かつ全体の構成がごちゃごちゃしないシンプルな(2カラム構成の)テンプレートから選んでいます。

Sora Templates: Keilir
シンプルなデザインながら、どこかゆったり暖かみの感じられるテンプレート。背景の画像からもアウトドア系に向いている印象です。シンプルで機能が少ない分、細部の破綻も目立ちません。日付が表示されなかったのが唯一の問題だったかな? フォントサイズが大き過ぎたので、それだけソースをいじれば良さそうです。

Sora Templates: Magalla
力強いデザインで、冒頭部分に指定した記事をまとめて表示するタイプ。最新記事はその下に少し小さく並べて表示されます。一覧性がいいので、機能面重視ならこちらの方が便利かも。ただし、スマホレイアウトにするとタイトルがメニューにかぶったり、Prev/Next(前の記事/次の記事)のリンクに記事が重なってブルブル震え、うまく操作できないなどの問題がありました。これもフォントサイズを少し小さくした方が良さそうです。

Seo Blogger Templates: Pasco
シンプル、ミニマルで、写真を大きく表示するタイプ。下のスクリーンショットでは分かりにくいですが、ULTRA SLOW TREKKINGのタイトルに、サブタイトルが重なっています。これはサブタイトルを取ってしまえばいいでしょう。ちょっとタイトルやメニューの面積を広く取りすぎかな? と思いますが、それがOKな方なら、シンプルな分一番問題が少なかったように思います。でもちょっとシンプル過ぎるかなぁ。

VeeThemes: Mimes Blog
実は一番気に入ったデザインがこれ。しかし残念なことに、記事のタイトルと日付が表示されないという大きな問題があります。おまけにクリーンなデザインのため、タイトルと日付がないと記事の境目が分からないという、致命的な問題につながっていて、このまま利用することはできないレベルです。インストールマニュアル通りにbloggerの設定を変更しても直りませんでしたし、サポートコーナーを覗いてみると、日本語に限らず他の言語でも発生しているようでした。この問題が直ればこれにしたいかな〜。

VeeThemes: Oblivion
上と同じ開発元なので、タイトルと日付が表示されないという問題は同じなのですが、サイトデザインが違うので、記事の切れ目ははっきり分かります([READ MORE]が切れ目です)。なかなかいいのですが、写真にタイトルを重ねて表示する凝った機能のせいか、写真が暗めになること、それと記事に写真(JPEG)がない場合、写真に重ねるはずのタイトルと下に表示されるタイトルが重なってごちゃごちゃしてしまうという、非常に残念な状態になります。私はMimes Blogの方がいいのでこれを使う予定はありませんが、好みにあえば現時点でも使えそうです(記事に必ず写真を入れておきさえすれば)。

■ 2015/7/2 追記：結局、後日レスポンシブ化してしまいました。単にテンプレートを適用するだけでは全然すまないですね。細部の調整が大変でした。【注意点などをまとめた記事はこちら】

■ 2015/12/9 追記：突然テンプレート部分が「マルウェアに感染」という判定を受けました。【その時の調査と対処の顛末をまとめた記事はこちら】