【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

ストークを完全カラムにする方法

こんにちは、アキです。

このブログで使用してるSTORK(ストーク)のPC表示を完全1カラム化したので僕なりの方法をまとめました。カスタムするのは大きく分けてトップページ、記事一覧ページ、キーワード検索の結果一覧ページ、投稿ページ、固定ページの5つです。

注意事項
PHPやCSSをカスタムする際は必ずバックアップをとり、必ず子テーマで変更を加えることをおすすめします。作業は自己責任でお願いします。

コンテンツ(投稿・固定)を1カラムにする方法

投稿ページの場合

ストーク1カラム化

記事作成画面で記事レイアウトを選択することで1カラムと2カラムを変更できます。

デフォルトの2カラムの他に1カラムがフルサイズとバイラル風の2種類があります。

1カラムにする場合、フルサイズだとコンテンツ幅がフルサイズで広すぎます。バイラル風だとアイキャッチが特殊な表示になり気に入りませんでした。

なのでアイキャッチを含めたコンテンツ幅は変えずに1カラムにするカスタムをしました。方法は別の記事にまとめていますので、そちらへどうぞ。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

ストークの全ての投稿記事を一括でワンカラム表示にした方法

2018.01.19

カスタムにはsingle.phpに変更を加えていきます。

固定ページの場合

固定ページも同じでレイアウト機能で1カラムにすることが可能ですが、コンテンツ幅がフルサイズ表示になってしまいます。通常のコンテンツ幅のままで1カラムにする場合はPHPファイルをカスタムします。

固定ページの場合はpage.phpに変更を加えていきます。

44行目にある下記コードを削除します。

これでサイドバーが消えます。

次に3行目にある下記コードを探します。

このコードの中の「wrap」と「cf」の間に「page-full」を付け加えます。

これで2カラムの時のコンテンツ幅のまま中央に表示されて1カラムになります。

スポンサードリンク

トップページを1カラムにする

このブログでは1カラムにした固定ページをトップページに設定していますので、その方法をまとめています。

トップページが記事一覧だという場合はhome.phpにカスタムを加える必要があります。archives.phpのカスタムと同じ要領です。

固定ページをトップページに設定する

記事一覧ではなく固定ページを使用したトップページに作り変えるカスタムです。このブログのトップページも固定ページを利用しています。カテゴリーごとにおすすめ記事をまとめたりできて便利です。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

まずは固定ページを新規追加で作成します。レイアウトを「サイドバーなし(1カラム)」で作成することでトップページが1カラムになります。

作成した固定ページには分かりやすいタイトルを付けて保存します。僕は「固定フロントページ(1カラム)」と付けました。

保存した固定ページをトップページへと設定するには、「外観 > カスタマイズ > ホームページ設定」を開きます。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

設定のポイント
  • ホームページの表示 > 固定ページ
  • ホームページ > 作成した固定ページ
上記の設定をすれば作成した固定ページがトップページになります。

「投稿ページ」という項目はこの時点ではまだ設定しませんので気にしないでください。

トップページとは別に記事一覧ページを作る

トップページに固定ページを設定してしまうと、従来の記事一覧ページがなくなってしまいます。なのでトップページとは別に記事一覧ページを作成する必要があります。(必要な場合は)

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

このブログのトップページ

僕はトップページには固定ページを設定しましたが、その中に「すべての記事一覧」というリンクボタンを置いて記事一覧ページへの誘導をしています。トップページとは別に記事一覧だけのページも見られます。

記事一覧ページの作り方は、同様に固定ページを新規追加で作成します。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

本文はなにも入力する必要はなく、分かりやすいタイトルとパーマリンクを設定します。

タイトルは「すべての記事」、パーマリンクは「archives」など好きなワードで設定してください。

本文は入力せずに公開保存します。作成したページを記事一覧ページへと設定するには、「外観 > カスタマイズ > ホームページ設定」を開きます。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

設定のポイント
  • 投稿ページ > 作成した固定ページ

上記の設定をすれば、空白で作成した固定ページが記事一覧ページになります。

