高機能で高速の無料テーマCocoon。いろいろとカスタマイズしていますので、まとめてみます。
目次
ヘッダーエリア
グローバルナビ

Cocoonのグローバルナビメニューにアイコンフォントとカスタマイズ
Cocoonのメニューは、補足説明を出せる機能があります。グローバルナビメニューの設定方法とアイコンフォントを表示する方法、更に少しデザインカスタマイズもしてみます。グローバルナビの設定グローバルナビの背景色と文字色は以下から任意の色に設定...

コピペで!Cocoonのグローバルナビをカスタマイズ
Cocoonのグローバルナビバーをカスタマイズしてみます。コピペで実装できます。お好きなカラーに色変更してご自由にご利用下さい。アイコンフォント設定方法や、その他のカスタマイズは以下も参考にして下さい。アニメーション効果のカスタマイズは以下...

簡単!グローバルメニューのアイコンやラベルを色分けする
グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル(メニュー)ごとに色分けする方法についてです。Cocoonに限らず、FontAwesomeが使えるテーマであれば同様に行えます。...

Cocoonのグローバルナビのアニメーション効果カスタマイズ
Cocoonのグローバルメニューの動きをカスタマイズしてみるサンプルです。その他のカスタマイズは以下にもまとめています。カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加CSS外観...
ヘッダー下アピールエリア

Cocoonのヘッダー下アピールエリアをカスタマイズ
Cocoonのヘッダー下に表示できる「アピールエリア」をカスタマイズしてみます。背景の色を変える簡単なカスタマイズから、ボタンの位置などデザインを変えるものなど、あれこれと。アピールエリアの設定は、Cocoon設定→アピールエリア簡単カスタ...
おすすめカード

Cocoon・おすすめカードのプチカスタマイズ
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」を少しだけカスタマイズしてみます。おすすめカードの設定方法は以下をご覧くだ...
トップページ

Cocoonのフロントページ・カテゴリー別一覧をカスタマイズ
Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。2020/05/25 Ver.2.1.6.x~ の新機能設定方法は以下にまとめています。カスタマイズ方法簡単なCSS追...

Cocoonのトップページをデザイン:カテゴリー別記事を横並び表示
トップページなどに、カテゴリー別の記事を横並びに見やすく表示してみます。トップページデザインの一部として利用したり、その他の好きなページに表示する事も可能です。表示サンプル方法や手順について解説していきますが、基本的にご紹介するコードをコピ...

コピペで!Cocoonトップページなどに使えるタブ切替メニュー18色
タブで切り替えて、カテゴリーごとの最新記事一覧などを表示するサンプルです。2カラムレイアウトやボタンなどのデザインや人気記事一覧表示のショートコードも、Cocoon標準の機能を利用しています。サンプルカテゴリーごとのタブには「最新記事」と「...
ウィジェット
サイドバー

Cocoonのサイドバータイトル(ウィジェットタイトル)カスタマイズ
Cocoonのサイドバータイトル(ウィジェットタイトル)のデザインカスタマイズをしてみます。カスタマイズサンプルBeforeAfterサンプルではシンプルに角を丸めているだけですが、この記事で紹介するクラス名で好きなデザインに変更してご利用...

Cocoonのサイドバーウィジェットなどのリストデザインをカスタマイズ
Cocoonのサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。このデザインをカスタマイズしてみます。カスタマイズ方法簡単なCSS追記のみです。...
検索フォーム

Cocoonの検索フォームをデザインカスタマイズ
サイドバーなどに表示すると便利な自サイト内の検索フォームのデザインをカスタマイズしてみます。WordPressの標準ウィジェット「検索」のカスタマイズです。カスタマイズサンプルBeforeCocoonのデフォルトは以下です。Afterまるっ...
新着記事ウィジェット

Cocoonの新着記事ウィジェット(&ショートコード)のデザインカスタマイズ
Cocoonの新着記事ウィジェットのカードをカスタマイズしてみます。新着記事ウィジェットはCocoonオリジナルウィジェットと記事内などにも使えるショートコードもありカスタマイズを行うとどちらも同じようにデザイン変更が可能です。ショートコー...
SNS

