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

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

スポンサーリンク
カスタマイズ

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

 

スポンサーリンク

ヘッダーエリア

グローバルナビ

Cocoonのグローバルナビメニューにアイコンフォントとカスタマイズ
Cocoonのメニューは、補足説明を出せる機能があります。グローバルナビメニューの設定方法とアイコンフォントを表示する方法、更に少しデザインカスタマイズもしてみます。 グローバルナビの設定 ...
コピペで!Cocoonのグローバルナビをカスタマイズ
Cocoonのグローバルナビバーをカスタマイズしてみます。 コピペで実装できます。お好きなカラーに色変更してご自由にご利用下さい。 アイコンフォント設定方法や、その他のカスタマイズ...
簡単!グローバルメニューのアイコンやラベルを色分けする
グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル(メニュー)ごとに色分けする方法についてです。 Cocoonに限らず、FontAwes...
Cocoonのグローバルナビに補足説明文を表示する方法とカスタマイズ
メニューに説明を記述する機能はWordPressの機能ですが、それをグローバルナビに表示できるテーマは限られていますが、  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のサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。 このデザ...

 

検索フォーム

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

 

新着記事ウィジェット

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

 

SNS

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

 

タグクラウド

コピペで!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で見出しのデザインを好みのものにカスタマイズする方法です。 見出し1(H1)は記事のタイトルで使われますので、記事本文中はH2~を利用します。 デザイン設定する為の指定方法と、...

 

目次デザイン

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

 

記事下ページャー

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

 

ブログカード

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

 

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

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

 

吹き出しデザイン

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で特定カテゴリーやタグを非表示にする方法
ワードプレスの標準ウィジェットで表示する 「カテゴリー」や「タグ」を指定したものだけ非表示に する方法です。 手順 カテゴリーウィジェット CSS1行追記 CSS追記は以下...
Cocoonで評価・ランキングの★を好きな場所で表示する方法
Cocoonにはランキング機能があり、評価の★を5段階(0.5刻み)に表示する機能があります。 ランキング機能のサンプル この機能で設定されている★を使って、好きな場所で5段階...

 

コメント

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