WordPress投稿画面で記事を書く グーテンベルクエディタの4つの基本ブロック

こんにちは!

WordPressの初期設定とプラグインの導入が終わり、画面デザインも決まりました。これかいら、いよいよブログ記事を書く本番です!

今回は、ブログ記事を作成するための場所、WordPressの「投稿画面」について解説していきます。

特に、近年主流となっている「Gutenberg(グーテンベルク)エディタ」の使い方を、今まで使用したことがない初心者の方が迷わないように、画像つきで説明します。

 

ブログを執筆中の姿

 

【40SEの論理構造設計論】
記事のブロック構造は、プログラムの設計書と同じ。見出し(h2, h3)で階層を明確にし、読者にも検索エンジンにも論理的に正しく伝達せよ。

Gutenbergエディタって何?

以前のWordPressには、Wordのような見た目の「クラシックエディタ」というものがありました。しかし、現在は「Gutenbergエディタ」と呼ばれる、ブロックを積み重ねて記事を作成する新しい方式が主流です。

【クラシックエディタ】
1枚の白い紙に文章を書くイメージ
【Gutenbergエディタ】
レゴブロックのように、パーツを組み合わせて家を作るイメージ

Gutenbergエディタは、文章、画像、見出し、リストなど、すべての要素が独立した「ブロック」になっています。このブロックを自由に追加、編集、移動することで、記事を作成していきます。

最初は少し戸惑うかもしれませんが、慣れてしまえば直感的に操作でき、記事の表現力が格段にアップします。

 

クラシックエディタとブロックエディタの比較イメージ

新しい記事を作成しよう

まずは、新しい記事を投稿する画面を開きます。

WordPressの管理画面(ダッシュボード)にログインし、左側のメニューから「投稿」→「新規追加」をクリックします。

 

 

新しい投稿画面が表示されたら、いよいよ記事の作成を始めます。

 

 

この画面が、これからあなたがブログ記事を書いていく場所です。


最もよく使う基本ブロックの使い方

Gutenbergエディタには、たくさんの種類のブロックがありますが、最初は以下の4つをマスターすれば十分です。

・見出しブロック
・段落ブロック
・画像ブロック
・リストブロック

それぞれ使い方を詳しく見ていきましょう。

見出しブロックの使い方

見出しは、記事の骨組みとなる非常に重要な要素です。見出しを使うことで、読者は記事全体の内容を把握しやすくなります。

見出しは必ず「見出しブロック」を使って作成しましょう。

【使い方】
1.「+」ボタンをクリックして、「見出し」ブロックを選択します。

2.見出しのレベル(h2、h3など)を選択します。記事の大見出しは必ず「h2」から始めましょう。
3.見出しのタイトルを入力します。

 

エディタで見出し選択

段落ブロックの使い方

段落は、ブログ記事の本文を書くためのブロックです。

Gutenbergエディタでは、文章を書き始めると自動的に段落ブロックが作成されます。

 

エディタで段落ブロック選択

文章を書き始めるだけでブロックが自動生成されるので、とても簡単です。同じブロック内で改行したい場合は、「shift」+「Enter」キーを押せば改行することができます。

【使い方】
1.投稿画面の本文部分に直接文章を書き始めます。

2.Enterキーを押すと、自動的に新しい段落ブロックが作成されます。

画像ブロックの使い方

ブログ記事に画像を挿入することで、記事の見た目が華やかになり、読者の理解を助けます。

 

エディタで画像ブロック選択
【使い方】
1.「+」ボタンをクリックして、「画像」ブロックを選択します。

2.「アップロード」「メディアライブラリ」「URLから挿入」の3つの方法で画像を挿入できます。
 アップロード:あなたのパソコンから画像を直接アップロードします。
 メディアライブラリ:過去にアップロードした画像の中から選択します。
 URLから挿入:他のサイトにアップロードされている画像のURLを入力します。
3.画像を挿入したら、右側のメニューで画像のサイズや代替テキスト(altテキスト)を設定できます。

 

エディタで画像を挿入

 

代替テキストは、画像が表示されない場合に代わりに表示されるテキストです。SEOにも影響するため、必ず入力しましょう。

【代替テキストの具体的な書き方】
代替テキストは、ただキーワードを羅列するのではなく、画像の内容を具体的に、かつ簡潔に説明することが重要です。

・悪い例
 alt=”ラーメン” (情報が少なすぎる)

 alt=”美味しい味噌ラーメン新宿のお店ラーメン写真” (キーワードの羅列)