トップページと記事一覧ページが別々になりました。

ページ作成時に設定したパーマリンクが記事一覧ページのURLとなります。

  • https://akistyle.jp → トップページ(固定ページ)
  • https://akistyle.jp/archives記事一覧ページ

ということになります。従来のトップページであった記事一覧ページは「/archives」が付いたリンクになりました。

トップページ上に「すべての記事一覧」というリンクを置いておくと便利です。

記事一覧ページを1カラムにする

記事一覧ページの1カラムにする方法はOPEN CAGEさんの「WPストークのトップページをワンカラムにするカスタマイズ | OPENCAGE」を参考にさせて頂きました。詳しくはそちらへ。

僕は自分の使用するカード型レイアウトだけをカスタムしました。ほとんど参考記事の通りです。

参考記事ではhome.php(トップページ)をカスタムしていますが、このブログの場合トップページには固定ページを表示させているのでhome.phpをカスタムしても効果がありませんでした。

このブログでの記事一覧ページをカスタムするにはarchives.phpに変更を加えていきます。

まずは62行目にある下記コードを削除します。

これでサイドバーが消えます。

次に3行目にある下記コードを探します。

このコードの中の「wrap」と「cf」の間に「page-full wide」を付け加えます。

これでメインコンテンツが中央に表示されて記事一覧が1カラムになります。

カード型レイアウトを3カラムに調整

これも参考記事のままの作業でしたが軽くまとめておきます。

上記の方法で1カラムにした状態だとフルサイズ幅でカード型レイアウトが表示されています。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

これだとリンクカードが2カラムのまま大きくなって表示されているので、リンクカードを3カラムにする調整をします。

下記コードをスタイルシートに追加します。子テーマのstyle.cssです。

これでフルサイズ幅の中にリンクカードが3カラムで表示されるようになります。(コンテンツ幅が768pxを下回ると2カラムに切り替わります。)

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

これでカード型レイアウトがバランスよく3カラムになりました。3カラムなので記事の表示数もバランスよく9個に変更。

他のレイアウトでの調整方法はOPEN CAGEさんの参考記事へどうぞ。

キーワード検索の結果一覧ページを1カラムにする

上記の4つまでをカスタムしたところで全てを1カラムにできたと思っていたけど、キーワード検索して表示される結果一覧ページが1カラム化できていませんでした。

【ストーク】トップページから記事一覧まで完全ワンカラムにしてみた

カード型の3カラム化だけ適応されています。(サイドメニューが無いのはウィジェットを空にしたためです。)

自分でもよく気が付いたなと思います。キーワード検索はあんまり使う人いないんじゃないかな。

ということでキーワード検索の結果一覧ページはsearch.phpに変更を加えていきます。

まずは37行目にある下記コードを削除します。

これでサイドバーが消えます。

次に3行目にある下記コードを探します。

このコードの中の「wrap」と「cf」の間に「page-full wide」を付け加えます。

これでキーワード検索の結果一覧ページが中央に表示されて1カラムになります。

まとめ:まだまだストークでいける

OPEN CAGEからついにストークの後継テーマであるスワローが登場しました。ストークから無駄を省きシンプルになったイメージで少し魅力も感じます。

しかしそれほど大きな変更点がなかったので乗り換えるまでは至らないかなと。完全に1カラム化にしたので心機一転ストークで頑張っていこうと思います。

以上がストークをワンカラム化した方法でした。

ストークを完全カラムにする方法

この記事をSNSでシェア!

カメラアクセサリーならK&FConcept


K&F Concept

三脚からマウントアダプタまでコスパ抜群のカメラアクセサリーが揃っているのでカメラ初心者におすすめです。

≫マウントアダプタ使用レビュー記事

≫カメラバッグ使用レビュー記事


ABOUT MEこの記事を書いた人

富士山写真と登山をエンジョイする富士山フォトブロガー。 富士山写真のこと、撮影スポット情報、登山情報などブログで発信中。主に富士山撮影を目的にした登山を好み、低山から南アルプスまで幅広く挑戦中である。富士登山5回。

お問い合わせはこちら