Cocoon Cocoonナビカードの使い方｜目立たせたい記事をピックアップ表示する方法、リボンのカスタマイズ
Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。リボン装飾の追加やカードデザインの変更など、カスタマ...
Cocoon 
テーマ共通 スクロールアニメーションの作り方｜CSSとIntersectionObserver（交差監視）でふわっと表示
Webサイトでよく見かける、スクロールに合わせてふわっと要素が表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」といっ...
CSSの基礎 サイトに「動き」をつけるCSSアニメーション｜基本的な使い方と実例
Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
トップページが平凡で他のサイトと似たりよったり…そんなお悩みありませんか？この記事では、WordPressテーマ「Cocoon」を使った固定ページと、HTML・...
Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
2025.10.06_デモページをさらにイメージしやすく更新しました。Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重...
CSSの基礎 【初心者向け】CSSカスタマイズの基本｜WEBデザインを自由に変える方法
ブログデザインをもっと自分らしく作りたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Casca...
CSSの基礎 CSSが反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
Cocoon Cocoonで全幅（フルワイド）デザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説
Cocoonでも、有料テーマSWELL風のフルワイドデザインは作れます。この記事では、Cocoonでトップページをおしゃれに見せる 「全幅（フルワイド）セクショ...
Cocoon Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ
Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。「リストの点がテーマカラーと合わない」「記事の内容に合わせて、デザインを切り替えたい」そんな方...
Cocoon Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
WordPressテーマ「Cocoon」のアコーディオンボックス、使っていますか？情報量が多いページでも、クリックひとつで内容を折りたためるとても便利な機能です...
テーマ共通 CSSで実装！複数画像を切り替えるアニメーションの作り方
注意事項実装の際、当サイトに掲載している画像を直接リンクして使用するケースが見受けられます。これは著作権やサーバー負荷の面から望ましくありません。必ずご自身で素...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
更新情報：読者の実例集に以下のサイトを掲載しました。2025.10.10｜ちあログ2025.10.09｜MakalikaMalama2025.10.02｜手帳と...
CSSの基礎 【CSS】transition（トランジション）の使い方｜hoverなどでゆっくり、なめらかに変化するアニメーション
サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。その中でも CSSの「transitionトランジション」 は、要素の状態変化をなめらかに...
Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
成果を出すサイトには欠かせないのが「CTA（Call to Action）」。「今すぐ登録」「購入する」といった行動を促すボタンやメッセージがあるだけで、読者の...
アフィリエイト ポチップとかんたんリンク比較｜物販アフィリエイト初心者向けツール選び
「かんたんリンク」と「ポチップ」、どちらを使えば収益アップにつながるの？アフィリエイトを始めたばかりの方にとって、この2つのリンク作成ツールはよく似て見えますが...
CSSの基礎 CSSで中央寄せする方法まとめ｜テキスト・画像・バナー・ボックスを真ん中に配置
中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類（テキスト・画像・ブロック要素）や揃え方（横だけ・縦横両方...
アフィリエイト アフィリエイトASP比較｜報酬・審査・ジャンル別に初心者が選ぶポイント
アフィリエイトASPの仕組みと選び方をわかりやすく解説。A8.netやafbなど主要5社を比較し、初心者に最適なASPを紹介します。
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
Cocoon Cocoon白抜きボックスをおしゃれにカスタマイズ！複数デザインの使い分け方法
更新情報2025.10.10_デザイン2種追加しました。「影付き」「ステッチ（白）」Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプル...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...