CSSの基礎 WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
ブログカスタマイズ
CSSの基礎 
Cocoon Cocoonタイムライン（ステップブロック）おしゃれ化カスタマイズ｜最大6種類のデザイン切り替え
2025.9.26_選べるデザインにステップ式（番号）を追加しました。NEW!WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意され...
Cocoon Cocoonタブブロックの使い方＆おしゃれカスタマイズ｜ワンクリックで12デザイン切替
WordPressテーマCocoon（2.7.3～）に標準搭載された、待望の「タブブロック」。直感的な操作でタブを切り替えられるため、「情報をコンパクトにまとめ...
Cocoon Cocoonアイコンボックスをおしゃれにカスタマイズ｜クリックで簡単デザイン切り替え
2025.8.26 デザインと実装コードを見直し、修正をおこないました。Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザイン...
テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセ...
Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
2025.10.06_デモページをさらにイメージしやすく更新しました。Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重...
Cocoon Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
Cocoon Cocoon通知エリア｜スライド表示（流れる文字）＆ボタン追加でアピールする方法
Cocoonの「通知エリア」は、サイト全体にメッセージを表示したり特定のページへ誘導したりできる便利な機能です。ただし、デフォルトデザインはとてもシンプル。キャ...
Cocoon Cocoonカスタマイズの基本｜初心者が安心してできるHTML・CSS・PHP・JavaScript編集方法
ブログのデザインや機能をもっと自由にカスタマイズしたいとき、WordPressテーマ「Cocoon」では HTML・CSS・PHP・JavaScript を使っ...
テーマ共通 CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】
見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。この記事では、WordPress（一部無料ブログ）全般...
CSSの基礎 【必須】CSSセレクタを調べる方法｜Chromeデベロッパーツール活用で初心者でも簡単！Webデザインに役立つ実践ガイド
Webデザインやサイトのカスタマイズに挑戦するとき、必要なのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない」と言っ...
Cocoon カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法
Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマ「Cocoon」のアコーディオンボックス、使ってい...
テーマ共通 動きで魅せる！おしゃれな矢印リンク＆下線スライド・ホバーアニメーションボタン（CSS付き）
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
Cocoon 【Cocoon】ボタンやキャプションの文字を変更｜『新着記事』『もっと見る』『次ページ』のカスタマイズ
WordPressの人気無料テーマ「Cocoon」を使っていると、「新着記事」「もっと見る」「次のページ」などのボタンやキャプションのテキストを自分好みに変更し...
CSSの基礎 CSSで疑似要素に影をつける！box-shadowとfilter: drop-shadowの使い分けを徹底解説
CSSを使って疑似要素に影をつける方法を初心者にもわかりやすく解説します。特に、吹き出しのような複雑な形状の要素に影を適用する際のテクニックを紹介します。使用す...
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
ページ内の特定の場所にジャンプできる「アンカーリンク」は、長い記事やFAQページでとても便利です。ここでは、初心者でも分かりやすいように、HTMLとWordPr...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。