TwentyTwelveとLightBoxとアタッチメント

WordPressテーマにTwentyTwelveが出て、それがレスポンシブデザインということで話題になっていたので(あとHTML5っぽいコーディングに惹かれて)年末年始の時間があるときに少しずつテーマをいじっていました。

レスポンシブデザインというのは、iPhoneやアンドロイド、iPadやRetinaディスプレイなど様々な画面に対応してレイアウトが動的に変化していくデザインです。昔あったブラウザの幅によってコンテンツが広がるようなデザインに似ていますが、メディアクエリで制御するものはウィンドウ幅を認識して、ボックスを小さくしたり隠したりできるのが大きく違うところ。また、イメージもwidth:100%;としてしまえば、追従して変化するようです。
これらをCSSのメディアクエリで行ってしまおうという趣向らしい。しかし最初は

「まったく使い物にならない!」

という印象でしたが、それはそれまで別のテーマで動かしていたから。それなりにfunction.phpで変化もつけていたし、追加したcssもそれなりに挙動に影響していたみたい。少しずつ解析して、いちおう観られる状態にはできたかな?

とはいえ最後に残った問題はLightBoxの扱い。プラグインの改造をしないと、iPhone上でLifghtBoxが働いたとき、その対象が大きな画像の場合、ボックスをはじき出してしまうのです。まぁ将来的にはプラグインがアップデートされて対応されるのだけれど、どうしようかなぁ? と思っています。

iPhoneではアタッチメントのほうが閲覧しやすいけれど、パソコンではやっぱりLightBoxのほうが観やすい。でもそれをサーバーサイドで分岐しては、せっかくメディアクエリを使ってサーバーサイドの負担を軽くしている意味が薄れる気がしますよね。難しいところです。

※追記
アタッチメントによるギャラリーは、その記事に対してアップロードしたギャラリーではない場合(過去の画像を選択してギャラリーにする場合)は、クリックした画像が属する記事が保持するギャラリーに強制的に移される仕様のようですね。過去の画像でギャラリーを編集するならば、LightBoxを使わざるを得ない気がしています。

※※※※※※※※※※以下テスト※※※※※※※※※※

添付ファイルのページ(アタッチメント)へのリンクを伴うギャラリー(この記事に付属する画像)

添付ファイルのページ(アタッチメント)へのリンクを伴うギャラリー(過去にアップロードした別々の記事に対する画像をまとめたもの)

LightBoxを利用したギャラリー(過去にアップロードした別々の記事に対する画像をまとめたもの)

TwentyTwelveはコンテンツの幅が600px以上あるので、ダイレクトに貼付けてもいいような気もしてきた。写真の強弱はなくなるけれど、もともとあまりないし……。

641/2マッピング後
これでも平行投影のテキトーマッピングです。ペパクラ用には展開図からマッピングして面積を合わせます。

まだまだ研究ですね〜。