スキンの主な特徴や使い方をチェック！
カスタマイズできるデザインスキン

SILKはキーカラーやダークスキンなど、各種設定に対応したブロックエディター向けCocoonスキンです。

スキン最新版はこちら

WordPressテーマ「Cocoon」のカスタマイズとスキンの作り方

2020.10.11
この記事は約41分で読めます。
ろこ
ろこ

WordPress歴7年、現在21歳の大学生です。
WordPressで構築された当サイトのカスタマイズを担当しています。

WordPressテーマ「Cocoon」のシンプルなデザインや独自設定による豊富な機能を保ちつつ、より機能性・カスタマイズ性の高いCocoonスキンを作成しました。

スキン情報
Cocoon専用のデザインスキン「SILK（シルク）」デモ画像。
Cocoonスキン「SILK（シルク）」のデモ画像
Cocoonスキン「SILK」のシンプルスカイオプション。
Simple Sky
Cocoonスキン「SILK」のサマーグリーンオプション。
Summer Green
Cocoonスキン「SILK」のリーフグリーンオプション。
Leaf Green
Cocoonスキン「SILK」のレモンイエローオプション。
Lemon Yellow
Cocoonスキン「SILK」のパステルピンクオプション。
Pastel Pink
Cocoonスキン「SILK」のプラムパープルオプション。
Plum Purple
Cocoonスキン「SILK」のインディゴホワイトオプション。
Indigo White
Cocoonスキン「SILK」のスイスチョコレートオプション。
Swiss Chocolate
Cocoonスキン「SILK」のネイビーイエローオプション。
Navy Yellow
Cocoonスキン「SILK」のチャコールグレーオプション。
Charcoal Gray
Cocoonスキン「SILK」のダークブルーオプション。
Dark Blue
Cocoonスキン「SILK」のバーミリオンブラックオプション。
Vermilion Black
スキン名SILK（シルク）
最新版Ver. 2.1.6
作成者ろこ
対応テーマCocoon
キーカラー対応
ダークカラー対応
AMP対応（軽量版）
エディターGutenberg推奨
ライセンスGPL
スキンに関する質問や要望、不具合報告などはお問い合わせよりご連絡ください。
SILKをダウンロード
オプションをダウンロード

以下では作成したスキンをもとに、Cocoonテーマのカスタマイズ方法やCocoonスキンの作り方について解説します。

SILK（シルク）の使い方

Cocoonスキンはサイトのデザインを変更できる機能。

SILKはCocoonデフォルトと異なるデザインから設定やカスタマイズを始めたいユーザー向けに作成したので、

  • キーカラー設定
  • ダークスキン
  • ブロックエディター

などに対応した、他のCocoonスキンにはない大きな特徴がいくつかあります。

Cocoonのデザインを刷新

SILKの色設定（カラーパレット）

本文内の各ブロック・フォーマットはもちろん、サイドバーやインデックスリスト、各種機能を含むレイアウトの細部に至るまで、Cocoonテーマのデザインを刷新しました。

刷新したデザインにはマテリアルデザインを取り入れており、陰影や配色などはガイドラインに従っています。

Material Design

一部AMPにも対応していますが、スキンのAMP用CSSは容量制限でかなり軽量化しているため、スキンのスタイルを有効にしている場合でも適宜カスタマイズが必要になります。

キーカラー設定を用いた色変更

Cocoon設定のキーカラーでスキンの色を変更。

Cocoon設定の全体タブにある『キーカラー』を設定することにより、サイト全体のポイントとなる色（見出しなど）が指定されます。

SILKで適用されるポイントはCocoonデフォルトで適用されるポイントとは異なるため、スキンのキーカラーを自由に変更することができます。

ダークスキンとしても機能

Cocoonスキン「SILK」をダークスキンとして使用した場合。
SILK（ダークスキン）のデモ画像

ダークスキンとは黒色を基調としたCocoonスキンのことで、現時点では

  • ダークエンジ
  • ダークルリ
  • ダークカモノハ

の1種類3色しかありません。

そこで、ダークスキンとしても機能するよう対応しました。

ダークスキン設定

文字色を白色【#ffffff】、背景色を黒色【#424242】に設定した場合。

Cocoon設定でサイト全体の文字色を変更。

Cocoon設定の全体タブにある『サイトフォント』の文字色を白色に設定し、サイト全体の文字色を白色に変更してください。

Cocoon設定でサイト全体の背景色を変更。

同様に、Cocoon設定の全体タブにある『サイト背景色』の背景色を黒色に設定し、サイト全体の背景色を黒色に変更してください。

キーカラーやヘッダー色、フッター色など、Cocoon設定で各パーツの色を黒色基調に合わせて変更することで、よりオリジナルなダークスキンとして機能します。

一部の背景色透過をキャンセルする設定
define('SILK_DARK', ['#fff', '#fff']);

SILKはダークスキンに対応するために、カード型リンクrgba(255,255,255,.2)や入力フィールドrgba(255,255,255,.8)などの背景色を透過させています。

背景色を透過させたくない場合や別の背景色を指定したい場合、子テーマのfunctions.php等で定数’SILK_DARK’を定義してください。

オプション設定でデザイン変更

Cocoon設定のバックアップにスキンデザイン用の「オプション設定」を追加。

SILKはCocoon設定に対応していることから、Cocoon設定でサイトのデザインを自由に変更することができますが、もっと手軽にデザインの変更ができるオプション設定を用意しています。

