「WordPressで記事を書いているんだけど、データを表形式で分かりやすく表示させたい。でも、どうやって作ればいいんだろう？デザインももう少しこだわりたいな…」と思っていませんか？

この記事では、WordPressでテーブルを初めて使う方でも安心の基本的な作成方法から、Cocoonテーマのデザインをさらに引き立てるCSSカスタマイズのテクニックまでを詳しく解説します。

「テーブル」とは？

ブログやウェブサイトで情報を効果的に伝えるために、テーブル（表）は非常に役立つツールです。

特に、データの比較や整理、価格表の表示など、多くの場面で活用できます。

HTMLにおいて「テーブル」とは、「表」の意味です。

縦方向が「行」と呼ばれていて、横方向は「列」になります。

テーブルを作成

cocoonテーマでデフォルトで作成できる「テーブル」を作っていきます。

「テーブル」と検索する

プラスマークをクリックして、「テーブル」と検索します。

※プラスマークは投稿ページ内をクリックすると出現します。

「カラム数」「行数」を設定

「カラム数」と「行数」を設定する画面が現れます。

ここでは、どちらも「3」にして「表を作成」をクリックします。

※「カラム」→横の数、「行数」→縦の数です。

ヘッダーセクションON

ここでは、アレンジしやすいように「ヘッダーセクション」をONにします。

すると、テーブルに「ヘッダーラベル」が出現します。

文字を入力して完了

テーブルに入れたい文字を入力し、表が完成しました。

CSSを使わないアレンジ

CSSを使用しないでできるアレンジをご紹介します。

ストライプに変更

「右側のブロックバー」　→　「スタイル」　→　「ストライプ」を選択すると、デフォルトとは変わった印象になります。

背景色・文字色・枠の変更

「背景色」「文字色」「枠の色と太さ」を変更できます。

※背景色は全体には適用されません。

CSSを使用したアレンジ

ここからは、CSSを使用したアレンジをご紹介します。私は「追加CSS」に記入します。

※CSSを入力するときは、必ずバックアップをとってください。

おすすめのバックアップ用プラグインの記事はこちらです。

バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】

「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたい...

furugrand.online

2025.03.05

完成図

ヘッダーと、左の項目に背景色が付くテーブルを作成していきます。

全体に適用

.entry-content thead {
    border-bottom: none;　　/* ヘッダーラベルの下線を消す */
}

.entry-content th {
    padding: 10px 15px; /* 余白 */
    background-color: #f896bd; /* 背景色 */
    color: #fff; /* 文字色 */
    letter-spacing: 0.1em; /* 文字と文字の間隔 */
    text-align: center; /* 中央揃え */
}

.entry-content tr td:first-child{
	background-color: #f896bd;　/* 背景色 */
	color:#fff;　/* 文字色 */
	font-weight:bold; /* 文字を太く */
}

サイト全体に適用するコードです。

「背景色」「文字色」など好きなコードに変更してください。

カラーコードはどれが良いかな？と迷う方はこちらの記事をどうぞ

Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic

サイトのカラーは、訪問者に与える印象を大きく左右する、非常に重要な要素です。洗練されたカラーパレットは、サイト全体の雰囲気を格上げし、ブランドイメージを効果的に伝える力を持っています。しかし、色の組み合わせは奥深く、センスに自信がないと悩ん...

furugrand.online

2025.02.23

個別に適用（追加CSSクラス）

この「テーブル」のみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から「追加CSSクラス」に名前を付けます。

ここでは、「table1」にします。

.entry-content .table1 thead {
    border-bottom: none;　　/* ヘッダーラベルの下線を消す */
}

.entry-content .table1 th {
    padding: 10px 15px; /* 余白 */
    background-color: #f896bd; /* 背景色 */
    color: #fff; /* 文字色 */
    letter-spacing: 0.1em; /* 文字と文字の間隔 */
    text-align: center; /* 中央揃え */
}

.entry-content .table1 tr td:first-child{
	background-color: #f896bd;　/* 背景色 */
	color:#fff;　/* 文字色 */
	font-weight:bold; /* 文字を太く */
}

まとめ

この記事では、WordPressでテーブルを作成する基本的な方法から、Cocoonテーマのデザインに合わせたCSSカスタマイズのテクニックまでを解説してきました。

テーブルを使用すると、文章だけでは伝わりにくい情報も一目で伝えることができます。

