WordPressで作ったホームページへの画像のアップロード方法

WordPressで投稿を作成するときに、投稿の中に写真などの画像を掲載したい場合が多いかと思います。
投稿に画像を掲載する方法は、以前「WordPressブロックエディタで使用できる主なブロックの紹介」の記事中の画像の項目で紹介しました。
投稿作成画面で画像を設置するには、画像のブロックを設置して「アップロード」「メディアライブラリ」「URLから挿入」の三つの中から選択することができましたね。
これらの中でおすすめの方法としては、投稿に使用したい画像をあらかじめアップロードしておき、投稿作成時に「メディアライブラリ」から画像を選択する方法がおすすめです。

今回は、この「メディアライブラリ」への画像のアップロード方法と、それに関連する内容について紹介していきたいと思います。

画像のアップロード方法

WordPressへの画像のアップロードは、管理画面のメニューから行うことができます。

以下で、具体的な手順を紹介していきます。
WordPressの管理画面左側にあるメニューの中に「メディア」というメニューがあります(下図の赤い下線部)。

WordPressの管理画面
WordPressの管理画面

管理画面のメディアメニューをクリックすると、「メディアライブラリ」というアップロードされた画像などのメディア一覧のページが開きます。
このページでは、アップロードした画像が多くなったときでも絞り込みや検索を利用して目的のファイルを簡単に探すことができます。

WordPressのメディアライブラリ画面
メディアライブラリ画面

メディアメニューの「新規追加」をクリックすると下の図のような「メディアのアップロード」ページが開きます。
このページの点線で囲まれた部分にアップロードしたいファイルをドラッグアンドドロップするか、「ファイルを選択」をクリックしてファイルを選択することで画像などのファイルをWordPressサイトのメディアライブラリにアップロードすることができます。

WordPressのメディアアップロード画面
メディアの新規追加画面

以上で画像のアップロード自体は完了です。
あとは投稿作成画面で画像のブロックを設置し、「メディアライブラリ」をクリックしてアップロードした画像を選択することで、投稿に画像を設置することができます。

次の項目では、アップロードした画像についてメディアメニューでできることについて紹介していきます。

WordPress管理画面の「メディア」メニューでできること

WordPressのメディアメニューでは画像についての各種項目を設定したり、簡単な画像の編集を行うことができます。
以下でそれぞれについて紹介していきます。

画像についての項目を設定

メディアライブラリの画像をクリックすると、下の図のような「添付ファイルの詳細」画面が表示されます。
この画面の右側の部分で、アップロードした画像について必要に応じていくつかの項目を設定することができます。
設定できる各項目の内容について簡単に説明しておきます。
なお、これらの項目は必ずしも全て設定する必要があるわけではありません。

  • 代替テキスト:ここに代替テキストを入力しておくと、投稿作成画面でこの画像を設置したときに代替テキストも自動で設定されます。この項目は設定しておくことをおすすめします。
  • タイトル:アップロードした画像のファイル名がデフォルトで表示されています。
  • キャプション:ここにテキストを入力しておくと、投稿作成画面でこの画像を設置したときにキャプションとして自動で設定されます。
  • 説明:使用しているテーマなどによってここに入力したテキストを使用するものもあるようです。
  • ファイルのURL:ファイルのアップロード先のURLが表示されています。
WordPressのメディアライブラリのファイル詳細画面
メディアライブラリの画像詳細画面

簡単な画像の編集

また、上の図でアップロードした画像の下にある「画像を編集」をクリックすると、下の図のような画面が表示されて、簡単な画像の編集をすることができます。
ここにある、切り抜き・回転・反転・サイズ変更の各メニューを使って画像を編集した後、画像の下にある「保存」を押すことで画像を編集することができます。

WordPressのメディアライブラリのファイル詳細からの画像編集画面
画像編集時の画面

アップロードする画像の最適化

近年のホームページでは、ページの読み込み速度短縮などのユーザーの利便性向上がより強く求められており、特にファイルサイズが大きくなりがちな画像については最適化を行う必要があります。

最適化の手法としては、画像のサイズや画質を必要最小限に抑えることで、画像のファイルサイズを小さくすることができ、結果としてページの読み込み速度の向上につながります。

具体的な最適化の方法としては、画像をアップロードする前に画像加工ソフトなどを使用して最適化を行っておくか、「EWWW Image Optimizer 」などのWordPressプラグインを利用して画像の最適化を行う方法とが考えられます。

WordPressにWepP形式の画像をアップロードするには

WordPressは、2021年7月公開のバージョン5.8からWebPに対応 しました。
それまでのバージョンでは、オリジナルの状態のWordPressにはWebPなどの新しい形式の画像をアップロードすることができませんでした。
(「WebP」とは、これまで使用されてきた画像の圧縮形式である「jpg」や「png」などの後継となりうる新しい圧縮形式のことです。画像のサイズや画質が同じでもファイルサイズを小さくできます。)

前の項目で画像の最適化についてお話ししましたが、以前「新しい画像形式WebPの導入で画像を軽量化してホームページの読み込み速度を改善しよう」の記事で紹介したように新しい形式の画像フォーマットを利用することも画像のファイルサイズを小さくするのには有効です。

バージョン5.8よりも古いバージョンのWordPressにWebP形式の画像をアップロードしたい場合には、functions.phpにコードを記述するか、「WP Add Mime Types 」などのWordPressプラグインを使用してWebP形式の画像をアップロードできるようにする必要があります。

まとめ

以上、WordPressで作ったホームページへの画像のアップロード方法とそれに関連した内容についてお話ししてきました。