好きな色のオプションファイルを選択し、Cocoon設定の追加を行う方法。

オプション設定はオプションファイルからCocoon設定の各設定を追加し、自動でサイトのデザインを変更する機能です。

SILKを設定している場合
  1. SILKのオプションファイルをダウンロードする。
  2. ダウンロードしたZIPファイルを解凍する。
  3. Cocoon設定のバックアップページに移動する。
  4. オプション設定の「ファイルを選択」を押す。
  5. 好きなデザインのオプションファイルを選択する。
  6. 「設定の追加」を押し、設定が追加されれば完了。
Cocoon設定にSILKのオプション設定を追加した場合。

オプション設定の追加が完了すると、

  • キーカラー
  • サイトフォント
  • サイト背景色
  • ヘッダー色
  • フッター色

など、Cocoon設定の主なデザイン項目が自動的に設定されます。

Cocoon設定の一部が上書きされるため、オプション設定を追加する前には必ずCocoon設定のバックアップファイルを取得しておいてください。

コンテンツのデザインを追加

ブロックエディターのブロックにCocoonスキン「SILK」専用スタイルを追加。

いくつかのブロックにスタイルを追加しており、また1カラム時の全幅表示にも対応するなど、ブロックエディターの機能を強化しています。

SILKの投稿・固定ページで、コンテンツを全幅表示する方法。

グループブロックやカラムブロックなどは配置設定から全幅表示を選択できます。

サイドバーが表示されていない1カラムのページでは、全幅表示を設定しているブロックはブラウザの画面幅いっぱいに表示されます。

グループブロックのスタイルで『アコーディオン』を選択し、グループブロック内にトグルボックスブロックを複数並べます。

注意点

『アコーディオン』を選択したグループブロックにトグルボックス以外のブロックを入れても、実際のページには表示されません。

比較１
  • 比較情報を入力
  • 比較情報を入力
  • 比較情報を入力
比較２
  • 比較情報を入力
  • 比較情報を入力
  • 比較情報を入力

グループブロックのスタイルで『比較表』を選択し、グループブロック内にアイコンリストブロックを複数並べます。

注意点

『比較表』を選択したグループブロックにアイコンリストボックス以外のブロックを入れても、実際のページには表示されません。

Cocoonスキン「SILK」のサムネイル画像。
画像リンク

画像ブロックのスタイルで『影』を選択します。

パネルボックス

グループブロックのスタイルで『パネル』を選択します。

１

２

３

カラムブロックのスタイルで『モバイル』を選択すると、全ての画面幅でカラム表示します。

ヘッダーセルヘッダーセルヘッダーセルヘッダーセル
テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル

テーブルブロックのスタイルで『中央寄せ』を選択します。

テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル

テーブルブロックのスタイルで『水平』を選択します。

ヘッダーセルヘッダーセルヘッダーセルヘッダーセル
テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル
リンクリンクリンクリンク

テーブルブロックのスタイルで『キーカラー』を選択します。

リストブロックのスタイルで『リンク』を選択し、各リストのテキストにリンクを指定します。

Cocoonスキン「SILK」の横長ブログカードデザイン。

ブログカードブロックのスタイルで『横長』を選択します。

Cocoonスキン「SILK」の複数ブログカードデザイン。

ブログカードブロックのスタイルで『カラム』を選択します。

Cocoonスキン「SILK」のテキストブログカードデザイン。

ブログカードブロックのスタイルで『テキスト』を選択します。

区切りブロックのスタイルで『切り取り線』を選択します。

テキストの一部またはすべてを選択し、ツールバーのよりリッチなテキスト制御から『下線』をクリックします。

ただし、ブロックエディターを前提に作成しているため、クラシックエディターは基本的にサポートしていません。

SILKを使用する際は、ブロックエディターの有効化を推奨します。

ブロックエディターの機能拡充

Cocoonスキン「SILK」で再利用ブロックを簡単に編集する方法。

Cocoonテーマのブロックエディター周りを補完する機能もいくつか追加しており、管理画面のメニューからすぐに再利用ブロックを追加・編集することができます。

SILKの画像系ブロックで、Cocoon独自のサムネイルサイズを選択する方法。

画像ブロックやギャラリーブロックなどの画像サイズを指定できるブロックでは、Cocoonテーマ独自の各サムネイルサイズを選択項目に追加しています。

SILK専用のブロックパターンを用意。

SILK専用ブロックパターンを追加しており、比較表や全幅デザインなどを簡単に作成することができます。

SILKのショートコードブロックで、Cocoon独自のショートコードを挿入する方法。

ショートコードブロックでCocoon独自のショートコードを使用する際、サイドバーのショートコード設定から選択するだけで自動的に挿入されます。

SILKの囲みボタンブロックで、アフィリエイトタグ用ショートコードを挿入する方法。

Cocoonのアフィリエイトタグ管理機能で生成されるショートコードを囲みボタンブロックで用いる場合、サイドバーのショートコード設定から挿入できます。

SILKを設定中のCocoonブログカードブロックで、投稿・固定ページのURLを検索する方法。

Cocoonのブログカードブロックでは、ツールバーにあるURL検索ボタンから投稿や固定ページのURLを検索・挿入し、内部ブログカードを簡単に作成することができます。

目次に戻る

Cocoonスキンの作り方

