3-05 文字を装飾しよう

「WordPress(ワードプレス)超入門」は、株式会社コミュニティコムが運営する「WordPressテーマ&プラグイン販売 コミュニティコムショップ」が、WordPress初心者のためにホームページを開設するまでの手順をわかりやすく解説するシリーズです。

ホームページの投稿では、記事中で強調したい文字を太字にしたり、まわりの文字とは異なる文字色を設定されていたりすることがあります。このように文字を装飾することで、ホームページに訪れた人へ「何を伝えたいホームページなのか」明確に伝えることができ、投稿も読みやすくなります。

WordPress(ワードプレス)の投稿や固定ページは、管理画面の新規投稿画面で簡単に文字の書式設定ができます。このレッスンでは、文字の装飾方法箇条書きにする機能、文字をクリックすると別のホームページに移動する「リンク」を設定する機能について紹介します。

1. 文字を太字にする

WordPress(ワードプレス)の管理画面にログインし、左側のメニューバー「投稿」>「投稿一覧」をクリックし、作成済の任意の記事にマウスポインターを合わせ「編集」をクリックして編集画面を表示しましょう。 WordPress(ワードプレス)管理画面へのログイン方法については「WordPress(ワードプレス)の管理画面にログインしよう」を、記事の作成方法については「『投稿』で記事を作成しよう」を参照してください。

投稿の編集画面が表されました。太字にしたい部分をドラッグ(マウスボタンを押したまま動かす)して選択します。ページ上部にある「B」と表示してある太字ツールをクリックします。

文字が太字になりました。もし間違えてしまった場合はWindowsの場合は「Ctrl+Z」キーを押すと直前の状態に戻すことができます。元の状態に戻したら、再度文字を選択して文字の装飾操作をやり直しましょう。

2. 箇条書きにする

いくつかの項目をひとつひとつ分けて書き並べたいときは、点やナンバリングで箇条書きにすると読みやすくなります。また、文字が書き連ねてある記事よりも、上手に箇条書きを取り入れた文章の方が全体的にわかりやすく、ホームページを訪れた人が最後まで記事を読んでくれる可能性も高くなるかもしれません。

段落内に「・」や数字を直接記入して箇条書きのように見せることはできますが「リストブロック」を利用した箇条書きにすることで、記事内でピックアップしている情報が検索エンジンにも伝わりやすくなるのでSEO (サーチエンジンオプティマイゼーション) にも効果的です。SEOについては「SEOの基本を理解しよう」で詳しく紹介しているので参照してください。

「リストブロック」を作成するには、まず既に作成したブロックの上(まだ作成していない場合は空のブロックの左、もしくは編集画面左上)の「+」ボタンをクリックします。ブロックの種類が表示されるので、「リスト」を選択し、クリックします。

リストブロックが作成できました。デフォルト(元の状態)では「・」が文の前に表示される箇条書きになりますが、リストブロック上部の縦に「1,2,3」と書いてある部分をクリックすると、数字が文の前に表示される箇条書きが入力できるようになります。ひとつの項目の記入が終わったらWindowsの場合「Enter」キーを押すと次の項目を記入できるようになります。

3.文字にリンクを設定する

文字にリンクを設定することで、その文字をクリックすると該当ページに移動することができるようになります。 本文中で他のお店のホームページや、他の記事の紹介をするときなどに便利です。

文字にリンクを設定するには、このレッスンのはじめに文字を太字にしたときのように、リンクを設定したい文字をドラッグ(マウスボタンを押したまま動かす)して選択し、段落ブロック上部のクリップのようなマーク「リンク」ボタンをクリックします。

すると、URLを入力する欄が表示されるので、そこに該当のリンク先URLを入力します。その後、入力欄右側の矢印「適用」をクリックするとリンク設定は完了です。また、矢印の右側の黒丸が3つ縦に並んでいるボタンをクリックすると、より詳しいリンク設定ができます。

4.文字の色や背景色を設定する

太字以外にも文字を目立たせる方法として、文字色を変更したり 段落ブロックの背景色をつけるなどがあります。

文字色と背景色の設定は、編集画面右上のブロックタブの中の「色設定」から行います。ただし、ここで設定できるのはブロック全体の文字色、もしくは背景色なので、ブロック内の一部の文字色を変更したり背景色をつけるためにはHTMLのソースコードを書くか、専用のプラグインを利用する必要があります。

色を設定したい段落にカーソルが来ている状態で、編集画面右側の「ブロック」をクリックし、表示された「色設定」をクリックします。

「背景色」「文字色」という見出しの下に複数の色が表示されました。この中から任意の色を選択しクリックすると、背景色、もしくは文字色が設定されます。なお、虹色をクリックするとカラーチャートが表示され、規定の色以外にも好みの色を設定することができます。もし、設定する色を間違えてしまった場合は「クリア」をクリックすると、元の状態に戻ります。その後、設定したい色を再度クリックしてください。

ここでは背景色をピンク色に設定しました。段落ブロック全体の背景がピンク色に強調されます。ただし、段落ごとに背景色を変更したり、白い背景に明るい文字色を設定したりすると、見づらくわかりにくいホームページになってしまいます。ホームページの訪問者の目線で、わかりやすい配色にすることを心がけましょう。

まとめ

WordPress(ワードプレス)では、HTMLやCSSの難しいソースコードを使わずに、投稿の編集画面からワープロソフトのように文字の書式設定を行えます。編集画面には、機能をイメージしやすいボタンが表示されているので、直感的に操作が可能です。WordPress(ワードプレス)の文字装飾機能を使い、投稿を読みやすくしましょう!

株式会社コミュニティコムが運営するWordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 ご購入から30日間の無料サポート付きWordPressテーマを販売しています。もちろん新エディター「Gutenberg(グーテンベルク)」対応です。
>> コミュニティコムショップのWordPressテーマ一覧

また、テーマをご購入いただいたお客様に向けて、テーマに関する単発または継続的なサポートプランもご用意しております。
>> コミュニティコムショップのサポートサービス一覧