広告
はじめに：文章に「色」をつける楽しさを知りましょう
前回記事では、エックスサーバーの無料体験期間を利用して、WordPressの基本である「見出し」や「文章の入力」、「太字・マーカー」といった基礎を体験しました。
「文字は打てるようになったけれど、なんだか見た目が地味だな……」
「もっとプロのブログみたいに、おしゃれに読みやすくしたい！」
そう感じ始めたあなたは、すでに「読者のことを考えるブロガー」の仲間入りをしています。
素晴らしい進歩です！
第6回となる今回は、無料テーマCocoon（コクーン）の真骨頂である「装飾ブロック」に挑戦します。
難しい設定は一切不要。
「積み木」を置くような感覚で、ブログの見た目を劇的に変えていきましょう。
今回のゴール：3つの「装飾ブロック」を体験する
この記事の目的は、おしゃれなデザインを作ることではありません。
「装飾ブロックを一度使ってみて、使いどころの感覚をつかむこと」、ただそれだけです。
- 囲み枠（ボックス）：
- 大事なポイントを強調する
- 吹き出し：
- あなたの「声」を届けて親近感を出す
- テーブル（表）：
- 複雑な情報をスッキリ整理する
「全部使わなきゃ！」と気負う必要はありません。
「あ、これは便利だな」と思うものから、一つずつ触ってみましょう。
Cocoon独自ブロックとは？
Cocoonには、WordPress標準ブロック（テーブル、リストなど）とは別に、Cocoon専用の便利なブロック が用意されています。
代表的なものが、
- 囲み枠（ボックス）
- 吹き出し
です。
これらは、画面左上の「＋」（ブロックインサーター）をクリックして選ぶだけ で使えます。
囲み枠（ボックス）で「ここが重要！」を伝える
ブログの読者は、すべての文章を隅から隅まで読みません。
パッと画面をスクロールして、「目立つ部分」だけを拾い読みする傾向があります。
そこで活躍するのが「囲み枠」です。
囲み枠はこんなときに使います
- 記事のまとめ（ここまでの要約）
- 注意点（ここだけは気をつけて！）
- おすすめの理由（メリットの箇条書き）
囲み枠の入れ方
今回は、最も使い勝手の良い「見出しボックス」を例に進めます。
＋ をクリック
① Cocoon汎用ブロックの「見出しボックス」を選択
② 見出しボックスが表示されます
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択
① アイコン選択（例：✓ ）
② ボーダー色選択（例：深紫色）
③ 背景色選択（例：拡張色D）
① 見出し文章入力（例：ボックスの種類）
② 文章入力（例：見出しブロック）
囲み枠を使うだけで、文章にメリハリがつき、読みやすくなります。
最初は1記事に1つ使う程度で十分です。
吹き出しで「親しみやすさ」を演出する
ブログで最大の武器になるのは、あなたの「人柄」です。
吹き出しを使うと、まるで読者と対面で話しているような温かい雰囲気になります。
吹き出しはこんなときに使います
- 自分の感想を入れたいとき
- 読者に話しかけるような表現をしたいとき
- 少しやわらかい雰囲気にしたいとき
吹き出しの入れ方
＋ をクリック
① Cocoonブロックの「吹き出し」を選択
② 「吹き出し」ブロックが表示されます
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択
人物を選択（ 悩むおじさん（左） ）
① 吹き出しスタイル選択（例：考え事 ）
② 背景色選択（例：淡い緑）
③ 文字色選択（例：黒）
④ ボーダー色選択（例：黄緑色）
① 名前入力（ 例：ton ）
② 文章入力（例：難しいかも……と思いましたが、触ってみると意外と簡単でした）
最初は、無理に使わなくても問題ありません。
「こんな表現もできるんだな」と思えれば十分です。
テーブル（表）で「比較・整理」の達人になる
数字や条件を文章でダラダラ書くと、読者は混乱してしまいます。
そんな時は、迷わず「テーブル（表）」を使いましょう。
表はこんなときに便利
- 情報を並べて比較したいとき
- メリット・デメリットを整理したいとき
- 数字や条件を分かりやすく見せたいとき
表の入れ方
＋ をクリック
① テキストブロックの「テーブル」を選択
② 「テーブル」ブロックが表示されます
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択
① カラム数と行数を指定（例：2列×3行）
② 表を作成 をクリック
① 表のセル幅を固定 をOFF
② ヘッダーセクション をON
① 表の各マスに文字を入力
② 公開 を2回クリック
文章で説明するより、ひと目で内容が伝わる のが表の良いところです。
表を使うときの注意点
- 行や列を増やしすぎない
- スマホ表示を意識する
- 「比較・整理」に使うと効果的
表（テーブル）の表現力
私自身、最終的には有料テーマの SWELL を選びました。
その理由のひとつが、表（テーブル）の表現力 です。
Cocoonの表はシンプルで使いやすい一方、デザインの自由度や表現できる幅という点では、SWELLのほうが選択肢が多いと感じました。
とはいえ、ブログを始めたばかりの段階では、Cocoonの表で困ることはほとんどありません。
「まずは書くこと・続けること」を考えると、Cocoonはとてもバランスの良いテーマだと思います。
作成した記事内容を確認
まとめ｜装飾は「引き算」が美しい
実際に使ってみて、いかがでしたか？
- 操作自体は「選んで設定するだけ」なので意外と簡単
- 失敗しても、ブロックを消せばすぐ元通り
- でも、使いすぎには注意！
装飾は、料理でいえば「スパイス」です。
入れすぎると主役の「文章」の味がわからなくなってしまいます。
「まずは装飾なしで書き、最後に1、2箇所だけ魔法をかける」
このくらいのバランスが、大人のブログにはちょうどいい塩梅です。
次回予告｜あなたの「写真」を世界に公開しよう！
次回は、いよいよ「画像（写真）の入れ方」を体験します。
- スマホで撮った写真をブログに載せる手順
- そのまま載せちゃダメ？「画像サイズ」の注意点
- 著作権で困らない「無料素材サイト」の使い方
文章、装飾、そして画像。
この3つが揃えば、あなたのお試しブログは「プロ顔負けの完成度」になります。
どうぞお楽しみに！
エックスサーバー10日間無料体験記：全8回ロードマップ
「いきなりお金を払うのは不安……」という方へ。
エックスサーバーの10日間無料体験を活用して、リスクゼロで「お試しブログ」を完成させる全工程をまとめました。
- 第1回：【プロローグ】10日間「お試し」でブログを始めるべき理由
- 第2回：10日間無料体験！エックスサーバー「お試しブログ」の申し込み手順
- 第3回：無料期間中にWordPressをインストールしてブログの土台を作る
- 第4回：無料テーマ「Cocoon」でお試しブログの見た目を整える
- 第5回：まずは書いてみる！お試しブログでの記事作成・基本操作
- 第6回：ブログを読みやすく！装飾ブロックを使いこなすコツ（本記事）
- 第7回：写真を載せてみよう！ブログに画像を入れるポイント
- 第8回：運命の10日目。お試しブログを「本物の資産」にする手順
