見出し画像

WordPress投稿の仕方(ブロックエディタ)

はい、どうも皆さんこんにちは。
SEOライティング講師の山城俊国です。

今回は「WordPressの基本操作」についての動画講座を作ってみました。
「ブロックエディタ」を使って、記事を投稿するまでの流れを解説致します。

私は手っ取り早く始めるWordPress講座をやっているのですが、そのフォローアップ的な内容ですね。

「わかりやすい復習用の資料がほしいです」という皆様からの熱いご要望にお答えするために今回執筆致しました。

もちろん、私の講座をご受講していない方にもわかりやすく解説しておりますので、
・記事をどうやって投稿すればいいかわからない
・調べて色々やるのがめんどくさい
・最低限投稿に必要な機能だけ教えて!
という方はぜひご覧ください。

具体的に取り扱っていく内容は、下記の目次に書いてあります。

動画を分割してありますので、よくわからない部分を選んで見ていただければ幸いです。


文字の入力と装飾(Cocoon)の仕方

ダッシュボードの画面から「投稿新規追加」を選択することで記事の投稿ができるようになります。

投稿画面は、WordPressのテーマやプラグインによって少々変わってきます。
表示される機能は、そのテーマに「固有のもの」があったりするんですね。

ただし、今回ご説明する機能は、どのWordPressテーマにも共通するものです。

一見わかりづらくても、よく目を凝らして探していただければ見つかるはずですので、ぜひめげずにチャレンジしてみてください。


【投稿画面のツールバーを表示】

まずは投稿画面の「歯車」のマークを確認してみてください。
こちらをクリックすると、右側のバーがついたり消えたりします。

投稿画面の右側のバーにある「文書・ブロック」というタブの中身はよく使いますので、表示をしておくようにしてください。


【タイトル・本文を書く】

記事のタイトルは一番上の「タイトルを追加」という欄に記入します。

本文を入力するには、「文章を入力、または/でブロックを選択」と書いてある部分を一度クリックし、入力してください。

Enterキーを押すと、「新しいブロック」として次の文章が作成されるので、文章の間に間隔が入ってしまいます。

同一ブロック内で改行をしたいときは、Shift + Enterキーを押すと、文章の間隔を入れずに改行することができます。


【文字の装飾(Cocoonテーマ)】

文字の装飾は、WordPressのテーマに依存します。

今回は、Wordpress無料テーマのCocoonに付属している装飾のみについて解説しております。

また、文字装飾はテーマに依存するため、Cocoonからテーマを変えた場合、それまでの装飾が消えてしまうこともありますので、その点はご注意ください。


自分で装飾を追加したい場合は、HTML/CSSの編集が必要となります。

また、今回解説しているブロックエディタではなく、旧エディタの「クラシックエディタ」を導入して使用することになります。

こちらの内容は、高度な内容となっているため、WordPressの基本操作ができる人のみに解説しております。

ご自分である程度装飾を追加してみたいという方は、私の講座にて個別に解説を致しますので、そちらからお問い合わせいただければと思います。


HTMLの概念と見出し(h2タグ)

さて、WordPressについてよく知ってもらうために、HTMLの概念について軽くお伝えしておこうかなと思います。

今回はブロックエディターという入力方法で記事を投稿していますね。
ところで、「ブロック」というのはなんでしょうか?

ブロックというのは、「情報のかたまり」のことです。
皆様はこれまで、ブロックの中身に情報を書いてきたのです。


では、なぜブロックなんていうめんどくさいものが必要になるのでしょうか?
Wordみたいに、ただ文章を打って、それを表示させればいいじゃん、と思いますよね。

それができない理由は、ほぼすべてのWebページがHTMLという「プログラミング言語」で表示されているからなんです。
HTMLとはハイパーテキストマークアップランゲージの略ですね。

このHTMLというものが、「マークアップランゲージ」であることがキーになります。

HTMLでは、何かの情報を書くときに、「こっからここまではこの情報を書きますよ」という記号(HTMLタグ)をマークするという仕様になっています。

だから、「マークアップ」ランゲージというんですね。


皆様が何気なく文章を入力したときも、ブロック一つ一つに対してマークがされています。

ブロックエディタで何も操作せずに文章を書いたときには、実は「こっからここまでは文章が入りますよ」というマーク(pタグ)が入ってるんですね。


GoogleはHTMLタグというマークを読み取ることで、素早く正確に文書構造を読み取ります。

WordPressの「ブロックを選択する」というのは、「こっからここまでは○○の情報が入るよ」というマーク(HTMLタグ)を選択しているということなんですね。

そのため、何か情報書く前に「これから何の情報を挿入するのか」をマークするためにブロックを選択してあげる動作を忘れないようにしてください。


【見出し(hタグ)の挿入】