Cocoonスキンを作成するためのスキンテンプレート。
スキンテンプレート
  • amp.css
  • functions.php
  • javascript.js
  • keyframes.css
  • style.css

Cocoonスキン作成の雛形となるスキンテンプレートには、画像ファイルを格納するimageフォルダの他に上記ファイルが同梱されています。

Cocoon設定を保存したときだけは、Cocoonスキンのfunctions.php読み込みタイミングが異なる点に注意。
仕様

Cocoonスキンのfunctions.phpが読み込まれるタイミングは、通常時とCocoon設定保存時で異なります。

CocoonスキンとWordPressテーマの作り方は似ていますが、PHPのカスタマイズをCocoonスキンのfunctions.phpに記述する場合、WordPressテーマのfunctions.phpにはない仕様がある点に注意しましょう。

スキン制御を動的に操作する

一般的なスキン制御の例
global $_THEME_OPTIONS;
$_THEME_OPTIONS = [
  'site_key_color' => '#00acc1',
  'header_layout_type' => 'center_logo',
  'site_font_weight' => 500,
  'appeal_area_title' => 'Appeal Area Title',
  'entry_card_border_visible' => 1
];

CocoonスキンからCocoon設定値を変更するためのスキン制御機能には、

  • PHP
  • CSV
  • JSON

の3つの方法が用意されています。

スキン制御を言い換えると、Cocoon設定値を操作するために用意されたグローバル変数（$_THEME_OPTIONS）の制御です。

PHPによるスキン制御を活用すれば、Cocoon設定値を動的に操作することができます。

スキン制御を活用し、Cocoon設定のアピールエリアボタンにアイコンを追加。
スキン制御を動的に操作する例
//アピールエリア設定のボタンメッセージ
add_action('get_header', function () {
  global $_THEME_OPTIONS;
  $icon = ' <i class="fas fa-chevron-circle-right"></i>';
  if ($message = get_appeal_area_button_message()) {
    $_THEME_OPTIONS['appeal_area_button_message'] = $message.$icon;
  }
});

例えば、テンプレート読み込み時に実行されるアクションフック’get_header’を用い、スキン制御によってCocoon設定値をカスタマイズします。

Cocoon設定にはスキン制御によるカスタマイズが反映されず、いつでも設定を変更できる例。

実行タイミングの違いから、管理画面内のCocoon設定上にはスキン制御が反映されないので、該当部分の設定は変更することができます。

特定ページのみスキン制御を操作する例
//特定の固定ページのみ通知設定を変更する場合
add_action('get_header', function () {
  if (is_page('cocoon')) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['notice_area_visible'] = 1;
    $_THEME_OPTIONS['notice_area_message'] = 'Cocoonスキン';
    $_THEME_OPTIONS['notice_area_url'] = 'https://example.com/cocoon/';
  }
});

複数のCocoon設定値を特定の条件下のみ変更するようなカスタマイズも、スキン制御の動的な操作を取り入れるだけで簡単に記述できます。

キーカラー設定に対応する

CocoonスキンをCocoon設定のキーカラー設定に対応する方法。
キーカラー設定に対応させる方法
//ブロックエディターのキーカラー
add_filter('get_editor_key_color', function ($color) {
  return get_theme_mod('site_key_color') ?: '#4caf50';
});

//Cocoonスキンのキーカラー用CSS
add_action('get_template_part_tmp/css-custom', function () {
  $color = get_site_key_color() ?: '#4caf50';
  $text_color = get_site_key_text_color() ?: '#ffffff';
  
  echo '.article h2 {
    color: '.$text_color.';
    background-color: '.$color.';
  }
  
  .article h3 {
    border-color: '.$color.';
  }';
  
  global $_THEME_OPTIONS;
  $_THEME_OPTIONS['site_key_color'] = $_THEME_OPTIONS['site_key_text_color'] = '';
});

//Cocoon設定のスキン制御リセット
add_action('cocoon_settings_after_save', function () {
  global $_THEME_OPTIONS;
  unset($_THEME_OPTIONS['site_key_color'], $_THEME_OPTIONS['site_key_text_color']);
});

キーカラー設定に対応したCocoonスキンを作成したいスキン開発者向けに、デフォルトキーカラー'#4caf50'、デフォルトキーテキストカラー'#ffffff'としたサンプルコード実装済みのスキンテンプレートを用意しました。

テンプレートをダウンロード

CocoonスキンをCocoon設定のキーカラーに対応させれば、スキンユーザーはCocoon設定からサイトのキーカラーを自由に変更できるので、より汎用性が高いです。

先ほど解説したPHPによる動的なスキン制御を応用し、Cocoonテーマで生成するCocoon設定用CSSにテンプレートフックからCocoonスキンのキーカラー用CSSを追加します。

キーカラー設定対応のポイント
add_action('get_template_part_tmp/css-custom', function () {
  ...
  global $_THEME_OPTIONS;
  $_THEME_OPTIONS['site_key_color'] = $_THEME_OPTIONS['site_key_text_color'] = '';
});

add_action('cocoon_settings_after_save', function () {
  global $_THEME_OPTIONS;
  unset($_THEME_OPTIONS['site_key_color'], $_THEME_OPTIONS['site_key_text_color']);
});

Cocoonテーマのキーカラー用CSSは不要な場合、キーカラー・キーテキストカラー設定値をスキン制御で空文字にすることで生成されなくなります。

