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

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

スポンサーリンク

カスタマイズ

2020.07.05 2020.05.18

この記事は約6分で読めます。

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

スポンサーリンク

ヘッダーエリア

グローバルナビ

Cocoonのグローバルナビメニューにアイコンフォントとカスタマイズ

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

コピペで！Cocoonのグローバルナビをカスタマイズ

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

簡単！グローバルメニューのアイコンやラベルを色分けする

グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル（メニュー）ごとに色分けする方法についてです。 Cocoonに限らず、FontAwes...

Cocoonのグローバルナビに補足説明文を表示する方法とカスタマイズ

メニューに説明を記述する機能はWordPressの機能ですが、それをグローバルナビに表示できるテーマは限られていますが、 Cocoonにはグローバルナビメニューに補足説明を表示する機能があります。...

Cocoonのグローバルナビのアニメーション効果カスタマイズ

Cocoonのグローバルメニューの動きをカスタマイズしてみるサンプルです。その他のカスタマイズは以下にもまとめています。カスタマイズ方法簡単なCSS追記のみです。 ...

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

Cocoonのヘッダー下アピールエリアをカスタマイズ

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

おすすめカード

Cocoon・おすすめカードのプチカスタマイズ

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

トップページ

Cocoonのフロントページ・カテゴリー別一覧をカスタマイズ

Cocoonでは、フロントページ（トップページ）の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。 2020/05/25　Ver.2.1.6.x～　の新機能設定方...

Cocoonのトップページをデザイン：カテゴリー別記事を横並び表示

トップページなどに、カテゴリー別の記事を横並びに見やすく表示してみます。トップページデザインの一部として利用したり、その他の好きなページに表示する事も可能です。表示サンプル ...

コピペで！Cocoonトップページなどに使えるタブ切替メニュー18色

タブで切り替えて、カテゴリーごとの最新記事一覧などを表示するサンプルです。２カラムレイアウトやボタンなどのデザインや人気記事一覧表示のショートコードも、 Cocoon標準の機能を...

ウィジェット

サイドバー

Cocoonのサイドバータイトル（ウィジェットタイトル）カスタマイズ

Cocoonのサイドバータイトル（ウィジェットタイトル）のデザインカスタマイズをしてみます。カスタマイズサンプル Before After サンプルで...

Cocoonのサイドバーウィジェットなどのリストデザインをカスタマイズ

Cocoonのサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。このデザ...

検索フォーム

Cocoonの検索フォームをデザインカスタマイズ

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

新着記事ウィジェット

Cocoonの新着記事ウィジェット（＆ショートコード）のデザインカスタマイズ

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

SNS

コピペで！CocoonのFacebookボックスのデザインカスタマイズ

Cocoonの便利なオリジナルウィジェット「 Facebookボックス」の色をサイトに合わせてカスタマイズする方法についてです。簡単なCSSの追記のみなので、一瞬で終わります。 ...

コピペで！CocoonのSNSフォローボタンデザインカスタマイズ

Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。初期デザインカスタマイズ方法簡単なCSS追記のみです。 ...

CocoonのFacebookウィジェットの使い方とプチカスタマイズ

Facebookウィジェットとは、記事下などに表示して「いいね！」ボタンを表示できるCocoonのオリジナルウィジェットで以下の２種類あります。 Facebookバルーン Facebo...

タグクラウド

コピペで！Cocoonのタグクラウドデザインをカスタマイズ

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

カテゴリー

コピペで！Cocoonのカテゴリーウィジェットをカスタマイズ

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

プロフィール

Cocoonのプロフィール欄のSNSボタンをカラーにするなどのカスタマイズ

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

ランキング機能

Cocoonのランキング機能をデザインカスタマイズ

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

インデックス

記事一覧カード

Cocoon記事一覧ページのカードをカスタマイズ

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

Cocoonの記事一覧エントリーカードのデザインカスタマイズ

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

Cocoonの記事一覧のカードに設定した日数の間NEWマークを表示する

Cocoonのトップページやアーカイブページでの記事一覧で、新着記事に「Newマーク」を表示します。サンプル「NEW」マークを左端に出したかったのですが、カテゴリーと被ってしまうので、...

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

Cocoonの記事一覧下ページ送り(ページネーション)をカスタマイズ

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

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

