【第4回】XServer10日間無料体験！Cocoonで記事を書く方法をやさしく解説

2025年12月15日2025年12月18日

はじめに（前回記事からの続き）

前回記事では、XServer10日間無料体験を利用し、Cocoonを導入したあとの初期設定として、

サイト全体の基本設定（Cocoon設定）
グローバルメニューの作成
カテゴリーの作成と整理

といった、「ブログを書く前の土台づくり」 をひとつずつ確認しました。

これらの設定を済ませておくことで、記事を書くことに集中できる環境が整った状態になっています。

今回の記事では、その次のステップとして、

Cocoonで文章はどこまで表現できるのか
実際の記事では、どんな操作で文章を書くのか
太字やマーカーなどの装飾はどの程度使えるのか

といった点を、実際に記事を書きながら体験する形で解説していきます。

特に、「ブログを始めたばかりで、難しい操作はできるだけ避けたい」という方に向けて、Cocoon標準機能だけでできることに絞って紹介します。

Cocoonで使う記事編集画面について

Cocoonは WordPress の ブロックエディタに完全対応しています。

記事を書くときに使うのは、主に次の2つです。

段落ブロック（文章を書く）
Cocoon独自ブロック（装飾など）

HTMLやCSSといった専門知識がなくても、クリック操作だけで見栄えのよい記事を作ることができます。

実際にCocoonでブログ記事を書く手順

ここからは、WordPressにログインしてから記事を公開するところまでを、実際の操作をイメージしながら進めていきます。

目標はひとつです。

「この通りに操作すれば、1記事書ける」

という体験をすることです。

手順① 新規記事を作成する

① 「投稿」をクリック
②「投稿を追加」をクリック

記事編集画面（ブロックエディタ） が表示されればOK

手順② タイトルを入力する

① 「タイトルを追加」に記事タイトルを入力
　　例：はじめてのブログ記事｜Cocoonの文章表現力（装飾）
② カテゴリーは「文章」にチェック
　　※基本は1記事＝1カテゴリー がおすすめ
③ スラッグの文字の部分をクリック
④ スラッグはURLの一部を構成する要素なので、英数字に変更
　　例： cocoon-sentence-decoration
⑤ 「✖」をクリックして確定

記事タイトルのポイント

記事の内容がひと目で分かる
「読んでみよう」と思える

※ タイトルは後から何度でも変更できます。最初は仮タイトルでも問題ありません。

手順③ 見出し（H2・H3）を入れて記事の骨組みを作る

見出しタグの基本的な役割

見出しタグ	役割	使い方のポイント
H1	ページ全体のタイトル	– 1ページに基本1つだけ – 記事のテーマを端的に表す – WordPressでは記事タイトルが自動的にH1になることが多い
H2	大見出し（章）	– 記事の主要なセクションを区切る – 読者が目次で把握しやすい – SEO的にも重要
H3	中見出し（節）	– H2の内容をさらに細分化 – 詳細説明や具体例を入れる – 読みやすさを向上
H4	小見出し（項）	– H3をさらに細かく分けたいとき – 補足情報や細かい手順に便利
H5	さらに細かい小見出し	– H4の下位階層 – 長文記事や技術系記事で使うことが多い

見出しタグ	役割	使い方のポイント
H1	ページ全体のタイトル	– 1ページに基本1つだけ – 記事のテーマを端的に表す – WordPressでは記事タイトルが自動的にH1になることが多い
H2	大見出し（章）	– 記事の主要なセクションを区切る – 読者が目次で把握しやすい – SEO的にも重要
H3	中見出し（節）	– H2の内容をさらに細分化 – 詳細説明や具体例を入れる – 読みやすさを向上
H4	小見出し（項）	– H3をさらに細かく分けたいとき – 補足情報や細かい手順に便利
H5	さらに細かい小見出し	– H4の下位階層 – 長文記事や技術系記事で使うことが多い

※ 最初は H2とH3だけで十分 です。

今回使う見出し構成

以下の構成で記事を作成します。

H2：この記事でやること
H2：実際に文章を書いてみる
- 　H3：まずは普通に文章を書く
- 　H3：太字とマーカーを使ってみる
H2：書いてみて感じたこと
H2：まとめ｜最初はこれで十分

見出しの入力方法

＋をクリック

① 「見出し」ブロック を選択
② 見出し が表示される

① 見出し をクリックして、見出し文を入力
　例：この記事でやること
② H2 をクリック
③ レベルをH2に設定
　 見出し をクリックして、Enterキーで次のブロックへ

① 「ブロックを選択するには「/」を入力」をクリックして、次の見出し文を入力
　　例：実際に文章を書いてみる
② 「段落」ブロック をクリック
③ 「見出し」ブロックを選択

① 「ブロックを選択するには「/」を入力」をクリックして、次の見出しを入力
　　例：まずは普通に文章を書く
② 「段落」ブロック をクリック
③ 「見出し」ブロックを選択

① H2 をクリック
② レベルをH3に設定
③ 「まずは普通に文章を書く」をクリックして、Enterキーで次のブロックへ

同じ操作を繰り返して、すべての見出し文を入力

手順④ 文章を書く

見出しをクリックして、Enterキーを押すと、その下に本文を書けるようになります。

「この記事でやること」に入力する文章

この記事でやることをクリック後、Enterキーを押して、以下の文章を入力

今回は、Cocoonを使って実際に文章を書きながら、装飾を試してみる体験記事です。

難しいことはしません。

・普通に文章を書く

・太字とマーカーを少し使ってみる

この2つだけで、「ブログ記事らしくなるかどうか」を確かめてみます。

改行の使い分け

Enterキー
- 段落ブロック内で Enterキーを押すと新しい段落ブロックが作成されます。
- つまり「改段落」扱いになり、文章の間に余白が入ります。
Shift+Enterキー
- 段落ブロック内で Shift+Enterを押すと同じ段落内で改行されます。
- 段落は分かれず、行間も狭くなります。

読みやすさを意識して使い分けましょう。

　入力後のイメージ

他の見出しにも文章を入力

「まずは普通に文章を書く」に入力する文章

まずは、装飾を一切使わずに文章を書いてみます。

Cocoonは無料で使えるWordPressテーマです。
初心者でも扱いやすく、文章を書くことに集中できます。
ブログを始めたばかりの人にも向いていると感じました。

特に問題はありませんが、少し単調な印象もあります。

「太字とマーカーを使ってみる」に入力する文章

次に、同じ文章に太字とマーカーを少しだけ加えてみます。

Cocoonは、無料で使えるWordPressテーマです。
初心者でも扱いやすく、文章を書くことに集中できます。
ブログを始めたばかりの人にも向いていると感じました。

文章の内容は同じですが、伝えたい部分が目に入りやすくなりました。

「書いてみて感じたこと」に入力する文章

実際に書いてみて、いくつか気づいたことがありました。

・操作は思っていたより簡単
・装飾はあとからでも直せる
・文章を全部うまく書こうとしなくていい

特に、「まず書いてみる」ことが一番大事だと感じました。

「まとめ｜最初はこれで十分」に入力する文章

今回は、太字とマーカーだけを使って記事を書いてみました。

正直なところ、最初の1記事としてはこれで十分だと思います。

装飾は、慣れてきたら少しずつ増やせば大丈夫です。

次は、囲み枠や吹き出しなど、もう一歩だけ表現を広げてみる予定です。

Cocoonは、「試しながら覚える」
そんな使い方がとても合うテーマだと感じました。

　入力後のイメージ