ただし、そのままだとCocoon設定保存後にキーカラー設定を変更することができなくなってしまうため、Cocoon設定保存時のみスキン制御からキーカラー・キーテキストカラー設定値を除外します。

カラーパレット

Cocoonで用意されているカラーパレットの色をスキン用にカスタマイズする方法。

ブロックエディターには色設定できるブロックが多数あり、デフォルト24色と拡張6色の合計30色が用意されています。

カラーパレットの配色をカスタマイズすることによって、スキンの印象を変えることができます。

カラーパレットのカスタマイズ例
add_filter('block_editor_color_palette_colors', function($colors) {
  $skin_colors = [
    'red' => '#e60033',
    'pink' => '#e95295',
    'purple' => '#884898',
    'deep' => '#55295b',
    'indigo' => '#1e50a2',
    'blue' => '#0095d9',
    'light-blue' => '#2ca9e1',
    'cyan' => '#00a3af',
    'teal' => '#007b43',
    'green' => '#3eb370',
    'light-green' => '#8bc34a',
    'lime' => '#c3d825',
    'yellow' => '#ffd900',
    'amber' => '#ffc107',
    'orange' => '#f39800',
    'deep-orange' => '#ea5506',
    'brown' => '#954e2a',
    'grey' => '#949495',
    'black' => '#333333',
    'white' => '#ffffff',
    'watery-blue' => '#f3fafe',
    'watery-yellow' => '#fff7cc',
    'watery-red' => '#fdf2f2',
    'watery-green' => '#ebf8f4'
  ];
  
  foreach ($skin_colors as $slug => $color) {
    $key = array_search($slug, array_column($colors, 'slug'));
    if ($key !== false) {
      $colors[$key]['color'] = $color;
    }
  }
  
  return $colors;
});

WordPress本体またはCocoonで用意されているカラーパレット用フックを用い、スキンのデザインに合わせてカラーパレット各色を変更します。

AMP対応

CocoonスキンのAMP対応について。

AMP設定でスキンのスタイルを有効化している場合、使用スキンから2種類のCSS

  1. style.css
  2. amp.css

が読み込まれます。

ろこ
ろこ

amp.cssが存在しないときはstyle.cssのみが読み込まれます。

AMPページのCSSにはサイズ上限（約75KB）があるので、スキンstyle.cssのサイズが大きいと上限を超えてしまいます。

AMP対応（軽量版）のカスタマイズ例
add_filter('amp_skin_css', function($css) {
  return '';
});

スキン制御でスキンのスタイルを無効化し、AMP非対応にしてしまってもいいのですが、スキンのstyle.cssをAMPページで読み込ませないようにする方法もあります。

ろこ
ろこ

スキンのデザインカスタマイズにおいて、通常ページのCSSをstyle.css、AMPページのCSSをamp.cssと分ける形で実装します。

JavaScriptのカスタマイズ

スキンに汎用性の高さを求めるなら、必要なJavaScriptのカスタマイズは特にありません。

ちょっとしたアニメーションならCSSで作成することができますし、HTMLの追加・削除はPHPでカスタマイズするべきです。

JavaScriptプラグインのオプション設定やJavaScriptを用いた新機能の追加なども考えられますが、WordPressにはプラグインや子テーマといった選択肢もある中、わざわざスキンで実装したいJavaScriptカスタマイズは限られるでしょう。

ろこ
ろこ

Cocoonは機能が豊富なので、SILKでJavaScriptを用いているのはアコーディオンメニューの開閉とページ内リンクのスムーススクロールのみです。

スムーススクロールのカスタマイズ例
(function ($) {
  $('.entry-content a[href^="#"]').click(function () {
    let link = $(this).attr("href");
    let id = $(link);
    if (link !== "#" && id[0]) {
      $("html,body").animate({scrollTop: id.offset().top,}, 800);
      return false;
    }
  });
})(jQuery);

スキンの汎用性とデザイン性はトレードオフなので、バランスを考えつつ作成してください。

スキンの管理

Cocoonスキンをプラグインで管理する方法。

自作スキンを本番環境とは別の開発環境で作成・管理しつつ、自動的に本番環境へ反映させたい場合、テーマやプラグインの自動更新機能を活用することで簡単に実現できます。

ろこ
ろこ

親テーマは直接カスタマイズすべきではありませんし、子テーマはサイト単位でのカスタマイズに使用するパターンが多いです。

Cocoon用に作成したプラグイン下でスキンを開発すれば、一元管理しつつ本番環境への自動更新にも対応できます。

スキン設定のカスタマイズ例
global $_THEME_OPTIONS;
$_THEME_OPTIONS['skin_url'] = untrailingslashit(plugin_dir_url(__FILE__)).'/original-skin/style.css';

プラグイン下にあるスキンはCocoon設定のスキン一覧に反映されないため、プラグインを有効化したときは自作スキンが設定されるようにスキン制御を加えておきます。

ろこ
ろこ

プラグインを無効化すれば、別のスキンを使用することもできます。

スキンを継続的に開発するなら、Git系サービスのリポジトリでスキン用プラグインをホスティングし、随時リリースしていくのが効率的です。

プラグイン更新用ライブラリ
目次に戻る

Cocoonのカスタマイズ方法

Cocoonをカスタマイズする際には、子テーマであるCocoon Childをインストールし、有効化する。
Cocoon Child
Cocoon Child（子テーマ）
  • style.css…CSSのカスタマイズを追加するファイル。
  • functions.php…PHPのカスタマイズを追加するファイル。
  • javascript.js…JavaScriptのカスタマイズを追加するファイル。

