Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
Cocoon・カスタマイズ
この記事は約6分で読めます。

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

 

スポンサーリンク

ヘッダーエリア

グローバルナビ

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

 

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

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のサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。 このデザインをカスタマイズしてみます。...

 

検索フォーム

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

 

新着記事ウィジェット

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

 

SNS

コピペで!CocoonのFacebookボックスのデザインカスタマイズ
Cocoonの便利なオリジナルウィジェット「 Facebookボックス」の色をサイトに合わせてカスタマイズする方法についてです。 簡単なCSSの追記のみなので、一瞬で終わります。 Facebookボッ...
コピペで!CocoonのSNSフォローボタンデザインカスタマイズ
Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。 初期デザイン カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下...
CocoonのFacebookウィジェットの使い方とプチカスタマイズ
Facebookウィジェットとは、記事下などに表示して「いいね!」ボタンを表示できるCocoonのオリジナルウィジェットで以下の2種類あります。 Facebookバルーン Facebookボックス こ...

 

タグクラウド

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

 

カテゴリー

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

 

プロフィール

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

 

ランキング機能

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

 

インデックス

記事一覧カード

Cocoon記事一覧ページのカードをカスタマイズ
Cocoonのトップページやアーカイブ、カテゴリーページでの記事一覧カードを以下のサンプルのようにカスタマイズする方法です。 カスタマイズサンプル アイキャッチ画像の角を丸める 枠の角を丸める カード...
Cocoonの記事一覧エントリーカードのデザインカスタマイズ
Cocoonの記事一覧エントリーカードをカスタマイズしてみます。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下さい。 外観→カスタマイズ→追加CSS 外観→テー...
Cocoonの記事一覧のカードに設定した日数の間NEWマークを表示する
Cocoonのトップページやアーカイブページでの記事一覧で、新着記事に「Newマーク」を表示します。 サンプル 「NEW」マークを左端に出したかったのですが、カテゴリーと被ってしまうので、右端に出しま...

 

記事一覧下ページネーション

Cocoonの記事一覧下ページ送り(ページネーション)をカスタマイズ
Cocoonの記事一覧ページでページの下に出るページ送りボタン(ページネーション)のデザインがあっさりしているので、少しカスタマイズしてみます。 カスタマイズサンプル Before 初期デザインは、キ...

 

ページトップボタンの設定

Cocoonのページトップボタンの設定と位置を変えるカスタマイズ
各ページで、右下に表示される矢印マークのページトップボタンの設定と、少しだけ位置を変えるカスタマイズです。 ページトップボタンの設定 Cocoon設定→ボタン 設定項目 トップへ戻るボタンの表示・非表...

 

記事部分

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

 

Cocoon文字装飾スタイル・サンプルとカラーコードとクラス名一覧
Cocoonに標準で準備されている文字装飾のスタイルの初期カラーコードとクラス名を一覧にまとめました。 ちょっと色を変えたい時などにご利用下さい。 マーカー スタイル クラス名 色 黄色 .marke...

 

固定ページ

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

 

サイトマップ

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

 

スキン

Cocoonのスキンをカスタマイズして新しいスキンを作る方法
Cocoonのデザインスキンは標準でも数十種類、公認でないものを含めれば数百あるかも??ですが、イマイチどれも「ピタ!」っと来ない ・・・という場合に、 気になるスキンを自分好みにカスタマイズする方法...
CocoonのスキンMomoonをカスタマイズして新しいスキンを作る
CocoonのデザインスキンMomoonをカスタマイズしてみます。 はじめに スキンのカスタマイズを行う為に必要な手順についてです。 必要なもの FTPツール 手順 元のスキンをコピーし、 別の名前の...

 

その他

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

 

コメント

  1. ごん より:

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

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

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

    • 綾糸綾糸 より:

      ごんさま はじめまして。

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

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

      • ごん より:

        綾糸さま

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

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

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

タイトルとURLをコピーしました