コピペで!CocoonのFacebookボックスのデザインカスタマイズ
Cocoonの便利なオリジナルウィジェット「 Facebookボックス」の色をサイトに合わせてカスタマイズする方法についてです。簡単なCSSの追記のみなので、一瞬で終わります。Facebookボックス という名前ですが、Twitterフォロ...

コピペで!CocoonのSNSフォローボタンデザインカスタマイズ
Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。初期デザインカスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加CSS外観→テーマ...

CocoonのFacebookウィジェットの使い方とプチカスタマイズ
Facebookウィジェットとは、記事下などに表示して「いいね!」ボタンを表示できるCocoonのオリジナルウィジェットで以下の2種類あります。 Facebookバルーン Facebookボックスこれらの設定方法とカスタマイズ方法についてで...
タグクラウド

コピペで!Cocoonのタグクラウドデザインをカスタマイズ
タグクラウドのデザインをカスタマイズする方法です。タグクラウドウィジェットはWordPressの標準ウィジェットなので、Cocoonに限らず汎用的に利用できるかと思います。カスタマイズサンプルBeforeCocoonの場合は、タグアイコンが...
カテゴリー

コピペで!Cocoonのカテゴリーウィジェットをカスタマイズ
サイドバーなどに表示するカテゴリーウィジェットをカスタマイズしてみます。主なデザイン内容は以下です。 アイコンフォントを付ける カラーを付ける 投稿数に背景色を付ける 行間を調整カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のい...
プロフィール

Cocoonのプロフィール欄のSNSボタンをカラーにするなどのカスタマイズ
Cocoonは、ウィジェットを使って記事の下や、サイドバーなど任意の場所にプロフィール欄を簡単に設置出来ますが、そのエリアのカスタマイズ方法です。プロフィール欄の使い方は以下をご覧ください。デフォルト表示例カスタマイズ例カスタマイズ方法簡単...
ランキング機能

Cocoonのランキング機能をデザインカスタマイズ
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示するランキング機能の文字やボタンの色を変える簡単なカスタマイズをしてみます。初期表示は以下のような感じで、枠線の色はサイトごとのキーカラーです。ランキングの...
インデックス
記事一覧カード

Cocoon記事一覧ページのカードをカスタマイズ
Cocoonのトップページやアーカイブ、カテゴリーページでの記事一覧カードを以下のサンプルのようにカスタマイズする方法です。カスタマイズサンプル アイキャッチ画像の角を丸める 枠の角を丸める カード枠をアンダーラインのみにする 記事タイトル...

Cocoonの記事一覧エントリーカードのデザインカスタマイズ
Cocoonの記事一覧エントリーカードをカスタマイズしてみます。カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加CSS外観→テーマエディター→style.cssBeforeカスタ...

Cocoonの記事一覧のカードに設定した日数の間NEWマークを表示する
Cocoonのトップページやアーカイブページでの記事一覧で、新着記事に「Newマーク」を表示します。サンプル「NEW」マークを左端に出したかったのですが、カテゴリーと被ってしまうので、右端に出しました。エントリーカード(デフォルト)の場合は...
記事一覧下ページネーション

Cocoonの記事一覧下ページ送り(ページネーション)をカスタマイズ
Cocoonの記事一覧ページでページの下に出るページ送りボタン(ページネーション)のデザインがあっさりしているので、少しカスタマイズしてみます。カスタマイズサンプルBefore初期デザインは、キーカラーで指定した色で1pxの四角い枠になって...
ページトップボタンの設定

Cocoonのページトップボタンの設定と位置を変えるカスタマイズ
各ページで、右下に表示される矢印マークのページトップボタンの設定と、少しだけ位置を変えるカスタマイズです。ページトップボタンの設定Cocoon設定→ボタン設定項目 トップへ戻るボタンの表示・非表示 ボタンのアイコンフォント選択(10種) ボ...
記事部分
記事タイトルや見出し(H1~H5)

コピペで!Cocoonの記事タイトルや見出し(H1~H5)をカスタマイズ
Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。見出し1(H1)は記事のタイトルで使われますので、記事本文中はH2~を利用します。デザイン設定する為の指定方法と、まるごとコピー利用できるコードを載せています。カスタマイ...
コメント欄

