ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス 初めての記事投稿(クラシックエディター使用)

ワードプレスで初めてブログ記事を投稿する方法について、解説していきます。

2020年11月現在(WordPressバージョン 5.5)、デフォルトのエディターはブロックエディターですが、初心者の方にとってはとっつきにくいので、ここではクラシックエディターを使っていきます。

 

この記事を読めば、次のようにワードプレスで記事を作成する上で基本的な事項を学ぶことができます。

・クラシックエディターでの記事の作成方法(文章入力と画像の挿入)
・クラシックエディターの機能強化プラグインAdvanced editor Tools(旧TinyMCE Advanced)のインストール・有効化と使用方法
・SEOに強い記事構成の作り方(見出しと段落で階層化する)
・ビジュアルエディターとテキストエディターの違い
・記事に合わせてパーマリンクを編集する方法
・カテゴリーの設定方法
・アイキャッチ画像の設定方法
・テーマによってアイキャッチ画像や記事一覧表示が異なることの理解
・記事の公開方法と公開オプション
・編集画面での表示オプションとコメント欄の表示・非表示

このように単にクラシックエディターの使い方だけでなく、ワードプレスの記事作成上大切な項目も学ぶことができます。じっくり読んでくださいね。

 

またブロックエディターについて知りたい、という場合は、こちらを参考にしてください。

 

 

前提条件(準備)

実際の記事投稿の解説に入る前に、前提条件を設定しておきます。

 

テーマはここでは、Twenty Seventeenを使用します。

参考記事:

 

・プラグイン クラシックエディターがインストール・有効化され、使用できるようになっていること

参考記事:

 

以下にも簡単にプラグインのインストール・有効化と、設定について記載しておきます。

クラシックエディターのインストール

投稿設定の確認

 

 

まずは投稿の編集画面を見てみる

クラシックエディターの構成

ダッシュボードメニューから、投稿>新規追加 をクリックして、投稿編集画面を開けます。

クラシックエディターの画面

上記のように、編集画面は、大きく3つに分かれます。

 

記事タイトル入力部

記事のタイトルの入力パーマリンク(作成中記事のURL)の編集を行います。

 

記事本文入力部とその上の編集ツールバー

記事本文を入力します。

 

右側に縦長に表示されている、関連情報部

記事の下書き保存プレビュー、記事の公開などの記事の管理のほか、カテゴリーアイキャッチ画像なども設定できます。

このなかにフォーマットという欄もありますが、設定は標準のままでよいでしょう。

 

ビジュアルエディターとテキストエディター

記事本文入力部について、もう少し詳細を見てみましょう。

右上側に、『ビジュアル』『テキスト』と表示されたタブがあります。

 

通常は、”ビジュアル”タブが選択されており、この状態で使います(ビジュアルエディターと呼んでいます)。

『テキスト』を選択すると、テキストエディターに変わります。テキストエディターではHTML言語を使って記事を入力していくことができますが、専門言語を勉強する必要があるので、少なくとも初心者が使うことはありません。ただし、後述するように、時々、簡単な確認や操作で使うこともありますので、こういうものがある、ということは覚えておきましょう。

記事編集ツールバー

記事本文編集ツールバー

上記画像のように、記事本文入力部の真上には、編集ツールバーがあります。ツールバーの一番右をクリックすると、全てのツールが表示されるようになります。

しかし、このままでは若干編集作業には物足りないので、プラグインAdvanced Editor Tools(旧TinyMCE Advanced)を使ってツール機能を強化します。

 

プラグインAdvanced Editor Tools(旧TinyMCE Advanced)のインストール・有効化

プラグインAdvanced Editor Toolsをインストール・有効化する手順

①ダッシュボードメニュー プラグイン>新規追加 の画面で、画面右上の検索ボックスに”Advanced Editor”と入力します。

Advanced Editorで検索

すると、プラグインAdvanced Editor Toolsがプラグイン一覧に表示されます。

プラグインAdvanced Editor Tools

 

②次のように”今すぐインストール”と”有効化”を順番にクリックしていけば、インストール済プラグインの中に追加されます。

Advanced Editor Toolsのインストール有効化

