Cocoon 【Cocoon対応】WordPressのカラーパレットを自由に変更・追加する方法
WordPressのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
ブログカスタマイズ
Cocoon 
Cocoon ワンクリックで差がつく！Cocoonラベルボックスをおしゃれにカスタマイズする方法
Cocoonの「ラベルボックス」は補足情報やポイントをシンプルに伝えるのに便利な機能ですが、余白が狭く窮屈だったり、見出しの後ろに薄い線が見えたりと、デザインに...
Cocoon Cocoonアイコンボックスをおしゃれにカスタマイズ｜クリックで簡単デザイン切り替え
2025.8.26 デザインと実装コードを見直し、修正をおこないました。Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザイン...
Cocoon Cocoon新着・人気記事・ナビカードを横並びに！カラム数をワンクリックで変更する方法
Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
CSSの基礎 【CSS】Transitionの使い方と実例｜ゆっくり変化するアニメーション（hover・フェード）
サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。その中でも CSSの「transitionトランジション」 は、要素の状態変化をなめらかに...
テーマ共通 動きで魅せる！おしゃれな矢印リンク＆下線スライド・ホバーアニメーションボタン（CSS付き）
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがかっこいい！」といった演出。どうやって作られているのか気になったことはありませんか？実は、...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセ...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
Cocoon Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる
2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマ「Cocoon」のアコーディオンボックス、使ってい...
Cocoon Cocoonで全幅（フルワイド）デザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説
Cocoonでも、有料テーマSWELL風のフルワイドデザインは作れます。この記事では、Cocoonでトップページをおしゃれに見せる 「全幅（フルワイド）セクショ...
配色・デザイン ブログのアイキャッチや図解がプロっぽくなる！おすすめデザイン本4冊（おしゃれな配色・余白・フォント）
ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか？そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
CSSの基礎 サイトに「動き」をつけるCSSアニメーション｜基本的な使い方と実例
Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...
Cocoon Cocoonタブブロックの使い方＆おしゃれカスタマイズ｜ワンクリックで12デザイン切替
2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマCocoon（2.7.3～）に標準搭載された、待望...
CSSの基礎 WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
Cocoon Cocoonウィジェット新着記事・人気記事に日付を表示する設定方法（投稿日・更新日）
テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気...
テーマ共通 箇条書きリスト｜CSSで点の色を変える3つの方法
2025.9.22 掲載コードを変更しました。箇条書き（番号なしリスト）では、先頭に「・」のような黒い点（マーカー）が表示されます。このマーカーを自分好みにカス...
CSSの基礎 CSSが反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
Cocoon Cocoonテーブル（表）の中にリンクボタンを置く方法｜簡単・視認性アップでクリック率も向上
比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい！そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress...
Cocoon Cocoonブログカードをカスタマイズ！タイトル・サムネイル・抜粋文・URL表示をワンクリック選択
2025.9.26 テキストリンクスタイルの微調整をおこないました。有料テーマSWELLではブログカードの表示スタイルを自由に切り替えられるのをご存じですか？「...
テーマ共通 CSS・PHP・JavaScriptのバックアップ方法まとめ｜WordPressカスタマイズ前に必須！
WordPressを使っていると、デザインを整えるために CSS、機能を追加するために PHP や JavaScript を編集する場面があります。ただし、直接...