Cocoon Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
WordPressテーマ「Cocoon」のアコーディオン、使っていますか？情報量が多いページでも、クリックひとつで内容を折りたためるとても便利なブロックです。た...
ブログカスタマイズ
Cocoon 
Cocoon 【Cocoon】FAQブロックの質問を見出し（H3）に変更するカスタマイズ｜SEO・可読性・回遊率UP
Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要...
テーマ共通 同じページ内にジャンプ！HTMLアンカーリンクの正しい設定方法と使い方ガイド
長い記事を読んでいると、「ここだけ見たいのに、スクロールが長い…」と感じる瞬間があります。そんなストレスを減らせるのが、アンカーリンク（ページ内リンク）です。目...
CSSの基礎 初心者向けWordPressバックアップ｜CSS・PHP・JavaScriptファイルの安全な保存方法
WordPressでは、CSS・PHP・JavaScriptを少し編集したい場面がよくあります「余白を調整したい」「ボタンの色を変えたい」「便利なコードを試した...
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法｜HTMLテンプレート化で簡単実装
2025.12.04 手順をよりシンプル（簡単）に修正しました。Cocoonの「アピールエリア」に検索フォームを設置すると、ユーザーが知りたい情報へ一瞬でたどり...
CSSの基礎 WordPress「追加CSSクラス」使い方｜特定ブロックだけデザインを変える方法が便利すぎる
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？「ボタンの色を変えたい」「箇条書きリストに下線を引きたい」「...
CSSの基礎 CSSで中央寄せする方法まとめ｜テキスト・画像・バナー・ボックスを迷わず真ん中に配置
中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類（テキスト・画像・ブロック要素）や揃え方（横だけ・縦横両方...
配色・デザイン ブログのアイキャッチや図解がプロっぽくなる！おすすめデザイン本4冊（おしゃれな配色・余白・フォント）
ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか？そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
Cocoon Cocoonで全幅（フルワイド）デザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説
Cocoonでも、有料テーマSWELLのようなフルワイド（全幅）デザインは再現できます。「SWELLのように幅いっぱいに表示したい」「でもCocoonだと余白調...
Cocoon Cocoonサイドバー目次追従＆スクロール対応にする方法【見切れ対策】
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセ...
Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
成果の出るサイト運営で見落とせないのが CTA（Call to Action）。「今すぐ見る」「この記事をチェック」など、読者の行動を後押しする導線があるだけで...
Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
Cocoonの「アピールエリア」はサイトの第一印象を決める重要なパーツ。ここを整えるだけでトップページの見栄え・ブランド感・読者の滞在率が大きく変わります。この...
Cocoon Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
Cocoon Cocoon通知エリア｜スライド表示（流れる文字）＆ボタン追加でアピールする方法
Cocoonの「通知エリア」は、サイト全体にメッセージを表示したり特定のページへ誘導したりできる便利な機能です。ただし、デフォルトデザインはとてもシンプル。キャ...
CSSの基礎 ChromeデベロッパーツールでCSSセレクタを調べる方法｜初心者向けに解説
CSSでカスタマイズしてみたいけど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はありませんか？実は、ほと...
テーマ共通 複数画像を切り替えるフェードスライダーの作り方｜CSSアニメーション（JavaScript不要）
トップページにおしゃれな画像スライダーを置きたいけれど、「表示が重くなる」「JavaScriptの管理が不安」「できるだけシンプルに実装したい」と感じている方も...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...