親テーマに直接カスタマイズを加えると、テーマ更新時にカスタマイズが全て消えてしまうので、カスタマイズする前には子テーマをインストールし、有効化してください。

トップページのカスタマイズ

Cocoonのトップページをサイト型にするカスタマイズ方法。

ブログのトップページをサイト型にし、読者に伝えたい情報を過不足なくまとめることで、ブログ全体を見通しやすくすることができます。

ろこ
ろこ

サイト型とは、トップページの記事一覧部分をコンテンツ化することであり、読者に見せるべき情報を取捨選択できるメリットがあります。

WordPressの表示設定から以下の設定を行うことで、設定した固定ページがトップページに表示されます。

  1. ホームページの表示を固定ページに設定。
  2. 公開中の固定ページをホームページに設定。
Cocoonのページ設定でページタイプを設定し、トップページを1カラムに変更する。

加えて、表示するページのページタイプを1カラムに設定し、本来はサイドバーに表示される情報も含めて整理することで、上から下へ優先度の高い順に必要な情報のみを見せることができます。

全幅を設定するカスタマイズ例
html {
  overflow-x: hidden;
}

.main {
  background-color: transparent;
}

.alignfull {
  position: relative;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.alignfull .wp-block-group__inner-container {
  width: 1000px;
  padding: 1em;
  margin: 0 auto;
}

@media screen and (max-width: 1260px) {
  .alignfull .wp-block-group__inner-container {
    width: auto;
  }
}

1カラムのページでは、グループブロックによる全幅デザインを活用すると、横並びの情報がより見やすくなります。

アイキャッチ・日付非表示のカスタマイズ例
add_action('get_header', function() {
  if (is_front_page()) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['eyecatch_visible'] = 0; //アイキャッチ非表示
    $_THEME_OPTIONS['post_date_visible'] = 0; //投稿日非表示
    $_THEME_OPTIONS['post_update_visible'] = 0; //更新日非表示
  }
});

投稿・固定ページの本文上にアイキャッチや日付を表示する設定にしている場合、スキン制御でサイト型トップページのみ非表示にすることができます。

タイトル非表示のカスタマイズ例
.entry-title {
  display: none;
}

トップページのタイトルを非表示にしたい場合、トップページ用固定ページのカスタムCSSに上記コードを記述します。

ヘッダーのカスタマイズ

Cocoon設定で設定する、ヘッダー背景画像のサイズについて。

ヘッダー背景画像は横幅のサイズ（px）が重要であり、画面の解像度より画像サイズが小さいと粗くなるので、横幅1920pxの画像を推奨します。

ろこ
ろこ

画面の解像度が2000px以上のディスプレイも中にはあるものの、シェア率は無視できる程度です。

Cocoon設定にあるヘッダーロゴサイズについて。

ヘッダーロゴ画像は余裕のある大きさで作成し、ヘッダーロゴサイズの幅（width）または高さ（height）のどちらかを設定することで調節できます。

ロゴ画像変更のカスタマイズ例
add_action('get_header', function() {
  if (is_page('another')) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['the_site_logo_url'] = 'https://example.com/another-logo.png';
  }
});

特定ページやモバイルなど、一部の場合のみロゴ画像を別の画像に変更したいときは、スキン制御でヘッダーロゴの画像URLを差し替えます。

ヘッダーロゴを消すカスタマイズ例
add_filter('the_site_logo_tag', function($tag, $is_header) {
  if ($is_header) {
    $tag = '';
  }
  return $tag;
}, 10, 2);

ヘッダーロゴを非表示にし、ヘッダー背景画像のみ表示させることができます。

ロゴテキストのカスタマイズ例
.site-name-text {
  font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  font-size: 40px;
}

@media screen and (max-width: 834px) {
  #header .site-name-text {
    font-size: 30px;
  }
}

@media screen and (max-width: 480px) {
  #header .site-name-text {
    font-size: 24px;
  }
}

ロゴ画像ではなく、ロゴテキストを表示する場合、サイトのデザインに合うフォントを指定するといいかもしれません。

ヘッダー余白のカスタマイズ例
/* ロゴ画像の場合 */
.logo-image {
  padding: 0;
}

/* ロゴテキストの場合 */
.logo-text {
  padding: 15px 0;
}

ヘッダーの高さだけでなく、ヘッダーロゴ上下の余白も適宜調節しましょう。

センターロゴを左寄せにするカスタマイズ例
.logo {
  text-align: left;
}

ヘッダーレイアウトはセンターロゴのまま、ヘッダーロゴだけを左寄せに変更することができます。

キャッチフレーズのカスタマイズ例
add_filter('get_tagline_text', function($text) {
  return '<a href="tel:000-1234-5678"><i class="fas fa-phone-square-alt"></i> 000-1234-5678</a>';
});

ヘッダーレイアウトがセンターロゴの場合、キャッチフレーズをヘッダートップまたはヘッダーボトムに配置することができます。

ろこ
ろこ

デフォルトではWordPressの一般設定で設定するキャッチフレーズが表示されますが、お問い合わせ先電話番号などの異なる内容にカスタマイズするのもありです。

ヘッダーロゴ前後のカスタマイズ例
//ヘッダーロゴ前（サイト検索窓）
add_filter('wp_header_logo_before_open', function() {
  get_search_form();
});

