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

Cocoonのカスタマイズ

Cocoon・カスタマイズ

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

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

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

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

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

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

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

Cocoonの独自スキン「黒」を基調にしたバージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット用の部品もあります。 タブ切替メニュー サンプル 初期...
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のサイドバータイトル(ウィジェットタイトル)のデザインカスタマイズをしてみます。 カスタマイズサンプル Before After サンプルではシンプルに角を丸めているだけですが、この記事で...
スポンサーリンク