Cocoonカスタマイズ Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
更新情報（2026/02/28）アイコン変更開閉時のアニメーション追加Cocoonテーマのアコーディオン（トグル）は、情報量が多いページでもクリックひとつで内容...
Cocoonカスタマイズ 
Webカスタマイズ タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
CSS基礎 CSSセレクタの調べ方｜Chromeデベロッパーツール（検証）でクラス・IDを確認する方法【初心者向け】
CSSでカスタマイズしてみたいけれど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はあると思います。見た目...
CSS基礎 CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ
Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション（@keyframes と animation） です。この2つを理解すれば、Ja...
CSS基礎 CSSで疑似要素に影をつける方法｜box-shadowとfilter: drop-shadowの違いと使い分け
CSSで疑似要素に影をつける方法を解説します。吹き出しの三角形に影をつけたいのに、box-shadow では四角い影になってしまうことがあります。この問題は、b...
Cocoonカスタマイズ Cocoon「タブ見出しボックス」を自由にデザイン｜コピペで使えるカスタムスタイル8種類【ワンクリック切替】
更新情報（2026/02/15 ）見出しテキストの省略処理、CSS微修正WordPressテーマ「Cocoon」のタブ見出しボックスは、記事内で見出しやコンテン...
Cocoonカスタマイズ Cocoon通知エリアのカスタマイズ方法｜流れる文字（スライド表示）とボタン追加
Cocoon通知エリアをカスタマイズすると、視線導線を活かしてクリック率を底上げできます。重要なお知らせを確実に見せたいキャンペーン導線を強化したいデザインをワ...
アフィリエイト ポチップでAmazon商品を検索する方法｜PA-API・Pochipp Assist・もしもアフィリエイトの違いを比較
ポチップを使ってAmazonの商品を検索したいけれど、最初に戸惑いやすいのが「PA-APIって何？」「Assistって必要なの？」という点ではないでしょうか。結...
Cocoonカスタマイズ 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
CocoonでCTAボックスを作りたいけれど、ボタンを複数設置したいレイアウトを自由に組みたいCSSでデザインを調整したいと感じる場面もあります。Cocoonに...
Cocoonカスタマイズ Cocoonアイコンボックスのカスタマイズ方法｜デザイン切替・色変更も完全対応
更新情報（2026/02/17）ボックスやアイコンのカラーを固定値から変更し、すべてCSS変数で管理できる設計にリニューアルしました。こんなことが簡単にできるよ...
Cocoonカスタマイズ Cocoonラベルボックスをシンプル＆おしゃれにカスタマイズ！使い方・デザイン例・CSSコードまとめ
ラベルボックスは便利ですが、デフォルトのままだと少し物足りなく感じることがあります。余白が窮屈ラベル後ろの線が気になるもっと見栄えをよくしたいそんなときは、CS...
Cocoonカスタマイズ 【Cocoon】FAQブロックの質問を見出し（H3）に変更するカスタマイズ｜SEO・可読性・回遊率UP
Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要...
Cocoonカスタマイズ Cocoonナビカードの設定と使い方｜記事ピックアップ・レイアウト調整・リボンカスタマイズ
Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list（ordered_posts）で記事カード表示する方法ナビカードでカード型...
Webカスタマイズ WordPressパターン機能でラクラク時短！再利用ブロックの使い方と同期・非同期の違い
毎回、同じ装飾ボックスやCTAを手作業で作っていませんか？WordPressの「パターン」機能を使えば、よく使うブロックやレイアウトを登録して、他の投稿やページ...
Cocoonカスタマイズ カラム固定を解消！Cocoonボックスメニューの列数を2〜6列に自由変更【コピペOK】
Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoonカスタマイズ Cocoon見出しボックスをカスタマイズ｜リストマーカー（点）の自動配色とデザイン切り替え実装
Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利にカスタマイズしたい方へ。この記事では、ボックス内のリストマーカー（点）の色をボーダー色と自動で揃...
Webカスタマイズ 動きで魅せる！ホバーアニメーションボタン・おしゃれな矢印リンク＆下線スライド（CSS付き）
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...
Cocoonカスタマイズ Cocoon新着・人気記事・ナビカードを横並び表示｜カラム数をワンクリックで切替
Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
サイト設定 エックスサーバー｜サブドメイン設定で２つめのブログ（複数サイト）を作る方法
ブログを運営していると、「もうひとつ作りたい」と思う瞬間が出てくるはず。別ジャンルに挑戦したいときや、雑記ブログから伸びているテーマだけを切り分けたいときなど、...
Cocoonカスタマイズ Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...