WordPressの基本操作ガイド② – 記事の投稿＜基本編＞
WordPressで作られた新しいホームページやLPが完成し、制作会社から納品されたものの、WordPressの具体的な操作方法が分からずお困りではないでしょうか？
サイトの納品後、コンテンツの追加や更新は基本的にはお客様側で行っていただくことになります。しかし、初めてWordPressに触れる方にとっては、どこから手をつければよいのか・・・と戸惑うことも多いでしょう。
そこで、全3回に分けて、WordPressの基本操作ガイドとして、基本操作や記事の投稿方法を「サイトを納品されたばかりのお客様（担当者）」向けに解説していきます。
本記事では、第2回目として、WordPressで記事を投稿する方法<基本編>について解説します。難しい専門用語は極力避け、初めての方でも安心して操作できるようにわかりやすく説明しますので、ぜひ参考にしてください。
WordPressの記事作成画面について
早速、記事を書いていきましょう。左メニューの「投稿」→「投稿を追加」をクリックし、記事の作成画面に移ります。
記事のタイトルを入力した後、本文を書いていきます。WordPressには「ブロック」という概念があり、そのブロックを色々と組み合わせて、記事を作っていくという仕組みになっています。
そのブロックには色々な種類があるのですが、どんなものか見ていきましょう。
まずは、「ブロックを選択するには、「/」を入力」と表示されている右側にあるプラスボタンを押し「すべてを表示」を選択しましょう。すると、左側にブロックの一覧が表示されます。
ブロックは非常に種類が多いのですが、お知らせ、メディア、ブログなどの記事を書いていく上では、テキスト周りの装飾が中心になりますので、実際に使うブロックはかなり限られます。全てのブロックをおさえる必要はないので、ご安心ください。
今回は、記事を作成する時によく使うブロックについて詳しく解説していきます。
記事作成で主に使用するブロック
WordPressで記事を書く際に使用する主なブロックは以下の5つです。
- 段落
- 見出し
- リスト
- 画像
- ボタン
- その他
それでは、それぞれのブロックについて詳しく見ていきましょう。
①：段落
文章やテキストを入力する場合は、段落ブロックを使います。
記事を作成するのに文章は必ず必要なため、デフォルトの設定が段落のブロックになっています。今回は解説のために段落ブロックを紹介しましたが、実際に記事を作成する際は、そのままテキストを打っていけば文章を入力することができます。
なお、このブロックはどんどん縦に積み重ねることができ、エンターキーを押すと下に移動し「次は何のブロックを選択するか？」をまた選択できるようになります。
テキストを続けて入力する場合は、段落のまとまりごとにエンターキーでブロックを積み重ねると良いでしょう。
簡単にサンプルで文章を入力してみました。この文章にカーソルを当てると横長のメニューバーが表示されます。ここでテキスト周りの装飾を行います。
1. テキストの配置
テキストの配置を変更することができます。現在は左寄せですが、中央揃いや右揃えにすることが可能です。
2. 太字・イタリック体
太字・イタリック体にしたい箇所を指定してクリックすると、太字にしたりイタリック体にすることができます。
3. リンク
リンクをつけたい箇所を指定し、遷移させたいURLを入力します。
リンクの遷移先がそのサイトの中であればURLを入力するだけで問題ないのですが、外部のサイトにリンク遷移させたい場合は、編集のアイコンを押し、「新しいタブで開く」をクリックしておきましょう。そうすると、リンク先が別タブで開くため、ユーザーがこのリンクを辿って、また自分のサイトに戻ってきやすくなります。つまり離脱されにくくなるということになります。
4. 色・背景色
文字の色を変えられます。色をつけたい箇所を指定し、クリック後「テキスト色」から色を選択できます。詳細なカラーコードを入力して選択することもできますが、カラーパレット左上の「メインカラー」を選択すると、そのサイトのメインカラーと同じ色が使えるため、サイトと統一した色合いで文字色を変更できます。背景色も同様で、色をつけたい箇所を選択し「背景色」から色を選択できます。
5. アイコン
簡単なアイコンを差し込むこともできます。アイコンの種類は豊富に用意されています。
6. 文字サイズ
文字のサイズを変更したい箇所を指定します。XS・S・L・XLという4段階で大まかに変更することもできますし、具体的な数値を入力して調整することも可能です。基本的に、Webサイトの文字は16px（ピクセル）が基本になりますので、16pxより大きくしたい場合は、例えば18pxなどに設定すると、少し大きくなります。
7. マーカー
マーカーを引くこともできます。サイトで使用されているカラーと同じ色を選択できます。
アレンジ・カスタマイズ
次に、右側に表示されるものについて解説します。
様々な文字の装飾は、横長のメニューバーで操作を行いましたが、画面右側に表示されるのは、現在選択しているブロックでできるカスタマイズやアレンジが表示されます。現在は段落のブロックが選択されているので、段落のブロックでどういったカスタマイズができるのかがここに表示されるということになります。
例えば、段落全体に対して、ボーダーを入れたり、ちょっとした装飾を入れることができます。種類は豊富に用意されており、選択するだけで簡単に段落全体をアレンジすることができます。
現在は段落のモードで選択していますが、別のモードを選択すると、ここの内容は変わってきます。
②：見出し
見出しのブロックを選択すると、予めデザインされた見出しが表示されます。横長のバーには「レベル」という項目があり、h1からh6まで設定できます。hはヘディング、すなわち見出しという意味で、h1が最も大きい見出し、h6に向かうにつれて小見出しになっていきます。
WordPressでは、記事のタイトルがh1になっているため、記事の中で見出しを作る場合は、基本的にはh2から選択していきます（見出しのデフォルトもh2です）。大きい見出しから順番に使っていく必要がありますので、いきなりh3などは使わずにh2の下にh3、h3の下にh4があるとお考えください。
アレンジ・カスタマイズ
段落のブロックと同様、見出しのブロックで使えるカスタマイズ・アレンジが、右側に表示されます。ただし、見出しの場合はそれほど多くのアレンジはなく、デフォルトのデザインにするか、ホームページでよく使われるセクション用のデザインにするかという2択が選べます。また、色や背景なども変更できます。
このように、右側のアレンジやカスタマイズは、選択するブロックによって表示される内容が異なるのが分かりますね。
③：リスト
何かをリスト形式で示したい時に使用します。リストの丸ぽちが先頭に表示されるので、エンターキーを押してリストにしたい項目を入力していきます。
アレンジ・カスタマイズ
リストのアレンジについて、この丸ぽち以外にも、様々なアレンジが用意されています。チェックマーク・丸・バツ・番号・罫線を入れたりなど、スタイルを変更することができます。
④：画像
次に画像のブロックです。なお、ここで解説するのは、記事の文中（例えば文章と文章の間）に挿入する画像のことです。記事のサムネイル画像（アイキャッチ画像）については、次の記事で解説していますので、こちらもご覧ください。
画像のブロックを選択すると、選択肢が表示されます。メディアライブラリーから選択する場合は「選択」を、ファイルをアップロードする場合は「ファイルを選択」して、ご自身のパソコンからアップロードすることもできます。
アレンジ・カスタマイズ
画像ブロックの場合、画像を角丸にしたり、影を付けたりというようなスタイル変更のカスタマイズや、画像の縦横比を指定できます。
画像のサイズを変更するには、具体的なpx数でも指定できますし、画像にカーソルを直接当て伸縮させて変更することもできます。
⑤：ボタン
ボタンを作りたい場合は、SWELLボタンというブロックを選択しましょう。
ちなみに、もう1つ「ボタン」というブロックもあるのですが、SWELLボタンを使用することをお勧めします。ボタンを作るという目的においては、2つとも同じですが、WordPressで使用しているテーマがSWELLというテーマであれば、SWELLボタンの方がカスタマイズ性が高いからです。
ブロックを選択するとボタンの原型が表示されるので、ボタンの文言・リンク先を設定します。テキストのリンクと同様、サイト内へのリンクならURLを入力するだけで問題ありませんが、外部サイトにリンク遷移させる場合は、「新しいタブで開く」にチェックしておきましょう。
アレンジ・カスタマイズ
ボタンのデザイン・サイズ・カラー、文字のサイズの設定が可能です。
また、アイコンも設定することができ、「アイコン選択」から好きなアイコンを選択し、アイコンを左右どちらに配置するか、アイコンのサイズをどのくらいにするかまで、簡単に設定することができます。
⑥：その他の操作
ブロックの順番入れ替え
ブロックの順番を入れ替えたい場合は、入れ替えたいブロックを選択すると、上下のボタンが表示されます。これをクリックすると、ブロックごと上下に移動されます。
削除
ブロックを削除したい場合は、右側の3点リーダーから「削除」を選択すると、ブロックが削除されます。
階層を見る
左上の横棒が3本並んでいるマークを押すと、記事全体でのブロックの並び順や階層を確認することができます。何のブロックが使われているのかをパッと一目で確認することもできますし、任意のブロックを選択すれば、該当箇所のブロックのアレンジにすぐに切り替わります。
人によって好みはあると思いますが、使いやすいなと思ったら使ってみてください。
プレビュー確認
記事が完成したら、下書き保存をする場合は、右上の「下書き保存」ボタンを、プレビューで確認したい場合は、どの媒体での見え方なのか（デスクトップorタブレットorモバイル）を選択して、「新しいタブでプレビュー」を押すと、実際にどのようにサイトに反映されるのかを確認することができます。
サイトによっては、目次が表示されることがあるかと思いますが、WordPress側の設定により自動的に目次が表示されるようになっています。
内容に問題がなければ、右上の「公開」ボタンを押します。これで投稿が公開されます。お疲れさまでした！きちんと表示が反映されているか確認するために、実際のページも確認しておきましょう。
保守管理の依頼
記事の投稿方法について解説してきましたが、とはいえ、本業の仕事がある中で、慣れないツールをさわって投稿をしていくのは、意外とストレスだったりもします。
一言で記事投稿といっても、なかなかうまくいかずに時間がかかったり、サイトの表示が崩れてしまうリスクがあったり、画像の設定（代替テキスト・リサイズ・容量の圧縮）など、注意しなければいけない点も意外と多くあります。
そのような時は、制作会社が提供する保守運用プランに入るのもお勧めです。
制作会社によって異なりますが、保守・運用として、投稿作業やコンテンツの更新はもちろん、セキュリティ対策・バックアップなど、サイトを安全に保つための様々なサービスが含まれています。また、SEO対策やアクセス解析など、サイトの成果を高めるためのサポートも受けられるプランも多いです。
専門家に任せることで、ミスなく効率的にサイト運営ができるだけでなく、本来の業務に集中できるというメリットもあります。
保守運用プランのメリット
- サイトの維持・管理（コンテンツ更新、システムアップデート、セキュリティ対策、バックアップ）
- 集客などを狙った成果向上の運用（SEO対策、アクセス解析レポート）
- 専門家に任せられる（ミスの回避、効率性、本業への集中）
Co-Creationでは、「お客様の事業のいちWEB担当者になる」というコンセプトで、保守・運用プランをご用意しています。
コンテンツの追加・修正・更新はもちろん、データのバックアップ、内部SEO対策、表示高速化対応、システムの定期的なアップデート、サイトのアクセス解析とレポートによるミーティングの実施、改善案のご提案など、サイトを育てていくためのプランをご用意しております。
まとめ
今回は、WordPressの記事の投稿＜基本編＞について解説しました。
初めは複雑に感じるかもしれませんが、記事を書いていくうちに、よく使うテキスト周りのブロックは決まってくるので、徐々に理解が進んでいくかと思います。また、今回ご紹介したもの以外にも様々なブロックやカスタマイズ・アレンジがあるので、気になる方はぜひ触ってみてください。
サイトを最大限に活用するためには、定期的な更新やその後の運用が重要です。この記事を参考に、ぜひ積極的にコンテンツの追加・更新を行ってみてください。
操作方法について不明な点があれば、いつでもご相談ください。Web制作のプロフェッショナルとして、お客様のサイト運営をサポートいたします。