Cocoon Cocoonテーマでアコーディオン（トグル）をおしゃれにカスタマイズ！10種類のデザインでページをスッキリ魅せる
WordPressテーマ「Cocoon」のアコーディオンボックス、使っていますか？情報量の多いページでも、クリックで内容を折りたたんでスッキリ整理できる便利な機能です。でも、デフォルトのデザインは１種類だけ。アコーディオンコンテンツ左寄せデ...
カスタマイズ
Cocoon 
テーマ共通 【重要】CSSやPHPファイルのバックアップ方法｜安全にカスタマイズするための4つの手段＋サーバー活用術
CSSを編集してサイトのデザインをカスタマイズしたいけど「もし失敗したらどうしよう…」と不安に感じることがあるかと思います。ほんの少しのCSS編集でも、事前にバックアップを取っておくことでトラブルへの備えができ、安心して作業を進めることがで...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいな～「けど、どこから手を付けたらいいかわからない...」と迷っていませんか？そんな方のために、トップページのとても簡単な作り方をご紹介。この記事では、WordPressテーマ「Cocoo...
Cocoon 魅力的なフルワイドデザイン（全幅）をCocoonで実現！おしゃれなトップページの作り方
WordPressテーマ「Cocoon」はシンプルで使いやすい一方、SWELLのような洗練されたフルワイドデザインを再現するにはちょっとしたコツが必要です。「おしゃれなトップページにしたい」「全幅の背景色や画像で目を引くデザインを作りたい」...
Cocoon Cocoonのタブ見出しボックスを簡単デザイン切り替え！有料テーマ風カスタマイズ
Cocoonテーマの「タブ見出しボックス」、もっとおしゃれに、もっと自由に使いこなしてみませんか？見出しCocoonのタブ見出しボックスこのボックスはシンプルで使いやすいのが魅力ですが、余白を持たせてすっきりとしたデザインにしたいページ内で...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
そろそろトップページをサイト型デザインにしたい！けど具体的にどう作ろう...そんなお悩み、ありませんか？この記事では、WordPressテーマ「Cocoon」で固定ページとHTML・CSSを活用した「サイト型トップページ」の作成方法を、初心...
Cocoon Cocoonボックスメニューのカラム数をクリックで変更する｜2〜6列対応のカスタマイズ方法
WordPressの無料テーマ「Cocoon」には、サイト内の導線設計に便利な「ボックスメニュー」機能があります。見た目がシンプルでアイコン付きのメニューをブロック形式で直感的に配置できるため使っているサイトを多く見かける定番機能。以下の3...
Cocoon Cocoonのタブブロックをもっと便利に！サイドバーでデザインを選べる着せ替え機能
Cocoonテーマ（2.7.3～）に待望の「タブブロック」が標準搭載！直感的な操作でタブ切り替え表示ができるようになり、「情報をコンパクトにまとめたい」「見た目を整理したい」といった要望にも手軽に応えられるようになりました。Tab 1Tab...
Cocoon Cocoonの白抜きボックスをカスタマイズ｜複数スタイルと簡単切り替え方法を解説
Cocoonテーマの「白抜きボックス」、使っていますか？箇条書きリストなどのブロックが挿入できるボーダー色や背景色を自由に変更できるシンプルなデザインながら使い勝手の良さが抜群！視認性が高い万能ボックスですが...「もっとデザインにバリエー...
Cocoon Cocoon新着記事・人気記事・ナビカード対応｜カラム数をワンクリックで変更する方法（横並び）
Cocoonテーマはとても便利。「新着記事」「人気記事」「ナビカード」などのブロック機能が用意されていて、トップページの作成も簡単です。ただ、こんなお悩みを感じたことはないでしょうか？記事カードを横並び（カラム形式）で見せたいカラム数を自由...
Cocoon 【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置
CTAボックス、使ってみませんか？CTA（Call to Action）は、読者に「次の一歩」を踏み出してもらうための大切なツール。例えば、「今すぐ登録」「詳しくはこちら」「購入する」といったボタンやメッセージがそれにあたります。特にアフィ...
テーマ共通 箇条書きリストの点の色を変えるCSS｜ul要素のカスタマイズでデザイン性アップ
Webサイトやブログで使われる箇条書きリスト（ul要素）は、デフォルトではシンプルな黒い点（ディスク）で表示されますが、デザインにこだわりたい場合は少し味気なく感じることもあります。この記事では、CSSを使って箇条書きの点（マーカー）の色を...
Cocoon Cocoonラベルボックスをシンプル&おしゃれに！選べる6つのスタイルを実装するカスタマイズ
ブログにちょっとした補足を加えたいときに便利な「ラベルボックス」。ラベル標準のラベルボックスCocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで扱いやすい反面、見た目や使い勝手に少し物足りなさを感じることも。余白が狭くて窮...
Cocoon Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】
Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおすすめなのが、検索フォームの設置です。この記事では、Cocoonテーマのアピールエ...
テーマ共通 CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現
別記事で「animation」プロパティを使ったCSSアニメーションの基本を紹介しました。「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。そこでこの...
テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
この記事では、アンカーリンクの設定方法と効果的な使い方について解説します。アンカーリンクはページ内の特定の位置や他のページの特定の場所に直接ジャンプするリンクのことです。ユーザーが目的の情報に素早くアクセスできるため、長いページやナビゲーシ...
テーマ共通 WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法
WordPressのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます。この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交...
Cocoon ファーストビューをSWELL風に！Cocoonアピールエリアをフルスクリーン＆動きのあるデザインにする方法
Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せることができます。この記事では、有料テーマSWELL風にアピールエリアをフルスクリー...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインにおいて視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでより洗練されたデザインを実現できます。この記事では、【SVG】とCSSプロパティの【clip-path】【linea...