WordPressへの画像のアップロードはとても簡単にできることがお分かりいただけたかと思います。もし内容がわかりにくいと思われた方でも、一度やってみればすぐにできるようになると思います。
ぜひWordPressで画像を使った投稿を作成してみてください。

アクセス解析初心者の方でも活用できる「Search Console Insights」の紹介

Search Console Insightsのアイキャッチ画像

Googleから「Search Console Insights」というコンテンツのパフォーマンスを確認・改善するための新しいツールが提供されました。
このツールは特にアクセス解析の初心者の方が、ホームページのアクセス状況に関するデータに触れるのにおすすめできるツールになっています。

そこで今回は、「Search Console Insights」について、このツールで具体的に確認できるデータや活用方法について、主にアクセス解析の初心者の方に向けて紹介していきます。

続きを読む

WordPressブロックエディタで使用できる主なブロックの紹介

今回は、WordPressのブロックエディタで使用できるブロックの内、よく使われるいくつかのブロックについてその使い方などを紹介していきたいと思います。

なお、紹介していく内容はWordPressで使用しているテーマやプラグインなどによって異なる場合がありますのでご了承ください。
今回紹介していく内容はテーマに「Twenty Twenty-One」を使用し、プラグインは使用していない環境でのものです。

WordPressでの投稿の作成方法のおさらい

まずは、WordPressでの投稿の作成方法について簡単におさらいしておきます。
詳しくは以前お話しした「WordPress投稿の操作方法」の記事を参考にしてみてください。

管理画面から投稿の新規追加をクリックすると下の図のような新規投稿作成画面が開きます。
ここに見出しや段落などのブロックを追加して投稿を作成していきます。
タイトルを入力したら、「+」マークでいろいろなブロックを追加して投稿を作っていきましょう。

WordPressの投稿作成画面
WordPressの投稿作成画面

今回紹介するWordPressエディタのブロック

今回、紹介するブロックは以下の5個になります。
各項目名のページ内リンクからそれぞれを紹介している場所に移動できます。

  • 見出し
    見出しとは、セクション(章や節など)ごとの内容を簡単に説明する文章のことです。
    見出しの文章は文字のサイズが大きくなっていたり、装飾されたりして目立ちやすくされていることが多いです。
    セクションの先頭に見出しを設置することで、読者に対してそこに何が書かれているのかを伝えることができます。
  • 段落
    段落とは、文章のまとまりのことです。
  • リスト
    リストは、番号なしの箇条書きリストと、手順などを表現しやすい番号付きのリストが利用できます。
  • テーブル
    テーブルとは、表のことです。
    何かを比較したりするときにテーブルを使用することで文章のみで表現するよりもわかりやすく伝えることができます。
  • 画像
    写真やイラストなどの画像を配置することで、読者に投稿の内容をよりわかりやすく伝えたりすることができます。

各ブロックの紹介

それではここからは具体的に各ブロックについて紹介していきたいと思います。
各ブロックで重複するものもあるので、一度出てきたものについては省略して紹介をしていきます。
また、ブロックツールバーでのブロックの移動や削除などの方法は以前お話しした「WordPressブロックエディタの使い方とブロックの操作方法」の記事を参考にしてみてください。

見出し

見出しブロックのブロックツールバーと設定サイドバー
見出しのブロックツールバーと設定サイドバー

見出しのブロックツールバーで操作できる主な項目

見出しレベルを変更

見出しのブロックツールバーにある「H2」と書かれている部分(下図の赤丸部)をクリックすると、下の図のようにH1からH6までのいずれかを選択できるようになっています。
これは見出しのレベルと呼ばれるもので、「H」の後の数字が小さいほど大きな見出しになります。
見出しのレベルを変えることで階層構造などをつくることができます。
なお、H1は最も大きな見出しですがH1は通常、タイトルに使われることが多く、投稿の中身で使用する見出しとしてはH2からH6までが使用されることが多いです。

見出しブロックツールバーの見出しレベル変更ボタン
テキストの配置を変更

ブロックツールバーにある下図の赤丸部のマークをクリックすると、下の図のようにテキストの配置を選択できるようになっています。
ここでは、見出しのテキストの配置を左寄せ、中央寄せ、右寄せのいずれかから選択することができます。

見出しブロックツールバーのテキスト配置変更ボタン
太字

ブロックツールバーにある「B」のマーク(下図の赤丸部)をクリックすると、テキストを太字にすることができます。

見出しブロックツールバーの太字ボタン
イタリック

ブロックツールバーにある「 / 」のマーク(下図の赤丸部)をクリックすると、テキストをイタリック(斜めの文字)にすることができます。

見出しブロックツールバーのイタリックボタン
リンク

ブロックツールバーにあるリンクのマーク(下図の赤丸部)をクリックすると、リンクを設定することができます。

見出しブロックツールバーのリンクボタン

見出しのブロック設定サイドバーで設定できる主な項目

タイポグラフィ

見出しのブロック設定サイドバーにある「タイポグラフィ」の項目を開くと下の図のような設定画面が表示されます。
ここでは、フォントサイズ(文字の大きさ)と行の高さを設定することができます。

見出しのブロック設定サイドバーのタイポグラフィ設定
色設定

見出しのブロック設定サイドバーにある「色設定」の項目を開くと下の図のような設定画面が表示されます。
ここでは、文字の色と背景の色を設定することができます。
表示されているいくつかの色の中から選ぶほか、「カスタムカラー」をクリックして好きな色に設定することもできます。

見出しのブロック設定サイドバーの色設定

