

WordPress歴7年、現在21歳の大学生です。
WordPressで構築された当サイトのカスタマイズを担当しています。
WordPressテーマ「Cocoon」のシンプルなデザインや独自設定による豊富な機能を保ちつつ、より機能性・カスタマイズ性の高いCocoonスキンを作成しました。
以下では作成したスキンをもとに、Cocoonテーマのカスタマイズ方法やCocoonスキンの作り方について解説します。
SILK(シルク)の使い方

SILKはCocoonデフォルトと異なるデザインから設定やカスタマイズを始めたいユーザー向けに作成したので、
- キーカラー設定
- ダークスキン
- ブロックエディター
などに対応した、他のCocoonスキンにはない大きな特徴がいくつかあります。
Cocoonのデザインを刷新

本文内の各ブロック・フォーマットはもちろん、サイドバーやインデックスリスト、各種機能を含むレイアウトの細部に至るまで、Cocoonテーマのデザインを刷新しました。
刷新したデザインにはマテリアルデザインを取り入れており、陰影や配色などはガイドラインに従っています。
一部AMPにも対応していますが、スキンのAMP用CSSは容量制限でかなり軽量化しているため、スキンのスタイルを有効にしている場合でも適宜カスタマイズが必要になります。
キーカラー設定を用いた色変更

Cocoon設定の全体タブにある『キーカラー』を設定することにより、サイト全体のポイントとなる色(見出しなど)が指定されます。
SILKで適用されるポイントはCocoonデフォルトで適用されるポイントとは異なるため、スキンのキーカラーを自由に変更することができます。
ダークスキンとしても機能

ダークスキンとは黒色を基調としたCocoonスキンのことで、現時点では
- ダークエンジ
- ダークルリ
- ダークカモノハ
の1種類3色しかありません。
そこで、ダークスキンとしても機能するよう対応しました。
文字色を白色【#ffffff】、背景色を黒色【#424242】に設定した場合。

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

同様に、Cocoon設定の全体タブにある『サイト背景色』の背景色を黒色に設定し、サイト全体の背景色を黒色に変更してください。
define('SILK_DARK', ['#fff', '#fff']);
SILKはダークスキンに対応するために、カード型リンクrgba(255,255,255,.2)
や入力フィールドrgba(255,255,255,.8)
などの背景色を透過させています。
背景色を透過させたくない場合や別の背景色を指定したい場合、子テーマのfunctions.php等で定数’SILK_DARK’を定義してください。
オプション設定でデザイン変更

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

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

オプション設定の追加が完了すると、
- キーカラー
- サイトフォント
- サイト背景色
- ヘッダー色
- フッター色
など、Cocoon設定の主なデザイン項目が自動的に設定されます。
コンテンツのデザインを追加

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

グループブロックやカラムブロックなどは配置設定から全幅表示を選択できます。
サイドバーが表示されていない1カラムのページでは、全幅表示を設定しているブロックはブラウザの画面幅いっぱいに表示されます。
グループブロックのスタイルで『アコーディオン』を選択し、グループブロック内にトグルボックスブロックを複数並べます。
『アコーディオン』を選択したグループブロックにトグルボックス以外のブロックを入れても、実際のページには表示されません。
グループブロックのスタイルで『比較表』を選択し、グループブロック内にアイコンリストブロックを複数並べます。
『比較表』を選択したグループブロックにアイコンリストボックス以外のブロックを入れても、実際のページには表示されません。
パネルボックス
グループブロックのスタイルで『パネル』を選択します。
1
2
3
カラムブロックのスタイルで『モバイル』を選択すると、全ての画面幅でカラム表示します。
ヘッダーセル | ヘッダーセル | ヘッダーセル | ヘッダーセル |
---|---|---|---|
テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルブロックのスタイルで『中央寄せ』を選択します。
テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルブロックのスタイルで『水平』を選択します。

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

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

ブログカードブロックのスタイルで『テキスト』を選択します。
区切りブロックのスタイルで『切り取り線』を選択します。
テキストの一部またはすべてを選択し、ツールバーのよりリッチなテキスト制御から『下線』をクリックします。
ただし、ブロックエディターを前提に作成しているため、クラシックエディターは基本的にサポートしていません。
SILKを使用する際は、ブロックエディターの有効化を推奨します。
ブロックエディターの機能拡充

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

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

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

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

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

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

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

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設定値を動的に操作することができます。

