Cocoon Cocoonタブ見出しボックスを有料テーマ風に！簡単カスタマイズでデザイン切り替え
Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっとおしゃれにしたい、デザインを自由に使い分けたいというニーズに応えるカスタマイズがあります...
カスタマイズ
Cocoon 
Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
成果を出すサイトには欠かせないのが「CTA（Call to Action）」。「今すぐ登録」「購入する」といった行動を促すボタンやメッセージがあるだけで、読者の...
Cocoon Cocoon通知エリアをカスタマイズ！スライド表示＆ボタンで誘導力強化
Cocoon通知エリアは、サイト全体にメッセージを表示したり特定のページに誘導する便利な機能。ごくシンプルでデザインは単調です。キャンペーンやお知らせを目立たせ...
テーマ共通 もう迷わない！バナーなどの要素を上下左右中央寄せにする方法｜CSS使用
「なんだか見た目がしっくりこない…」その解決のカギは中央寄せにあるかもしれません。ウェブデザインでは、バナーや見出しといった要素をどこに配置するかで全体の印象が...
Cocoon Cocoonブログカードをカスタマイズ！タイトル・サムネイル・抜粋文・URLをワンクリック選択
2025.9.2 テキストリンクスタイルの微調整、全体コード修正をおこないました。有料テーマSWELLではブログカードの表示スタイルを自由に切り替えられるのをご...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
Cocoon Cocoon新着・人気記事・ナビカードを横並びに！カラム数をワンクリックで変更する方法
Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
2025.9.5 実例集にmomlog（まむろぐ）を掲載しました。トップページが平凡で、他のサイトと差がつかない…そんなお悩みありませんか？この記事では、Wor...
テーマ共通 WordPressパターン機能でラクラク時短！再利用ブロックの使い方と同期・非同期の違い
WordPressの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能...
Cocoon ワンクリックで差がつく！Cocoonラベルボックスをおしゃれにカスタマイズする方法
Cocoonの「ラベルボックス」は補足情報やポイントをシンプルに伝えるのに便利な機能ですが、余白が狭く窮屈だったり、見出しの後ろに薄い線が見えたりと、デザインに...
Cocoon Cocoonのテキスト変更方法｜『新着記事』『もっと見る』『次ページ』をカスタマイズ
WordPressの人気無料テーマ「Cocoon」を使用している場合、デフォルトで設定されている「新着記事」「もっと見る」「次のページ」などのボタンやキャプショ...
テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？なイメージがある...
テーマ共通 WordPressでテキストリンクをおしゃれに装飾する方法｜ブロックエディタ＆CSSで簡単カスタマイズ
この記事では、WordPressのブロックエディタとCSSを使ってテキストリンクをスタイリッシュに装飾する方法をわかりやすく解説します。テーマによって標準のボタ...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集方法
「もう少し見やすくしたいな」「デザインをちょっと変えてみたい…」そんなときに役立つのがHTMLやCSSの編集です。ほんの少し手を加えるだけでもサイトの見た目や使...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通 箇条書きリストの点の色を変えるCSS｜ul要素のカスタマイズでデザイン性アップ
Webサイトやブログで使われる箇条書きリスト（ul要素）は、デフォルトではシンプルな黒い点（ディスク）で表示されますが、デザインにこだわりたい場合は少し味気なく...
Cocoon ファーストビューをSWELL風に！Cocoonアピールエリアをフルスクリーン＆動きのあるデザインにする方法
Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せるこ...
Cocoon カラム固定を解消！Cocoonボックスメニューを2〜6列に切り替える方法
Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導くために欠かせない定...
Cocoon Cocoon｜テーブル（表）に記号○△✕を表示するカスタマイズ
お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
テーマ共通 CSSホバーアニメーション13選｜動くボタンの実装例付き
マウスを乗せると背景がスッと広がったり、左右にスライドしたり、中央から放射状に変化したり...ボタンにアニメーションを加えるだけでサイトの印象が変わります。この...