//ヘッダーロゴ後（自動再生動画）
add_filter('wp_header_logo_after_open', function() {
  echo '<video autoplay controls loop muted src="https://example.com/movie.mp4"></video>';
});

ヘッダーロゴ（主にセンターロゴ設定時）の上下左右に、

  • ハンバーガーメニュー
  • サイト検索窓
  • 自動再生動画
  • 画像スライドショー

といった機能を追加することができます。

ヘッダー横幅のカスタマイズ例
.header-in.wrap {
  width: auto;
}

ヘッダーロゴ前後に機能追加する際はヘッダーの横幅を画面幅いっぱいにし、無駄な余白を有効利用しましょう。

グローバルメニューのカスタマイズ

Cocoon設定のヘッダー設定でグローバルナビメニューの色を変更。

ヘッダーに表示されるグローバルメニュー（ヘッダーメニュー・ヘッダーモバイルメニュー）は、Cocoon設定のヘッダー設定から背景色や文字色を変更できます。

メニュー設定でCocoonのグローバルメニューにアイコンを表示する方法。

グローバルメニューで表示する各メニュー項目のラベルにFontAwesomeを挿入すれば、それぞれのメニューに異なるアイコンを表示させることができます。

また、画像メニューにしたい場合はグローバルメニューを設定せず、代わりにおすすめカードを設定する方法があります。

メニューテキストのカスタマイズ例
.navi-in a {
  font-size: 20px;
  font-weight: bold;
}

.sub-caption {
  font-size: 0.7em;
}

シンプルなグローバルメニューをカスタマイズするなら、メニューリンク内の各テキストフォントを調節するところから始めましょう。

マウスオーバー時背景色のカスタマイズ例
#navi .navi-in a:hover {
  background-color: #ff9800;
}

グローバルメニューをマウスオーバーしたときの背景色は、サイトのデザインに合わせるといいかもしれません。

表示中メニューのカスタマイズ例
.navi-in .current-menu-item > a,
.navi-in .current-menu-item > a:hover {
  color: #fff;
  background-color: #f48fb1;
  pointer-events: none;
}

グローバルメニューに設定しているページが表示されたとき、表示ページのメニュー項目のみ別の色に変更し、クリックを無効化するカスタマイズです。

モバイルのみ色変更するカスタマイズ例
#navi .navi-in .menu-mobile a,
#navi .navi-in .menu-mobile a:hover {
  color: #4caf50;
  background-color: #e8f5e9;
}

PC向けにグローバルメニューの色を設定したものの、ヘッダーモバイルメニューのみ色を変更したい場合、CSSで設定を上書きします。

モバイル横スクロールのカスタマイズ例
@media screen and (max-width: 834px) {
  #navi .navi-in > .menu-mobile {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  #navi .navi-in > .menu-mobile li {
    display: inline-block;
    width: auto;
  }
}

ヘッダーモバイルメニューを横スクロールで一列に並べると、メニュー部分の高さは最小限になるため、サイト上部からメインコンテンツまでの距離を短くできるメリットがあります。

