Cocoon Cocoonアピールエリア｜画面いっぱいのフルスクリーン＋スクロール矢印・ズーム演出するカスタマイズ
Cocoonの「アピールエリア」はサイトの第一印象を決める重要なパーツ。ここを整えるだけでトップページの見栄え・ブランド感・読者の滞在率が大きく変わります。この...
ブログカスタマイズ
Cocoon 
Cocoon Cocoonアイコンボックスをおしゃれにカスタマイズ｜クリックで簡単デザイン切り替え
Cocoonのアイコンボックスは、補足説明や注意書きを分かりやすく伝えられる便利なブロックです。しかし標準状態ではデザインが1種類のみで、記事内容に合わせた使い...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法｜HTMLテンプレート化で簡単実装
2025.12.04 手順をよりシンプル（簡単）に修正しました。Cocoonの「アピールエリア」、そのまま使っていませんか？ここに検索フォームを設置すると、ユー...
テーマ共通 スクロールアニメーションの作り方｜CSSとIntersectionObserver（交差監視）でふわっと表示
Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...
Cocoon 超簡単！Cocoonブロック機能でサイト型トップページを作る方法｜コード最小限・初心者向け
Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの？そんなふうに迷っている方も多いのではないでしょうか。この記事では、WordPres...
Cocoon Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
WordPressテーマ「Cocoon」のアコーディオン、使っていますか？情報量が多いページでも、クリックひとつで内容を折りたためるとても便利なブロックです。た...
Cocoon Cocoonタブブロックの使い方＆おしゃれカスタマイズ｜ワンクリックで12デザイン切替
WordPressテーマCocoon（2.7.3～）に標準搭載された、待望の「タブブロック」。タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパ...
Cocoon Cocoon人気記事ランキング｜表示方法とラベルの色やスタイルを変更するカスタマイズ
Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを使って人気記事ランキングを簡単に表示できます。サイドバーやトップページに設置すれば、読...
CSSの基礎 ChromeデベロッパーツールでCSSセレクタを調べる方法｜初心者向けに解説
CSSでカスタマイズしてみたいけど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はありませんか？実は、ほと...
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
CSSの基礎 CSSで疑似要素に影をつける！box-shadowとfilter: drop-shadowの使い分けを徹底解説
CSSを使って疑似要素に影をつける方法を初心者にもわかりやすく解説します。特に、吹き出しのような複雑な形状の要素に影を適用する際のテクニックを紹介します。使用す...
テーマ共通 動きで魅せる！ホバーアニメーションボタン・おしゃれな矢印リンク＆下線スライド（CSS付き）
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...
Cocoon Cocoonカスタマイズ｜HTML・CSS・JavaScript・PHPの使い分けと編集方法
Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの？」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
CSSの基礎 【初心者向け】CSSカスタマイズの基本｜WEBデザインを自由に変える方法
ブログデザインをもっと自分らしく作りたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Casca...
CSSの基礎 CSS・PHP・JavaScriptのバックアップ方法まとめ｜WordPressカスタマイズ前に必須！
WordPressを使っていると、デザイン調整や機能追加のために CSS・PHP・JavaScriptを少しだけ編集したくなる瞬間はよくあります。「余白を調整し...
CSSの基礎 サイトに「動き」をつけるCSSアニメーション｜基本的な使い方と実例
Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...
配色・デザイン ブログのアイキャッチや図解がプロっぽくなる！おすすめデザイン本4冊（おしゃれな配色・余白・フォント）
ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか？そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
CSSの基礎 CSSのカスタムプロパティを使いこなそう！繰り返し使える変数の設定方法
この記事ではCSSカスタムプロパティ（CSS変数）の使い方と、よく使われる値を解説します。CSSカスタムプロパティ（CSS変数）は「設定した値を何度も使えるよう...
Cocoon Cocoon通知エリア｜スライド表示（流れる文字）＆ボタン追加でアピールする方法
Cocoonの「通知エリア」は、サイト全体にメッセージを表示したり特定のページへ誘導したりできる便利な機能です。ただし、デフォルトデザインはとてもシンプル。キャ...
CSSの基礎 【CSS】transition（トランジション）の使い方｜hoverなどでゆっくり、なめらかに変化するアニメーション
サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。その中でも CSSの「transitionトランジション」 は、要素の状態変化をなめらかに...