Cocoonを40か所以上カスタマイズまとめ!

高機能で高速の無料テーマCocoon。いろいろとカスタマイズしていますので、まとめてみます。

 


 

ヘッダーエリア

グローバルナビ

Cocoonのグローバルナビメニューにアイコンフォントとカスタマイズ
Cocoonのメニューは、補足説明を出せる機能があります。グローバルナビメニューの設定方法とアイコンフォントを表示する方法、更に少しデザインカスタマイズもしてみます。 グローバルナビの設定 グローバルナビの背景色と文字色は以下から任意の色に...
コピペで!Cocoonのグローバルナビをカスタマイズ
Cocoonのグローバルナビバーをカスタマイズしてみます。 コピペで実装できます。お好きなカラーに色変更してご自由にご利用下さい。 アイコンフォント設定方法や、その他のカスタマイズは以下も参考にして下さい。 アニメーション効果のカスタマイズ...
簡単!グローバルメニューのアイコンやラベルを色分けする
グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル(メニュー)ごとに色分けする方法についてです。 Cocoonに限らず、FontAwesomeが使えるテーマであれば同様に行えます...
Cocoonのグローバルナビのアニメーション効果カスタマイズ
Cocoonのグローバルメニューの動きをカスタマイズしてみるサンプルです。 その他のカスタマイズは以下にもまとめています。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下さい。 外観→カスタマイズ→追加...

 

ヘッダー下アピールエリア

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

 

おすすめカード

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

 

トップページ

Cocoonのフロントページ・カテゴリー別一覧をカスタマイズ
Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。 2020/05/25 Ver.2.1.6.x~ の新機能 設定方法は以下にまとめています。 カスタマイズ方法 簡単な...
Cocoonのトップページをデザイン:カテゴリー別記事を横並び表示
トップページなどに、カテゴリー別の記事を横並びに見やすく表示してみます。 トップページデザインの一部として利用したり、その他の好きなページに表示する事も可能です。 表示サンプル 方法や手順について解説していきますが、基本的にご紹介するコード...
コピペで!Cocoonトップページなどに使えるタブ切替メニュー18色
タブで切り替えて、カテゴリーごとの最新記事一覧などを表示するサンプルです。 2カラムレイアウトやボタンなどのデザインや 人気記事一覧表示のショートコードも、 Cocoon標準の機能を利用しています。 サンプル カテゴリーごとのタブには「最新...

 

ウィジェット

サイドバー

Cocoonのサイドバータイトル(ウィジェットタイトル)カスタマイズ
Cocoonのサイドバータイトル(ウィジェットタイトル)のデザインカスタマイズをしてみます。 カスタマイズサンプル Before After サンプルではシンプルに角を丸めているだけですが、この記事で紹介するクラス名で好きなデザインに変更し...
Cocoonのサイドバーウィジェットなどのリストデザインをカスタマイズ
Cocoonのサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。 このデザインをカスタマイズしてみます。 カスタマイズ方法 簡単なCSS追記のみ...

 

検索フォーム

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

 

新着記事ウィジェット

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に限らず汎用的に利用できるかと思います。 カスタマイズサンプル Before Cocoonの場合は、タグア...

 

カテゴリー

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

 

プロフィール

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

 

ランキング機能

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

 

インデックス

記事一覧カード

Cocoon記事一覧ページのカードをカスタマイズ
Cocoonのトップページやアーカイブ、カテゴリーページでの記事一覧カードを以下のサンプルのようにカスタマイズする方法です。 カスタマイズサンプル アイキャッチ画像の角を丸める 枠の角を丸める カード枠をアンダーラインのみにする 記事タイト...
Cocoonの記事一覧エントリーカードのデザインカスタマイズ
Cocoonの記事一覧エントリーカードをカスタマイズしてみます。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下さい。 外観→カスタマイズ→追加CSS 外観→テーマエディター→style.css Bef...
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の記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。 カスタマイズサンプル Before After 枠線をつける ページャー左右の矢印マークの色変更 ホバー時 背景色をつける 少し上に浮き上がらせる ...

 

記事を読む時間

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

 

ブログカード

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

 

検索フォーム風

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

 

トグルボックス

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

 

ビジュアルエディタ見出しやスタイル

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

 

吹き出しデザイン

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

 

文字装飾

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

 

ショートコード

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

 

固定ページ

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

 

サイトマップ

簡単!Cocoonのサイトマップをプチカスタマイズ
Cocoonにはサイトマップを自動生成する機能があります。 文字の色・ホバー色を変更したり、アンダーラインを消す簡単なカスタマイズ方法についてです。 使い方については以下をご覧ください。 カスタマイズサンプル Before After カス...
Cocoonでサイトマップをカテゴリー単位に表示する方法
Cocoonにはサイトマップを自動生成するショートコード機能があり、 記事一覧、固定ページ一覧、カテゴリー、アーカイブを表示出来ますが、 カテゴリー単位に分ける 並び変える などが出来ない為、カテゴリー単位に表示する為に「新着記事一覧ウィジ...

 

スキン

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

 

その他

CocoonでのPHPファイル編集を伴うカスタマイズについて
Cocoonに限らずですが、PHPファイルを編集するのはリスクが伴います。 最初から子テーマに用意されているものと、親テーマにしかないものがあり、特に親テーマにしかないファイルを触りたい場合には手順がありますのでまとめておきます。 親テーマ...
Cocoonで特定カテゴリーやタグを非表示にする方法
ワードプレスの標準ウィジェットで表示する 「カテゴリー」や「タグ」を指定したものだけ非表示に する方法です。 手順 カテゴリーウィジェット CSS1行追記 CSS追記は以下のいずれかから行って下さい。 外観→カスタマイズ→追加CSS 外観→...
Cocoonで評価・ランキングの★を好きな場所で表示する方法
Cocoonにはランキング機能があり、評価の★を5段階(0.5刻み)に表示する機能があります。 ランキング機能のサンプル この機能で設定されている★を使って、好きな場所で5段階評価を表示する方法です。 使い方サンプル 手順 Cocoonのテ...

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (4)

  • 初めまして、いつも大変参考にさせていただいてます。
    現在、サイドバーの「最近のコメント」ウィジェットのカスタマイズをしたいとかんがえているのですが、なかなか該当する記事が見当たりません。

    こちらのサイトのコメントウィジェットがオシャレでお手本にしたいと思っているのですが、その部分のカスタマイズの記事は投稿されていないでしょうか?
    (もしあったらすみません)

    機会があれば公開していただけると嬉しいです。
    こちらのサイトをこれからも訪問させて頂きます。

    • ごんさま はじめまして。

      コメントウィジェットの枠色やホバー時の色と動きについてですが、
      当サイトでは、エントリーカードと同様のカスタマイズになっているので、コメントウィジェット独自のカスタマイズはしていません。

      うちの場合のコードは以下です。
      .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」をつければいけるかと思います。

      • 綾糸さま

        こんにちは、ご丁寧に返信いただきありがとうございます。
        早速、試させていただきました。

        せっかくなので上記のコードをお借りして全体的に浮き出る動きにカスタマイズいたしました!
        とてもいい感じに仕上がって大変満足です。

        これからも活用させていただきます、ありがとうございました。

        • ごんさま。
          お役に立てたならよかったです。
          ご連絡ありがとうございました。