Cocoon Cocoonタイムライン｜まるでSWELL風カスタマイズでおしゃれに汎用性アップ！
WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意されています。手順や流れをわかりやすく伝えるのに便利ですが、デフォルトの見た目はと...
カスタマイズ
Cocoon 
テーマ共通 CSSのカスタムプロパティを使いこなそう！繰り返し使える変数の設定方法
この記事ではCSSカスタムプロパティ（CSS変数）の使い方と、よく使われる値を解説します。CSSカスタムプロパティ（CSS変数）は「設定した値を何度も使えるよう...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
そろそろトップページをサイト型デザインにしたい！けど具体的にどう作ろう...そんなお悩み、ありませんか？この記事では、WordPressテーマ「Cocoon」で...
テーマ共通 CSSが反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
テーマ共通 CSSホバーアニメーション13選｜動くボタンの実装例付き
マウスを乗せると背景がスッと広がったり、左右にスライドしたり、中央から放射状に変化したり...ボタンにアニメーションを加えるだけでサイトの印象が変わります。この...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいな～「けど、どこから手を付けたらいいかわからない...」と迷っていませんか？そんな方のために、トップページ...
Cocoon Cocoonブログカードをおしゃれに！11パターンCSS簡単カスタム
SWELLではブログカードの表示スタイルを選べるんだって！それならCocoonでもできそうだね、やってみよう。この記事でご紹介するカスタマイズは、ブログカードの...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、JavaScriptを使わずにHTMLとCSSだけでタブ切り替えを実現する方法...
Cocoon Cocoonの白抜きボックスをカスタマイズ｜複数スタイルと簡単切り替え方法を解説
Cocoonテーマの「白抜きボックス」、使っていますか？箇条書きリストなどのブロックが挿入できるボーダー色や背景色を自由に変更できるシンプルなデザインながら使い...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
テーマ共通 WordPressでテキストリンクをおしゃれに装飾する方法｜ブロックエディタ＆CSSで簡単カスタマイズ
この記事では、WordPressのブロックエディタとCSSを使ってテキストリンクをスタイリッシュに装飾する方法をわかりやすく解説します。テーマによって標準のボタ...
テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？なイメージがある...
テーマ共通 CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現
「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。 詳しくは「CSSア...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集方法
「もう少し見やすくしたいな」「デザインをちょっと変えてみたい…」そんなときに役立つのがHTMLやCSSの編集です。ほんの少し手を加えるだけでもサイトの見た目や使...
Cocoon Cocoon新着記事・人気記事・ナビカード対応｜カラム数をワンクリックで変更する方法（横並び）
Cocoonテーマはとても便利。「新着記事」「人気記事」「ナビカード」などのブロック機能が用意されていて、トップページの作成も簡単です。ただ、こんなお悩みを感じ...
テーマ共通 WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法
WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
Cocoon Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションとボタンを設定する方法
Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利...
Cocoon Cocoonボックスメニューのカラム数をクリックで変更する｜2〜6列対応のカスタマイズ方法
WordPressの無料テーマ「Cocoon」には、サイト内の導線設計に便利な「ボックスメニュー」機能があります。見た目がシンプルでアイコン付きのメニューをブロ...
Cocoon Cocoonでフルワイドデザイン！幅いっぱいのおしゃれなトップページの作り方
WordPressテーマ「Cocoon」はシンプルで使いやすい一方、有料テーマのSWELLのような洗練されたフルワイドデザインを再現するにはちょっとしたコツが必...