・良い例
 alt=”新宿の老舗ラーメン店「一麺亭」の濃厚味噌ラーメン”

 alt=”テーブルに置かれた湯気の立つ温かい味噌ラーメン”

・ポイント
 画像が何を示しているかを具体的に書く。

 キーワードを不自然に詰め込まない。
 文の最後に「写真」や「画像」といった言葉は不要です。

代替テキストや画像のサイズを適切に入力することで、ブログにとって不利になることはありません。むしろ、正しく設定しない場合にデメリットが生じます。

リストブロックの使い方

箇条書きや番号付きリストは、情報を整理して分かりやすく伝えるのに役立ちます。

【使い方】
1.「+」ボタンをクリックして、「リスト」ブロックを選択します。

2.*や1.など、リストの記号を入力すると、自動的にリストブロックが作成されます。
3.リストの行を追加したいときは、Enterキーを押すだけで自動的に新しい行が追加されます。

エディタでリストブロックを選択

記事を完成させるための便利機能

基本ブロックの使い方をマスターしたら、さらに記事の完成度を高めるための便利機能を見ていきましょう。

ブロックの追加方法

新しいブロックを追加したいときは、以下の3つの方法があります。

・「+」ボタンをクリック
 
左上にある青い「+」ボタン、または、ブロックとブロックの間にある「+」ボタンをクリックします。
・スラッシュ(/)を入力
 
文章を書きたい場所で/(半角)を入力すると、ブロック名が一覧で表示されます。ブロック名を数文字入力すると候補が絞り込まれます。
・ブロックライブラリ
 WordPressのバージョンが新しい場合、ブロックライブラリからブロックを追加できます。

ブロックの移動方法

記事を書いていて、「このブロックを別の場所に移動させたいな」と思うことがありますよね。

ブロックを選択すると、上に表示されるメニューから、上下の矢印を使って移動させたり、ドラッグ&ドロップで好きな場所に移動させたりできます。

 

ブロック上下のボタン

右側メニューの活用

投稿画面の右側は、記事の公開設定とSEOに関する重要項目が集約された「コントロールパネル」です。特に「ドキュメントタブ」にあるパーマリンク、カテゴリー、アイキャッチ画像は、記事の価値を最大化するための最終チェック項目です。

このメニューを活用することで、記事の公開設定や、ブロックの詳細な設定ができます。

 

投稿画面の右側

 

・ドキュメントタブ
 
記事の公開設定、パーマリンク、アイキャッチ画像、カテゴリーなどを設定できます。
・ブロックタブ
 
選択したブロックの色や寸法などを調整できます。

この設定で、文章の見た目を変化させることができます。しかし、何も参考にせず独学でブログを作っていると、この設定に気が付かず、だいぶ経ってから「こんな設定あったの!」と気が付く人も。
早めにいろいろ試してみましょう。

 


いよいよ記事を公開しよう

記事が書き終わったら、公開してみましょう。

記事を公開する前に、「プレビュー」ボタンをクリックして、読者からどのように見えるかを確認しましょう。

 

記事のプレビューボタン

 

プレビューで問題がなければ、右上の「公開」ボタンをクリックします。公開する日時を設定したい場合は、「公開」ボタンの横にある設定から変更できます。

 


Gutenbergエディタを使いこなしてブログを書こう!

今回は、Gutenbergエディタの基本的な使い方を解説しました。

・Gutenbergエディタは、ブロックを組み合わせて記事を作成する
・見出し、段落、画像、リストなど、基本ブロックの使い方をマスターしよう
・右側のメニューを活用して、記事の公開設定や詳細なデザインを調整しよう

最初は少し難しく感じるかもしれませんが、実際に手を動かしてブロックを触ってみるのが一番の近道です。

 


Next Step:「ブログの安全を守る」に迫ります!

ブログが育ってくると、「セキュリティ対策」の重要性が増してきます。

次回は、大切なブログをハッキングやトラブルから守るための、WordPressのセキュリティ対策の基本「ブログの安全を守る!WordPressセキュリティ対策と2段階認証」を徹底的に解説します。

関連記事

こんにちは!WordPressのインストールや初期設定も終わり、ブログ運営の準備が整いつつあります。しかし、忘れてはならないのが「セキュリティ対策」です。WordPressは世界中で最も使われているCMS[…]

お楽しみに!

 

【次の一歩へ】ブログ成功のための必読ロードマップ

この記事で習得したスキルを無駄にしないために、ノウハウをまとめました。

>> ノウハウの一覧はこちら

 

筆者の決めポーズ

 

アイキャッチ16
最新情報をチェックしよう!