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

Cocoon・カスタマイズ

Cocoon・カスタマイズ

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

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

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

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

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

Cocoonの記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。カスタマイズサンプルBeforeAfter 枠線をつける ページャー左右の矢印マークの色変更ホバー時 背景色を...
Cocoon・カスタマイズ

Cocoonのスキン「黒×ビビッドカラー」用部品:タブ切替メニュー

Cocoonの独自スキン「黒」を基調にしたバージョンに使えるタブ切替メニューのデザインです。元のスキンは以下です。カテゴリー・タグウィジェット用の部品もあります。タブ切替メニューサンプル初期表示の1つ...
Cocoon・カスタマイズ

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

Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。2020/05/25 Ver.2.1.6.x~ の新機能設定方法は以下にまとめ...
Cocoon・カスタマイズ

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

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

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

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

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

Cocoonの独自スキン「和の色」6色バージョンに使えるタブ切替メニューのデザインです。元のスキンは以下です。カテゴリー・タグウィジェット部品もあります。このスキン用の5色のデザインをコピペ出来ます。...
Cocoon・カスタマイズ

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

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

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

Cocoonのサイドバータイトル(ウィジェットタイトル)のデザインカスタマイズをしてみます。カスタマイズサンプルBeforeAfterサンプルではシンプルに角を丸めているだけですが、この記事で紹介する...
スポンサーリンク