コピペで!Cocoonコメント欄の簡単カスタマイズ
Cocoonのコメント欄のカスタマイズ方法です。コメント欄の設定コメント欄は、コメント入力エリアがが表示されているタイプと、ボタンで表示させるタイプの2種類あります。「Cocoon設定」「コメント」タブ常に表示の場合ボタンで表示切替の場合カ...
目次デザイン

Cocoonの目次設定とデザインカスタマイズ
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありませんが、少しデザインを変更してみました。前提Cocoon設定→目次タブから、表示の設定を行います。設定項目 目次の表示・非表示、表示するページ設定 目次のタ...
記事下ページャー

Cocoonの記事下ページャーをカスタマイズ
Cocoonの記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。カスタマイズサンプルBeforeAfter 枠線をつける ページャー左右の矢印マークの色変更ホバー時 背景色をつける 少し上に浮き上がらせる上(前の記...
記事を読む時間

Cocoonの「この記事は約〇分で読めます」の設定とカスタマイズ
Cocoonには、記事の文字数によって自動計算してどのくらいの時間で読めるかを表示する機能があります。この部分の使い方と、表示したくないページがある場合の設定方法について。更にデザインカスタマイズ方法です。表示させる方法表示していない場合は...
ブログカード

コピペで簡単!Cocoonのブログカードをカスタマイズ
Cocoonのブログカードをカスタマイズしてみます。Cocoonにはブログカード用の装飾コード(囲みブログカードラベル)もたくさんありますが、基本的な枠のデザインカスタマイズになります。囲みラベルを使用しているものも、使用しないものも同様の...
検索フォーム風

Cocoonの記事内に埋め込める検索フォームの使い方とカスタマイズ
Cocoonには、記事内に「検索フォーム風」のボタンを埋め込む機能があり、簡単に挿入して使えます。その使い方と、簡単カスタマイズ方法です。使い方記事編集画面で、「タグ」から「検索フォーム風」を選択するだけです。ビジュアルエディタの場合ブロッ...
トグルボックス

Cocoonの記事内に開閉するBOX(トグルボックス)表示とカスタマイズ
Cocoonには、記事内に「アコーディオン開閉」するボックス(トグルボックス)を埋め込む機能があり、簡単に挿入して使えます。閉じた状態 開いた状態その使い方と、簡単カスタマイズ方法です。使い方記事編集画面で、「タグ」から「トグルボックス」...
ビジュアルエディタ見出しやスタイル

Cocoonでビジュアルエディタ見出しやスタイルを思い通りにカスタマイズ
Cocoonの文字装飾デザインは膨大に用意されていますが、ちょっと色を変えたいもう1色欲しい独自のデザインも便利に使いたいなどといった場合に、スタイルから挿入出来るデザインを編集する方法です。Cocoon標準の文字装飾デザインは以下をご覧く...
吹き出しデザイン

Cocoonの吹き出しデザインをカスタマイズ
Cocoonには、キャラクターや自分のアバターなどのアイコンで会話形式 の吹き出しを表示する機能があります。今回は、吹き出しデザインのカスタマイズをしてみます。吹き出しの使い方については以下にまとめています。カスタマイズ方法簡単なCSS追記...
文字装飾

Cocoonの文字装飾ボックススタイルをカスタマイズ(アイコン)
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はボックス(アイコン)のカスタマイズ方法です。カスタマイズ方法簡単なCSS追記のみです。CSS...

Cocoonの文字装飾ボックススタイルをカスタマイズ(案内)
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はボックス(案内)のカスタマイズ方法です。カスタマイズ方法簡単なCSS追記のみです。CSS追記...

Cocoonの文字装飾ボックススタイルをカスタマイズ(白抜き・タブ・付箋風)
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はボックス(白抜き)、ボックス(タブ)、ボックス(付箋風)のカスタマイズ方法です。ボックス(白...

Cocoonの文字装飾マーカーの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はマーカーのカスタマイズ方法です。カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下の...

Cocoonの文字装飾バッジの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はバッジのカスタマイズ方法です。カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のい...
ショートコード

簡単!CocoonでAPI利用のAmazonリンクをカスタマイズ
Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。リンクの使い方は以下をご覧ください。カスタマイズサンプルからコピペ元のサンプルカスタマイズサンプル変更している部分 枠サイズ 枠の色 枠の角を丸める 右下ロゴ...
固定ページ

Cocoon固定ページで投稿日・投稿者情報・アイキャッチを非表示にする
固定ページには投稿日や更新日の情報はほぼ要らないですよね。たとえば「お問い合わせフォーム」や「404 Not Found」、「自動生成されるサイトマップ」などに更新日があっても意味がありません。今回は、固定ページの投稿日、更新日、更に投稿者...
サイトマップ

簡単!Cocoonのサイトマップをプチカスタマイズ
Cocoonにはサイトマップを自動生成する機能があります。文字の色・ホバー色を変更したり、アンダーラインを消す簡単なカスタマイズ方法についてです。使い方については以下をご覧ください。カスタマイズサンプルBeforeAfterカスタマイズ方法...

Cocoonでサイトマップをカテゴリー単位に表示する方法
Cocoonにはサイトマップを自動生成するショートコード機能があり、記事一覧、固定ページ一覧、カテゴリー、アーカイブを表示出来ますが、 カテゴリー単位に分ける 並び変えるなどが出来ない為、カテゴリー単位に表示する為に「新着記事一覧ウィジェッ...
スキン

CocoonのスキンMomoonをカスタマイズして新しいスキンを作る
CocoonのデザインスキンMomoonをカスタマイズしてみます。はじめにスキンのカスタマイズを行う為に必要な手順についてです。必要なものFTPツール手順 元のスキンをコピーし、 別の名前のスキンとして作成し、 子テーマにアップロードする事...
その他

CocoonでのPHPファイル編集を伴うカスタマイズについて
Cocoonに限らずですが、PHPファイルを編集するのはリスクが伴います。最初から子テーマに用意されているものと、親テーマにしかないものがあり、特に親テーマにしかないファイルを触りたい場合には手順がありますのでまとめておきます。親テーマ・子...

Cocoonで特定カテゴリーやタグを非表示にする方法
ワードプレスの標準ウィジェットで表示する「カテゴリー」や「タグ」を指定したものだけ非表示にする方法です。手順カテゴリーウィジェットCSS1行追記CSS追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加CSS外観→テーマエディター...

Cocoonで評価・ランキングの★を好きな場所で表示する方法
Cocoonにはランキング機能があり、評価の★を5段階(0.5刻み)に表示する機能があります。ランキング機能のサンプルこの機能で設定されている★を使って、好きな場所で5段階評価を表示する方法です。使い方サンプル手順Cocoonのテンプレート...
コメント
初めまして、いつも大変参考にさせていただいてます。
現在、サイドバーの「最近のコメント」ウィジェットのカスタマイズをしたいとかんがえているのですが、なかなか該当する記事が見当たりません。
こちらのサイトのコメントウィジェットがオシャレでお手本にしたいと思っているのですが、その部分のカスタマイズの記事は投稿されていないでしょうか?
(もしあったらすみません)
機会があれば公開していただけると嬉しいです。
こちらのサイトをこれからも訪問させて頂きます。
ごんさま はじめまして。
コメントウィジェットの枠色やホバー時の色と動きについてですが、
当サイトでは、エントリーカードと同様のカスタマイズになっているので、コメントウィジェット独自のカスタマイズはしていません。
うちの場合のコードは以下です。
.a-wrap {background-color: #fff;border-bottom: 1px solid #89817f;border-radius: 15px;}
.a-wrap:hover {background:rgba(193,199,141,0.5);-webkit-transform: translateY(-2px);-ms-transform: translateY(-2px);transform: translateY(-2px);box-shadow: 0 0 8px #dce0b1;}
コメントウィジェット独自にカスタマイズしたい場合は・・
.recent-comments .a-wrap …. というように 先頭に「.recent-comments」をつければいけるかと思います。
綾糸さま
こんにちは、ご丁寧に返信いただきありがとうございます。
早速、試させていただきました。
せっかくなので上記のコードをお借りして全体的に浮き出る動きにカスタマイズいたしました!
とてもいい感じに仕上がって大変満足です。
これからも活用させていただきます、ありがとうございました。
ごんさま。
お役に立てたならよかったです。
ご連絡ありがとうございました。