Simplicity メインカラムの幅を広げ、写真を幅いっぱいに表示する方法

　当サイトのテーマはSimplicityを使用しています。Simplicityのデフォルトではメインカラムの幅が680pxなのですが、当サイトでは写真を大きく表示したかったので、幅をもっと大きく広げて、幅いっぱいに写真が表示されるようにしています。

　今回は、その変更の仕方を紹介したいと思います。

変更前と変更後の表示

　前述のように、Simplicityのメインカラムの幅は、デフォルトでは680pxです。

　これを以下のように変更します。

 

　いろいろと検討した結果、写真の幅を900pxにすることにしました。ですので、メインカラムの幅を900pxにして、横幅いっぱいに写真が表示されるようにしました。

 

幅の変更方法

　それではここから、幅の変更方法を説明していきます。

　今回の変更は、CSSの編集によって行います。WordPressのダッシュボード > 外観 > テーマの編集 と進んでください。
 

全体の幅を広げる

　メインカラムの幅を900pxにして、サイドバーの幅はデフォルトの300pxのまま、間に30pxの空きを入れたいと思います。ですので、全体の幅は1230pxになります。

　この記述をCSSに追加します。

 

　CSSに追加すると、このように全体の幅が1230pxに広がります。
 

メインカラムの幅を広げて、内側の余白をなくす

　この記述をCSSに追加します。これは、メインカラムの幅を900pxにして、さらにメインカラムに設定されている内側の余白（padding）を0にする、という内容です。

 

　CSSに追加すると、このようにメインカラムの幅が900pxに広がり、内側の余白がなくなります。

　しかし、画像の幅は変わらず…。これは、画像そのものは900pxなのに680pxに縮小されている、という状況です。ここでかなりハマりました！ 解決策は以下のようになります。
 

画像の幅が広がらない原因、3つの解決策

　いろいろと試してみて、この原因がわかりました。そして、解決策は3つあります。
 

原因はJetPackの「画像を私たちのサーバーから提供」

　当サイトではプラグインのJetPackをインストールしているのですが、これの「画像を私たちのサーバーから提供」がオンになってことが原因でした。
 

解決策1：JetPackをアンインストールする

　原因となっているJetPackをアンインストールすれば、解決できます。しかし、JetPackの他の機能を使っているので、この方法は不採用となりました。
 

解決策2：JetPackの「画像を私たちのサーバーから提供」をオフにする

　WordPressのダッシュボード > JetPack > 設定 と進み、そこの「サイトをスピードアップ」に「画像を私たちのサーバーから提供」があるので、これをオフにします。
 

解決策3：Simplicityの「メディア幅」を900pxにする

　WordPressのダッシュボード > 外観 > カスタマイズ > 追加CSS と進みます。そこの下の方に「メディア幅」という項目があるので、それを900pxにします。

 

　筆者は上記の3つのうち「解決策3」を実施して、画像の幅が900pxになるようにしました。
 

メインカラムとサイドバーの枠線を消す

　最後に、この記述をCSSに追加して、メインカラムとサイドバーの枠線を消します。

 

　これで、完成です。

 
　以上のCSSをまとめると、以下のようになります。

 

メディア設定 大サイズの「幅の上限」を「900」にする

　WordPressのダッシュボード > 設定 > メディア と進み、メディア設定の画面を表示させます。そこの「大サイズ」の「幅の上限」という項目があるので、それを「900」にします。こうすると次回から、アップロードした画像の大サイズの幅がメインカラムと同じ900pxになり、それを挿入すると横幅いっぱいに表示されます。

　ちなみに、「高さの上限」の「0」というのは、「高さの上限はなし（無制限）」という設定です。

 

おわりに

　カメラでたくさんのシャッターを切って、その中に「これは良く撮れた！」と思う一枚があると、大きくして見せたくなりますよね。今回紹介した方法を参考にして、たくさんの人にお気に入りの一枚を大きなサイズで見せていただければと思います。