//アピールエリア設定のボタンメッセージ
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設定上にはスキン制御が反映されないので、該当部分の設定は変更することができます。
//特定の固定ページのみ通知設定を変更する場合
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設定値を特定の条件下のみ変更するようなカスタマイズも、スキン制御の動的な操作を取り入れるだけで簡単に記述できます。
キーカラー設定に対応する

//ブロックエディターのキーカラー
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設定保存時のみスキン制御からキーカラー・キーテキストカラー設定値を除外します。
カラーパレット

ブロックエディターには色設定できるブロックが多数あり、デフォルト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対応

AMP設定でスキンのスタイルを有効化している場合、使用スキンから2種類のCSS
- style.css
- amp.css
が読み込まれます。

amp.cssが存在しないときはstyle.cssのみが読み込まれます。
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用に作成したプラグイン下でスキンを開発すれば、一元管理しつつ本番環境への自動更新にも対応できます。
global $_THEME_OPTIONS;
$_THEME_OPTIONS['skin_url'] = untrailingslashit(plugin_dir_url(__FILE__)).'/original-skin/style.css';
プラグイン下にあるスキンはCocoon設定のスキン一覧に反映されないため、プラグインを有効化したときは自作スキンが設定されるようにスキン制御を加えておきます。

プラグインを無効化すれば、別のスキンを使用することもできます。
スキンを継続的に開発するなら、Git系サービスのリポジトリでスキン用プラグインをホスティングし、随時リリースしていくのが効率的です。
Cocoonのカスタマイズ方法

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

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

サイト型とは、トップページの記事一覧部分をコンテンツ化することであり、読者に見せるべき情報を取捨選択できるメリットがあります。
WordPressの表示設定から以下の設定を行うことで、設定した固定ページがトップページに表示されます。
- ホームページの表示を固定ページに設定。
- 公開中の固定ページをホームページに設定。

加えて、表示するページのページタイプを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に上記コードを記述します。
ヘッダーのカスタマイズ

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

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

ヘッダーロゴ画像は余裕のある大きさで作成し、ヘッダーロゴサイズの幅(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設定のヘッダー設定から背景色や文字色を変更できます。

グローバルメニューで表示する各メニュー項目のラベルに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のブログカードブロックでは、一つのブロックで複数のブログカードを表示でき、一行ごとに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デフォルトで生成されるサムネイル画像を用いれば、ブログカードの画像サイズを変更するだけでカスタマイズできます。
目次のカスタマイズ

目次の表示切替機能では、目次タイトル部分が
- 有効化…div要素
- 無効化…input+label要素
になります。

また、目次ナンバーの表示では、目次リスト部分が
- 数字・数字詳細…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つがあり、投稿と固定ページではページ単位で目次を非表示にする設定ができます。

しかし、カテゴリーページやタグページにはページ単位の目次非表示設定がないため、特定のカテゴリー・タグページのみ目次を非表示にしたいときは、スキン制御を用いて非表示にします。
/* 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が当てられているので、リンク色などをカスタマイズするのもいいでしょう。
記事タイトル・見出しのカスタマイズ

.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は上書きでリセットしましょう。
/* 投稿、固定ページ、カテゴリー・タグページ(本文あり)の記事タイトル */
.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を利用し、見出し前後にアイコンを追加するだけでもおしゃれに見えます。
.under-entry-content h2 {
color: #4caf50;
border-bottom: 2px solid #4caf50;
}
関連記事やコメント、記事下にあるウィジェットも含め、記事下見出しに共通のカスタマイズを加えます。
記事下コンテンツのブロック要素であるクラス名”under-entry-content”を基準にすれば、シンプルに記述できます。

特定の見出しにリンクしたいときは、見出しブロックの高度な設定「HTMLアンカー」でid属性を指定します。
<h2 id="cocoon-heading">見出しリンク</h2>
<p><a href="#cocoon-heading">見出しリンク</a>に移動します。</p>
「HTMLアンカー」に入力した文字列(例:”cocoon-heading”)がid属性に指定されるので、アンカーリンクによって該当の見出しに移動することができます。
見出し「記事タイトル・見出しのカスタマイズ」に移動します。
インデックスページのカスタマイズ

インデックスページのカスタマイズではカードタイプの設定がもっとも重要で、カードタイプごとに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には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」やカスタマイズ例の不具合報告は、以下のお問い合わせフォームをご利用ください。