データを整理して、視覚的に分かりやすく表示するのに効果的ですね。

「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」

そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたいもの。

そこで今回は、数あるバックアッププラグインの中でも、おすすめしたい「All-in-One WP Migration & Backup」をご紹介します。

なぜWordPressにバックアップが必須？

このセクションでは、なぜWordPressにバックアップが不可欠なのか、具体的なデータ消失のリスクとともに、その対策がいかに重要であるかを解説していきます。

なぜデータは消える？具体的なリスク事例

WordPressのデータは、様々な予期せぬ事態によって失われる可能性があります。

例えば、WordPressのアップデート時に不具合が発生し、サイトが正常に表示されなくなることがあります。また、利用しているプラグイン同士が干渉し合い、エラーを引き起こすことも少なくありません。

さらに、バックアップを怠っていると、悪意のある第三者からの不正アクセスや、サーバー側のトラブルによって、大切なデータが突然消えてしまう危険性もあります。

これらのリスクに備えるためには、定期的なWordPressのバックアップが非常に重要になります。

万が一の事態が発生しても、バックアップがあれば迅速に元の状態に戻せるため、被害を最小限に抑えることができるのです。

「All-in-One WP Migration and Backup」とは

「All-in-One WP Migration and Backup」ダウンロード→https://ja.wordpress.org/plugins/all-in-one-wp-migration/

「All-in-One WP Migration & Backup」は、WordPressサイトのバックアップと復元を簡単に行える、非常に人気の高いプラグインです。

特にWordPress初心者の方でも扱いやすいシンプルな操作性が、多くのユーザーに支持されています。

インストールの仕方

新規プラグインを追加

WordPressの「ダッシュボード」から、「プラグイン」→「新規プラグインを追加」をクリックします。

「ダッシュボード」→「プラグイン」→「新規プラグインを追加」

「All-in-One WP Migration」と検索

右上に「プラグインの検索窓」が表示されるので、そこに「All-in-One WP Migration」と入力して検索します。

インストール

「All-in-One WP Migration and Backup」を見つけて、右上の「今すぐインストール」を押下します。

有効化

インストールが終わり、「有効化」に変化しました。

「有効化」をクリックします。

これで「インストール」は完了しました。

使い方

ダッシュボードに「All-in-One WP Migration」が現れました。

ここから使用していきます。

バックアップの仕方

ダッシュボードの「All-in-One WP Migration」から、「バックアップ」を選択します。

画面に出てくる「バックアップを作成」をクリックします。

「エクスポートの準備中」の文言のあとに、「ダウンロード」の文字が出てくると完了です。

「ダウンロード」の文字をクリックすると、すぐさまファイルがダウンロードされます。

ダウンロードされたファイルの「縦に3つ並んだドット」からもダウンロードできます。

インポートの仕方

バックアップしたファイルを使用するときは、ダッシュボードの「All-in-One WP Migration」から、「インポート」を選択します。

「バックアップをドラック＆ドロップしてインポートする」と書かれた場所に、バックアップしたファイルをインポートします。

※バックアップしたときの状態になりますので、最新のバックアップを選ぶようにしてください。

まとめ

WordPressサイトの運営は、時に予期せぬトラブルに見舞われる可能性があります。

しかし、適切なバックアップさえあれば、そのような最悪の事態を回避し、迅速にサイトを復旧させることが可能です。

「All-in-One WP Migration & Backup」は、そのシンプルで分かりやすい操作性から、WordPress初心者の方でも簡単に利用できます。

定期的なバックアップを設定しておけば、万が一の事態が発生しても、最小限の被害で済むでしょう。

そんな悩みを抱えていませんか？

WordPressテーマCocoonには、複数の情報をコンパクトにまとめられる便利な機能「タブ見出しボックス」が搭載されています。

この記事では、Cocoonの「タブ見出しボックス」の基本的な使い方から、デザインをさらに魅力的にするためのカスタマイズ方法までを丁寧に解説します。

「タブ見出しボックス」とは？

「タブ見出しボックス」とは、あたかも書類のインデックス（タブ）のように、突き出たタブが特徴です。

背景色・文字色も変更でき、タブの中には「カラム」や「リスト」など挿入できるのが使う幅が広がりますね。

「タブ見出しボックス」の使い方

実際にWordPressのCocoonエディター上で、「タブ見出しボックス」をどのように作成し、コンテンツを表示させていくのか、その基本的な使い方をステップごとに解説していきます。

