Cocoonで実際にやった設定まとめ｜子テーマ・目次・アイキャッチ・スマホ表示をカスタマイズ

僕のこのブログはWordPressテーマ「Cocoon」を使ってます。

みんな使ってる？「Cocoon」。

 

超いい。

ぜひともみんなに使ってもらいたいのだが、

僕が諸々設定した内容を公開しますので、下々の諸君はぜひ参考にするように。

 

その１/
WordPressのテーマが更新されたら、自分で書いたCSSが消えてしまう問題

まずこれな！超大事。

WordPressのテーマを直接編集している場合、テーマがアップデートされたときに、自分で追加・変更したCSSが消えてしまう可能性がある。

せっかく時間をかけてカスタマイズしたのにショック。。。

しかもwordpressは勝手に更新しやがる！

解決方法：Cocoon Child（子テーマ）を使う

Cocoonには、カスタマイズ用の「Cocoon Child」という子テーマがあります。

親テーマであるCocoonが更新されても、子テーマ側に追加したCSSやカスタマイズ内容は基本的にそのまま残すことができます。

特に以下のような場合は、子テーマを使っておくと安心です。

• style.cssを編集したい
• functions.phpにコードを追加したい
• テーマのデザインをカスタマイズしたい

Cocoonをカスタマイズするなら、まず子テーマを導入しておくのがおすすめです。

「Cocoon Child」は公式サイトからダウンロードできるので、外観からテーマ設定してね♪

その2/
Cocoonで目次表記は邪魔すぎる問題

Cocoonでは記事内に自動で目次を表示できます。

便利な機能ですが、僕は別にいらん派。

いる？これ。

目次は、サイト全体で消す方法と、特定の記事だけ消す方法があります。

パターン①：サイト全体で目次を消す

WordPress管理画面から、以下の順番で進みます。

これで、サイト全体の記事から目次を非表示にできます。

パターン②：特定の記事だけ目次を消す

「基本的には目次を表示したいけど、この記事だけ消したい」という場合は、記事ごとに設定できます。

その3/
記事の最初に表示されるアイキャッチ画像、うざい問題

Cocoonでは、設定によって記事本文の一番上にアイキャッチ画像が自動表示されます。

いや、「記事一覧ではアイキャッチを使いたいけど、記事本文の最初にはいらんがな〜！」

パターン①：サイト全体でアイキャッチを消す

これで、記事本文の上にアイキャッチ画像が表示されなくなります。

なお、この設定を変更しても、トップページの記事一覧やSNSでシェアしたときの画像にはアイキャッチを利用できます。

パターン②：特定の記事だけアイキャッチを消す

その4/
スマホ表示でカテゴリー名が画像に被ってしまう問題

これ、スマホで見たら、ブログのアイキャッチとカテゴリー名が被りすぎている！

いやなんも見えへんがな！

スマホでブログを確認したとき、カテゴリー名がサムネイルやアイキャッチ画像の上に大きく表示されて、画像が見えにくくなることがある。

特にカテゴリー名が長い場合は、かなり画像を覆ってしまうこともあります。

そんな場合は、スマホ表示のときだけカテゴリー表示を調整するとスッキリします。

スマホでは画像上のカテゴリー名を消す

以下のCSSを「外観」→「カスタマイズ」→「追加CSS」、または子テーマのstyle.cssに追加します。

@media screen and (max-width: 768px) {

  .entry-card-thumb .cat-label,
  .widget-entry-cards .cat-label {
    display: none !important;
  }

  .eye-catch-wrap .cat-label {
    display: none !important;
  }

}

その5/
もう少しおしゃれにならんのかスマホデザインよ。問題。

カテゴリー表示を消しただけでは、少しシンプルすぎると感じる場合もあります。

そこで、記事カードに角丸や影を付けることで、スマホ表示を少しモダンなWebマガジン風にできます。

スマホの記事一覧をカード風にするCSS

@media screen and (max-width: 768px) {

  .entry-card-wrap,
  .widget-entry-cards .widget-entry-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 14px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .entry-card-thumb {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .entry-card-thumb img {
    border-radius: 10px !important;
  }

  .entry-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #1f2937 !important;
    margin-bottom: 6px !important;
  }

}

その6/
カテゴリー名を画像から移動して、投稿日付の横に表示する

画像の上にカテゴリー名があると、せっかくのサムネイル画像が見えにくくなります。

そこで、画像上のカテゴリーラベルを消し、カテゴリーを投稿日付の近くに小さなタグとして表示するデザインにしました。

これなら画像をしっかり見せながら、カテゴリーも分かりやすくなります。

スマホ用のカテゴリー表示CSS

@media screen and (max-width: 768px) {

  /* 画像上のカテゴリーラベルを非表示 */
  .entry-card-thumb .cat-label,
  .widget-entry-cards .cat-label,
  .eye-catch-wrap .cat-label {
    display: none !important;
  }

  /* 日付とカテゴリーを整列 */
  .entry-card-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  /* 投稿日 */
  .post-date,
  .post-update {
    font-size: 11px !important;
    color: #8c8c8c !important;
  }

  /* カテゴリータグ */
  .entry-card-categorys .entry-category {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #19448e !important;
    background: #edf2f9 !important;
    border: 1px solid #d3e2f5 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
  }

}

まとめ

WordPressテーマ「Cocoon」で実際に行った設定やカスタマイズをまとめましたが、

おさらい。

Cocoonはそのままでも使いやすいテーマですが、少しカスタマイズするだけで、自分好みのブログデザインに近づけることができます。

 

色々試した結果最終的に辿りついたテーマがこれだったので、ぜひともみんなにおすすめしたい。

みんなもブログやってみようぜ！