ブログ記事を書き始めたばかりの頃は、文章だけになってしまい、見づらい記事になってしまいがちです。
そんなときは、見出しや目次、文字装飾、ボックス、表などの「記事装飾」を使うことで、読みやすく分かりやすい記事にすることができます。
この記事では、見出し・目次・リンクの基本操作から、マーカーや文字色などの文字装飾、ボックス装飾や表の作り方、他の記事に誘導するブログカードの入れ方までをまとめました。すべて詳しい解説記事へのリンク付きで紹介しています。
この記事を読めば、記事装飾の基本が分かり、読みやすいブログ記事が作れるようになります。これからブログを始める方や、始めたばかりの方はぜひ参考にしてみてください。
見出し・目次・リンクの基本操作
見出しの設定方法
記事の中に大きなタイトルや小さなタイトルを入れるのが見出しです。
H2見出しが一番大きく、H3、H4と数字が増えるほど小さな見出しになります。
見出しにしたい文章を入力したら、ツールバーの一番左をクリックします。
次に、「見出し」をクリックします。
これで、見出しを設定できます。
目次の作り方
目次があることで記事の内容が一目で分かり、読みたい部分へすぐに移動できます。
まず記事にH2、H3の見出しを入れます。
次に、ダッシュボード左メニューの「Cocoon設定」→「目次」タブをクリックします。
「目次を表示する」にチェックを入れ、表示ページなど必要な項目を設定します。
最後に「変更をまとめて保存」をクリックすれば設定完了です。
リンクの貼り方
内部リンクがあることで、関連性のあるページへ誘導でき、ブログの回遊性が高まります。
まず、リンクしたいページのURLをコピーします。
次に、リンクをつけたい文字を入力し、ドラッグして選択します。
上に表示されるツールバーの「🔗リンクマーク」をクリック。
URLを貼り付けしてEnter
詳しい手順や画像付きの解説は、こちらの記事をご覧ください。
文字装飾の使い方
ブログ記事を書くとき、「どこが重要なのか分かりづらい」と感じたことはありませんか？文字装飾を使うことで、強調したいポイントが一目で分かり、読みやすい記事になります。
Cocoonでは、マーカーや太字、文字色、テキストサイズ変更など、さまざまな文字装飾を簡単に設定できます。文章の中で重要な部分を強調したいときに活用すると効果的です。
マーカーの使い方
マーカーは、特に強調したい文章を目立たせたいときに便利です。強調したい文字を選択し、ツールバーのマーカーボタンから好きな色を選ぶだけで簡単に設定できます。
では、マーカーの使い方を解説します。
まず文字を入力し、マーカーを引きたい部分をドラッグして選択します。
次に、ツールバーにあるペンマークをクリックします。
するとマーカーの候補が表示されるので、今回は「黄色マーカー」をクリックします。
黄色マーカーをクリックすると、選択した文字にマーカーを引くことができます。
マーカー以外にも、太字や文字色、テキストサイズ変更など多くの文字装飾があります。詳しい設定方法は、こちらの記事で画像付きで解説しています。
ボックス装飾の使い方
ボックス装飾とは、文章を枠や背景で囲み、情報を目立たせるための装飾機能です。重要なポイントや補足説明を分かりやすく表示できます。
ボックス装飾の種類
Cocoonでは、案内ボックスやアイコンボックスなど、さまざまなボックス装飾が用意されています。用途に応じて使い分けることで、記事がより読みやすくなります。
Cocoonのボックス装飾の種類は次の通りです。
案内ボックス
白抜きボックス
付箋風ボックス
タブボックス
見出しボックス
タブ見出しボックス
ラベルボックス
アイコンボックスの使い方
ここでは、よく使うアイコンボックスの設定方法を簡単に解説します。
ブロックエディタで「＋」をクリックし、「ボックス」と入力して「アイコンボックス」を選択します。（表示されない場合は「すべて表示」をクリックしてください）
アイコンボックスが表示されたら、ボックスを選択した状態で、右側の設定パネルからボックスのタイプを選択します。今回は例として「メモ」を選びます。
最後に文字を入力すれば、アイコンボックスの設定は完了です。
より詳しい設定方法やボックスの種類については、こちらの記事で画像付きで解説しています。
表の作り方
WordPressのブロックエディタには、最初からテーブル（表）を作成できる機能が用意されています。比較表や一覧表を作りたいときに便利です。ここでは、基本的な表の作り方を解説します。
表の作り方の手順
まずは、記事内にテーブルブロックを追加します。
テーブルを入れたい位置をクリックしカーソルを表示させ、画面左上の「＋」ボタンをクリック
「テーブル」ブロックを選択
カラム数・行数を指定して「表を作成」をクリック
表が挿入されるので、文字を入力します。
これで、基本的な表は完成です。
このほかにも、ヘッダー行の追加や枠線の設定などのカスタマイズも可能です。用途に応じて調整すると、より見やすい表を作ることができます。
詳しい設定方法やカスタマイズの手順は、こちらの記事で画像付きで解説しています。
ブログカードの設定方法
テキストリンクだけだと文字の色が変わるだけで、読者の目にとまりにくい場合があります。
ブログカードやラベル付きブログカードを使うと、記事タイトルやアイキャッチ画像がカード風に表示され、一目で内容が分かるようになります。
デザインも自動で整うため、見た目もぐっと良くなります。
ラベル付きブログカードの設定方法
ここでは、ラベル付きブログカードの設定方法を簡単に解説します。
記事の編集画面で、ラベルを表示させたい場所に「ブログカード」ブロックを追加します。
記事内の「+（ブロックを追加）」ボタンをクリックします。（ブログカードが出てこない場合、すべて表示をクリック）
「ブログカード」と検索するか、左側に表示されるブロック一覧から選択します。
追加したブログカードブロックに、リンクさせたい記事のURLを貼り付けます。
複数の記事のリンクを貼り付けることも可能です。その時Enterをおして、必ず1行ずついれてください。
次に、ラベルを設定していきます。
ブログカードブロックを選択した状態で、画面右側の「設定」パネルを開きます。公開または保存ボタンすぐ左横が「設定」になります。
記事の中のブロックと「ブロック」タブが選択されていることを確認し、少し下にある「スタイル設定」を探します。
「ラベル」という項目がありますので、ここのプルダウンメニューをクリックします。
表示された選択肢の中から、表示させたいラベルを選びます。
例えば、「関連記事」を選択すると、ブログカードの左上にラベルが表示されます！
設定が終わったら、記事を「保存」または「下書き保存」して、実際にラベルが表示されているか確認してみましょう。
ブログカードやテキストリンクの詳しい設定方法は、こちらの記事で画像付きで解説しています。
まとめ
今回は、Cocoonで使える基本的な記事装飾の使い方をまとめて紹介しました。
見出しや目次で記事の構成を整え、文字装飾やボックスで重要なポイントを強調し、表やブログカードを活用することで、読みやすく分かりやすい記事を作ることができます。
最初はすべてを使いこなす必要はありません。少しずつ取り入れていくだけでも、記事の見やすさは大きく変わります。
それぞれの装飾については、詳しい解説記事も用意していますので、気になるものからぜひ試してみてください。読みやすい記事作りの参考になれば嬉しいです。