段落

段落ブロックのブロックツールバーと設定サイドバー
段落のブロックツールバーと設定サイドバー

段落には文章の集まりが入りますが、文章に改行を入れたいときには注意が必要です。
改行したい場所でリターンキーだけを押すと、別の段落ブロックが追加され、そこに文章が入ってしまうため、文章の間に意図しないスペースができたりしてしまいます。
通常の改行をしたいときにはシフトキーを押しながらリターンキーを押してください。

段落のブロックツールバーで操作できる主な項目

段落のブロックツールバーで設定できる項目は、見出しで紹介したものと同様です。

段落のブロック設定サイドバーで設定できる主な項目

段落ブロックのブロック設定サイドバーにある「テキスト設定」のドロップキャップをオンにすると、段落にある文章の先頭の一文字だけが大きく表示されます。

リスト

リストブロックのブロックツールバーと設定サイドバー
リストのブロックツールバーと設定サイドバー

リストのブロックツールバーで操作できる主な項目

箇条書きリストに変換

リストのブロックツールバーにある「箇条書きリストに変換」マーク(下図の赤丸部)をクリックすると、リスト項目の先頭に点が表示される箇条書きリストになります。

リストブロックツールバーの箇条書きリストボタン
番号付きリストに変換

リストのブロックツールバーにある「番号付きリストに変換」マーク(下図の赤丸部)をクリックすると、リスト項目の先頭に数字が表示される番号付きリストになります。

リストブロックツールバーの番号付きリストボタン
リスト項目のインデント

下図にある赤丸のマークをクリックすると、リストの項目をインデント(字下げ)させたり戻したりすることができます。
これを利用することで、階層構造のリストを表現することができます。

リストブロックツールバーのインデントボタン
リストブロックツールバーのインデントを戻すボタン

リストのブロック設定サイドバーで設定できる主な項目

番号付きリストを選択しているときは、リストのブロック設定サイドバーは下の図のようになっており、「番号付きリスト設定」という項目が表示されます。
ここでは初期値(リストの1番目の項目につく数字)とリストの数字の順番(昇順か降順か)を設定できます。

番号付きリストのブロック設定サイドバーの番号付きリスト設定

テーブル

テーブルのブロックを追加すると下の図のような表示が出てきます。
青色の枠内には、カラム数と行数を入力できる欄と「表を作成」のボタンがあります。
カラム数とは、表の列の数のことです。
まずはここで作成するテーブルの行数と列数を設定して、「表を作成」をクリックすると表が作成されます。

テーブルブロック作成時のブロックツールバーと設定サイドバー
テーブル作成時のブロックツールバーと設定サイドバー

下の図は、カラム数を3、行数を4にして作成した表になります。

テーブル作成後のブロックツールバーと設定サイドバー
テーブル作成後のブロックツールバーと設定サイドバー

テーブルのブロックツールバーで操作できる主な項目

テーブルのブロックツールバーにある「表を編集」マーク(下図の赤丸部)をクリックすると、下の図のようなメニューが表示されます。
これらを使って行や列を好きなところに新しく挿入したり、削除したりすることができます。

テーブルブロックツールバーの表を編集メニュー

テーブルのブロック設定サイドバーで設定できる主な項目

スタイル

テーブルのブロック設定サイドバーにある「スタイル」の項目では、「デフォルト」か「ストライプ」が選択できるようになっています。
「ストライプ」を選択すると、行の背景色が交互に変わるようになります。

表の設定

テーブルのブロック設定サイドバーにある「表の設定」の項目では、「表のセル幅を固定」、「ヘッダーセクション」、「フッターセクション」のオンオフができるようになっています。
「表のセル幅を固定」がオフの場合、表の中身の文字数などによって列の幅が変動しますが、オンにすると、列の幅は等分されて固定されます。
「ヘッダーセクション」、「フッターセクション」をオンにすると、それぞれ表の一行目か最終行にヘッダーまたはフッターの行が追加されます。

テーブルのブロック設定サイドバーのスタイル設定と表の設定

画像

画像のブロックを追加すると下の図のような表示が出てきます。
中央の枠内で、「アップロード」「メディアライブラリ」「URLから挿入」の中から画像の入力方法を選択できるようになっています。

画像ブロック設置時のブロックツールバーと設定サイドバー
画像設置時のブロックツールバーと設定サイドバー

実際に画像を設置すると、下の図のようになります。
設置した画像の下にある「キャプションを入力…」のところにテキストを入力すると、キャプションとして表示されます。

画像設置後のブロックツールバーと設定サイドバー
画像設置後のブロックツールバーと設定サイドバー

画像のブロックツールバーで操作できる主な項目

切り抜き

画像のブロックツールバーにある「切り抜き」マーク(下図の赤丸部)をクリックすると、画像の切り抜き加工をすることができます。

画像ブロックツールバーの切り抜きボタン
置換

画像のブロックツールバーにある「置換」マーク(下図の赤丸部)をクリックすると、設置した画像を他の画像に置き換えることができます。

画像ブロックツールバーの置換ボタン
画像上にテキストを追加

画像のブロックツールバーにある「A」マーク(下図の赤丸部)をクリックすると、画像の上に重なるようにテキストを設置することができます。

画像ブロックツールバーの画像上にテキストを追加するボタン

画像のブロック設定サイドバーで操作できる主な項目

スタイル

画像のブロック設定サイドバーにある「スタイル」の項目では、「デフォルト」「角丸」「枠線」「フレーム」が選択できるようになっています。