「タブ見出し」と検索する

プラスマークをクリックして、「タブ見出し」と検索します。

※プラスマークは投稿ページ内をクリックすると出現します。

見出し・中身を入力

「タブ」をクリックして、見出しを入力します。

「ボックス内」をクリックして、文章を入力して完了です。

アイコン設定

右側の「ブロックバー」から、アイコンを設定することができます。

見出しの頭に「アイコン」が付けられますね。

背景色・文字色・枠線変更

右側の「ブロックバー」から、背景・文字色・枠線を変更できます。

どの色を入れようかな？と迷う場合は、こちらを参考にしてみてください。

Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic

サイトのカラーは、訪問者に与える印象を大きく左右する、非常に重要な要素です。洗練されたカラーパレットは、サイト全体の雰囲気を格上げし、ブランドイメージを効果的に伝える力を持っています。しかし、色の組み合わせは奥深く、センスに自信がないと悩ん...

furugrand.online

2025.02.23

「タブ見出し」をCSSカスタマイズ

タブ見出しボックスの「見出し」を大きくして、ボックス内の両側の余白を付けてきます。

ここでは、追加CSSに記入していきます。

※CSSを追加するときは、必ずバックアップをしてください。

バックアップのおすすめプラグインはこちら

バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】

「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたい...

furugrand.online

2025.03.05

サイト全体に設定

/* タブ見出し */
.tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}

サイト全体に設定する場合です。追加CSSにコピペします。

※余白など、自分の好きなように調整してください。

個別に設定（追加CSSクラス）

この「タブ見出しボックス」のみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から「追加CSSクラス」に名前を付けます。

ここでは、「tab1」にします。

/* タブ見出し */
.tab1 .tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab1 .tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}

全体に設定するCSSの、出だしを変更するのみでOKです。

ボックスに入れる

「見出しボックス」のボックス内に「リスト」「カラム」などを挿入することができます。

リストを入れる

ボックス内に「リスト」を入れることもできます。

リストについての記事はこちらをご覧ください。

「リスト」の使い方【cocoon】

「ブログ記事で箇条書きを使いたいけど、どうすれば見やすく整理できるんだろう？」WordPressで文章を作成する際、情報を簡潔に伝え、視覚的に分かりやすくするために「リスト（箇条書き）」は欠かせない要素です。この記事では、WordPress...

furugrand.online

2025.03.03

カラムを入れる

ボックス内に「カラム」を入れることもできます。

まとめ

この記事では、WordPressテーマCocoonに搭載された便利な機能「タブ見出しボックス」の使い方から、さらに見やすくするための基本的なカスタマイズ方法までを解説しました。

「タブ見出しボックス」は「ブロックバー」で自分のサイトに合うようアレンジすることができます。

情報を整理し、読者にとって分かりやすいコンテンツを提供することで、サイトの利便性が向上するでしょう。

WordPressで文章を作成する際、情報を簡潔に伝え、視覚的に分かりやすくするために「リスト（箇条書き）」は欠かせない要素です。

この記事では、WordPressテーマCocoonを使って、基本的なリストを作成する方法から、アイコンリストの使用方法までを解説します。

「リスト」とは？

「リスト」とは、複数の項目・要素を一定の規則に従って並べた一覧のことです。

箇条書きで記述するよりも、ひとつひとつの項目が視覚的にはっきりするのでアピールポイントが伝わりやすいというメリットがあります。

「リスト」の作り方

「リスト」と検索する

プラスマークをクリックして、「リスト」と検索します。

※プラスマークは投稿ページ内をクリックすると出現します。

リストを入力

箇条書きにしたいものを入力して完了です。

次のリストを入力するときは「Enter」で次の行になります。

「リスト」の装飾

アイコン変更

右側の「ブロックバー」から「アイコンのスタイル」を変更できます。

※「ブロックバー」が出現しない人は、「公開」の左隣の四角をクリックしてください。

アイコンスタイル一覧

〇と△と×のアイコンもあります。他にも沢山アイコンがあるので、「cocoon」ってすごいですね。

ボーダー（枠線）を付ける

右側の「ブロックバー」から「枠線」を変更できます。

ボーダーの種類も豊富

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

ボーダーの太さを変更

右側の「ブロックバー」から「ボーダー（枠線）の太さ」を変更できます。