以上で、インストール・有効化は終了です。

 

プラグインAdvanced Editor Tools有効化後の編集ツールバー

それでは、クラシックエディターを開いて、編集ツールバーを確認してみましょう。

プラグインAdvanced Editor Toolsを有効化した後では、編集ツールバーが強化されているのがわかります。

Advanced Editor導入前後のツールバー

 

導入前後で機能を比較すると以下の通りとなります(青太字は追加された機能)

デフォルトの機能 TinyMCE Advanced導入後の機能
(上段左から)
・段落等要素切り替え
・太字
・イタリック
・番号なしリスト
・番号付きリスト
・引用
・左寄せ
・中央揃え
・右寄せ
・リンクの挿入/編集
・『続きを読む』タグを挿入(下段左から)
・打ち消し
・横ライン
・テキスト色
・テキストとしてペースト
・書式設定をクリア
・特殊文字
・インデントを減らす
・インデントを増やす
・取り消し
・やり直し
・キーボードショートカット
(上段左から)
ファイル>
印刷・編集>
取り消し/やり直し/切り取り/コピー/貼り付け/テキストとしてペースト/すべて選択/検索置換表示>
ソースコード/ビジュアルエイド/非表示文字を表示/ブロックを表示/フルスクリーン
・挿入>
リンクの挿入・編集/メディア/テーブル/特殊文字/横ライン/改行なしスペース/アンカー/日付・時間/メディアを追加/『続きを読む』タグを挿入/改ページ・フォーマット>
太字/イタリック/下線/打ち消し/上付き/下付き/ソースコード/ブロック/Align/書式設定をクリア/Reset table size/Remove table styling・ツール>
ソースコード
テーブル>
テーブル/表のプロパティ/表を削除/行/列/セル
(中段 左から)
・段落等要素切り替え
・太字
・イタリック
・引用
・番号なしリスト
・番号付きリスト
・左寄せ
・中央揃え
・右寄せ
・リンクの挿入/編集
・リンクの削除
・取り消し
・やり直し(下段 左から)
フォントファミリー
フォントサイズ
・インデントを減らす
・インデントを増やす
・テキストとしてペースト
・書式設定をクリア
・特殊文字
・『続きを読む』タグを挿入
・テキスト色
テーブル
・キーボードショートカット

 

Advanced Editor Toolsは、上記のほかにも更に機能を追加することができます。

プラグイン有効化後では、ダッシュボードメニューの設定の中に、Advanced Editor Toolsという項目が表示されるようになっていますのでクリックします。

メニューからAdvanced Editor Toolsを選ぶ

 

 

機能追加画面が開きますので、下記のように使用しないボタン”一覧から追加したい機能をドラッグ&ドロップでツールバーに追加します

Advanced Editor Toolsの機能追加方法

 

特に増やしておきたいのは、画像の挿入/編集機能と動画の挿入/編集機能です。

画像の挿入/編集機能では、デフォルト設定のままではできない、画像周りに余白や枠線をつけることができます。
動画の挿入/編集機能は、例えばYouTubeのURLを指定することで動画の埋め込みが可能です。画面サイズも調整できます。

Advanced Editor Toolsのおすすめ追加機能

 

Advanced Editor Tools(旧TinyMCE Advanced)はワードプレスのエディター強化の定番プラグインですので、知っておいて損はないでしょう。

 

 

パーマリンクの設定

投稿記事の内容を書いていく前に、パーマリンク設定をしておきましょう。

パーマリンクの設定については、こちらの記事の中の、設定>パーマリンク設定 でも紹介していますの参照ください。

 

パーマリンクは、作成した投稿記事ページのURLを表す大事なものですが、ワードプレスでは、何通りかのパーマリンク設定があります。ここでは、一番シンプルな、(ドメイン)/投稿タイトル という形式に設定してみます。

ドメインとは、ワードプレスをインストールしてあるURLです。独自ドメインを設定しなければ、レンタルサーバーの初期ドメイン(レンタルサーバーのIDと同じ場合が多い)を使うことになります。

 

では、パーマリンクの形式設定をしていきましょう。
ダッシュボードメニューの 設定>パーマリンク設定 で設定します。

