テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、JavaScriptを使わずにHTMLとCSSだけでタブ切り替えを実現する方法をご紹介します。フォーム要素であるラジオボタンを応用することで、軽量かつシンプル...
カスタマイズ
テーマ共通 
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおすすめなのが、検索フォームの設置。この記事では、Cocoonテーマのアピールエリア...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいな～「けど、どこから手を付けたらいいかわからない...」と迷っていませんか？そんな方のために、トップページのとても簡単な作り方をご紹介。この記事では、WordPressテーマ「Cocoo...
テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。要素を点滅させるアニメーションは視認性を高め、注目を引く際に便利です。＼例えばこの部分の文字を点滅／ゆっくりなめらかに点滅するイメージですこのように文字を点滅させたい方...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインでは視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでインパクトのある印象に。この記事では、SVGとCSSプロパティ（clip-path、linear-gradient、ma...
Cocoon Cocoonでフルワイドデザイン！幅いっぱいのおしゃれなトップページの作り方
WordPressテーマ「Cocoon」はシンプルで使いやすい一方、有料テーマのSWELLのような洗練されたフルワイドデザインを再現するにはちょっとしたコツが必要です。「おしゃれなトップページにしたい」「全幅の背景色や画像で目を引くデザイン...
テーマ共通 WordPressパターンの使い方（再利用ブロック）！テンプレで時短化、同期と非同期の違い
WordPressの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパター...
Cocoon Cocoonブログカードをおしゃれに！11パターンCSS簡単カスタム
SWELLではブログカードの表示スタイルを選べるんだって！それならCocoonでもできそうだね、やってみよう。この記事でご紹介するカスタマイズは、ブログカードの表示したいスタイル（タイトル・サムネイル・抜粋文・URLなど）を選択し、用途に合...
テーマ共通 簡単おしゃれ！CSSで見出しデザインをカスタマイズする方法【コピペOK】
見出しを好きなデザインに変えたいな～ウェブサイトの見出しデザインをカスタマイズすると、読みやすさや視認性が向上しサイト全体のデザイン性も高まります。この記事では、簡単に実装できる見出しデザインのサンプルを紹介します。CSSを活用して、自分の...
テーマ共通 箇条書きリストの点の色を変えるCSS｜ul要素のカスタマイズでデザイン性アップ
Webサイトやブログで使われる箇条書きリスト（ul要素）は、デフォルトではシンプルな黒い点（ディスク）で表示されますが、デザインにこだわりたい場合は少し味気なく感じることもあります。この記事では、CSSを使って箇条書きの点（マーカー）の色を...
Cocoon Cocoonのタブ見出しボックスを簡単デザイン切り替え！有料テーマ風カスタマイズ
Cocoonテーマの「タブ見出しボックス」。もっとおしゃれに、もっと自由に使いこなしてみませんか？見出しCocoonのタブ見出しボックスこのボックスはシンプルで使いやすいのが魅力ですが、余白を持たせてすっきりとしたデザインにしたいページ内で...
テーマ共通 CSSのカスタムプロパティを使いこなそう！繰り返し使える変数の設定方法
この記事ではCSSカスタムプロパティ（CSS変数）の使い方と、よく使われる値を解説します。CSSカスタムプロパティ（CSS変数）は「設定した値を何度も使えるようにする」仕組み。サイト内で繰り返し登場するプロパティ値（色や数値）を変数にして一...
Cocoon Cocoonテーブル（表）の中にリンクボタンを置く方法｜簡単・視認性アップでクリック率も向上
比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい！そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress無料テーマ「Cocoon」では、ブロックエディタとインラインタグを使えば簡単にボ...
Cocoon WordPressのカラーパレットを自由に変更・追加する方法【Cocoon対応】
WordPressのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は原色に近いビビッドなカラーが多く、自分のサイトに合わないと感じることがあるかも...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集方法
「もう少し見やすくしたいな」「デザインをちょっと変えてみたい…」WordPressを使っていると、そんなふうに感じることがありますよね。そんなときに役立つのがHTMLやCSSの編集です。ほんの少し手を加えるだけでもサイトの見た目や使いやすさ...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
そろそろトップページをサイト型デザインにしたい！けど具体的にどう作ろう...そんなお悩み、ありませんか？この記事では、WordPressテーマ「Cocoon」で固定ページとHTML・CSSを活用した「サイト型トップページ」の作り方を、初心者...
Cocoon Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【2024年以降対応】Cocoon標準機能でテーブルに記号を表示する方法Cocoo...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
Cocoon Cocoonラベルボックスをシンプル&おしゃれに！選べる6つのスタイルを実装するカスタマイズ
ブログにちょっとした補足を加えたいときに便利な「ラベルボックス」。ラベル標準のラベルボックスCocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで扱いやすい反面、見た目や使い勝手に少し物足りなさを感じることも。余白が狭くて窮...
テーマ共通 CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現
別記事で「animation」プロパティを使ったCSSアニメーションの基本を紹介しました。「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。そこでこの...