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

Cocoon・カスタマイズ

Cocoon・カスタマイズ

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

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

Cocoonのスキン「2020TOKYO」用部品:タブ切替メニュー

Cocoonの独自スキン「2020TOKYO」オリンピックカラーに使えるタブ切替メニューのデザインです。元のスキンは以下です。カテゴリー・タグウィジェット用の部品もあります。タブ切替メニューサンプル初...
Cocoon・カスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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