Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……そんな方に向けて、WordPressテーマ「Cocoon」とブロックエディタ（Gutenberg）を活用した、サイト型トップページの作成手順...
カスタマイズ
Cocoon 
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
Cocoon Cocoonでフルワイド化｜画面いっぱいに幅を広げる＋セクション背景色をつけるカスタマイズ
WordPressテーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。「もっとおしゃれなサイトにしたい」「SWELLのような幅いっぱいのトップページをCocoonでも...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
「Cocoonでブログを運営しているけれど、トップページを“サイトっぽく”見せたい」──そんな方に向けて、固定ページ＋HTML＋CSSを活用した「サイト型トップページ」の作成方法を丁寧に解説します。この記事では、コードをそのままコピペできる...
テーマ共通 CSSでテキストリンクをおしゃれに｜ボタン風に装飾する方法
この記事では、WordPressのブロックエディタを使用して、テキストリンクをスタイリッシュに装飾する手順を解説します。CSSを活用することで統一感のあるリンクデザインを簡単に作成可能です。WordPressにはテーマによってボタンを作る機...
テーマ共通 【重要】CSSやPHPファイルのバックアップ方法｜安全にカスタマイズするための4つの手段＋サーバー活用術
CSSを編集してサイトのデザインをカスタマイズしたいけど「もし失敗したらどうしよう…」と不安に感じることがあるかと思います。ほんの少しのCSS編集でも、事前にバックアップを取っておくことでトラブルへの備えができ、安心して作業を進めることがで...
Cocoon Cocoon新着記事・人気記事・ナビカード対応｜カラム数をワンクリックで変更する方法（横並び）
Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。ただし、以下のような悩みを持つ方も多いのではないでしょうか？記事カードを横並び（カラム形式...
テーマ共通 CSSで実装！複数画像を切り替えるアニメーションの作り方
トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウ...
Cocoon Cocoonナビカードの使い方｜目立たせたい記事をピックアップ表示する方法、リボンのカスタマイズ
Cocoonテーマには、特定の記事やコンテンツを目立たせたいときに便利な『ナビカード』機能が標準搭載されています。ピックアップしたい記事を表示できるだけでなく、リボンの装飾や表示形式の選択など自由度の高いカスタマイズも可能です。新着記事や人...
テーマ共通 もう迷わない！バナーなどの要素を上下左右中央寄せにする方法｜CSS使用
「なんだか見た目がしっくりこない…」そんな時は“中央寄せ”がカギになるかもしれません。ウェブデザインでは、バナーや見出しといった要素をどこに配置するかで全体の印象が大きく変わります。特に中央に配置することで、視線を自然に集めデザインにまとま...
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
この記事では、アンカーリンクの設定方法と効果的な使い方について解説します。アンカーリンクはページ内の特定の位置や他のページの特定の場所に直接ジャンプするリンクのことです。ユーザーが目的の情報に素早くアクセスできるため、長いページやナビゲーシ...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集方法
WordPressのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。でも、「どこに書いたらいいの？」と不安になる方も多いはず。この記事...
Cocoon Cocoonアピールエリアに検索窓を設置する方法【ショートコードで簡単対応】
Cocoonテーマの「アピールエリア」、うまく活用できていますか？「もっと目立たせたい要素がある」「回遊率を上げたい」――そんなときに便利なのが、検索フォームの設置です。この記事では、Cocoonのアピールエリアに検索フォームを簡単に表示さ...
Cocoon Cocoonボックスメニューのカラム数を自由に変更！2〜6列対応のカスタマイズ方法
WordPressの無料人気テーマ「Cocoon（コクーン）」には、サイト内の導線設計に便利な「ボックスメニュー」という機能があります。見た目もシンプルで、アイコン付きのメニューをブロック形式で直感的に配置できるため、多くのユーザーが活用し...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
Cocoon Cocoonラベルボックスをシンプル&おしゃれに！選べる6つのスタイルを実装するカスタマイズ
ブログにちょっとしたアクセントを加えたいときに便利な「ラベルボックス」。ラベル標準のラベルボックスCocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで扱いやすい反面、見た目や使い勝手に少し物足りなさを感じている方も多いので...
Cocoon Cocoonのブログカードを自分好みに！見た目を11パターンから切り替えできるCSS簡単カスタム
“必要な情報だけ、シンプルなデザインで”ブログカードをもっと自由にカスタマイズしませんか。この記事でご紹介するカスタマイズは、ブログカードの表示したい要素（タイトル・サムネイル・抜粋文・URLなど）を自分好みに調整し、用途に合わせて柔軟に対...
テーマ共通 WordPressのパターン（再利用ブロック）機能とは？よく使うデザインをテンプレ化して時短化する方法
WordPressの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパター...
Cocoon Cocoonの白抜きボックスをカスタマイズ｜複数スタイルと簡単切り替え方法を解説
Cocoonで「白抜きボックス」のデザインをもっと自由に切り替えられたら便利だな──そんな思いから今回のカスタマイズを考えました。白抜きボックスはシンプルなデザインながら、使い勝手の良さが抜群！箇条書きリストなどのブロックも挿入可能ボーダー...
テーマ共通 CSS「transition」で動きをプラス！マウスオーバーアニメーションの設定方法と実例
別記事で「animation」プロパティを使ったCSSアニメーションについてご紹介しました。「animation」プロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反...