画像のブロック設定サイドバーのスタイル設定
画像設定

「画像設定」の項目を開くと、下の図のようになっており、「Altテキスト(代替テキスト)」「画像サイズ」「画像の寸法」を設定することができます。
「Altテキスト(代替テキスト)」とは、何らかの理由で画像の表示ができない場合に、画像の替わりに表示されるテキストのことです。画像の説明文などを設定しておきましょう。
「画像サイズ」では、「サムネイル」「中」「大」「フルサイズ」の中から画像のサイズを選択することができます。
「画像の寸法」では、直接数値を入力して画像のサイズを設定することができる他、25%~100%の中から選択して画像のサイズを設定することもできます。

画像のブロック設定サイドバーの画像設定

まとめ

以上、WordPressブロックエディタで使用できる主なブロックについてお話ししてきました。
今回は紹介できなかったブロックや機能などもたくさんありますが、いろいろな投稿を作成していく中で必要なものについては徐々に覚えていくことができると思いますので、どんどん投稿を作成していくことをおすすめします。
また、冒頭にもお話ししたように、ブロックの種類や機能などは使用しているテーマやプラグインによって変わってくることが多いです。今回紹介した内容は基本的なWordPressの機能になりますので、これらを踏まえた上でご自分の利用しているWordPressの環境に慣れていくことも大切です。

WordPressブロックエディタの使い方とブロックの操作方法

WordPressの投稿作成エディタには「Gutenberg」と呼ばれるブロックエディタが採用されています。

ブロックエディタとは、文章や画像など投稿の要素をブロックに見立てて、用意されている色々なブロックを組み合わせていくことでHTMLのコードを書かなくても投稿を作成できるようになっているエディタのことです。

今回は、WordPressでのブロックエディタの基本的な使い方と基本的なブロックの操作方法についてお話ししていきます。

ブロックエディタの基本的な使い方

はじめに、ブロックエディタの基本的な使い方について簡単に紹介していきます。
投稿の新規追加を押すと下図のような投稿作成画面が表示されます。

WordPressの新規投稿作成画面

投稿作成画面が開いたら一番上の「タイトルを追加」となっているところにタイトルを入力して、あとは、投稿の各要素を設置していきます。

ブロックエディタでは投稿の各要素を設置するのに、投稿にブロックを追加して、投稿の各要素(見出しや段落など)に応じてブロックの種類を選択し、その中にコンテンツを入れ込んでいくことで簡単に設置できます。

このようにして必要な分だけ投稿にコンテンツのブロックを追加していくことで投稿を完成させていきます。

ブロックの構成要素

次に、ブロックの構成要素について紹介していきます。
ブロックの構成要素には、①ブロックツールバー、②ブロック設定サイドバー、③ブロックコンテンツがあり下の図のように表示されています。
この図では、段落のブロックが選択された状態になっており、ブロックの左上に①ブロックツールバーが表示され、投稿作成画面の右側に②ブロック設定サイドバーが表示されています。
図の下で各要素について紹介していきます。

投稿作成画面でのブロックの構成要素

①ブロックツールバー

ブロックツールバーは、ブロックを選択したときにブロックの左上に表示されるツールバーで、この中にあるメニューからブロックの種類変更、移動、削除などの操作を行うことができます。

②ブロック設定サイドバー

ブロック設定サイドバーはブロックを選択したときに右側に表示されるサイドバーで、選択されているブロックに応じた内容の設定項目が並んでいます。
右側にサイドバー自体が表示されていないときには投稿作成画面の右上にある設定ボタン(歯車のマーク)をクリックすると表示されます。
サイドバーの一番上の行では、投稿かブロックかを選択できるようになっているので、ブロックの設定を行いたい時はここでブロックを選択してください。

③ブロックコンテンツ

ブロックコンテンツは、ブロックの内容となる文章や画像などのことです。
ブロックコンテンツをクリックするとそのブロックが選択された状態になります。
ブロックを選択する方法には、投稿作成画面の左上にあるアウトラインのマーク(下図の赤丸部)をクリックすると表示されるブロックのリストから選択する方法もあります。

投稿作成画面でのブロックのアウトラインボタン

ブロックの具体的な操作方法

ここでは、基本的なブロックの操作方法について具体的に紹介していきます。
今回紹介するのは以下の操作についてです。

  • ブロックの追加
  • ブロックの種類変更
  • ブロックの移動
  • ブロックの削除

ブロックの追加

ブロックを追加するには、下図の①、②、③にある+マークのいずれかをクリックします。
①と②の+マークはいつも表示されており、これらの+マークを押すことで投稿の一番下にブロックが追加されます。
③の+マークはブロックとブロックの間にマウスポインタを近づけたときにだけ表示され、その+マークの場所にブロックを追加することができます。

投稿作成画面でブロックを追加する+マーク

ブロックの種類変更

設置したブロックの種類を変更するには、ブロックツールバーの一番左にある「ブロックタイプまたはスタイルを変更」のマークをクリックします。

ブロックツールバーからブロックの種類を変更する方法を下に図示して紹介します。
まずは種類を変更したいブロックを選択してブロックツールバーを表示させます。
次にブロックツールバーの一番左側にあるブロックタイプのマーク(下図の赤丸部)をクリックします。

投稿作成画面でのブロックツールバー内のブロックタイプマーク
赤丸で囲んだブロックタイプのマークをクリック

ブロックツールバーの一番左側にあるブロックタイプのマークをクリックすると下の図のように変換という選択メニューが表示されます。
その中から変更したいブロックの種類をクリックすると、そのブロックに変更することができます。