見出しは「hタグ」と言われていて、SEO上最も一番重要なタグです。
ここに検索キーワードを入れたりして、SEO対策を行います。

hタグを挿入するには、「ブロックの追加」(プラスマークのボタン)を押してください。

見出しは、「一般ブロック」の中にあります。
一般ブロックが通常のHTML文章を構成するための基本的な機能ですね。

ちなみに、hタグのhというのはHeadingの略で見出しを意味します。

hタグには「h2」「h3」「h4」というレベルが存在します。
「h2」「h3」「h4」の数字は階層構造を意味します。

h2というのは、小説で言うところの1章に相当します。
h3は1章1節です。

そして、h1は本の表紙に相当するものであり、WordPressでは、記事のタイトルがh1に割り当てられています。


HTMLというのは、プログラミング言語の中で最も「論理的な記述に長けている」のが特色です。

そのため、HTMLでは「階層構造」というものを意識しながら書いてください。

文章の論理構造を記述するのが、HTMLの正しい書き方ですので、あらかじめ記事の構成案を作ってから論理的な記事を書いてあげると、SEOの効果が高くなります。


箇条書き(listタグ)の書き方

箇条書きは「リスト」というブロックを使って挿入してください。
中黒(・)を使って箇条書きをするのは、SEO的には正しくないやり方です。

正しい箇条書きのやり方というものを今からお伝えします。

まずは、「ブロックの追加」をしていただき、その中から「一般ブロック」の欄を見てください。
一般ブロックの中に「リスト」というブロックがあるので、そちらを選択します。

リストというのは何かというと、要するに箇条書きのことです。
listタグというタグがHTMLにあるんですね。

listタグを使うと、SEO的に良いという効果もありますが、「箇条書きを途中で改行しても読みやすくなる」というメリットがあります。

リストのブロックの中でShift + Enterキーを押してください。
すると、文頭の位置が字下げされている見やすい箇条書きになります。


ブロックの変換

ブロックは後から種類を変更することもできます。

例えば、文章(段落)として入力したブロックを、リストのブロックや、見出しのブロックに変換することができます。

そのため、WordやGoogle Document、テキストエディタなどで最初に原稿を作っておき、まとめてブロックエディタに貼り付けて編集するといった作業が可能です。

ただし、注意点がありまして、変換できるブロックというものは限りがあります。
「元のブロックの種類」で、何のブロックに変換できるかが制限されてしまうのです。

例えば、段落のブロックを見出しのブロックに変換することはできます。
ところがリストのブロックを変換しようとすると、見出しにはできません。

何のブロックが何のブロックに変えられるかというのは、一つ一つ試してみる必要がありますが、変えられなかったら新しいブロックを追加してもらうのがよいかもしれません。


画像の挿入

画像を挿入するやり方ついてお伝えします。

まずブロックを追加し、「一般ブロック」の中から「画像」を選択してください。
すると、画像が挿入されます。

挿入された画像を確認してみると、「キャプションの入力」という部分があります。
そこに画像の説明文のようなものを入れることもできます。

また、画像のサイズの調整もできます。

画像をクリックすえると、四方の真ん中に青い丸い点が確認できますね。
その丸い点の部分をドラッグすると、写真のサイズを小さくしたり大きくしたりの調整ができます。

尚、写真を真ん中寄せしたいなと思ったら、左上二番目の箇所に「配置変更」というボタンがありますので、そのボタンをクリックしていただいて中央揃えを指定してください。

すると、真ん中寄せになります。

画像の寄せを配置を変更するときの注意点ですが、「左寄せ」を選択すると、下の段落ブロックが右側の余白部分に、回り込んでしまうという仕様があるみたいですね。

その場合は、もう一度中央寄せに配置を変更してください。

左寄せで右側に文章が入ってほしくないという場合は、画像を挿入したあと配置変更は行わず、画像のサイズのみを調整するようにしましょう。


リンクの挿入

リンクの貼り付けについて解説致します。
リンクは、入力した文字列や画像などに対して、設定をします。

リンクを貼ってあげたい文章をドラッグした状態で、ブロックのツールバー右上部にあるリンクのマークをクリックしてください。

するとURLが入力できる画面が出ます。
入力欄にURLを記入したら、「↵マーク」の送信というところをクリックすると、リンクの設定ができます。

また、入力欄下部に「新しいタブで開く」というボタンがありますので、こちらをオンにしておくと、クリックしたときに新しいタブで開かれるようになります。

このリンク設定は、画像にもいれることができます。
画像ブロックのメニュー右側にありますので、同様に設定してみてください。


アイキャッチ画像の設定

アイキャッチ画像というのは、要するにその記事の顔になるような画像です。
WordPressの記事一覧の中で表示される画像のことですね。

アイキャッチ画像は投稿画面右側にあるツールバーの「文書」タブの中から設定してください。

