WordPressブログの画像の表示設定について|貼付け・リンク設定方法

おはようございます、名畑です。
最近Instagramで動画を見るのにはまっています。
1分までと短い時間ですが、短いからこそサクっと見れて楽なんですよね。
かわいい写真にも癒されてます。。。

WordPressで画像を綺麗に表示する設定をご紹介していきたいと思います。
管理画面からサイズを設定したり位置を設定したり様々な表示方法があるので参考にしてください。

アップロードの際の表示設定

画像をアップロードする際に画像の表示設定をします。
wpgo_01
画像を挿入したい場所にカーソルを置き、メディアの追加をクリックします。
wpgo_02
ファイルのアップロードからファイルをドロップ又は、ファイルを選択します。
gaaaa001
アップロード後右側の下に添付ファイルの表示設定という欄が出てきます。
gaaaa002
配置の位置を設定できます。
左右にこだわりがない場合は中央で設定しましょう。
gaaaa003

リンク先の設定です。
メディアファイル:リンク先が画像になります。この後説明する、別ウィンドウで画像を表示するにはここでメディアファイルを設定します。
添付ファイルのページ:この画像が貼られているページにリンクされます。つまり同一ページにリンクされるのであまり使いません。
カスタムURL:画像以外のリンクに繋げたい場合選択し、URLを入力します。
なし:画像にリンクを貼る必要がない場合、なしに設定します。

wpgo_06
サイズは必ずフルサイズを選択しましょう。
ここでサムネイルを選択すると自動でサイズ変更され画像が荒れてしまいますのでフルサイズを選択してください。
設定が完了したら投稿に挿入ボタンを押します。

wpgo_07
中央に画像を置くことができました。

別ウィンドウで画像を表示する方法

画像のリンクを別ウィンドウで表示させます。
上記で説明したようにアップロードの際、表示設定のリンク先をメディアファイルに設定してから投稿します。
wpgo_08
別ウィンドウに表示させたい画像をクリックしてツールバーからリンクアイコンをクリックします。

wpgo_09
するとこのようなポップが出てきます。
リンクを新しいウィンドウまたはタブで開くにチェックを入れ、更新ボタンを押して設定完了です。
ちゃんと設定されているかプレビューで確認しておきましょう!
また、リンクを外したい場合は画像をクリックで選択し、ツールバーからリンクを外すボタンを押せばすぐにリンクを外せます。

wpgo_10

画像サイズを編集

画像の編集ボタンを押して大きさの変更方法等を紹介します。
画像のサイズを綺麗に変更します。
wpgo_11画像をクリックすると右上に2つアイコンが出てきます。
右が画像削除ボタンで、左が画像を編集ボタンです。
今回は編集がしたいので左側のアイコンをクリックします。

wpgo_12画像を編集する画面が出てきます。
サイズから比率を選択すると画像を綺麗に小さく表示できます。
選択したら更新ボタンを押して設定完了です。

wpgo_13また詳細設定タブを開くとこのような画面が出てきます。
ここでもサイズが変更できます。
ピクセルを入力してサイズを変更する場合、幅と高さの比率はそのまま自動で設定されないのでご注意ください。
左上の縮小率を選んだ方が確実に綺麗に表示できます。
また画像のプロパティで枠線等も設定できます。(今回の記事の画像も枠線1pxに設定しています)
背景白に白い画像の場合は見やすいように設定してみてください。

wpgo_14下の方に行くとここでも画像にリンクを設定できます。
細かい設定がある時は詳細設定からリンクを設定してもいいかもしれません。(やっぱり簡単なツールバーからがオススメです)
設定したら一番下の更新ボタンを押しましょう!

画像テキストの設定

画像にaltという文字の情報や、キャプションといって画像の説明をつけることができます。
これをしておくと、さらに検索で表示される・画像検索で表示されるようになるので設定していきましょう。

タイトル

20170407b01

ソースのtitle属性となります。
ですがバージョン4.2以上はタグとして出力されないため検索的にも意味はありません。
ちなみに日本語で保存したファイルをアップロードすると自動で英数字に変換されてアップロードされます。

他にも画像を取り込みした際「IMG0144.jpg」等画像の名前だけ見ると何の画像がわからないものもありますので、この2つの場合は注意しましょう。
なぜかというと、Googleの画像検索で表示させたい場合、画像の保存名も名前だけ見た時に分かるようなものでないとなりません。
「book.jpg」や「ueno-cafe.jpg」等分かりやすいような画像の名前をつけてからアップロードすることに注意をおきましょう。
またGoogleが推奨している拡張子はjpg又はpngですので保存の拡張子も注意しましょう。

キャプション

20170407b02

WordPress独自に備わっている入力機能のことです。
画像の説明文を入れるのにわかりやすく表示させることができます。

20170407b03

こちらもSEO的には何も効果はありません。
画像の情報を画像の周辺に入れることはSEO的には効果はありますし必要ですが、必ずしもキャプションを使用する必要はありません。
ブログを見てくれるユーザーに画像が多いブログの場合、わかりやすく表示・説明を入れたい場合に使用しましょう。

代替

20170407b04

画像がうまく表示できない場合に表示される、画像の代わりとして記事を補うテキストとなります。
例 上野公園の桜
ソースではalt属性となります。
alt属性はSEO的に効果があるとされていますので、設定することをオススメします。
最近では目が不自由な方がWEBサイトを見た際、画像の説明を読み上げするのもこの代替テキストです。

ですが効果があるといってワードを詰め込みすぎるとスパムと判定されてしまう場合もあるので、簡潔に画像の説明文を入れるようにしましょう。
altタグから検索へひっかかるようにするポイントはこちらの記事でも紹介しております。
https://www.infact1.co.jp/staff_blog/webmarketing/24830/

説明

20170407b05

基本ソースに表示されない項目です。
画像のメモとして使用してください。
メディアライブラリー(アップロードした画像一覧)ではこの説明の部分も対象となるので、後々検索しやすいようにテキストを入れておくことも有効です。
代替テキストに入りきらないけれど、検索した時にすぐに表示されるようにテキストを設定しておきましょう。
仕様によってはテキストを表示させる項目にもなれます。

おわりに

画像の表示設定や貼付け方法を説明しました。
画像に少し手間をかけるだけでもとても見やすく検索にもひっかかりやすい記事になります。
是非ためしてみてくださいね。

  • シェア
  • twitter
The following two tabs change content below.
名畑かなえ
株式会社インファクトのディレクターです。
フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。
好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。
やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP
LINE it!