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

ブログカスタマイズ

Cocoonカスタマイズ

Cocoonタイムラインをおしゃれ化|コピペで使える6種類のカスタマイズ集

「タイムライン便利だけど、ちょっと地味かも…」そんな悩みを解決する、Cocoonタイムラインブロックの実用カスタマイズ集です。見た目を変えるだけでも、流れを追い...
Cocoonカスタマイズ

Cocoon見出しボックスをおしゃれにカスタマイズ|デザイン切り替え&マーカー色も自動調整

Cocoonの「見出しボックス」をおしゃれにカスタマイズしたい方へ。見出しボックスのデザインを変更したいCSSで見た目を整えたい複数スタイルを切り替えたいこの記...
Cocoonカスタマイズ

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

WordPressテーマ「Cocoon」のタブ見出しボックスは、記事の情報をすっきり整理できる便利な装飾です。ただ、実際に使っているとこう感じることはないでしょ...
Cocoonカスタマイズ

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

Cocoonのラベルボックスはシンプルだけど、「余白が狭い」「ラベル後ろ線が気になる」「もっとおしゃれにしたい」と感じることも。見た目が少し整うだけでも、読みや...
Cocoonカスタマイズ

Cocoon通知エリア|スライド表示(流れる文字)+CTAボタン追加カスタマイズ【コピペOK】

「Cocoonの通知エリア、ちょっと地味に見えるかも…」「もう少し自然に目を引く感じにできないかな?」そんなときに試してみたいのが、通知エリアを“流れるお知らせ...
Cocoonカスタマイズ

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

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

Cocoonアイコンボックスのカスタマイズ方法|デザイン切替・色変更も完全対応

更新情報(2026/02/17)ボックスやアイコンのカラーを固定値から変更し、すべてCSS変数で管理できる設計にリニューアルしました。こんなことが簡単にできるよ...
Cocoonカスタマイズ

Cocoonブログカードをカスタマイズ|表示切替12スタイルでCTR改善【コピペOK】

更新情報2026/03/04 CSSを微修正2025/12/20 縦型スタイルを1種類追加、掲載コードを全修正記事内リンクとしてよく使うCocoonのブログカー...
Cocoonカスタマイズ

カラム固定を解消!Cocoonボックスメニューの列数を2〜6列に自由変更【コピペOK】

Cocoonのボックスメニューは、アイコン付きで直感的に使える便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導いてくれます。ただ、「列数を変え...
Cocoonカスタマイズ

Cocoonタブブロックの使い方とデザイン強化カスタマイズ|均等配置・横スクロール対応

Cocoonのタブブロックを「横スクロール・均等配置・折り返し」にカスタマイズしたい方へ。この記事では、コピペだけで12種類のデザインを追加する方法を解説してい...
Cocoonカスタマイズ

【Cocoon】白抜きボックスのデザインを17種類に拡張|ワンクリック切替カスタマイズ

Cocoonの「段落ブロック」は手軽に装飾できて便利ですが、リストや画像など複数のブロックを中に入れられないのが少し不便。囲み枠はそのまま活かしながら、リストも...
Cocoonカスタマイズ

Cocoonアコーディオン(トグル)をカスタマイズ!10種類のデザインでスッキリ魅せる

更新情報(2026/02/28)アイコン変更開閉時のアニメーション追加Cocoonテーマのアコーディオン(トグル)は、情報量が多いページでもクリックひとつで内容...
Cocoonカスタマイズ

Cocoonアピールエリアに検索フォーム(検索窓)を置く方法|コピペOK+回遊率アップ

Cocoonのアピールエリアに検索フォームを設置すると、ユーザーが知りたい情報へ最短でアクセスでき、回遊率・滞在時間の改善につながります。しかも設定はシンプル。...
Webカスタマイズ

CSSだけで複数画像切り替えスライダーを作る方法|JS不要・軽量・コピペOK【WordPress対応】

トップページに複数画像を切り替えるおしゃれなフェードスライダーを設置したいけれど、プラグインを使うと重くなるJavaScriptは難しいCSSだけで簡単に作りた...
カスタマイズの基本

CSSで中央寄せする方法まとめ|テキスト・画像・バナー・ボックスを迷わず真ん中に配置

中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類(テキスト・画像・ブロック要素)や揃え方(横だけ・縦横両方...
Webカスタマイズ

タブ切り替えをHTMLとCSSで実装(JavaScriptなし)

通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
Cocoonカスタマイズ

Cocoonでフルワイド(幅いっぱい)にする方法|全幅表示+背景デザインの作り方

背景が端まで広がらない余白が消えない横スクロールが出てしまうCocoonでフルワイド(全幅)デザインを作ろうとすると、このあたりでつまずく方が非常に多いです。設...
カスタマイズの基本

CSSがなぜ効かない?反映されない原因と対策まとめ|デベロッパー(検証)ツールで簡単チェック

CSSが反映されない原因を詳しく解説!デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
Cocoonカスタマイズ

Cocoonトップページ作成ガイド(サイト型)|HTML・ブロック2つの方法を比較して解説

Cocoonでは、ブログ型だけでなくサイト型トップページを作ることができます。しかし、トップページはどう作るの?固定ページで作るの?ブロックとHTMLどっちがい...
Cocoonカスタマイズ

【Cocoon】サイト型トップページの作り方|CSSコピペで自由にデザイン(カスタマイズ向け)

「トップページがブログ一覧のままで見づらい…」「サイトっぽいデザインにしたい」そんな悩み、Cocoonでも解決できます。実は、固定ページ+CSSを少し追加するだ...
スポンサーリンク