Cocoonのページトップボタンの設定と位置を変えるカスタマイズ

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

記事部分

記事タイトルや見出し(H1～H5）

コピペで！Cocoonの記事タイトルや見出し(H1～H5）をカスタマイズ

Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。見出し１（H1)は記事のタイトルで使われますので、記事本文中はH2～を利用します。デザイン設定する為の指定方法と、...

目次デザイン

Cocoonの目次設定とデザインカスタマイズ

Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありませんが、少しデザインを変更してみました。前提 Cocoon設定→目次タブから、表示の設定を行います。 ...

記事下ページャー

Cocoonの記事下ページャーをカスタマイズ

Cocoonの記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。カスタマイズサンプル Before After 枠線をつける ...

記事を読む時間

Cocoonの「この記事は約〇分で読めます」の設定とカスタマイズ

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

ブログカード

コピペで簡単！Cocoonのブログカードをカスタマイズ

Cocoonのブログカードをカスタマイズしてみます。 Cocoonにはブログカード用の装飾コード（囲みブログカードラベル）もたくさんありますが、基本的な枠のデザインカスタマイズになります。 ...

検索フォーム風

Cocoonの記事内に埋め込める検索フォームの使い方とカスタマイズ

Cocoonには、記事内に「検索フォーム風」のボタンを埋め込む機能があり、簡単に挿入して使えます。その使い方と、簡単カスタマイズ方法です。使い方記事編集画面で、...

トグルボックス

Cocoonの記事内に開閉するBOX（トグルボックス）表示とカスタマイズ

Cocoonには、記事内に「アコーディオン開閉」するボックス（トグルボックス）を埋め込む機能があり、簡単に挿入して使えます。閉じた状態開いた状態 ...

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

Cocoonでビジュアルエディタ見出しやスタイルを思い通りにカスタマイズ

Cocoonの文字装飾デザインは膨大に用意されていますが、ちょっと色を変えたいもう１色欲しい独自のデザインも便利に使いたいなどといった場合に、スタイルから挿入出来るデザインを編集する方...

吹き出しデザイン

Cocoonの吹き出しデザインをカスタマイズ

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

文字装飾

Cocoonの文字装飾ボックススタイルをカスタマイズ（アイコン）

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

Cocoonの文字装飾ボックススタイルをカスタマイズ（案内）

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

Cocoonの文字装飾ボックススタイルをカスタマイズ（白抜き・タブ・付箋風）

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

Cocoonの文字装飾マーカーの色やデザインをカスタマイズ

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

Cocoonの文字装飾バッジの色やデザインをカスタマイズ

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

Cocoonの文字装飾ボタンの色やデザインをカスタマイズ

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

Cocoon文字装飾スタイル・サンプルとカラーコードとクラス名一覧

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

固定ページ

簡単！Cocoonのサイトマップをプチカスタマイズ

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

Cocoonでサイトマップをカテゴリー単位に表示する方法

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

Cocoon固定ページで投稿日・投稿者情報・アイキャッチを非表示にする

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

スキン

Cocoonのスキンをカスタマイズして新しいスキンを作る方法

Cocoonのデザインスキンは標準でも数十種類、公認でないものを含めれば数百あるかも？？ですが、イマイチどれも「ピタ！」っと来ない・・・という場合に、気になるスキンを自分好みにカスタマイズ...

CocoonのスキンMomoonをカスタマイズして新しいスキンを作る

CocoonのデザインスキンMomoonをカスタマイズしてみます。はじめにスキンのカスタマイズを行う為に必要な手順についてです。必要なもの FTPツール ...

その他

CocoonでのPHPファイル編集を伴うカスタマイズについて

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

Cocoonで特定カテゴリーやタグを非表示にする方法

ワードプレスの標準ウィジェットで表示する「カテゴリー」や「タグ」を指定したものだけ非表示にする方法です。手順カテゴリーウィジェット CSS１行追記 CSS追記は以下...

Cocoonで評価・ランキングの★を好きな場所で表示する方法

Cocoonにはランキング機能があり、評価の★を５段階（0.5刻み）に表示する機能があります。ランキング機能のサンプルこの機能で設定されている★を使って、好きな場所で５段階...

コメント

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