パーマリンク設定

上記のように、投稿名というところを選択して変更を保存しておけば、記事のURLは自動的に

(ドメイン)/投稿タイトル

と設定されるのです。

 

 

投稿記事の作成

それではいよいよ、記事の作成をしていきます。

 

タイトルの入力とパーマリンクの入力

まずは、投稿記事編集画面のタイトル欄にタイトルを入力します。

タイトル『記事1』と入力してリターンを押すと、下記画像のようにタイトルの下にパーマリンクが表示されます。

 

設定した通り、(ドメイン)/投稿タイトル という形式になっているのですが、投稿タイトルの部分が、日本語表記になっていますね。URLは、日本語のままだと何かと不便なことが多いので、半角英数字表記に直しておきましょう。

なので、ここでは『記事1』を表す『post1』としておきます。数字も半角にします。

記事タイトル入力

上記の手順のように、編集をクリックすれば、編集できるようにボックスが開きますので、半角英数字に直してOKをクリックします。

 

このように、パーマリンクは、記事タイトルを反映する半角英数字に修正する、というように心がけましょう。GoogleもURLは簡潔かつ意味のわかるもの、と推奨していますので。

 

英語が苦手という方は、Google翻訳を使って日本語を英語に直せばよいでしょう。

 

パーマリンクはネット上でそのページを特定する大切なURLですので、記事を投稿する最初の段階で設定する習慣をつけておきましょう。公開した後で時間がたってからパーマリンクを変更すると、そのページのネット上の評価がリセットされてしまうからです。

 

 

記事本文の入力(記事構成の階層化を覚えよう)

段落と改行

まず、下記のように適当にテキストを入力してみます。

入力すると、自動的に段落として扱われます。このとき、

入力してリターンキーを押すと、次の段落へ移る(このとき段落と段落の間には、自動的にスペースが挿入されます)
同じ段落内で改行だけしたい場合は、Shift+リターン を入力する。

という操作を覚えておきましょう。

本文入力と改行

 

見出しの設定

次に、入力要素を段落から見出しに変更してみます。

見出しの一番目』と入力してから、これを見出しに変更する手順は以下の通りです。
カーソルは、見出しに変えたい行に置いておきます

①左上の段落 と表示されているところをクリック
②ドロップダウン表示されるメニューから『見出し2』をクリック

見出しの設定方法

そうすると、『見出しの一番目』が大きく表示されて、見出しに変更されたことがわかります。

 

ここで、見出し2 という項目を選びましたが、この見出し2、とか見出し3などの数字はどのような意味があるでしょうか?

 

 

テキストエディターで見る見出し

ここで、一度テキストエディターで表示させてみましょう。
下記のように、記事本文入力部の右上の『テキスト』タブをクリックすればテキストエディターに切り替えできます(『ビジュアル』タブをクリックすれば、元のビジュアルエディターに戻ります)。

テキストエディターで見ると、見出しの部分が<h2></h2>とで囲まれているのがわかります。

テキストエディターで見る見出し

h1、h2、h3・・・などのタグは、見出し要素を表すHTMLタグで、この数字が小さいほど、大きな見出しを表します。

ですので、h1が一番大きな見出しを表すのですが、h1は1つのページにつき原則として1つだけ、という決まりがあり、ワードプレスでは自動的に記事のタイトルがh1に指定されます。

したがって、記事本文の中で一番大きな見出しはh2だということです。

 

この見出しを、記事の中で、階層的につけていくことで、Googleの検索ロボットが記事の内容を理解しやすくなるのです。理解しやすければ、Googleのデータベースにも正常に登録されます。

したがって、SEO(検索エンジン最適化:すなわちGoogleの検索で上位表示されやすくなる)上の観点から、記事タイトルと記事内見出し、そして記事内容(段落)がきちんと階層的に並んでいる構成にすることは、必須事項だと言えるのです。

 

記事内容の階層化

例えば、以下のように記事内容を構成していきます。
画僧の中に、テキストエディターでの確認結果もありますので、よく確認してくださいね。

見出し階層化

 

このように、記事内は、見出しh2、h3、h4・・・と、段落をうまく使いながら階層化するようにしましょう。

 

