JIN のカテゴリページを１カラムにする方法

スマフォもシングルカラムだし、PCもいっそのことシングルカラムにしたいなあ

JIN のカテゴリページは、デフォルトで２カラム。これを設定で変更することはできません。テンプレートファイルを編集して実現する方法をご説明します。

あと、１カラムにする利点について気がついたことがあるので合わせてご紹介します。

この記事を書いた人

WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。

WP愛だけじゃ生きていけない😂

JIN のカテゴリページは２カラムのみ

JIN は、この設定を変更することはできません。

過去、同じことを検索していた人もいましたが、サポート側からの回答は自分で解決してください、とのことでした。

ちょうど私もカテゴリページを１カラムにしたかったので、テーマファイルを触ってみたらうまくいったのでシェアします。

JIN のカテゴリページを１カラムにする前の準備

少しだけ準備が必要です

FTP でサーバーへ接続する

FTP は、コンピュータとサーバーを接続するためのアプリケーション。テーマファイルを編集する時は必須のアプリです。

サーバーで用意してある FTP 画面でも同じことができます。しかし、操作はアプリの方が楽ので、できればアプリを用意しましょう。

FTPの接続方法、設定方法などについては、契約しているサーバー会社のマニュアルなどを参考にしてください。

FTP アプリは、Windows なら FFFTP、Mac ですと、Filezilla がそれぞれ無料で使えるのでおすすめです。

テーマファイルは JIN の子テーマを使っていること

WordPress のテーマは、親テーマと子テーマがあります。

まず、WordPress のテーマ設定で、JIN の子テーマであることを確認してください。

子テーマは、親テーマのファイルに渡したい命令などを書くと、親テーマよりも優先して実行してくれます。

今回、親テーマにあるファイルを子テーマにコピーし、それを加工して読み込ませることで、カテゴリページの１カラム化を実現しています。

JIN の子テーマはこちらからダウンロードできます。

WordPress へアップロードして有効化するだけですぐに利用できるようになります。

JIN のカテゴリページを１カラムにする方法

次のような流れになります。

<main id="contents" class="main-contents <?php echo is_article_design(); ?> <?php is_animation_style(); ?>" itemscope itemtype="https://schema.org/Blog">

<main id="onecolumn960" class="main-contents <?php echo is_article_design(); ?> <?php is_animation_style(); ?>" itemscope itemtype="https://schema.org/Blog">

	<?php get_sidebar(); ?>

	<!-- ?php get_sidebar(); ? -->

見た目の微調整をする

少しだけ見た目調整をしてみました。

本文の外枠を消す

せっかく広々となったのでコンテンツの外枠を外して広々と見えるようにしました。

フッターの幅を全幅にする

フッターの幅がコンテンツ幅だとバランスが悪く見えるので、全幅にしました。

JIN を１カラムにして出来なくなること

１カラムにすると、ウィジェトが表示されなくなります。

表示されなくなるウィジェトの場所は次のとおりです。

• サイドバー
• サイドバー追尾【PC】
• トップページ上部
• トップページ下部
• 記事上部
• 記事下部

どうしてJIN のカテゴリページを１カラムに？

１カラムにしたかった理由は次の通り。

いままではサイト回遊率とか広告を配置のためという理由で２カラムにしていました。

ですが、実際にその部分をみるのって、よほどブログ記事がよかった、もっと読みたいと思った時くらいではないでしょうか。

普通に読んでいると逆に邪魔に感じることが多くないですか？

１カラムの内容に集中して欲しい、読み手も記事に集中できる、というメリットがあるのではないかと。

ページスピードは、実際にご自分のサイトで試してみてほしいのですけど、投稿ページを１カラムにするだけで表示スピードが上がります。

決して難しくはないので、もし１カラムにしたいなあというときは試してみてください。

最後まで読んでくださりありがとうございました。

おまけ：JIN 以外のテーマでカテゴリーページを１カラムにできる？

少し気になったので他のテーマはどんな感じなのか調べてみました。

SWELL のカテゴリーページ

SWELL のカテゴリーページ設定は、カテゴリーページで編集することができます。

1. 投稿 → カテゴリー へ進む
2. カテゴリーを一つ選んで編集画面へ移動する
3. 編集画面でサイドバーの部分を非表示にする

SWELL のカテゴリーページは、ブログパーツを呼び出すことで、追加情報を表示させることができます。

Lightning G3 のカテゴリーページ

Lightning G3 のカテゴリーページは、カスタマイズページで編集できます。

1. 外観 → カスタマイズ → Lightning レイアウト設定 → カラム設定
2. アーカイブページ [投稿] の設定を１カラムにする

Lightning のカテゴリーページは、カテゴリーリスト一覧を表示できますが、JIN や Lightning のように追加情報を表示させることができません。

追加情報を表示させるには、別のカスタマイズが必要なようです。

ウィジェットを挿入できたりするかと思ったけれど、それも無さそうなので、phpファイルを弄るほうが早いかも。

Cocoon のカテゴリーページ

Cocoon は、カテゴリーページに設定があります。また、追加情報を加える場所があるので、カテゴリーリスト以外に情報を追加することができます。

Cocoon が一番シンプルにカテゴリーページを作れる。

Cocoon｜個別の詳細なカテゴリページを作る方法（カテゴリページのコンテンツ化）