アイキャッチ画像の挿入に関して、特に細かい設定は必要ありません。

アイキャッチ画像が、投稿記事でどのように表示されるかは、実のことを言うとテーマによって異なります。

Cocoonテーマを使った場合、アイキャッチ画像で設定した画像が、その記事の一番上の部分に表示される仕様になっています。


カテゴリとタグ、パーマリンク設定

【カテゴリの設定】

カテゴリーの設定について説明いたします。

投稿画面右側のツールバーの「文書」タブの中に、「カテゴリー」という項目がありますので、こちらに記事のカテゴリーを設定してください。

「新規カテゴリーを追加」という部分から、新しいカテゴリを追加することができます。

ここで注意点なのですが、カテゴリーは1つの記事につき1カテゴリーのみです。
1つの記事につき複数のカテゴリーを設定するのは好ましくありません。

1記事1カテゴリーというのは、いわば「暗黙のルール」です。

本来、カテゴリーというものは「フォルダの階層構造」みたいなものです。
例えば、「2020年」>「請求書」「発注書」「見積書」みたいなフォルダがあるとします。

その場合、「全く同じファイル」が複数のフォルダに入っていたら、おかしなことになりますよね。

フォルダ分けした意味ないじゃん。整理できてないじゃんってなるわけです。
それと全く同じイメージを持ってください。

なお、カテゴリーというものはパソコンのフォルダと同様に階層構造を持つことができます。
要するに、フォルダの中にフォルダを作るのと同じように、カテゴリーの中にカテゴリーを作ることができます。

カテゴリーは増やしすぎると整理できなくなり、サイトのユーザビリティを損なうので、階層構造を持たせることで、記事を適切に配置してあげるように設計しましょう。


【タグの設定】

記事にはカテゴリーとは別に「タグ」というものを設定することができます。

カテゴリーは1つの記事につき1個だけなのですが、タグは何個も入れることができます。
タグはtwitterとか、Instagramのハッシュタグのイメージです。

一つの記事につき、何個でもタグを追加することができます。
カテゴリーと異なり、タグには階層構造という概念がなく、特に整理する必要はありません。

記事に表示されるマークを見てみると、カテゴリーはフォルダーのようなマークです。
それに対し、タグはペンのマークですね。

タグもカテゴリーもパーマリンク(URL)を設定することができます。
カテゴリーはURLも階層構造にしたがって割り当てられますが、タグの場合は階層構造を持ちません。

ひとまずここでは、「たくさん設定できるのがタグ」と覚えておいてください。


【パーマリンクの設定】

最後にパーマリンクの設定をお伝えします。

パーマリンクというのは、その記事のURL末尾に相当する文字列のことです。
記事の内容がわかるような文字列を設定してください。

なお、パーマリンクでは、アルファベットで入力するようにしましょう。
日本語で打つと文字化けしてしまうので、URLの正規化というのですがパーマリンクは半角英数字を使いましょう。

また、パーマリンクではスペースを使わないようにしましょう。
アンダーバー( _ )も好ましくなく、代わりにハイフン( - )を入れるのが慣習となっています。


まとめ

以上、WordPressの基本操作についてお伝えしました。

これまでの内容をマスターしてもらえれば、基本的にWordPressで記事を投稿するということについては、ほぼ問題なく行えると思います。

まずは、今回説明した機能をしっかりと覚えてもらって、難なく使えるように挑戦してみてください。


ところで、今回は「ブロックエディタ」というWordPressの初心者向けの内容でした。

自分なりに装飾を付け足してみたいといった場合には、プラグインを導入し、「クラシックエディタ」という投稿画面を使ってHTML/CSSを記入できるようにする必要があります。

こういった装飾に関するものは、簡易的なものであれば実装方法や、すぐに使えるテンプレートも私の講座にてお伝えしています。

また、WordPressに関する質問だけではなく、サイトの設計やブログの運用方法についても質問いただければ詳しくお伝えできますので、ぜひご検討くださいませ。

ここから先は

0字
<有料マガジンの内容> ・毎月1回のマンツーマン授業 ・2~3ヶ月に1回のグループ授業 ・毎月1~4本の教材(note記事) <マンツーマン授業の内容(例)> ・ブログのコンセプトづくり ・執筆計画づくり ・ブログで直すべきところ(サイト設計) ・ブログ記事の添削指導 ・売れる商品づくり ・商品ページの書き方 ・アクセス解析のやり方 ・サイト分析 ・Webマーケティング施策の提案 ・キーワード選定、コンテンツプランニング

本有料マガジンは毎月1回のマンツーマン授業(無料)を含みます。このスクールの目的は「稼げるコンテンツ力を育てること」です。ご購入後、LIN…

この記事が気に入ったらサポートをしてみませんか?