テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
ブログカスタマイズ
テーマ共通 
Cocoon Cocoonタブ見出しボックスをカスタマイズ！おしゃれデザイン切り替えで使いやすく
2025.10.01更新：選べるデザインに「リボンタイプ」「丸吹き出し」を追加しました。Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっと...
テーマ共通 CSSで実装！複数画像を切り替えるアニメーションの作り方
トップページに画像スライダーやカルーセルなどのアニメーションがあると、ぱっと目を引きサイト全体が華やかに見えます。通常は JavaScript を用いて実装する...
Cocoon Cocoonカスタマイズの基本｜初心者が安心してできるHTML・CSS・PHP・JavaScript編集方法
ブログのデザインや機能をもっと自由にカスタマイズしたいとき、WordPressテーマ「Cocoon」では HTML・CSS・PHP・JavaScript を使っ...
Cocoon Cocoonタイムライン（ステップブロック）おしゃれ化カスタマイズ｜最大6種類のデザイン切り替え
2025.9.26_選べるデザインにステップ式（番号）を追加しました。NEW!WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意され...
Cocoon Cocoon白抜きボックスをおしゃれにカスタマイズ！複数デザインの使い分け方法
更新情報2025.10.10_デザイン２種追加しました「影付き」「ステッチ（白）」Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプルな...
Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
2025.10.06_デモページをさらにイメージしやすく更新しました。Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重...
CSSの基礎 CSSで中央寄せする方法まとめ｜テキスト・画像・バナー・ボックスを真ん中に配置
中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類（テキスト・画像・ブロック要素）や揃え方（横だけ・縦横両方...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
成果を出すサイトには欠かせないのが「CTA（Call to Action）」。「今すぐ登録」「購入する」といった行動を促すボタンやメッセージがあるだけで、読者の...
Cocoon 【Cocoon】ボタンやキャプションの文字を変更｜『新着記事』『もっと見る』『次ページ』のカスタマイズ
WordPressの人気無料テーマ「Cocoon」を使っていると、「新着記事」「もっと見る」「次のページ」などのボタンやキャプションのテキストを自分好みに変更し...
CSSの基礎 CSSで疑似要素に影をつける！box-shadowとfilter: drop-shadowの使い分けを徹底解説
CSSを使って疑似要素に影をつける方法を初心者にもわかりやすく解説します。特に、吹き出しのような複雑な形状の要素に影を適用する際のテクニックを紹介します。使用す...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
更新情報：読者の実例集に以下のサイトを掲載しました。2025.10.10｜ちあログ2025.10.09｜MakalikaMalama2025.10.02｜手帳と...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
2025.9.5 実例集にmomlog（まむろぐ）を掲載しました。トップページが平凡で、他のサイトと差がつかない…そんなお悩みありませんか？この記事では、Wor...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
ページ内の特定の場所にジャンプできる「アンカーリンク」は、長い記事やFAQページでとても便利です。ここでは、初心者でも分かりやすいように、HTMLとWordPr...
テーマ共通 CSSコピペOK！見出しデザインをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】
見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。この記事では、WordPress（一部無料ブログ）全般...
CSSの基礎 【必須】CSSセレクタを調べる方法｜Chromeデベロッパーツール活用で初心者でも簡単！Webデザインに役立つ実践ガイド
Webデザインやサイトのカスタマイズに挑戦するとき、避けて通れないのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
Cocoon 【Cocoon対応】WordPressのカラーパレットを自由に変更・追加する方法
WordPressのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...