ホームページ制作 福岡

ワードプレスで画像を簡単に記事や固定ページに表示させる方法

ワードプレスで画像を簡単に表示!

ワードプレスはとても便利で使いやすいCMSですが、意外と余計な手間をかけていたりする人も少なくありません。

画像についても、簡単に表示できる方法があるのですが、余計な手間暇をかけて画像を表示している場合もあります。

なので、今回は、一般的な記事や固定ページへの画像の表示方法と、ちょっとしたショートカットの方法を紹介します。

 

ワードプレスの管理画面へ移動してください。

編集ページ、または新規記事投稿画面へ移動してください。

管理画面左メニューから、固定ページか、記事ページの編集画面を表示します。

 

ブログ記事の場合

新規投稿の場合は、投稿 > 新規追加

記事編集の場合

投稿 > 投稿一覧 > 記事一覧から該当記事を選択

 

固定ページの場合

新規追加の場合は、固定ページ > 新規追加

固定ページ編集の場合

固定ページ > 固定ページ一覧 > 固定ページ一覧から該当固定ページを選択

 

編集する場合は、一覧から編集するページのリンクをクリック

(画面はほぼ同じなので記事一覧ページを表示しています)

 

 

記事の編集ページ、または、新規の投稿ページを表示

 

 

 

記事内容で画像を掲載したいところにカーソルを置いてください。

 

点滅しているカーソルという文字を打ち込むときの打ち込み開始位置を確認してください。

 

 

メディアを追加ボタンをクリックしてください。

記事投稿画面に、メディアを追加というボタンがありますので、それをクリック

過去にアップした画像がウインドウとして表示されます。

 

メディアを追加ウインドウが開きます。

 

このように、過去にアップしていた画像が表示されます。

 

この中から画像を選択してもいいのですが、追加する事もできます。

 

メディア追加画面で、新しく画像をドラッグアンドドロップでも可能!

 

下の画像のように、別のフォルダやデスクトップなどから、画像をマウスでクリックして掴みながら、画像を移動させるだけで、メディアの中に画像をアップする事ができます。

 

 

 

 

実というと、記事内容に直接ドラッグアンドドロップでも画像をアップできます。

こんな感じです。

 

 

メディアを追加ウインドウの中から掲載したい画像をクリック

この時にコントロールキーを押しながら複数の画像をクリックすると複数同時に選べます。

選択を解除したい時は解除する画像をクリックすると選択解除できます。

 

画像を選択すると右に詳細が出ます。

添付ファイル詳細の代替テキストには画像の意味がわかる説明を入力する欄の事です。

 

 

サイトに実際に表示されるのは、

 

alt=”画像の説明”

 

というような感じの一文が追記されます。

 

出来る限り説明を入れてあげる事で、グーグルの画像検索や、検索結果のサムネイル表示などにおそらく影響があると考えられます。

 

それによって、アクセス流入口になる場合もあり得ますので、出来る限り書いてあげる事をお勧めします。

 

とは言え、そんな暇無いよという人は、ひとまずは書かずにでも構いません。

出来ればやったほうがいいという事なので、やらないとダメっていう事ではありません。

 

添付ファイル詳細のタイトルについて

画像にタイトルをつけるとした場合のテキストを入力してください。

 

 

添付ファイルキャプションについて

キャプションを入力すると画像の下に文字が表示されるようになります。

何か簡単な事であれば入力すると、伝えやすくなるかもしれません。

 

添付ファイル表示設定について

 

添付ファイルの表示設定で配置とリンク先とサイズを選択します。

 

配置の設定について

これは、左右・中央の配置を決めます。

 

 

左を選択すると、左揃え

 

 

中央を選択すると、中央揃え

 

 

 

右を選択すると、右揃えになります。

 

リンク先の設定について

リンク先の設定というのは、表示させた画像のリンクをどうするのか?という設定の事です。

なしの場合

なしは、何もリンクしない

 

メディアファイルの場合

メディアファイルにした場合は、画像のURLそのものへのリンクを付ける事になります。

 

実際にメディアファイルにした場合がこちらです。

クリックすると画像ファイルのURLへ移動できるのが分かると思います。

 

 

 

添付ファイルのページの場合

 

添付ファイルのページは、ワードプレスの設定で画像添付ファイルページというのが生成される場合があります。

テーマの設定で添付ファイルページが存在すればそのページへのリンクとなります。

クッションページのようなものです。

 

実際に添付ファイルに設定した場合の画像表示がこちらです。

クリックすると添付ファイルのページが表示されます。

 

サイズの設定について

これは、表示させたい画像のサイズの選択ができる機能です。

 

 

ワードプレスには、アップロードした画像そのものと、

ワードプレスが自動で生成してくれるサムネイルが別途存在します。

 

管理画面の左の

設定 > メディア

 

を選択する事で、画像のサムネイルのサイズを決める事ができます。

 

このメディアサイズの設定に合わせて画像をアップしたときに各種サイズも自動的に生成されます。

このメディアサイズは基本的には触らなくても問題ありません。

サイトのテーマの仕組みなどに合わせて、画像サイズを調整するわけですが、ほとんどのテーマでは、基本的な設定のままで問題ない場合が多いです。

 

サイズの設定上で極端に違いが分からない無駄な画像サイズが生成されている場合は対処するべき時もありますが、やはりそんなに触る必要は無いです。

 

少し話しがそれましたが、

このように、画像を記事に表示させる際に、自動的に生成された画像を選択できるわけです。

 

 

投稿に挿入ボタンクリックで、記事に反映!

 

画像などのメディアをどのように張り付けるのか?詳細設定が完了したら、画面右下にある投稿に挿入ボタンをクリック

 

これで、記事や固定ページの該当箇所に画像が表示されます。

 

これで、ワードプレスの記事や固定ページに画像を表示完了です。

 

 

あとは、文字や文章を追記したり、改行したり、装飾をして見直した後に記事を公開すれば完了です。

 

まとめ

ブログを書く上で、画像があるのと無いのとでは、かなり印象が変わります。

今見ている文章は次の文章を読ませるためにある。

という事もあるので、

スクロールする切っ掛けとして仕切りの為に画像を入れたりする事もあります。

 

ですが、その画像をアップしていく方法として、人によってはとても手間のかかる画像の表示のしかたをされている人も居るかもしれません。

 

簡単に画像をドラッグアンドドロップで表示するだけでも、作業効率は上がります。

また、普段使っていない機能で何のためにあるのかな?という時もあると思います。

今回はそういった方々のためにと思って書いてみました。

 

 

そして、画像関係で言えば、下記のページもよく読まれていますので、良ければご覧下さい。