投稿作成画面でのブロックツールバー内のブロックタイプ変換リスト
変換したいブロックの種類をリストから選択する

ブロックの移動

設置したブロックを移動するには、ブロックツールバーの「ドラッグ」「上に移動」「下に移動」を使います。

ブロックツールバーから移動する方法を下に図示して紹介します。
まずは移動したいブロックを選択してブロックツールバーを表示させます。
次にブロックツールバーの左から2番目にあるドラッグのマーク(下図の赤丸部)をドラッグして移動させます。
このドラッグのマークをクリックしたままマウスを動かすことで、任意の場所にブロックを移動させることができます。

投稿作成画面でのブロックツールバー内のドラッグマーク
赤丸で囲んだマークをドラッグして移動

もしくは、ブロックツールバーの左から3番目にある「上に移動」「下に移動」のマーク(下図の赤丸部)を使うことでもブロックを移動させることができます。
この「上に移動」「下に移動」のマークをクリックすると、クリックするごとに一つずつブロックを上または下に移動させることができます。
「上に移動」マークをクリックするとブロックが上に移動し、「下に移動」マークをクリックするとブロックが下に移動していきます。

投稿作成画面でのブロックツールバー内の上下に移動マーク
赤丸で囲んだマークをクリックして上下に移動

ブロックの削除

設置したブロックを削除するには、ブロックコンテンツの文章などを全て消すかブロックツールバーのオプションから「ブロックを削除」をクリックします。

ブロックツールバーから削除する方法を下に図示して紹介します。
まずは削除したいブロックを選択してブロックツールバーを表示させます。
次にブロックツールバーの一番右側にあるオプションマーク(下図の赤丸部)をクリックします。

投稿作成画面でのブロックツールバー内のオプションマーク
赤丸で囲んだオプションマークをクリック

ブロックツールバーの一番右側にあるオプションマークをクリックすると下の図のようにオプションメニューが表示されます。
その中の一番下に「ブロックを削除」という項目(下図の赤線部)がありますので、これをクリックするとブロックが削除されます。

投稿作成画面でのブロックツールバー内のオプションメニューリスト
オプションの一番下にある「ブロックを削除」をクリック

まとめ

以上、WordPressブロックエディタの使い方とブロックの操作方法についてお話ししてきました。
今回は基本的な内容についてしか紹介できませんでしたが、実際に投稿をたくさん作成していくことで必要な機能や操作方法については身についていくと思いますので、どんどん投稿を作っていきましょう。

WordPress投稿の操作方法

今回は、実際にWordPressで投稿を作成するにあたって、初めに知っておくとよい投稿自体の操作方法について紹介していきたいと思います。

今回お話ししていく内容は以下の通りです。
各項目はリンクになっていますので、興味のある内容へ直接移動していただくこともできます。

なお、今回紹介していく内容や画像は、テーマにWordPressに標準でついてくるものの中から「Twenty Twenty-One」を使用し、プラグインは利用していない状態のものです。
ご使用の環境で使用しているテーマやプラグインによって、表示や機能に違いが出てくることがありますのでご了承ください。

投稿の新規追加

新しい投稿を作成する時は、「投稿の新規追加」を行います。
投稿を新規追加する方法はいくつかありますので、それぞれについて紹介していきます。

一つ目の方法としては、ダッシュボード左側にあるメニューから「投稿」→「新規追加」(下図の赤い下線部)をクリックすることで投稿の新規追加ができます。

ダッシュボードからWordPressの新規投稿を作成する

また、投稿一覧画面にある「新規追加」(下図の赤い下線部のいずれか)をクリックすることでも投稿の新規追加ができます。

投稿メニューからWordPressの新規投稿を作成する

上で紹介したいずれかの「新規追加」を押すと、下の図のような新しい投稿作成画面が表示されます。
ここに新しい投稿を作っていきましょう。

WordPressの新規投稿作成画面

投稿の下書き保存

まだ公開していない投稿の作成画面では、下の図のように投稿作成画面の右上に「下書き保存」というボタンが表示されています(画像の赤い下線部)。
これを押すことで、作成中の投稿を一旦保存しておき、あとでまた途中から投稿の作成を進めることができます。

WordPress投稿作成画面にある下書き保存ボタン

下書き保存した投稿は、下の図のように投稿一覧画面に表示されます。

WordPressの投稿一覧画面

投稿のプレビュー

投稿作成画面でのプレビュー

WordPressの投稿作成画面では、作成した投稿のプレビューを見ながら投稿の作成を進めていくことができます。
投稿作成画面の右上には「プレビュー」ボタンがあり、その中の項目で「デスクトップ」「タブレット」「モバイル」のいずれかを選択できるようになっています。ここで選択したデバイスでのプレビューを確認しながら投稿の作成を進めていくことができます。
下にそれぞれのデバイスを選択した状態の投稿作成画面の画像を紹介します。

WordPress投稿作成画面でのデスクトップのプレビュー
プレビューで「デスクトップ」を選択した状態
WordPress投稿作成画面でのタブレットのプレビュー
プレビューで「タブレット」を選択した状態
WordPress投稿作成画面でのモバイルのプレビュー
プレビューで「モバイル」を選択した状態

テーマを適用した状態のプレビュー

ここまでで紹介してきたプレビューは、使用しているテーマが適用されていない状態のプレビューでした。
投稿を実際に公開したときの状態のプレビューを確認しながら投稿の作成を進めたい場合には、投稿作成画面の設定を変更することで、使用しているテーマが適用された状態のプレビューに変更することもできるので、その方法を紹介していきます。