メニュー区切りのカスタマイズ例
.navi {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.navi-in > ul > li {
  border-left: 1px solid #ddd;
}

.navi-in > ul.menu-pc > li:last-child {
  border-right: 1px solid #ddd;
}

.navi-in > ul.menu-mobile > li:not(:first-child):not(:nth-child(2)) {
  border-top: 1px solid #ddd;
}

.navi-in > ul.menu-mobile > li:nth-child(odd) {
  border-left: 0;
}

グローバルメニューのメニュー間に枠線で区切りを入れるカスタマイズで、ヘッダーレイアウトをトップメニューに設定した場合は.naviに指定する枠線が必要ありません。

プルダウンアイコンのカスタマイズ例
add_filter('menu_description_walker', function($output) {
  return str_replace(['fa-angle-down', 'fa-angle-right'], ['fa-caret-down', 'fa-caret-right'], $output);
});

ヘッダーメニューを階層構造にし、下層メニューをプルダウン（ドロップダウン）表示にした際、上層のメニュー右端に出る下角または右角のアイコンを別のアイコンに変更します。

ブログカードのカスタマイズ

Cocoonのブログカードブロックについて。

Cocoonのブログカードブロックでは、一つのブロックで複数のブログカードを表示でき、一行ごとにURLを一つずつ挿入します。

Cocoon設定で内部ブログカードや外部ブログカードの表示が有効になっていても、挿入するURLの前後に半角スペース等が入っているとブログカードは表示されません。

ブログカードラベルのカスタマイズ例
.blogcard-label {
  top: 1em;
  left: 1em;
  font-size: 12px;
  padding: 0.1em 1em;
  background-color: #039be5;
  border-radius: 2em;
}

ラベル部分のデザインをカスタマイズするだけでも印象が変わります。

ラベルタイプ別のカスタマイズ例
.bct-related .blogcard-label {
  background-color: #43a047;
}

各ラベルタイプのクラス名（”bct-reference”や”bct-together”など）をCSSセレクタに使用すれば、ラベルタイプ別に異なるカスタマイズを加えることもできます。

抜粋の文字数を制限するカスタマイズ例
add_filter('cocoon_blogcard_snippet', function($snippet) {
  return mb_substr($snippet, 0, 20).'...'; //20文字に制限
});

内部ブログカードのみの場合はフック’cocoon_internal_blogcard_snippet’、外部ブログカードのみの場合はフック’cocoon_external_blogcard_snippet’を使用してください。

抜粋を非表示にするカスタマイズ例
add_filter('cocoon_blogcard_snippet', '__return_empty_string');
ろこ
ろこ

ブログカード内のテキストをすっきりさせたいなら、タイトルのみの表示で抜粋は非表示にしてしまってもいいと思います。

「続きを読む」のカスタマイズ例
add_filter('cocoon_blogcard_snippet', function($snippet) {
  return mb_substr($snippet, 0, 20).'... <span class="blogcard-read-more">続きを読む</span>';
});

抜粋のカスタマイズを応用すれば、ブログカード内に「続きを読む」を入れることもできます。

spanなどのインライン要素またはdivなどのブロック要素で囲っておくことで、該当テキストのCSSカスタマイズが容易になります。

サムネイルサイズのカスタマイズ例
//内部ブログカード
add_filter('get_blogcard_thumbnail_size', function($size) {
  return THUMB100;
});

//外部ブログカード
add_filter('external_blogcard_image_width', function($width) {
  return THUMB100WIDTH;
});

add_filter('external_blogcard_image_height', function($height) {
  return THUMB100HEIGHT;
});

//Amazonブログカード
add_filter('external_blogcard_amazon_image_width', function($width) {
  return THUMB100WIDTH;
});

add_filter('external_blogcard_amazon_image_height', function($height) {
  return THUMB100HEIGHT;
});

Cocoonデフォルトで生成されるサムネイル画像を用いれば、ブログカードの画像サイズを変更するだけでカスタマイズできます。

Cocoonにはないサイズのサムネイル画像を内部ブログカードに設定する場合、add_image_size関数で画像サイズを登録し、「Regenerate Thumbnails」等のプラグインで画像の再生成を行う必要があります。

目次のカスタマイズ

Cocoon設定にある目次設定の目次切り替えについて。

目次の表示切替機能では、目次タイトル部分が

  • 有効化…div要素
  • 無効化…input+label要素

になります。

Cocoon設定にある目次設定「目次ナンバーの表示」について。

また、目次ナンバーの表示では、目次リスト部分が

  • 数字・数字詳細…ordered list（ol）
  • 表示しない…unordered list（ul）

になります。

目次のデザインをカスタマイズする際、設定によってHTML内の要素が異なるので、カスタマイズの工数が少なくて済む設定を選びましょう。

目次非表示のカスタマイズ例
add_action('get_header', function() {
  if (is_category('cat-slug') || is_tag('tag-slug')) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['category_toc_visible'] = 0;
  }
});

目次の表示ページには、

  • 投稿
  • 固定ページ
  • カテゴリーページ
  • タグページ

の4つがあり、投稿と固定ページではページ単位で目次を非表示にする設定ができます。

Cocoonで表示される目次は、各投稿・固定ページのページ設定から非表示にできる。

しかし、カテゴリーページやタグページにはページ単位の目次非表示設定がないため、特定のカテゴリー・タグページのみ目次を非表示にしたいときは、スキン制御を用いて非表示にします。

目次リストのカスタマイズ例
/* H2のみ */
.toc .toc-list {
  list-style: none;
}

.toc-list > li::before {
    content: counter(li,decimal);
    counter-increment: li;
    margin-right: .5em;
}

/* H3以下 */
.toc .toc-list ol {
  list-style: circle;
}

目次リストをおしゃれなデザインにしたいとき、H2とH3以下の階層で分けてカスタマイズするといいかもしれません。

枠線・幅等のカスタマイズ例
.toc {
  min-width: 75%;
  background: #fcfcfc;
  border-width: 5px;
  border-style: double;
  border-color: #ef9a9a;
  border-radius: 10px;
}

/* サイドバー表示 */
.nwa .toc {
  padding: 1em;
  border: 2px solid #aed581;
}

目次の外観（枠線や横幅、背景色など）は、記事本文内に自動表示される目次とサイドバーに表示するウィジェット・ショートコードの目次でカスタマイズ方法が若干変わります。

ろこ
ろこ

記事本文内とサイドバー両方の目次を表示する場合、デフォルトの方をカスタマイズすることによってもう片方のデザインが崩れる可能性もあります。

目次リンクのカスタマイズ例
.toc a {
  color: #555;
}

.toc a:hover {
  color: #2196f3;
  text-decoration: none;
}

目次リンクは通常のリンクと異なるCSSが当てられているので、リンク色などをカスタマイズするのもいいでしょう。

記事タイトル・見出しのカスタマイズ

見出しに指定されているCocoonデフォルトのCSSをリセットする。
見出しデザインのリセット
.article h2 {
  background-color: transparent;
  border-radius: 0;
}

