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

Cocoon・カスタマイズ

Cocoon・カスタマイズ

Cocoonのトップページをデザイン:カテゴリー別記事を横並び表示

トップページなどに、カテゴリー別の記事を横並びに見やすく表示してみます。トップページデザインの一部として利用したり、その他の好きなページに表示する事も可能です。表示サンプル方法や手順について解説してい...
Cocoon・カスタマイズ

コピペで簡単!Cocoonのブログカードをカスタマイズ

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

Cocoonの目次設定とデザインカスタマイズ

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

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~ の新機能設定方法は以下にまとめ...
スポンサーリンク