投稿作成画面の右上にある「 」(オプション)マークをクリックすると、下の図のようにオプションのメニューが開きます。
その一番下にある「設定」をクリックします。

WordPress投稿作成画面のオプションメニュー

オプションの設定をクリックすると、下の図のような設定画面が開きます。
その中にある左側の「外観」を選択すると、右側に「テーマスタイルの使用」という項目がありますので、これをクリックします。
その後、設定画面右上の×マークをクリックすると、設定画面が閉じます。

WordPress投稿作成画面のオプションの中の設定画面

以上の操作で、下の図のように、投稿作成画面のプレビューが使用中のテーマを適用した状態になります。
(今回の例で使用しているテーマは「Twenty Twenty-One」というテーマです。)

WordPress投稿作成画面のプレビューで使用中のテーマを適用した状態

新しいタブでのプレビュー

投稿作成画面の右上にある「プレビュー」ボタンの中の「新しいタブでプレビュー」(下図の赤い下線部)をクリックすると、ブラウザの新しいタブで作成した投稿のプレビューを見ることができます。

WordPress投稿作成画面の「新しいタブでプレビュー」ボタン

投稿の公開

まだ公開していない投稿の投稿作成画面では、下の図の赤い下線部のように「公開」ボタンが右上にあります。
投稿の作成が完了したら、この「公開」ボタンを押すことで、投稿が公開されます。

WordPress投稿作成画面の公開ボタン

投稿を更新

公開されている投稿の投稿作成画面右上には、「更新」ボタン(下図の赤い下線部)があります。
公開済みの投稿の内容を変更や修正した後に、公開されている投稿に反映させるためには、「更新」を押す必要があります。

WordPress投稿作成画面の更新ボタン

投稿を下書きに戻す

一度公開した投稿を非公開の状態に戻したいときには、投稿作成画面の右上にある「下書きへ切り替え」ボタン(下図の赤い下線部)を押すことで投稿が下書きの状態に戻り、投稿が公開されていない状態になります。

WordPress投稿作成画面の「下書きへ切り替え」ボタン

投稿の削除

WordPressでは、投稿の削除は「ゴミ箱へ移動」と「完全に削除する」の2段階で行うようになっています。
ゴミ箱へ移動した状態の投稿は「復元」で元に戻すことができますが、ゴミ箱へ移動した投稿を完全に削除してしまうと、元に戻すことができなくなります。

投稿をゴミ箱へ移動する

投稿をゴミ箱に移動するには二つの方法がありますので、それぞれについて紹介していきます。

一つ目の方法は、投稿一覧画面で投稿のタイトル部近辺にマウスカーソルを持っていくと出現するメニュー(下図の赤い下線部)の「ゴミ箱へ移動」をクリックします。

WordPress投稿一覧画面の投稿タイトルから投稿をゴミ箱へ移動

二つ目の方法は、ゴミ箱に移動したい投稿のタイトルの左側にあるチェックボックスにチェックを入れ、「一括操作」となっているセレクトボックス(下図の赤い下線部・投稿一覧の上と下の二箇所にあります)の中の「ゴミ箱へ移動」を選択し、その右側にある「適用」をクリックします。

WordPress投稿一覧画面の一括操作から投稿をゴミ箱へ移動

投稿を復元する

ゴミ箱へ移動した投稿は、完全に削除していなければ元に戻すことができます。
投稿一覧画面の「ゴミ箱」(下図の赤い下線部)をクリックすると、ゴミ箱へ移動した投稿の一覧が表示されます。

WordPress投稿一覧画面のゴミ箱フォルダ

ゴミ箱へ移動した投稿を元に戻すには、「復元」を行います。
投稿を復元するには二つの方法がありますので、それぞれについて紹介していきます。

一つ目の方法は、投稿のタイトル部近辺にマウスカーソルを持っていくと出現するメニュー(下図の赤い下線部)の「復元」をクリックします。

WordPress投稿一覧画面の投稿タイトルメニューから投稿を復元

二つ目の方法は、復元したい投稿のタイトルの左側にあるチェックボックスにチェックを入れ、「一括操作」となっているセレクトボックス(下図の赤い下線部・投稿一覧の上と下の二箇所にあります)の中の「復元」を選択し、その右側にある「適用」をクリックします。

WordPress投稿一覧画面の一括操作から投稿を復元

投稿を完全に削除する

ゴミ箱へ移動した投稿を完全に削除したいときには、「完全に削除する」操作を行います。
投稿を完全に削除する方法は三つありますので、それぞれ紹介していきます。

一つ目の方法は、投稿のタイトル部近辺にマウスカーソルを持っていくと出現するメニュー(下図の赤い下線部)の「完全に削除する」をクリックします。

WordPress投稿一覧画面の投稿タイトルから投稿を完全に削除

二つ目の方法は、完全に削除したい投稿のタイトルの左側にあるチェックボックスにチェックを入れ、「一括操作」となっているセレクトボックス(下図の赤い下線部・投稿一覧の上と下の二箇所にあります)の中の「完全に削除する」を選択し、その右側にある「適用」をクリックします。

WordPress投稿一覧画面の一括操作から投稿を完全に削除

三つ目の方法は、ゴミ箱にある全ての投稿を完全に削除する方法になります。
投稿一覧ページのゴミ箱のページにある「ゴミ箱を空にする」(下図の赤い下線部)をクリックすることで、ゴミ箱内の投稿が全部完全に削除されます。

WordPress投稿一覧画面の「ゴミ箱を空にする」ボタンから投稿を完全に削除