.article h3 {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.article h4 {
  border-top: 0;
  border-bottom: 0;
}

.article h5 {
  border-bottom: 0;
}

.article h6 {
  border-bottom: 0;
}

/* サイドバー見出し */
.sidebar h3 {
  background-color: transparent;
  border-radius: 0;
}

記事本文やサイドバーの見出しは、Cocoonでもっともカスタマイズされる箇所のひとつです。

Cocoonの見出しにはデフォルトで枠線等が入っているため、不要なCSSは上書きでリセットしましょう。

記事タイトル（H1）のカスタマイズ例
/* 投稿、固定ページ、カテゴリー・タグページ（本文あり）の記事タイトル */
.article h1 {
  padding-bottom: 0.3em;
  border-bottom: 2px solid #333;
  font-weight: 500;
}

/* 投稿、固定ページの記事タイトル */
.entry-title {
  padding: 0.5em 0;
  border-top: 3px solid #333;
}

/* アーカイブページの記事タイトル */
.archive-title {
  padding: 0.3em 0.6em;
  color: #d81b60;
  background-color: #fce4ec;
  border-radius: 2px;
}

記事タイトルのカスタマイズは3パターンで分ける必要があり、投稿や固定ページだけでなく、本文があるカテゴリー・タグページやその他のアーカイブページも合わせて確認してください。

見出しアイコンのカスタマイズ例
/* Font Awesome 5 */
.article h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  margin-right: 0.3em;
}

/* Font Awesome 4 */
.article h4::before {
  font-family: FontAwesome;
  content: "\f069";
  margin-right: 0.3em;
}

Font Awesomeを利用し、見出し前後にアイコンを追加するだけでもおしゃれに見えます。

CSSの記述がFont Awesome 4の場合とFont Awesome 5の場合で異なる点、特にFont Awesome 5ではフォントの太さを指定する必要がある点に注意しましょう。

記事下見出しのカスタマイズ例
.under-entry-content h2 {
  color: #4caf50;
  border-bottom: 2px solid #4caf50;
}

関連記事やコメント、記事下にあるウィジェットも含め、記事下見出しに共通のカスタマイズを加えます。

記事下コンテンツのブロック要素であるクラス名”under-entry-content”を基準にすれば、シンプルに記述できます。

Cocoonの見出しに対し、ページ内リンクを用意する場合。

特定の見出しにリンクしたいときは、見出しブロックの高度な設定「HTMLアンカー」でid属性を指定します。

見出しへのリンクの例
<h2 id="cocoon-heading">見出しリンク</h2>
<p><a href="#cocoon-heading">見出しリンク</a>に移動します。</p>

「HTMLアンカー」に入力した文字列（例：”cocoon-heading”）がid属性に指定されるので、アンカーリンクによって該当の見出しに移動することができます。

デモ

見出し「記事タイトル・見出しのカスタマイズ」に移動します。

インデックスページのカスタマイズ

Cocoon設定でインデックスにある「カードタイプ」について。

インデックスページのカスタマイズではカードタイプの設定がもっとも重要で、カードタイプごとにCSSセレクタやサムネイル画像サイズ等が異なります。

エントリーカードのカスタマイズ例
.front-top-page .ect-big-card-first .a-wrap:first-of-type {
  border: 1px solid #ccc;
  border-radius: 4px;
}

インデックスリスト・エントリーカードをカスタマイズするなら、設定しているカードタイプ専用のクラス名（”ect-big-card”や”ect-vertical-card-2″など）を活用しましょう。

ろこ
ろこ

カードタイプが先頭のみ大きなカードの場合、大きなカードとデフォルトのカードでCSSを混同しない書き方が求められます。

アイキャッチ画像サイズのカスタマイズ例
add_filter('get_entry_card_thumbnail_size', function($size) {
  return THUMB150;
});

エントリーカードのアイキャッチ画像サイズに合わせて、CSSで画像の横幅（width）やカードコンテンツの余白（margin）なども調節しましょう。

カテゴリーラベル非表示のカスタマイズ例
add_filter('is_entry_card_category_label_visible', function($bool) {
  return false;
});

エントリーカード上にあるカテゴリーラベルが不要な場合、非表示にすることもできます。

サイドバー・ウィジェットのカスタマイズ

Cocoonのサイドバー設定（位置や表示状態など）について。

Cocoonには30近くのウィジェットエリアがありますが、特にサイドバーはウィジェットで構成されるため、サイドバー設定とウィジェットの組み合わせは非常に重要です。

サイドバー非表示のカスタマイズ例
add_filter('is_active_sidebar', function($active, $index) {
  if ($index === 'sidebar' && is_category([7, 'cat-slug'])) {
    $active = false;
  }
  return $active;
}, 10, 2);

投稿や固定ページだと、ページ設定のページタイプを1カラムに設定することでサイドバーの表示・非表示を個別に変更できますが、カテゴリページなどのインデックスページでは細かく変更できません。

全てのサイドバーウィジェットで表示設定から非表示に設定する方法もありますが、サイドバーのフックを用いれば一括で非表示にできます。

サイドバー位置のカスタマイズ例
add_action('get_header', function() {
  if (is_category()) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['sidebar_position'] = 'sidebar_left';
  }
});

サイドバーの位置をページによって左右で分けたい場合、スキン制御で変更できます。

ろこ
ろこ

例えば、設定ではサイドバー右になっている場合、特定ページだけスキン制御でサイドバー左の設定に変更できます。

リストアイコンのカスタマイズ例
.widget_recent_entries ul li a::before,
.widget_categories ul li a::before,
.widget_archive ul li a::before,
.widget_pages ul li a::before,
.widget_meta ul li a::before,
.widget_rss ul li a::before,
.widget_nav_menu ul li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f152";
  margin-right: 0.3em;
}

カテゴリーやアーカイブなど、リストウィジェットの各リストにFont Awesomeアイコンを追加できます。

目次に戻る

お問い合わせ

Cocoonスキン「SILK」やカスタマイズ例の不具合報告は、以下のお問い合わせフォームをご利用ください。

    目次に戻る
    タイトルとURLをコピーしました