※ブロックバーの設定マークの隣にある、丸いマークをクリックしてください。

①枠線のとなりの「＋」プラスマークをクリック

②枠線をクリック

画面を見ながら、枠線の「太さ」と「色」を変更できます。

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

ボーダーを角丸に

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

• 読みやすい文章になる
• 理解しやすくなる
• 誤解を減らせる

もちろん、ボーダー（枠線）を「角丸」にすることもできます。

背景・テキストを変更

右側の「ブロックバー」から「背景・テキストカラー」を変更できます。

※ブロックバーの設定マークの隣にある、丸いマークをクリックしてください。

背景色を「緑」、文字の色を「白」にしてみました。

「アイコンリスト」とは？

cocoonテーマには、「アイコンリスト」という機能もあります。

「アイコンリスト」の特徴は、リストの題名が付けられるということです。

そして、リストと題名を「枠線」で簡単に囲えます。

「アイコンリスト」の使い方

「アイコンリスト」と検索

プラスマークをクリックして、「アイコンリスト」と検索します。

ブロックバー操作

右側の「ブロックバー」から「アイコン・背景・テキストカラー・枠線」を変更できます。

題名・リストを入力したら完成です！

まとめ

この記事では、WordPressテーマCocoonで利用できる基本的なリストに加え、視覚的に訴求力の高いアイコンリストの使い方までを解説しました。

リスト機能は、情報を整理し、読者に分かりやすく伝えるための基本でありながら非常に強力なツールです。

手順の説明、項目の列挙、メリットの提示など、様々な情報を効果的に伝えることができるでしょう。

ブログやウェブサイトを運営していると、読者からの疑問や質問に対応する場面は少なくありません。

そんな時、「F＆A（よくある質問と回答）」のセクションがあれば、読者はすぐに疑問を解決でき、運営者側の負担も軽減されます。

この記事では、WordPressテーマCocoonを使って、この「F＆A」セクションを簡単に作成する方法を解説します。

Cocoonテーマの便利な機能を利用すれば、特別なプラグインを導入することなく、見やすく整理されたF＆Aを記事や固定ページに設置できます。

「F＆A」とは？

「F＆A」とは、顧客・社内からよく寄せられる質問をまとめたものです。

WordPressの「cocoonテーマ」では、ボタンをクリックすると「答え」が出てくる「アコーディオンメニュー」も無料で作成できるので、下記でご紹介していきます。

「F＆A」の作成方法

WordPressテーマCocoonを使って、実際にF＆Aを作成していく具体的な手順を解説します。

FAQと検索する

プラスマークをクリックして、「FAQ」と検索します。

※プラスマークは投稿ページ内をクリックすると出現します。

質問と答えを入力

画面に「Q＆A」が出てくるので、「質問と答え」を入力します。

これで「F＆A」が完成しました！

スタイル変更

右側の「ブロックバー」から「スタイル」を変更できます。

※「ブロックバー」が出現しない人は、「公開」の左隣の四角をクリックしてください。

角型ラベル

「Q＆A」のアイコンに四角い背景が付きました。

アコーディオン

「質問」をクリックすると「答え」が出現する「アコーディオンメニュー」になりました。

ラベル変更

↓

右側の「ブロックバー」から、質問ラベルのアイコンを変更できます。

色設定

↓

右側の「ブロックバー」から、「質問ラベル」「背景」など自由に色設定もできて素晴らしいですね。

まとめ

この記事では、WordPressテーマCocoonを使って、ウェブサイトやブログに効果的な「F＆A（よくある質問と回答）」セクションを作成する方法を解説しました。

読者が抱える疑問に丁寧に答えるF＆Aは、サイトの信頼性を高め、ユーザーエクスペリエンスを向上させる上で非常に重要な役割を果たします。

Cocoonテーマの標準機能を利用すれば、CSSを入力しなくとも、簡単に見やすく整理されたF＆Aを作成し、記事や固定ページに設置することが可能です。

WordPressサイトを運営していると、予期せぬエラーに遭遇することがあります。

中でも「閲覧できません (Forbidden access)」という表示は、サイトへのアクセスが完全に遮断されてしまうため、非常に焦りますよね。

しかし、Conoha wingのサーバーから比較的簡単に解決できる場合があります。

ここでは、「ConoHa WING」のサーバーを使用している人用の説明になります。