投稿の設定

投稿の設定を開くには、投稿作成画面の右上にある歯車マーク「 」(赤い下線部)をクリックします。
すると、赤い四角で囲んだ設定メニューが表示されます。

WordPress投稿作成画面の投稿の設定メニュー

赤い四角で囲んだ中の一番上の段には、「投稿」「ブロック」「×」という項目が並んでいます。
「投稿」「ブロック」のどちらかをクリックすることでそれぞれについての設定を表示させることができます。ここでは投稿に関する設定を紹介しますので、「投稿」が選択された状態のままで大丈夫です。

設定のメニューを閉じるには、もう一度歯車のマークをクリックするか、×マークをクリックします。

また、それぞれの項目を開くには、項目名の右側にある「 」のマークをクリックするとその項目の内容が開きます。
開いている項目を閉じるには、項目名の右側にある「 」のマークをクリックします。

ここからは、投稿の設定の各項目について簡単に紹介していきます。

ステータスと公開状態

ここには、公開の状態や、公開日時などが表示されます。

パーマリンク

ここでは設定によって、投稿のパーマリンクを設定することができます。
パーマリンクとは、公開された後の投稿ページのURLの末尾部分にくる文字列のことです。
パーマリンクについて詳しくは、「WordPressの投稿を作り始める前にやっておくべきパーマリンク設定」の記事で紹介していますのでよかったらみてみてください。

カテゴリー

WordPressには、投稿をカテゴリー分けする機能があります。
投稿していく記事の内容に応じて自分でカテゴリーを作り、投稿のカテゴリーをここで設定することができます。

タグ

WordPressには、投稿にタグをつける機能があります。
自分で作成した任意のタグを、投稿につけることができます。

アイキャッチ画像

ここでは、投稿のアイキャッチ画像を設定することができます。
アイキャッチ画像とは、投稿の初めの方に表示されている画像のことで、読者に投稿の内容をイメージさせたり、読者の興味を引くために使われたりします。

抜粋

ここでは、投稿の抜粋を設定することができます。
抜粋には、投稿を要約した文章を設定しておくことで検索結果に表示させたりすることができます。

ディスカッション

ここでは、コメントやピンバックの許可などの設定をすることができます。

まとめ

以上、WordPress投稿の操作方法についてお話ししてきました。
少し長くなってしまいましたが、必ずしも全部を覚えてから投稿を作り始める必要はありません。
よく使う機能などは使っていくうちに覚えていくと思いますので、使うときにわからないものは調べながらどんどんWordPressを使っていくことをおすすめします。

WordPressの投稿を作り始める前にやっておくべきパーマリンク設定

WordPressパーマリンク設定

WordPressで制作したホームページでは、立ち上げ時に設定しておくべき項目がいくつかありますが、今回は投稿に関する設定で初めにやっておくべきものとして、パーマリンク設定についてお話ししていきたいと思います。

パーマリンクとは

WordPressでは、設定によって投稿ページなどのURLの末尾部分を投稿作成者が決めることができます。
その際に、どのようにページのURLを決めるかというルールを設定することができます。これが、パーマリンク設定です。
パーマリンクとは、パーマネント・リンク(Permanent Link)の略語で意味的にはPermanent(永続的)なLink(リンク)のことです。
WordPress.Orgのページでは以下のように紹介されています。

パーマリンクとは、ブログの個々の投稿、カテゴリーなどの投稿一覧ページへの恒久的 (半永久的) な URL です。
パーマリンクは、他のブロガーがあなたの記事やセクションにリンクを張るときや、投稿へのリンクを Eメールで送ったりするときに使います。
個別の投稿への URL は常に存在して決して変わらないようにすべきです。
そのため、「perma」リンクと呼ばれます。

パーマリンクの使い方 | WordPress.org 日本語

例えば、あなたがWordPressに投稿した記事を読んでくれた誰かが、他の人にあなたの投稿した記事を紹介しようと思い、あなたの投稿のURLへのリンクを自分のホームページに掲載したとします。
しかし、その後にパーマリンクが変更されて投稿のURLが変わってしまっていたらそのリンクからはあなたの投稿のページにたどり着くことができなくなってしまいます。

以上のように、パーマリンクの設定を後から変更すると投稿ページのURLが変わってしまいます。
公開したWordPress投稿のURLが途中で変わることがないようにするために、投稿を作り始める前にパーマリンク設定を決めてしまって後から変更しないようにしたいのです。

URLについて

前の項目でWordPress投稿のパーマリンクはURLになるということをお話ししましたが、URLはどのようなものが望ましいのでしょうか。

望ましいURLとは

どのようなURLが望ましいかについて、Googleのガイドラインでは以下のように説明されています。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合は ID ではなく意味のある単語を使用して)URL を構成できるよう、コンテンツを分類します。たとえば、航空機(aviation)に関する情報を探している場合、http://en.wikipedia.org/wiki/Aviation のような URL であれば、見ただけで必要な情報であるかどうかを判断できます。http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 のような URL 自体は、ユーザーの関心を引くことはほとんどありません。

URL では区切り記号を使うと効果的です。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア (_) ではなくハイフン (-) を使用することをおすすめします。

シンプルな URL 構造を維持する | 検索セントラル | Google Developers

すなわち、URLはできるだけシンプルで、意味のわかる短い単語または単語の組み合わせがよいとされています。

日本語のURLでも大丈夫?

URLに使用する言語は日本語でも大丈夫なのでしょうか?
日本人向けのホームページであれば、日本語のURLにしておいたほうが見る人に意味が伝わりやすいという面はあるでしょう。実際に、日本語がURLに使われているホームページも存在します。

