XeoryBaseのワンカラム表示機能を使って「ギャラリーモード」を構築してみた。

ブログデザイン、ワンカラムかツーカラムか迷いませんか？

ツーカラムの方がサイト内回遊はさせやすそうだけど、ワンカラムの方が記事に集中させやすかったりスタイリッシュだったりみたいな。

で、自分の場合、気合入れて撮った写真中心の記事なんかは特にスタイリッシュに、そして写真に集中して見て欲しいからワンカラムがいいわけで。でもそうでもない記事は離脱せずに回遊してほしいので、ツーカラムが良い。

ということで、記事によって任意のレイアウトに切り替えられるXeoryBaseを導入したわけですが、どうせならということで、ワンカラムのレイアウトはさらに写真が映えるようなデザインにしてみることにしました。

何が変わったの？

これが（変更前）

こうじゃ！（変更後）

写真が印象的に表示されて…ってわからんか…

多分この記事見てもらったほうが早い。なんか写真がいい感じに見えるようにしました。

【RX100M3作例】長野県阿智村で満点の星空を撮影してきた！設定・注意点も紹介

こんにちは。突然ですけど、最近星空見てますか？私は普段そんなに見ることはありません。うちからだと大して見えないし。 ということで、たまには満点の星空が見える場所に行って星を見てみ

CSSを変更したところ

WP管理画面＞外観＞テーマの編集＞style.cssを変更していきます。

バックアップお忘れなく。あと小テーマ作っといたほうが吉。

記事表示エリアを画面いっぱいに

81行目あたり

を

に。

101、118、158行目あたり

それぞれ

margin-left: 30px;
margin-right: 30px;
の部分をコメントアウトまたは削除。

写真を強調する感じのやつ

記事に書くときにやること

まずXeoryBaseの記事編集画面下部、レイアウト設定でワンカラムに。

写真は大サイズ、中央寄せに。それ前提で上記CSSを書いてるので、別の配置だとたぶん変になる。

それと、画像を挿入したら、imgのタグにclassで「gallery」を追記。これで上記の写真を浮かび上がらせるようなのが完成します。

撮影情報表示用に

pタグのクラスに「exif」を追記すると、いい感じに白枠の中に入ってくれる。

いちいちクラス追記するのもダルいので、あんまり使わないH6とかに同じCSSを指定しても良いかもしれない。

PC表示はいい感じ。モバイルは…ｳ~ﾝ…

PCだと横の表示領域が広いので余白がいい感じに使えている印象である一方、モバイルビューだと表示領域が狭いのにさらに余白が増えて逆に見にくいような気も…

まぁレスポンシブで全解像度に違うデザイン指定するのはちょっとだるいので、また気が向いたときにでも。

とか言いながら一生気が向かなさそう…