STORK（ストーク）で記事を3列表示にする方法

こんにちは！パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブロガーにとって嬉しい機能満載のOPENCAGE（オープンケージ） が提供するWordPressテーマ “STORK（ストーク）”。

カスタマイズに時間を使う必要がないので書くことに集中できるのが大きな特徴ですね。

そんなSTORK（ストーク）ですが、PCでアーカイブページに表示される記事列の数を変更したいと思ったことはありませんか？

視認性が高まるので個人的には超おすすめのカスタマイズ。

今回はその方法をご紹介します。

アーカイブページとは？

まず最初にアーカイブページについて説明しますね。

ブログには例えばカテゴリーごとの記事を一覧表示したり特定のタグに関連する記事を一覧表示することができます。

その方法は簡単で、ムクッといこうブログの場合だとメニューをクリックしてもらうとそれに関連した記事一覧に飛ぶことができます。

アーカイブページの見え方

STORK（ストーク）をデフォルト状態、つまり一切手を加えてない状態で使うと、アーカイブページの見え方はこんな風になります。
（PCの場合のみです。スマホは縦に一覧表示されます） 

デフォルト

このアーカイブページですが、画面左側に記事が2列で表示され、右側にはサイドバーがあります。

これはこれでキレイに並んでいるのですが、パッと見た時にもっと記事全体が見えるように表示したいと思った場合、こんな風にカスタマイズすることができます。

カスタマイズ後

どうでしょう？記事が横に3列に並び、サイドバーもなくなって全体がスッキリして読みやすくなったと思いませんか？

このあたりは個人の好き嫌いがあるところですが、興味がある人は試してみて下さい。

STORK（ストーク）のカスタマイズ

では具体的な方法のご紹介です。

.phpの子テーマを作る時はCyberduckなどのFTPソフトを使ってWordPressテーマが保存されている親テーマフォルダから子テーマフォルドにコピペすればOKです。 

もしCSSを変更したのにデザインが反映されない？なんてトラブルになった場合はこちらの記事を参考に対処してみてください。

mukutto.com

CSSの変更が反映されない時の6つの対処法、教えます！

続きを読む>>

1. アーカイブページは archive.php

まず archive.php をカスタマイズしましょう。

archive.phpをエディタで開き、最初のほうにある次の表記を探します。

class=”wrap cf”

見つけたらこの部分を次のように書き換えます。

class=”wrap page-full wide cf”

2. サイドバーを消す

続いてサイドバーを表示させないようにさらにカスタマイズを加えます。

archive.phpの一番下にこんな表記があります。

＜?php get_sidebar(); ?>

この部分をすべて消します。

これでサイドバーがアーカイブページに表示されなくなりました。

3. CSSで3列表示にする

仕上げはCSSをカスタマイズして3列表示にします。

次のコードをCSSにコピペしてください。

/* デバイス幅が768px以上の場合にカード型レイアウトを3カラムにする */
@media only screen and (min-width: 768px) {
.post-list-card .post-list{
width:31.333%;
}
}

これで見た目がスッキリした3列表示になりました。

試しにカテゴリー一覧やタグ一覧ページに飛んで確認してみましょう。

新着記事一覧が変更されてない？

実は今の方法だとカテゴリー一覧やタグ一覧のアーカイブページは変更できても新着記事アーカイブページには適用されません。

そのためCSSの3列表示だけが働き、サイドバーが残ってしまい、こんな風に狭っ苦しい表示になってしまいます。

実は新着記事一覧はhome.phpをカスタマイズしてやる必要があります。

さっきカスタマイズしたのはarchive.phpでしたね。

そのためさらにhome.phpの子テーマを作り、archive.phpと同じカスタマイズを加えてやりましょう。

1. “wrap page-full wide cf”に書き換え
2. <?php get_sidebar(); ?> を削除

こうすることで新着記事一覧のアーカイブページも無事スッキリとした3列表示に変更することができます。

まとめ

今回の3列表示カスタマイズは必ずしも万人に受け入れられるカスタマイズではありません。

記事1つ1つを大きく表示したい人もいれば、一目でたくさんの情報を見たいという人もいます。

サイドバーも消しているのでそこに抵抗がある人もいるかもしれませんね。

試験的に導入してしばらく使ってみるのもいいかもしれません。