ここで、一旦、投稿記事内容をプレビューしてみましょう(プレビューは、編集画面の右上のプレビューボタンを押せばよいのですね)

記事プレビュー(画像なし)

記事のサイト表示も、うまく見出しと段落が反映されていることがわかりました。

 

 

記事内への画像の挿入

記事トップに画像を挿入してみましょう。

以下の手順のように、挿入したい部分(記事先頭)にカーソルを置いて、『メディアの追加』のクリックすると、メディアライブラリが開きます。

画像の挿入

メディアライブラリに、挿入したい画像をパソコンのフォルダからドラッグ&ドロップすれば、メディアライブラリ内に画像が保存されます(アップロードすると言います)。

アップロードした画像の情報を、下記のようにメディアライブラリ右側で編集します。編集できる項目は
代替テキスト(画像が何らかの理由で表示されない場合、代わりに表示されます。SEO上、画像の説明にもなるので重要です)
キャプション(画像の説明を表示したければ入力します。必須ではありません)
画像のURL情報をコピーできる(通常は使いません。ウィジェットなどで指定の画像を表示したい場合に使います)
画像の表示設定(画像の配置位置、リンク先(あれば)、画像サイズ※

※ワードプレスでは、画像をアップロードすると、元の画像のサイズのほか、大・中・小のサイズが自動的に生成されますので、どれかを選択します。

メディアライブラリでの画像の設定

 

画像情報の編集が終われば、『投稿に挿入』をクリックすれば、記事内に挿入されます。

画像の挿入を確認(編集画面)

上記のように、編集画面で画像が挿入されたのが確認できます。
また、編集画面内で画像をクリックすると。画像設定の編集ツールが表示されるので、ここでも配置や画像の削除などの編集ができます。

 

画像設定が終われば、プレビューで投稿記事を表示させてみましょう。以下のように、画像が挿入できています。

画像の挿入確認(サイト表示)

 

 

投稿記事のカテゴリーを設定する

投稿した記事のカテゴリーはデフォルトでは『未分類』となっていますので、公開する前にカテゴリーも設定しておきましょう。

 

手順は、以下の通りです。カテゴリー設定ボックスは、編集画面の右側の中にあります。

カテゴリー設定

 

 

アイキャッチ画像の設定

アイキャッチ画像は、ブログトップページなどの記事一覧の中で表示させたり、投稿記事ページの1stビュー画像として表示されたり、使用しているテーマによっては、扱い方がいろいろですが、どのようになるか一旦設定してみましょう。

 

設定方法は以下の通りです。アイキャッチ画像の設定ボックスも、編集画面の右欄の中にあります。ここでは、記事トップに挿入したものと同じ画像を設定してみました。

アイキャッチ画像の設定

 

以上で、投稿記事の制作は一旦終了です。編集画面右上の『公開』をクリックして、サイト表示をさせてみましょう。

 

 

投稿記事のサイト表示

以下は、トップページです。投稿した記事の

記事タイトル
アイキャッチ画像
記事本文

が表示されていますが、アイキャッチ画像と記事本文が同じものが表示されているうえ、記事本文も全文表示されてしまっています。

公開してサイト表示

これを、トップページには記事タイトルとアイキャッチ画像のみが表示される(記事本文は抜粋のみ表示される)よう、修正してみます。

 

記事抜粋表示の設定方法

moreタグというものを使用します。
記事内にmoreタグ(<!– more –>)を挿入すると、挿入した箇所以降は、一覧表に表示されなくなります。

今回は、記事トップに挿入して、記事内トップ画像を含めて記事全文が表示されないようにしてみます。
以下が挿入方法です。

moreタグ挿入(ビジュアルエディター)

 

挿入したい場所にカーソルを置いて『続きを読むタグを挿入』をクリックすればよいだけですね。

 

では、トップページを確認してみましょう。

記事抜粋後、トップ画面表示

目論見通り、記事タイトルとアイキャッチ画像が表示されるだけで、moreタグ以降(記事本文)は『続きを読む』で記事ページへのリンクが表示されています。

 

では、記事ページも見てみましょう。

設定どおりにはなっているのですが、ヘッダー画像とアイキャッチ画像とが連なって表示されており、あまりデザイン的に見映えがよくありません。

Twenty Seventeenアイキャッチ

 

そこで、このテーマ(Twenty Seventeen)の場合は
アイキャッチ画像は設定しない
各記事トップ画像の下に(または、トップ画像直下の導入文の下に)Moreタグを設置する

という設定とした方が、上記画像右下のように、すっきりしたデザインにできることがわかります。

 

このように、テーマによって、アイキャッチ画像の設定や、記事抜粋の方法を適正に使っていくようにしましょう。


※テーマによって、アイキャッチ画像の取り扱い方や記事一覧へのテキストの表示方法は異なります。

Twenty Seventeenの場合は、今回紹介したようにアイキャッチ画像が記事一覧ページだけでなく、各記事ページの一番上にも表示される仕様ですが、例えば、私のこのサイトで使用中のテーマLuxeritasの場合、各記事ページには表示されません。

また、記事一覧ページへの表示ですが、Twenty Seventeenではmoreタグを挿入したところまでが表示されますが、Luxeritasでは、moreタグを使用する方法と自動的に記事の頭の所定文字数を抜粋して表示する方法のどちらかを選択できるようになっています(初期値は自動抜粋)。


 

以上、記事の作詞から公開~表示確認・修正までの流れを実施してきました。

記事コンテンツの作成以外に、編集画面の中にあるいくつかの便利機能を紹介します。

 

公開関連の各設定について

公開設定には次のようにいくつかの便利機能があります。

公開済の投稿記事を下書き状態に戻したりできる
投稿記事の任意のパスワードを設定できる
投稿記事の過去の編集状態を復元できる
投稿記事の予約公開ができる

これらの手順は以下の通りです。

公開関連の格設定

編集画面での表示オプション

編集画面には、デフォルトで表示されている編集ボックス以外に、いくつかのオプションがあります。

編集画面の上のほうにある、『表示オプション』をクリックすれば、表示されていないボックスを確認できます。

 

以下に例として、ディスカッションボックスの表示させてみます。

表示オプション

ディスカッションは、ブログ記事の下にコメントを書き込める機能ですが、スパム攻撃の元になったりすることもあり、企業サイトに中には、このコメント欄を表示させていない場合が多いようです。サイトの目的に応じて使っていくようにしましょう。

 

 

まとめ

以上、クラシックエディターを使った、記事の投稿方法について解説してきました。

・プラグインTinyMCE Advancedを使うことで、表の作成など、記事本文の編集ツールを増やすことができる。

・パーマリンクは、投稿記事のURLなので、記事公開初期段階で半角英数字にて設定しておくようにする。

・見出しタグh1、h2、h3・・・を使うことで、記事のタイトルおよび記事本文内見出しと段落を、階層的な構成にすることは、SEO上必須事項である

・記事への画像の挿入は、挿入部にメディアライブラリにて画像情報を編集してから挿入する

・カテゴリーはデフォルトでは未分類となっているので、記事内容に応じて設定する

・アイキャッチ画像を設定することで、トップページの記事一覧や記事ページに画像を表示させることができる。表示方法は、テーマに依存する。

・moreタグを記事内に挿入すれば、挿入部以降は、記事一覧表に表示されない。

・公開の方法として、パスワードを設定したり、予約公開をする方法がある

・編集画面の表示オプションで、デフォルトでは表示されていない機能ボックスを表示させることができる。

・ディスカッションは記事コメントを書き込める機能だが、スパム攻撃の標的にもなるので、設置していないサイトもある。

 

記事編集用の各ツールの使い方詳細については、本記事では解説していませんが、ワープロ感覚で入力できるクラシックエディターであれば、使っていくうちに自然に使いこなせるものと思います。

どんどん記事を書いて、慣れていくようにしましょう。

 

また、ワードプレスの現在のデフォルトエディターはブロックエディターです。クラシックエディターは2022年にはサポートが切れてしまう、と言われていますので、ブロックエディターにも徐々に慣れていくことをおすすめします。

 

また、ワードプレス習得のための全体ガイドラインはこちらです。

 

 

 

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる