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

Cocoonトップページ

Cocoonは無料テーマとは思えないほど高機能。でも…

「もっとオシャレにしたい」
「操作は簡単なままがいい」
「サイト全体で使い回せるカスタマイズが知りたい」

そんな理想、まとめて叶えます。

このサイトではCocoonカスタマイズに特化。
むずかしい知識がなくても大丈夫。

  • コードを貼るだけで即おしゃれ
  • 固定ページで作るトップも自由設計
  • 見た目と回遊性(CV導線)を同時に強化

初心者さんでも「できた!」と実感できるように、手順はやさしく・迷わず・コピペ中心。

簡単・おしゃれ・機能的。

トップページ作成がもっと楽しく、もっと使いやすくなるアイデアを紹介しています。

Webカスタマイズ

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

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

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

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

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

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

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

「Cocoonの通知エリア、もっと目立たせたい…」「クリックされる導線を作りたい」そんなときは、スライド表示+ボタン追加のカスタマイズが効果的です。通知エリアは...
Cocoonカスタマイズ

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

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

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

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

【Cocoon】サイト型トップページの作り方|ブロックだけで簡単作成(初心者OK・CSSほぼ不要)

Cocoonなら、ブロック操作だけでサイト型トップページを作れます。トップページをサイト型にしたいけど、どこから始めればいいの?そんな方に向けて、この記事では初...
Cocoonカスタマイズ

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

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

WordPressでスクロールでふわっと表示する方法|CSS+IntersectionObserverで簡単実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...
Cocoonカスタマイズ

Cocoonアピールエリア|画面いっぱいのフルスクリーン+スクロール矢印・ズーム演出するカスタマイズ

Cocoonで「アピールエリアをフルスクリーン表示にしたい」「トップページをおしゃれにしたい」と悩んでいる方へ。この記事では、インパクトのあるフルスクリーン化の...
Cocoonカスタマイズ

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

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

CSS・SVGで作る境界線と背景デザイン|波、三角形、斜めラインを使ったおしゃれな装飾テクニック

Webデザインでは、ちょっとした工夫で見た目の印象が変わります。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセントを入れるだけ...
カスタマイズの基本

Cocoonカスタマイズ完全ガイド|HTML・CSS・PHPの編集場所と使い分けを初心者向けに解説

Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの?」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
Cocoonカスタマイズ

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

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list(ordered_posts)で記事カード表示する方法ナビカードでカード型...
Cocoonカスタマイズ

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

更新情報(2026/01/26) ラベルスタイル例に左上三角デザインを追加Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを使って人気記...
Cocoonカスタマイズ

Cocoon『もっと見る』『次のページ』『新着記事』のテキスト変更カスタマイズ

Cocoonを使っていると、「もっと見る」「次のページ」「新着記事」などの表記が、サイトの雰囲気に合わないと感じることがあります。英語表記にしたいクリックを促し...
Cocoonカスタマイズ

【Cocoon】特定のおすすめ記事をピックアップ表示する方法|new_listショートコード(ordered_posts)の使い方

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list(ordered_posts)で記事カード表示する方法ナビカードでカード型...
Cocoonカスタマイズ

Cocoonで投稿日・更新日を表示する方法|ウィジェットで新着・人気記事に日付を追加

Cocoonで新着記事・人気記事に「投稿日・更新日」を表示したい方へ。この記事では、表示方法ごとの違い(CSSが必要かどうか)コピペで使える基本CSS表示位置や...
スポンサーリンク