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

Cocoon新着・人気記事・ナビカードを横並びに!カラム数をワンクリックで変更する方法

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

Cocoonで全幅(フルワイド)デザイン!幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説

Cocoonでも、有料テーマSWELLのようなフルワイド(全幅)デザインは再現できます。「SWELLのように幅いっぱいに表示したい」「でもCocoonだと余白調...
Cocoon

Cocoon検索ボックスをアピールエリアに表示する方法|HTMLテンプレート化で簡単実装

2025.12.04 手順をよりシンプル(簡単)に修正しました。Cocoonの「アピールエリア」、そのまま使っていませんか?ここに検索フォームを設置すると、ユー...
テーマ共通

複数画像を切り替えるフェードスライダーの作り方|CSSアニメーション(JavaScript不要)

トップページにスライダーを置くと、ファーストビューが一気に引き締まりサイトの印象を大きく高められます。なかでも、CSSで作るスライダーはJavaScript不要...
Cocoon

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

Cocoonの「アピールエリア」はサイトの第一印象を決める重要なパーツ。ここを整えるだけでトップページの見栄え・ブランド感・読者の滞在率が大きく変わります。この...
テーマ共通

スクロールアニメーションの作り方|CSSとIntersectionObserver(交差監視)でふわっと表示

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

Cocoonサイト型トップページの作り方|シンプル&おしゃれデザイン【HTML・CSSコピペOK】

トップページが平凡で他のサイトと似たりよったり…そんなお悩みありませんか?この記事では、WordPressテーマ「Cocoon」を使った固定ページと、HTML・...
Cocoon

超簡単!Cocoonブロック機能でサイト型トップページを作る方法|コード最小限・初心者向け

Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの?そんなふうに迷っている方も多いのではないでしょうか。この記事では、WordPres...
Cocoon

【Cocoon】白抜きボックスをワンクリックで切り替え!15種デザイン拡張カスタマイズ

記事を編集するときに、「要点をまとめたいのにリストが使えない…」「ボックス内に複数の要素を配置したい…」と感じたことはありませんか?Cocoonの段落ブロックに...
Cocoon

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

WordPressテーマ「Cocoon」のアコーディオン、使っていますか?情報量が多いページでも、クリックひとつで内容を折りたためるとても便利なブロックです。た...
Cocoon

Cocoonタブブロックの使い方&おしゃれカスタマイズ|ワンクリックで12デザイン切替

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパ...
Cocoon

Cocoonタイムライン(ステップブロック)おしゃれ化カスタマイズ|最大6種類のデザイン切り替え

Cocoonの「タイムライン」ブロックは、手順解説や申し込みフローの表示にぴったり。しかし、デフォルトのままだと「見た目がシンプルすぎる」「ブロックごとに変えら...
Cocoon

カラム固定を解消!Cocoonボックスメニューを2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon

Cocoon「タブ見出しボックス」を自由にデザイン|コピペで使える8種のオリジナルスタイル

見出し2025.11.04更新:選べるデザインに「マスキングテープ風」を追加しました。Cocoonの「タブ見出しボックス」は、自由に見出しや色設定ができる汎用性...
Cocoon

Cocoon「見出しボックス」リストマーカー(点)の色を自動調整&デザイン切り替えカスタマイズ

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。「リストの点がテーマカラーと合わない」「記事の内容に合わせて、デザインを切り替えたい」そんな方...
Cocoon

Cocoonアイコンボックスをおしゃれにカスタマイズ|クリックで簡単デザイン切り替え

Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザインを簡単に作成できます。補足情報に便利ですが、デフォルトではデザインが固定...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれにカスタマイズ!使い方・デザイン例・CSSコードまとめ

Cocoonの「ラベルボックス」は情報をまとめるのに便利な機能ですが、余白が狭かったり、見出しの後ろに線が残ったりしてもう少しすっきりさせたいという声もよく聞き...
Cocoon

Cocoonブログカードをカスタマイズ!タイトル・サムネ・抜粋文・URL表示をワンクリックで切り替える方法

Cocoonでブログカードを使っていると、「この場面ではもう少しシンプルにしたい」「表示を切り替えられたら便利なのに」と感じることはありませんか?この記事では、...
Cocoon

Cocoonウィジェット・ショートコードで新着記事・人気記事に日付を表示する方法(投稿日・更新日)

Cocoonでは、新着記事・人気記事をブロック/ウィジェット/ショートコードの3通りで表示できます。投稿日や更新日の日付はデフォルトでは非表示ですが、表示方法に...
サイト設定

途中でパーマリンク変更できる?エックスサーバーでの設定方法|日付を消して投稿名に

途中からパーマリンクを変更しても大丈夫なの?そんな不安を感じていませんか。WordPressでは、日付入りパーマリンクから「投稿名」への変更は可能です。ただし、...
スポンサーリンク