サイト型トップページの作り方を公開しています!

ブロックデザイン

Cocoon UI強化カスタマイズ集

  • 「Cocoonって便利だけどデザインがちょっと味気ない…」
  • 「有料テーマみたいにオシャレな見た目にできたらいいのに」
  • 「難しいCSS編集は苦手。でも人とは違うデザインにしたい!」

そんなお悩みを、5分で解決できるUI強化カスタマイズをまとめました。

サイドバーで選ぶだけ

  • ワンクリックでデザインを自由に切り替え
  • 同一ページ内で異なるデザインを組み合わせOK
  • 一度導入すれば、サイト全体で使い回せる

実装もとってもカンタン

必要なのは、コードを2か所に貼り付けるだけ
初心者でも迷わず設定できるように、具体的な手順(コード)をすべて掲載しています。

標準機能をそのまま使うのではなく、「見せ方」まで整えてサイト全体の完成度を一段引き上げませんか?

すべて、このサイトで実装しているお気に入りばかりです。

Cocoonカスタマイズ

Cocoonタブブロックを使いやすくカスタマイズ|均等配置・折り返し・横スクロールをワンクリック化

Cocoonのタブブロックはとても便利なのですが、タブを均等幅にしたいスクロールではなく自動で折り返したいデザインを選びたいと感じたときに標準機能では設定できま...
Cocoonカスタマイズ

Cocoonナビカードの設定と使い方|記事ピックアップ・レイアウト調整・リボンカスタマイズ

Cocoonのナビカードは、表示したい記事をカード形式で分かりやすく紹介できる機能です。この記事では、ナビカード用メニューの作成方法ブロック・ショートコード・ウ...
Cocoonカスタマイズ

Cocoonアコーディオン(トグル)をおしゃれにカスタマイズする方法|7種類のデザインをワンクリック追加

Cocoonのアコーディオン(トグルボックス)は便利ですが、標準デザインは1種類のみです。デザインのバリエーションが少ない左寄せにしたいボタン風にしたいそんなと...
Cocoonカスタマイズ

Cocoonブロックはどれ使う?|種類・使い方・デザインカスタマイズまとめ

Cocoonには、記事を見やすく整理できる装飾ブロックがたくさんそろっています。タイトル付きボックス・カード・FAQ・タイムラインなど、種類も豊富!ただ実際に使...
Cocoonカスタマイズ

Cocoonアイコンボックスをおしゃれにカスタマイズ|デザイン切替・色変更も対応

Cocoonのアイコンボックスは便利ですが、使っているうちに補足も注意点も同じ見た目になるパソコンで見るとアイコンが大きいかも他のサイトと差別化したいと感じるこ...
Cocoonカスタマイズ

Cocoon人気記事ランキング|表示方法とラベルの色・スタイルを変更するカスタマイズ

Cocoonは標準でアクセス集計が使えるので、外部ツールを入れなくても人気記事ランキングを簡単に表示できます。サイドバーやトップページに設置すれば読者の目を引き...
Cocoonカスタマイズ

Cocoonボックスメニューの列数を自由に変更する方法|CSSカスタマイズで2〜6列&スマホ最適化

Cocoonのボックスメニューは、アイコン付きで直感的に使える便利な機能です。とはいえ実際に使ってみると、「思ったように列数が変えられない…」と少し戸惑いました...
Cocoonカスタマイズ

Cocoon記事カードを横並びにする方法|新着記事・人気記事・ナビカード2〜4カラム切替・PCスマホ対応カスタマイズ

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoonカスタマイズ

Cocoonタイムライン(ステップブロック)をおしゃれにカスタマイズ|選べる5種類のデザイン

「タイムライン便利だけど、ちょっと地味かも…」今回紹介するのは、Cocoonタイムラインを実用レベルでおしゃれにするカスタマイズ集です。実は少し見せ方を整えるだ...
Cocoonカスタマイズ

Cocoon「タブ見出しボックス」をおしゃれにデザイン|コピペで使えるカスタムスタイル

Cocoonのタブ見出しボックスは、情報整理に便利です。ただ複数記事を書いていると、「便利だけど少し単調に見える」と感じることがあります。そこで、タブ見出しボッ...
Cocoonカスタマイズ

Cocoon見出しボックスをおしゃれにカスタマイズ|選べるデザイン&リストマーカー色も自動調整

Cocoonの「見出しボックス」をおしゃれにカスタマイズしたい方へ。今回紹介するカスタマイズでは、Cocoon標準の「見出しボックス」をベースに、シンプル・影付...
Cocoonカスタマイズ

Cocoonブログカードをカスタマイズ|12種類のデザイン切替と組み合わせで回遊率を上げる方法

Cocoonブログカードがクリックされない原因を解決。CSSで12種類のデザインに切り替え、関連記事・おすすめ記事・まとめ枠を最適化することで回遊率アップにつなげるカスタマイズ方法です。
Cocoonカスタマイズ

Cocoonラベルボックスのカスタマイズ方法|CSSコピペでおしゃれにするデザイン例

Cocoonのラベルボックスは便利ですが、ラベルの後ろに線が見えて少し野暮ったい長いラベルだとスマホで崩れやすいデザインのバリエーションが少なく使い分けしづらい...
Cocoonカスタマイズ

【Cocoon】白抜きボックスのカスタマイズ|おしゃれデザインを追加+ワンクリックで切り替え

Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。装...
スポンサーリンク