ConoHa wingとは？ 特徴・セキュリティを解説

「ConoHa wing」とは国内レンタルサーバーの1つで、ブログ・サイトを作成するときに使用します。「ConoHa wing」の特徴表示速度国内No.1充実機能と使いやすい管理画面サーバー料金が安い「」の特徴として、①表示速度国内No.1...

furugrand.online

2025.02.25

「閲覧できません」のページが表示

「cocoonダッシュボード」に変更を加えるとき、「閲覧できません」のページが表示されることがあります。

私は結構頻繁に起きたりします。

ConoHa WINGの場合

「ConoHa WING」の場合の説明になりますが、大体「WAF」を「OFF」すると「ダッシュボード」の変更ができるようになるそうです。

下記で詳しく説明します。

サイト管理選択

「ConoHa WING」にアクセスし、「サイト管理」をクリックします。

※クリックした後、表示されている「アドレス」が現在変更をしたい「アドレス」になっているか確認してください。

サイトセキュリティ

左側のバーにある、「サイトセキュリティ」をクリックします。

「WAF」をOFF

「WAF」の利用設定が「ON」になっているのを、「OFF」にします。

cocoonテーマの「ダッシュボード」に戻ると「ダッシュボード」の変更ができるようになっているかと思います。

「WAF」はWebサイトを守るセキュリティ対策なので、「ダッシュボード」の変更が終わり次第「ON」にしておきましょう。

「ConoHa WING」について

「ConoHa WING」についての記事は下記になります。

ConoHa wingとは？ 特徴・セキュリティを解説

「ConoHa wing」とは国内レンタルサーバーの1つで、ブログ・サイトを作成するときに使用します。「ConoHa wing」の特徴表示速度国内No.1充実機能と使いやすい管理画面サーバー料金が安い「」の特徴として、①表示速度国内No.1...

furugrand.online

2025.02.25

まとめ

この記事では、WordPressサイトで「閲覧できません (Forbidden access)」と表示された際に、「ConoHa WING」での作業を通じて試せる復旧方法について解説しました。

背景色を変えるだけでも、サイトの雰囲気はガラッと変わり、さらに背景画像を設定すれば、よりオリジナリティ溢れるデザインにすることが可能です。

この記事では、WordPressテーマCocoonを使って、サイト全体の背景色を設定する方法、そして背景画像を設定する方法を分かりやすく解説します。

WordPress・cocoonテーマの「背景色」「背景画像」の設定を行っていきます。

「サイト全体」の背景の設定

「サイト全体」に対して「背景色」「背景画像」を設定するには、「ダッシュボード」から「cocoon設定」、「全体のページ」から設定します。

「ダッシュボード」→「cocoon設定」→「全体のページ」→「サイト背景色」「サイト背景画像」

「背景色」を決めるのには、無料で使用できるwebサービスがおすすめです。

Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic

サイトのカラーは、訪問者に与える印象を大きく左右する、非常に重要な要素です。洗練されたカラーパレットは、サイト全体の雰囲気を格上げし、ブランドイメージを効果的に伝える力を持っています。しかし、色の組み合わせは奥深く、センスに自信がないと悩ん...

furugrand.online

2025.02.23

個別に背景設定

「固定ページ」「投稿ページ」など「個別に背景設定」する場合は、「CSS」の記入が必要になります。

ここでは、「ダッシュボード」→「追加CSS」に記載していきます。

※「追加CSS」に記入する場合は、必ずバックアップを行ってください。

バックアップのおすすめプラグインはこちら

バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】

「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたい...

furugrand.online

2025.03.05

ページIDを確認

「ページID」を確認するには、編集画面の「リンク」の中にあります。

「httpsから始まるリンク」の中から「post=2148」の番号が確認できます。この場合のページIDは「2148」です。

個別に背景色を設定

「ページID2148」に対して、カラーコード「#f1a8a2」の優しいピンク色を設定してみます。

/* 個別ページ背景色設定 */
body.public-page.postid-2148 {
	background-color:#f1a8a2;
}

※「body.public-page.postid-2148」の数字の場所は、「背景色を変更したいID番号」にしてください。

「ページID2148」の投稿ページのみに対して、背景色が変更されました。

個別に背景画像を設定

「ページID2148」に対して、画像を設定してみます。

私は「figma」の「Unsplash」という無料で画像が使用できるプラグインから拝借します。

