テーマ共通 箇条書きリストデザイン｜CSSで点の色を変える3つの方法
2025.9.22 掲載コードを変更しました。箇条書き（番号なしリスト）では、先頭に「・」のような黒い点（マーカー）が表示されます。このマーカーを自分好みにカス...
テーマ共通 
Cocoon Cocoon人気記事ランキング｜表示方法とラベルの色やスタイルを変更するカスタマイズ
Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に人気記事ランキングを簡単に作成できます。サイドバーやトップページに設置すれば、読者...
Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
2025.10.06_デモページをさらにイメージしやすく更新しました。Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重...
Cocoon Cocoonナビカードの使い方｜目立たせたい記事をピックアップ表示する方法、リボンのカスタマイズ
Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。新着記事や人気記事のような自動表示とは違い、「読んで...
CSSの基礎 【初心者向け】CSSカスタマイズの基本｜WEBデザインを自由に変える方法
ブログデザインをもっと自分らしく作りたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Casca...
CSSの基礎 CSSで中央寄せする方法まとめ｜テキスト・画像・バナー・ボックスを真ん中に配置
中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類（テキスト・画像・ブロック要素）や揃え方（横だけ・縦横両方...
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
Cocoon 【Cocoon】WordPressのカラーパレットを自由に変更・追加する方法
WordPressのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
CSSの基礎 WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセ...
Cocoon Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
サイト設定 Googleアドセンス審査用コードの貼り方｜WordPress・Cocoon対応ガイド
Googleアドセンスに申請するときには、審査用のコードを自分のサイトの <head> 内に貼り付ける必要があります。このコードを正しく設置できないと審査が始ま...
Cocoon カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法
Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
テーマ共通 動きで魅せる！おしゃれな矢印リンク＆下線スライド・ホバーアニメーションボタン（CSS付き）
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
Cocoon 【Cocoon】ボタンやキャプションの文字を変更｜『新着記事』『もっと見る』『次ページ』のカスタマイズ
WordPressの人気無料テーマ「Cocoon」を使っていると、「新着記事」「もっと見る」「次のページ」などのボタンやキャプションのテキストを自分好みに変更し...
CSSの基礎 CSSで疑似要素に影をつける！box-shadowとfilter: drop-shadowの使い分けを徹底解説
CSSを使って疑似要素に影をつける方法を初心者にもわかりやすく解説します。特に、吹き出しのような複雑な形状の要素に影を適用する際のテクニックを紹介します。使用す...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。