ただ、日本語を使ったURLはおすすめしません。
例えば、

https://pallete.net/ホームページの作り方

という日本語を使ったURLを作ったとします。
このような日本語を含んだURLはSNSでシェアした時などに

https://pallete.net/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9

のように日本語の部分が変換されてしまう場合があります。これはもちろん同じページへのリンクとしては有効に機能するのですが、文字列が長くなってしまうことと、見た人から怪しいイメージをもたれかねないのであまりおすすめはしません。

日本語もURLに使用することはできますし、SEO上のデメリットもないとされてはいますが、この例のようなページの場合でしたら、半角の英数字を使ったURLで

https://pallete.net/how-to-create-website

のようなURLにすることをおすすめします。

WordPressのパーマリンク設定方法

それでは、実際にWordPressでのパーマリンクの設定をどのようにしたらよいか紹介していきたいのですが、実際のパーマリンク設定に進む前に、ひとつ検討しておくべき内容がありますので、まずはそれについてお話ししておきたいと思います。

WordPress投稿のカテゴリー分けをURLにも適用するか

WordPressには、カテゴリーの機能があります。
この機能を使って投稿を自分で作成したカテゴリーに区分して整理することができるのですが、URLにもこのカテゴリーの分類を使用したい場合にはそのようにパーマリンクの設定をしておく必要があります。

例えば、ペットに関するホームページで、「人気のドッグフード」に関する記事を書いたときに「dog」というカテゴリー名をURLでも使用して

https://example.com/dog/popular-dog-food

としたいのか、
あるいはURLにはカテゴリー名を使用せず

https://example.com/popular-dog-food

としたいのかをあらかじめ決めて、そのようにパーマリンクの設定をしておく必要があります。

このように、URLでもカテゴリー区分を使用したい場合には、パーマリンクの設定を決めるにあたって、これから作成していく予定のWordPress投稿の記事の内容についてもあらかじめ検討しておく必要があります。

なお、おすすめの方法としては、WordPressのパーマリンク設定としてURLにはカテゴリー分けを使用しない方法がおすすめです。
理由としては、将来的に複数のカテゴリーにまたがる内容の記事や、明確にカテゴリー分けができないような内容の投稿記事を書くことになっても、URLにカテゴリー分けを使用していなければ困らずに済むからです。

具体的なWordPressのパーマリンク設定方法

ここからは、WordPressの実際の設定画面を見ながらパーマリンクの設定方法について紹介していきたいと思います。
パーマリンクの設定ページへは、WordPressの管理画面(ダッシュボード)の左側にあるメニューの中の「設定」→「パーマリンク設定」と進みます。(下図の赤い下線)

WordPressの管理画面(ダッシュボード)

パーマリンク設定のページは下の図のようになっています。
基本的には上側の「共通設定」の所のいずれかの項目を選択するだけで良いと思います。
「共通設定」の項目には、「基本」「日付と投稿名」「月と投稿名」「数字ベース」「投稿名」「カスタム構造」があり、それぞれの項目の右側にはその設定を選んだ際にURLがどのようになるかの例が記載されています。
「カスタム構造」を選択すると、WordPress側で用意している各種タグを組み合わせてパーマリンクを設定することができます。

WordPressのパーマリンク設定画面

では、WordPressのパーマリンク設定をどのようにしておけばよいかについてお話ししていきましょう。
パーマリンク設定の「共通設定」は初期状態では「基本」が選択されています。
しかし、このままだと投稿ページのURLは、その右側にあるように

https://pallete.net/?p=123

というように、英数字と記号の組み合わせがURLの末尾部分に自動的に割り振られるようになってしまいます。
前述したように、このようなURLは望ましくないので、パーマリンクの設定を変更しておきましょう。
また、設定を変更した後は左下にある「変更を保存」ボタンを忘れずに押しておきましょう。これを押さないと変更が反映されません。

おすすめの設定としてはパーマリンクの設定は、「投稿名」にしておくのがおすすめです。
そうすることで、自分で入力した文字列を投稿ページのURLに指定することができるようになります。

下の図は、「Hello world!」というWordPressをインストールするとすでに公開された状態になっているサンプル投稿の投稿作成画面です。
WordPressのパーマリンク設定が「基本」になっていると、この図のように、右側の赤枠で囲んだパーマリンクの部分は、末尾が「/?p=1」となっていて変更もできない状態になっています。

パーマリンク設定が「基本」の時の投稿作成画面

次に示した図は、同じサンプル投稿の投稿作成画面ですが、WordPressのパーマリンク設定を「投稿名」に変更した状態です。
赤枠で囲んだパーマリンクの部分にURLスラッグを入力できる欄ができており、その下のURLの末尾部分はURLスラッグの欄と同じ「/hello-world」となっています。
このように、WordPressのパーマリンク設定を「投稿名」に変更したうえで、URLスラッグの入力欄を書き換えることで、投稿ページのURLの末尾部分を適切な文字列に変更することができます。

パーマリンク設定が「投稿名」の時の投稿作成画面

まとめ

以上、WordPressの投稿を作り始める前にやっておくべきパーマリンク設定についてお話ししてきました。
今回の内容を簡単にまとめると、『WordPressのパーマリンク設定はデフォルトのままは良くないので、「投稿名」にしておくのがおすすめです。』ということになります。
これからWordPressでホームページを作られる方は、ぜひ投稿を作り始める前にパーマリンクの設定をしておいてください。