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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

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

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

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

スポンサーリンク

アーカイブページとは?

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

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

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

Menu

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

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

デフォルト

Normal

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

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

カスタマイズ後

After

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

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

STORK(ストーク)のカスタマイズ

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

今回はCSSや.phpに変更を加えることになるため、事前に子テーマを作成しておきましょう。

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

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

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

CSSの変更が反映されない時の完璧な対処法、教えます!

2017.03.02

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

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

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

class=”wrap cf”
Wrap

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

class=”wrap page-full wide cf”
Full

2. サイドバーを消す

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

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

<?php get_sidebar(); ?>
Sidebar

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

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

この2つのカスタマイズだけでもスッキリした2列表示になってます。2列がいい人はこのままで、3列表示がいい人は次のCSSカスタマイズに進みましょう!

3. CSSで3列表示にする

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

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

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

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

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

After

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

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

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

Notyet

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

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

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

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

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

スポンサーリンク

まとめ

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

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

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!

ABOUTこの記事をかいた人

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム