Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
成果の出るサイト運営で見落とせないのが CTA（Call to Action）。「今すぐ見る」「この記事をチェック」など、読者の行動を後押しする導線があるだけで...
ブログカスタマイズ
Cocoon 
Cocoon Cocoonナビカードの設定と使い方｜記事ピックアップ・レイアウト調整・リボンカスタマイズ
Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。新着記事や人気記事のような自動表示とは違い、「読んで...
Cocoon Cocoonブログカード｜タイトル・サムネ・抜粋文・URL表示をワンクリックで切り替えるカスタマイズ
更新情報2025.12.24 掲載コードの全修正をおこないました（コード削減のため）縦型スタイルを1種類追加しましたCocoonでブログカードを使っていると、「...
Cocoon Cocoon新着・人気記事・ナビカードを横並びに！カラム数をワンクリックで変更する方法
Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
テーマ共通 複数画像を切り替えるフェードスライダーの作り方｜CSSアニメーション（JavaScript不要）
トップページにおしゃれな画像スライダーを置きたいけれど、「表示が重くなる」「JavaScriptの管理が不安」「できるだけシンプルに実装したい」と感じている方も...
Cocoon Cocoonタイムライン（ステップブロック）おしゃれ化カスタマイズ｜最大6種類のデザイン切り替え
Cocoonの「タイムライン」ブロックは、手順解説や申し込みフローの表示にぴったり。しかし、デフォルトのままだと「見た目がシンプルすぎる」「ブロックごとに変えら...
Cocoon Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ
Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。「リストの点がテーマカラーと合わない」「記事の内容に合わせて、デザインを切り替えたい」そんな方...
Cocoon Cocoonで全幅（フルワイド）デザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説
Cocoonでも、有料テーマSWELLのようなフルワイド（全幅）デザインは再現できます。「SWELLのように幅いっぱいに表示したい」「でもCocoonだと余白調...
Cocoon Cocoonウィジェット・ショートコードで新着記事・人気記事に日付を表示する方法（投稿日・更新日）
Cocoonでは、新着記事・人気記事をブロック／ウィジェット／ショートコードの3通りで表示できます。投稿日や更新日の日付はデフォルトでは非表示ですが、表示方法に...
CSSの基礎 WordPress「追加CSSクラス」活用法｜特定ブロックだけデザインを変える方法
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？「ボタンの色を変えたい」「箇条書きリストに下線を引きたい」「...
テーマ共通 同じページ内にジャンプ！HTMLアンカーリンクの正しい設定方法と使い方ガイド
長い記事の中で「ここを読みたいのにスクロールが面倒…」という経験はありませんか？そんな問題を解決してくれるのが アンカーリンク（ページ内リンク） です。目次・F...
Cocoon Cocoonサイドバー目次追従＆スクロール対応にする方法【見切れ対策】
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
Cocoon Cocoonテーブル（表）の中にリンクボタンを置く方法｜簡単・視認性アップでクリック率も向上
比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい！そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress...
テーマ共通 CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】
見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。この記事では、WordPress（一部無料ブログ）全般...
Cocoon カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法
Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon Cocoonサイト型トップページの作り方｜シンプル＆おしゃれデザイン【HTML・CSSコピペOK】
トップページの第一印象が平凡で、他サイトと似てしまう……そんなお悩みありませんか？この記事では、Cocoonの固定ページとHTML・CSSで作る「サイト型トップ...
Cocoon 【Cocoon】白抜きボックスをワンクリックで切り替え！15種デザイン拡張カスタマイズ
記事を編集するときに、「要点をまとめたいのにリストが使えない…」「ボックス内に複数の要素を配置したい…」と感じたことはありませんか？Cocoonの段落ブロックに...
Cocoon Cocoonラベルボックスをシンプル＆おしゃれにカスタマイズ！使い方・デザイン例・CSSコードまとめ
Cocoonの「ラベルボックス」は、注意書きや補足情報をシンプルに強調できる便利な装飾ブロックです。一方で、余白の窮屈さが気になるラベルの後ろに線が少し残ってし...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
Cocoon Cocoon「タブ見出しボックス」を自由にデザイン｜コピペで使える8種のオリジナルスタイル
見出し2025.11.04更新：選べるデザインに「マスキングテープ風」を追加！WordPressテーマ「Cocoon」のタブ見出しボックスは、記事内で見出しやコ...