Cocoon・カスタマイズ Cocoonの文字装飾ボタンの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はボタンのカスタマイズ方法です。 カスタマイズ方法...
Cocoonのカスタマイズ
Cocoon・カスタマイズ 
Cocoon・カスタマイズ Cocoonのスキン「2020TOKYO」用部品：タブ切替メニュー
Cocoonの独自スキン「2020TOKYO」オリンピックカラーに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット用の部品もあります。 タブ切替メニュー サ...
Cocoon・カスタマイズ Cocoonでサイトマップをカテゴリー単位に表示する方法
Cocoonにはサイトマップを自動生成するショートコード機能があり、 記事一覧、固定ページ一覧、カテゴリー、アーカイブを表示出来ますが、 カテゴリー単位に分ける 並び変える などが出来ない為、カテゴリ...
Cocoon・カスタマイズ Cocoonのヘッダー下アピールエリアをカスタマイズ
Cocoonのヘッダー下に表示できる「アピールエリア」をカスタマイズしてみます。 背景の色を変える簡単なカスタマイズから、ボタンの位置などデザインを変えるものなど、あれこれと。 アピールエリアの設定は...
Cocoon・カスタマイズ Cocoonのページトップボタンの設定と位置を変えるカスタマイズ
各ページで、右下に表示される矢印マークのページトップボタンの設定と、少しだけ位置を変えるカスタマイズです。 ページトップボタンの設定 Cocoon設定→ボタン 設定項目 トップへ戻るボタンの表示・非表...
Cocoon・カスタマイズ コピペで！CocoonのSNSフォローボタンデザインカスタマイズ
Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。 初期デザイン カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下...
Cocoon・カスタマイズ Cocoonのグローバルナビのアニメーション効果カスタマイズ
Cocoonのグローバルメニューの動きをカスタマイズしてみるサンプルです。 その他のカスタマイズは以下にもまとめています。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記は以下のいずれかから...
Cocoon・カスタマイズ コピペで！Cocoonの記事タイトルや見出し(H1～H5）をカスタマイズ
Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。 見出し１（H1)は記事のタイトルで使われますので、記事本文中はH2～を利用します。 デザイン設定する為の指定方法と、まるごとコピ...
Cocoon・カスタマイズ Cocoonの新着記事ウィジェット（＆ショートコード）のデザインカスタマイズ
Cocoonの新着記事ウィジェットのカードをカスタマイズしてみます。 新着記事ウィジェットはCocoonオリジナルウィジェットと 記事内などにも使えるショートコードもあり カスタマイズを行うとどちらも...
Cocoon・カスタマイズ 簡単！グローバルメニューのアイコンやラベルを色分けする
グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル（メニュー）ごとに色分けする方法についてです。 Cocoonに限らず、FontAweso...