サイト型トップページの作り方を公開しています!Check

Cocoonトップページのカラム数を自由に変更する方法|新着記事・人気記事・ナビカード対応

アイキャッチ|カラム Cocoon
Cocoon
記事内に広告が含まれています

私が実際に導入している、トップページ作成の効率を飛躍的に向上させるカスタマイズを紹介します!

当記事について
  • 2カラム、3カラムのほか4カラムを追加し、より柔軟なレイアウトに対応しました
  • 2025/01/25 掲載コードを修正しています

Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。

しかし、標準設定では以下のような悩みを持つ方もいるかもしれません。

  • 記事カードを横並びにしたい
  • カラム数を柔軟に調整したい

Cocoonには「横並び表示」設定もありますが、これは横スライド仕様のため静的に並べるにはCSSの追加カスタマイズが必要です。

今回のカスタマイズではカラム数をサイドバーから簡単に選択・切り替えできるようにします。複雑なCSS編集なしでデフォルトの他6種類のカラムレイアウトを実現できます。

カスタマイズ内容
  • サイドバーから簡単操作でレイアウト切り替え
    → デフォルトに加え、以下の6種類のカラムレイアウトを選べます。
    • 2カラム(モバイル:1カラム/2カラム)
    • 3カラム(モバイル:1カラム/2カラム)
    • 4カラム(モバイル:1カラム/2カラム)
  • ブロックエディタに対応
    ブロックで表示する新着記事」「人気記事」「ナビカード」で利用可能です。
  • 導入が簡単
    → コードを2ヶ所に貼り付けるだけでOK!作業時間は約5分。
    • →不要になった場合、追加したコードを削除すると元に戻ります。
  • 初心者でも挑戦しやすい
    • コーディング知識が少なくても、サイドバーからの簡単操作でレイアウトを変更できます。
活用例:サイト型トップページ

このカスタマイズは、当サイトのサイト型トップページ作成でも使うことができます。

「新着記事」「人気記事」各セクションに分け、目的に応じてカラム数を変更することで、見やすく整理されたトップページを簡単に作成可能です。

他のブロックデザイン切り替えシリーズも紹介しています。よく使うブロックがありましたらぜひお試しください。

スポンサーリンク

この記事を書いた人

はっちゃんです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計340件(月間約20件)購入いただいています

実装イメージ|新着記事・人気記事のカラム数をサイドバーで切り替える

このカスタマイズでは、ブロックで表示した「新着記事」「人気記事」「ナビカード」のカラム数を、6種類のスタイルからサイドバーで選択できるようにします。

レイアウトのバリエーションは以下の通りです。

  1. デフォルト(縦並びになっています)
  2. 2カラム(モバイル1カラム)
  3. 2カラム(モバイル2カラム)
  4. 3カラム(モバイル1カラム)
  5. 3カラム(モバイル2カラム)
  6. 4カラム(モバイル1カラム)
  7. 4カラム(モバイル2カラム)

操作イメージの動画をご覧ください。

  1. ブロックで「新着表示」を表示
  2. 表示スタイルを「大きなサムネイル表示」に変更
  3. サイドバーでデフォルト→2カラム→3カラムにスタイルを切り替えています

カラムレイアウト例

横並びにするためにdisplay: grid(グリッドレイアウト)を使い、各列が同じ幅になるように均等配置しています。

2カラム(モバイル1カラム)

2カラム(モバイル2カラム)

3カラム(モバイル1カラム)

3カラム(モバイル2カラム)

4カラム(モバイル2カラム)

同一ページ内でのレイアウト切り替え

カラム数を変更したい場合、毎回手動でカスタムクラスやCSSを追加する必要がありません。同じページ内でレイアウトを切り替えられるためトップページ作成の効率化ができます。

スポンサーリンク

Cocoon「新着記事」「人気記事」「ナビカード」ブロックの使い方

「新着記事」および「人気記事」「ナビカード」ブロックの使い方は、サイドバーでスタイル選択が追加されている他は通常のブロック操作と同様です。

  • Step1
    ブロックメニューを選択

    投稿ページ、または固定ページのブロックエディタで「新着記事」「人気記事」「ナビカード」のいずれかのブロックを選択します。

    ブロックトップページ/新着記事設定
    人気記事

    ナビカード」は表示するメニューをクリックします。

    ナビカード設定
  • Step2
    表示設定

    サイドバー「ブロック」タブ→「スタイル」で表示設定をおこないます。

    • 表示する記事の数
    • 表示タイプ
      • 通常のリスト(小さなカードです)
      • 大きなサムネイル表示(当カスタマイズを使う場合はこちらを推奨します)
  • Step3
    カラムスタイルを選択(当カスタマイズで追加)

    サイドバーからお好みのスタイルをクリックします。

  • Step4
    動作確認

    動作確認をおこない、プレビューで表示できたら完成です。

スポンサーリンク

当カスタマイズの注意点と特徴

イメージ画像/ポイント

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

  • スキンによる影響
    • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
  • 子テーマを利用
    • 子テーマを使用することで安全性を確保しています。
    • 万が一不要になった場合は、追加したコードを削除することでデフォルトに戻せます。
  • PHPエラーが発生した場合の対処
    エラー表示が出て保存できない場合、以下の項目を確認してください。
  • WAF設定
    サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
  • ベーシック認証
    • サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
スポンサーリンク

実装手順|Cocoon新着記事・人気記事ブロックのカラム数をサイドバーで切り替える

実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。

PHPの設定

スタイル切り替えをエディタに追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

各スタイルを指定する

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

カスタマイズ前にバックアップをおこないましょう。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名Turicco
サイトURLhttps://turicco.com/
お問い合わせhttps://turicco.com/contact/
購入方法コンテンツ販売サービス、codoc(コードク)を利用しています。
詳しくは購入者向けFAQをご覧ください。
納品方法記事公開
販売価格500円
お支払い
方法
クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについてcodoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。
シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. あいこ より:

    お世話になります。
    とても有意義なコードを教えていただきありがとうございます。

    現在、ヘッダー下におすすめカードを表示しています。
    記事のアイキャッチを大きくするとおすすめカードの画像サイズも大きくなります。

    アイキャッチのみを大きくしたいのですが、できますでしょうか?

    • はっちゃん はっちゃん より:

      > あいこ さん

      ありがとうございます。
       
      おすすめカードの画像を大きくしない場合は、下記のCSSを追加してお試しいただけますでしょうか。お手数をおかけいたします。
       

      /* おすすめカードの画像幅調整 */
      .recommended .widget-entry-cards.card-large-image .a-wrap {
      width: unset; /* 幅の設定をリセット */
      }

      /* 画面幅834px以下の場合*/
      @media screen and (max-width: 834px) {
      .recommended .widget-entry-cards.card-large-image .a-wrap {
      width: 48%; /* 幅を48%に設定 */
      }
      }

タイトルとURLをコピーしました