「figma」の「Unsplash」についての記事です。

初心者が「Unsplash」プラグインを使ってみる【figma】

「Unsplash」プラグインとは公式サイト：「Unsplash」とはfigmaのプラグインで、無料で解像度の高い写真が使用できます。※有料画像もあります。他のブラウザから画像を検索するよりも、figma上で画像の検索・使用が完結できるので...

furugrand.online

2025.01.30

/* 個別ページ背景画像設定 */
body.public-page.postid-2148 {
  background-image: url(https://～); /* 画像ファイルの指定 */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;/* 縦横比を維持しながら画面全体を覆うように表示 */
}

※「body.public-page.postid-2148」の数字の場所は、「背景色を変更したいID番号」にしてください。

※background-image: url(https://～); の、urlの中には「ダッシュボード」→「メディア」から画像の「url」をコピーして貼り付けてください。

「ページID2148」の投稿ページのみに対して、背景画像が変更されました。

まとめ

この記事では、WordPressテーマCocoonを使って、ウェブサイト全体の背景色を設定する方法と、背景画像を設定する方法について解説しました。

背景は、サイトの印象を大きく左右する要素であり、色や画像を変更するだけで、サイトの雰囲気は大きく変わります。

個別ページのみに「背景」を設定することによって、特定ページを目立たせることもできますね。

ボタンを検索すると？

ブロックエディターでボタンを検索すると、3つの「ボタン」が出てきます。

「囲みボタン」は、アフィリエイトで使用します。

左側の「白いボタン」はカスタマイズのできる幅が狭いので、真ん中の「黒いボタン」の説明になります。

「黒いボタン」をクリック

「黒いボタン」をクリックすると、画面上に「黒いボタン」が出現します。

リンク設定

右側にある「ブロックバー」に、様々な設定が出てきます。

「URL」にはリンクを貼り付けます。

リンクを貼り付けると、ボタンをクリックした際にそこに飛びます。

「リンクの開き方」も選択できます。

ボタンの縦幅

ボタン設定の「サイズ」は、ボタンの縦幅というイメージです。ここでは「大」にしておきます。

「円形にする」「光らせる」設定も入れてみます。

ボタンの幅の大きさ

「幅設定」が100％

「幅設定」が100％の状態は、横一面にボタンの幅が広がります。

「幅設定」が75％

「幅設定」が75％の状態は、すこし狭まりました。

「幅設定」が50％

「幅設定」が50％の状態は、約半分の幅になります。

「幅設定」が25％

「幅設定」が25％の状態は、一番小さな幅です。

ボタンを中央寄せ

ボタンを「クリック」して「配置」を選択すれば、ボタンの位置を変更することができます。

「ボタンをクリック」→「配置をクリック」

背景色変更

「背景色」「文字色」を変更できます。ここでは「ピンク」にしてみます。

「ボーダー色」とは、ボタンの枠線のことです。

「追加CSS」に記入しなくてもここまでできました。

様々な色のボタン

カラーが自由に選択できるので、自分のサイトに合わせて統一感を出すこともできますね。

ホバーしたときに色が変化

ボタンをホバーしたときに色を変化させるには、「追加CSS」に記入する必要があります。

「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」

背景色を白色・文字色を黒色

今回は「1番大きいボタン」に対して、「背景色を白色」「文字色を黒色」にしていきます。

※背景色を白色にすると、「背景が白」の場合同化してしまうので、ボタンの「ボーダー色」を黒に設定しておいてください。

個別に設定する場合（追加CSSクラス）

このボタンのみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から「追加CSSクラス」に名前を付けます。

ここでは、「blackbtn」にします。

追加CSSに記載

/* ボタン */
.blackbtn .btn:hover{
	background-color:#fff !important;
	color:#000 !important;
}

コードを「追加CSS」に記載します。

※反映されていれば、「!important」は必要ありません。

※コードを記載する場合、念のためバックアップをとっておいてください。

バックアップのおすすめプラグインはこちら

バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】

「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたい...

furugrand.online

2025.03.05

全体に反映する場合

/* ボタン */
.btn:hover{
	background-color:#fff !important;
	color:#000 !important;
}

サイト全体のボタンに適用する場合は、「追加CSSクラス」の設定は必要ありません。

まとめ

ブロックエディターを使用すると、直感的な操作のみで簡単なボタンを作成できるので便利ですね。

最新の投稿とは

「ダッシュボード」→「新規投稿を追加」

ダッシュボードから「新規投稿を追加」をクリックすると、1つ1つ記事をアップすることができます。

記事をアップしたものを、トップページに「最新の投稿」として表示する方法は、下記のブログで紹介しています。

「最新の投稿・新着記事」の表示の仕方【cocoon】

最新の投稿とは「ダッシュボード」→「新規投稿を追加」ダッシュボードから「新規投稿を追加」をクリックすると、1つ1つ記事をアップすることができます。記事をアップしたものを、トップページに「最新の投稿」として表示する方法を解説します。表示方法c...

furugrand.online

2025.02.18

ここでは「別ページを作成」してから、全件表示にする方法をご紹介します。

最新の投稿を「全件表示」にする

固定ページを作成（ダッシュボード）

「ダッシュボード」から、「新規固定ページを追加」をクリックして「固定ページを作成」します。

「ダッシュボード」→「新規固定ページを追加」

固定ページを作成

固定ページのタイトルを、ここでは「Newposts」とします。

本文は空欄のままで、右上の「公開」を押します。※リンクも「newposts」となっていることを確認してください。

「タイトル入力」→「リンク確認」→「公開」

ダッシュボードの設定

ダッシュボードの「設定」から「表示設定」を選択します。

ホームページの表示のグループにある、「投稿ページ」から先ほど作成した名前「newposts」を選択します。

これで、「newposts」の「固定ページ」のリンクを貼り付けると、最新の投稿が全件表示されるようになります。

「設定」→「表示設定」→「投稿ページ選択」

ボタンにリンクを貼ってみる

例えば、私は「トップページ」に「最新の投稿」を貼り付けていますが、「5件」のみの表示にしています。

ボタンを作成して、ボタンの「リンク」に先ほどの「newposts」の固定ページのリンクを貼り付けて「enter」キーを押します。すると？

「ボタン作成」→「newpostsのリンク貼り付け」→「enterキー」

ボタンの作成について下記記事でまとめています。

ブロックエディターで「ボタン」を作成【cocoon】

ボタンを検索すると？ブロックエディターでボタンを検索すると、3つの「ボタン」が出てきます。「囲みボタン」は、アフィリエイトで使用します。左側の「白いボタン」はカスタマイズのできる幅が狭いので、真ん中の「黒いボタン」の説明になります。「黒いボ...

furugrand.online

2025.02.20

新着記事が全件表示されている

新着記事が全件表示されています！

最新の投稿とは

「ダッシュボード」→「新規投稿を追加」

ダッシュボードから「新規投稿を追加」をクリックすると、1つ1つ記事をアップすることができます。

記事をアップしたものを、トップページに「最新の投稿」として表示する方法を解説します。

表示方法

cocoonテーマの場合、「最新の投稿」の表示方法には、大きく2通りあります。

ショートコードで表示

「ショートコード」を呼び出して、ここにコードを記述する方法です。

詳しくは下記サイトでご紹介しています。

新着記事をショートコードで表示する【cocoon】

新着記事をショートコードで簡単に画面に張り付けることができます。

furugrand.online

2025.01.18

ブロックを呼び出して表示

「最新」と検索すると、「最新の投稿」が出てくるのでクリックしてここから始めます。

最初の画面は「リストビュー」

最初の画面はリストが羅列してあります。

ブロックバーを呼び出す

右側の「公開」のすぐ左にある四角いマークをクリックして、「ブロックバー」を表示します。

アイキャッチの設定

「アイキャッチ画像→表示」「解像度→中」「75％」「アイキャッチ画像のリンクを追加」

アイキャッチ画像を表示にし、解像度は「中」にします。画像の大きさは「75％」にして、「アイキャッチ画像のリンクの追加」を設定します。すると？

※「アイキャッチ画像のリンクの追加」とは、アイキャッチをクリックするとその記事に飛べるようにする設定です。

「最新の投稿」として、アイキャッチと題名が綺麗に表示されました。

並び順・件数を表示

並び順は「最新から」「過去から」など設定可能です。

カテゴリーを絞ることもでき、何件表示させようかな？という項目数も変更できます。

※「ブロック下余白」は1つ1つの投稿に対しての余白ではなく、全体に対しての余白です。

横並びにする

記事を横並び表示にするには、田んぼのマークをクリックするだけです。「cocoonテーマ」って優秀ですね。