Cocoon Cocoonタブブロック｜複数デザインをサイドバーで切り替えるカスタマイズ
Cocoonテーマ（2.7.3～）には「タブ」ブロックが標準搭載されており、直感的な切り替え表示が可能です。Tab 1Tab 2Tab 3ここに内容を入力します。ここに内容を入力します。ここに内容を入力します。これ便利！もう少しデザインの幅...
Cocoon 
Cocoon Cocoonのタブ見出しボックスを有料テーマ風に！簡単カスタマイズ手順まとめ
Cocoonテーマの「タブ見出しボックス」、もっとおしゃれに使いこなしてみませんか？見出しCocoonのタブ見出しボックスこのブロックはシンプルで使いやすいのが魅力ですが、「線の太さや余白を整えてスタイリッシュにしたい」「ページ内で複数のデ...
Cocoon Cocoonブログカードのカスタマイズ｜表示スタイルを簡単切り替えする方法（縦型カード追加）
ワードプレステーマ「Cocoon」では、リンクを挿入するだけで自動的に見やすいカード形式に変換されます。特別な設定は不要で誰でも簡単におしゃれなブログカードを作成可能です。Cocoon設定ではサムネイルの位置や日付の表示有無などをカスタマイ...
Cocoon Cocoonのアコーディオン（トグル）ブロックをカスタマイズ！複数デザインをサイドバーで切り替える方法
アコーディオンボックスを活用することで、情報量の多いページでもスッキリ整理できます。Cocoonテーマにもこの機能が標準搭載されておりとても便利ですが、デフォルトのアコーディオンは１種類のデザインのみ。アコーディオンコンテンツ特に左寄せデザ...
Cocoon Cocoonラベルボックスのデザインを切り替え可能に！クリックで選べる6種類のスタイルを実装する方法
──Cocoonの「ラベルボックス」をもっとおしゃれに。Cocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで使いやすいブロックですが、線の太さや余白、見出しの位置などを少し整えるだけで、ぐっと洗練された印象に変わります。見...
ブログ運営 Googleアドセンス審査に合格するために｜必須対策＆コード貼り付け方法
ブロガーアドセンスに合格したいGoogleアドセンスは多くのブロガーやウェブサイト運営者にとって収益化の手段のひとつですが、審査に合格するためにはいくつかのポイントを押さえる必要があります。この記事では、Googleアドセンスの基本的な仕組...
Cocoon 【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる？OGP設定方法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……そんな方に向けて、ワードプレステーマ「Cocoon」とブロックエディタ（Gutenberg）を活用した、サイト型トップページの作成手順をわか...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
「Cocoonでブログを運営しているけれど、トップページを“サイトっぽく”見せたい」──そんな方に向けて、固定ページ＋HTML＋CSSを活用した「サイト型トップページ」の作成方法を丁寧に解説します。この記事では、コードをそのままコピペできる...
Cocoon Cocoonでフルワイド化｜画面いっぱいに幅を広げる＋セクション背景色をつけるカスタマイズ
ワードプレステーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。「もっとおしゃれなサイトにしたい」「SWELLのような幅いっぱいのトップページをCocoonでも作りた...
Cocoon ワードプレスのカラーパレットを自由に変更・追加する方法【Cocoon対応】
ワードプレスのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は原色に近いビビッドなカラーが多く、自分のサイトに合わないと感じることがあるかもしれま...
テーマ共通 もう迷わない！要素（バナー）を上下左右中央寄せにする方法｜HTMLインラインスタイルとCSSの違い
ウェブデザインにおいて、バナーなどの要素を中央に配置することは視覚的なバランスを整える上で重要なポイントです。この記事では、CSSを使用して要素を中央寄せにする方法を解説します。例えば、デフォルトではバナー画像は左寄せになっていることが多い...
Cocoon Cocoonでピックアップ記事表示するならナビカード！横並び、リボンのスタイルを可愛くカスタマイズ
今回ご紹介するのは、Cocoonの便利な機能『ナビカード』です。特定の記事やコンテンツを目立たせたいときに簡単にピックアップ表示ができるこの機能。Cocoonに標準搭載されていますが、意外と使ったことがない方も多いのではないでしょうか？ナビ...
ブログ運営 エックスサーバー｜サブドメイン設定で２つめのブログ（複数サイト）を作る方法
この記事で分かることエックスサーバーを利用して複数サイトを作る方法エックスサーバーでサブドメインを設定する方法サブドメインにワードプレスをインストールする方法もうひとつブログを作りたいな～ブログを運営してしばらくすると、別のジャンルに方向転...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集とワードプレスをバックアップする方法
ワードプレスのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。でも、「どこに書いたらいいの？」「間違えたら元に戻せるの？」と不安になる...
雑記 デザイン作成に活躍！おしゃれ配色「３色だけでセンスのいい色」をフォロワーさんから譲っていただいた話
以前からずっと欲しかった本、『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色』を、SNSで交流のあるフォロワーさんから譲っていただきました！デザインにおける配色は多くの人が悩むポイントです。しかし、この本には初心者でも簡単に...
テーマ共通 CSS「transition」で動きをプラス！マウスオーバーアニメーションの設定方法と実例
別記事で「animation」プロパティを使ったCSSアニメーションについてご紹介しました。「animation」プロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反...
テーマ共通 簡単おしゃれ！CSSで見出しデザインをカスタマイズする方法【コピペOK】
見出しを好きなデザインに変えたいな～ウェブサイトの見出しデザインをカスタマイズすると、読みやすさや視認性が向上しサイト全体のデザイン性も高まります。この記事では、簡単に実装できる見出しデザインのサンプルを紹介します。CSSを活用して、自分の...
テーマ共通 ワードプレスの箇条書きリストデザイン｜点の色を変えるカスタマイズ（ul要素）
箇条書きリストのデザインはデフォルトではシンプルな黒い点（ディスク）が表示されます。このデザインをカスタマイズして、箇条書きの点の色を変更する方法を解説します。リスト１リスト２リスト３サイトのメインカラーとリストに統一感をだしたいときにおす...