WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【WordPress】STINGER5の一覧ページを2列で表示する方法

この記事は約2分55秒で読めます

STINGER5カスタマイズ 一覧ページを2列で表示する
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

『悠木さんのサイトのように一覧ページを2列で表示したいのですが、STINGER5ではどうやったらいいですか?』というご質問をいただきました。

ちなみに私の使っているN1テーマはテーマオプションで一覧表をワンクリックで変更することができます。
なので、ソースをいじったりしている訳ではないんです。

STINGER5をインストールして見たところ、そういったテーマオプションはないようです。

ということで作ってみました。

STINGER5とは

STINGER5はWordPressの無料で使えるデザインテーマです。
充実したSEO対策と製作者が日本人で日本語で作られているのでカスタマイズしやすいところが特長です。

STINGER5

バージョン情報

現在の最新バージョンのver20141227で動作を確認しております。
古い場合や、新しい場合は上手く動作しない可能性もありますのでご注意ください!

変更するファイル

stinger5/style.css
stinger5/itiran.php

上記の2つのファイルを変更します。
直接変更してもいいのですが、STINGER5は頻繁にアップデートされているテーマですので
子テーマを使って変更していきます。

STINGER5の一覧ページを2列で表示する方法

新しくフォルダとファイルを作成する

wp-content/themes/stinger5_child

「stinger5_child」というフォルダを新しく作成します。

wp-content/themes/stinger5_child/itiran.php
wp-content/themes/stinger5_child/style.css

「itiran.php」「style.css」ファイルを新しく作成します。

stinger5_child/itiran.php

1行目に class="clearfix"を追加しています。

【2015.01.11追記】解説して欲しいと要望がありましたので追記します。

CSSで左側と右側でfloatを指定して左右に分けるようにしたため、SNSボタンが回り込んでしまう場合があります。
そのためclearfixクラスを指定して回り込みを解除しています。

stinger5_child/style.css

丸ごとコピペしてお使いください。

注意点としては親テーマのフォルダ名は「stinger5」という想定ですので、
適宜ファイル名を書き換えてください。

【2015.01.11追記】解説して欲しいと要望がありましたので追記します。

PCサイトは2列表示、スマホサイトは1列表示にする

スマホで2列表示すると見づらくなってしまうので1列表示にします。
具体的にはウィンドウサイズが780px未満になったときに1列表示に切り替わります。

スマホサイトでも2列表示にしたい場合は上記の括弧を取り除けばokです。(オススメはしません)

記事の余白と下線

デフォルトでは最初の記事は上に余白を指定していたり、最後の記事に下線が付けない指定になっています。
2列で表示する場合は不自然になるので、最初の記事の余白をなくして最後の記事に下線を付けます。
元々あった余白分は上位のIDの#newsに余白を付けたので見た目はデフォルトと同じになります。

アイキャッチ画像の回り込みを無効化して画像を中央寄せ

1列の時はアイキャッチ画像の右側にタイトルや本文を表示していました。
しかし、2列で表示しようとした時は横幅に余裕がないのでアイキャッチ画像の下にタイトルや本文を表示するようにします。

左側に画像が表示されると違和感があるので、中央に寄せました。
タイトルや本文にはアイキャッチ画像分の余白が取られていたので、10pxに調整しました。

記事を2列で表示する

擬似クラスでその記事が奇数だったら左側に、
その記事が偶数だったら右側に表示するようにfloatを指定しています。

1列だったものを2列に分けるので、もちろん横幅は半分の50%を指定します。

さいごに

2列表示だと小さいと思うのでスマホ版は1列のままで表示しています。
レイアウトは多少調整すると見やすくなると思います。

例えばアイキャッチ画像を横長の長方形にするといい感じになりそうです。
ドット線も左と右でくっつかないようにした方がよさそうです。

特に難しいことはしていないので問題はないかと思いますが、不具合等ありましたらご連絡ください。

関連記事

  1. WordPress リビジョン機能、自動保存機能を制御する方法
  2. WordPress SNS連携 プラグイン SNAP
  3. 鉛筆削り消しゴムハサミ
  4. 記事タイトルで指定した文字を超えた場合「・・・」と表示する
  5. WordPress Table of Contents Plus
  6. ロボット パソコン

PR

カテゴリー