当サイトの自作テンプレートの仕様について、Twitterで「記事の画像がBlogger標準のビューアで開けない」とのご指摘をいただきました。この件について色々と試してみたので、その結果をここに書き残しておこうと思います。

個別記事ページ、固定ページに設定した画像が直リンクで開かれる

当サイトのテンプレートでは直リンクで画像が開かれるため、記事内の画像を切り替えて表示することなどはできません。しかし、多くのBlogger用テンプレートではBlogger標準のビューアで画像を開くことが出来ます。具体的には画像のような違いが発生しているということです。

原因を突き止める

自分の書いたテンプレートと、他所様のテンプレートのコードを見比べて色々試してみたところ、このビューアを呼び出すコードは見つかりませんでした。どうやらBlogger側のシステムで条件に見合った場合にビューアを呼び出す仕様になっているようです。

そこで、テンプレートの違いを見比べていたところ、自分のテンプレートには然るべき部分に「post-body」というクラス名が付いていないことに気がついたので、試しに変更してみたところ見事に標準のビューアが起動しました。

というわけで、Bloggerは「post-body」というクラス名を条件に標準のビューアの作動を判断しているということが分かりました。これは調べても見つからないことだったので、特定するのに大変苦労しました…。

直リンクか？標準のビューアか？

正直言って、僕はBloggerの標準のビューアが嫌いです。その理由は「画像が元サイズで拡大できない」という点につきます。

このブログではブラウザの画面全体の画像を多用することが多いのですが、標準のビューアでは画像の拡大ができないため、拡大して見てもらう用の画像を用意しても、小さい画像のまま表示されてしまい詳細を確認することが出来ません。標準のビューアで拡大するには、ビューア上で画像を右クリックして新たに画像を直リンクで開いてもらわなければなりません。

その一方で、画像が直リンクで開く仕様であれば、この問題をクリアできます。まあ、記事に戻るには「戻る」ボタンをクリックするという手間が発生しますが、画像をクリックするシチュエーションは拡大して画像を見たいという状況ぐらいだと思われるので、個人的には直リンクで使う方が利便性が高いように思います。

問題の解決方法

当サイトのテンプレートは、個別記事ページ、固定ページの記事表示部分は「post-area」というクラス名になっています。これが他のテンプレートでは「post-body」というクラス名でくくられており、これが今回の問題発生の原因になります。

つまり、直リンクか？標準のビューアか？の分岐点は このクラス名ということになります。当サイトのテンプレートは記事表示部分のCSSを「post-area」で設定してしまっているので、これを変更すると修正が面倒になります。ですので、これに「post-body」を付け加えるという方法で問題解決を図りました。

具体的にはHTML部分の「class='post-area'」を「class='post-area post-body'」としたわけです。こうすることで、記事表示部分に「post-body」というクラスを付加することができ、標準のビューアが作動するようになります。

一応、テンプレートを仕様変更しました

当初は、この問題を仕様にしようと思っていましたが、Twitterで修正告知が発せられていましたので急遽修正することにしました。この修正によるエラーチェックは行えていませんので、もし、問題が発生した場合はコメント欄かTwitterでお知らせください。

また、上記で示したとおり、標準のビューアを使わない仕様の方が良いという方は、テンプレート内の「class='post-area post-body'」を「class='post-area'」に戻してお使いください。なお、「post-body」は他にも使われているので、これを一括置換して削除するとエラーがでると思われます。ご注意ください。

追記：ビューアを設定で無効にする

ビューアが有効になっていても、Bloggerの管理画面の「投稿、コメント、共有設定」から「ライトボックスで画像をアピール」を「いいえ」にすることでビューアの作動を切り替えられるそうです。ですので、修正後のテンプレートでビューアの使用を切り替えたい場合は上記の方法で設定してください。