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

ブログカスタマイズ

Cocoonカスタマイズ

【Cocoon】CTAボックスの作り方と活用法|アフィリエイトリンクを効果的に配置

CocoonでCTAボックスを作りたいけれど、ボタンを複数設置したいレイアウトを自由に組みたいCSSでデザインを調整したいと感じる場面もあります。Cocoonに...
Webカスタマイズ

WordPressパターン機能でラクラク時短!再利用ブロックの使い方と同期・非同期の違い

毎回、同じ装飾ボックスやCTAを手作業で作っていませんか?WordPressの「パターン」機能を使えば、よく使うブロックやレイアウトを登録して、他の投稿やページ...
Cocoonカスタマイズ

Cocoon FAQブロックを見出し(H3)にする方法|目次に表示させるカスタマイズ

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要...
Cocoonカスタマイズ

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

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

CSSだけで複数画像を切り替え|フェードスライダーを簡単に作る方法【コピペOK・WordPress対応】

トップページにCSSだけで複数画像を切り替えるフェードスライダーを設置したいけれど、プラグインを増やしたくないJavaScriptは難しそうできるだけ軽く実装し...
Cocoonカスタマイズ

Cocoon見出しボックスをカスタマイズ|リストマーカー(点)の自動配色とデザイン切り替え実装

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

Cocoon記事カードを横並び表示(新着・人気記・ナビカード対応)|カラム数をワンクリックで切替

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

CSSセレクタの調べ方|Chromeデベロッパーツール(検証)でクラス・IDを確認する方法【初心者向け】

CSSでカスタマイズしてみたいけれど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はあると思います。見た目...
Cocoonカスタマイズ

Cocoon「タブ見出しボックス」を自由にデザイン|コピペで使えるカスタムスタイル8種類【ワンクリック切替】

更新情報(2026/02/15 )見出しテキストの省略処理、CSS微修正WordPressテーマ「Cocoon」のタブ見出しボックスは、記事内で見出しやコンテン...
Cocoonカスタマイズ

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

Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの?そんな方は、サイト型トップページ全体の構成やメリットをまとめたページ Cocoon...
Cocoonカスタマイズ

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

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

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

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

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

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

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

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

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

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

CSSでなめらかに点滅させる方法(コピペOK)

要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
Cocoonカスタマイズ

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

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

【Cocoon】カラーパレットの色を自由に変更・追加する方法

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
Cocoonカスタマイズ

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

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

Cocoon目次が見切れる原因と解決方法|サイドバー追従目次をスクロール対応にするCSS

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
スポンサーリンク