岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

画像を挿入する方法|WordPressの使い方

公開日:2016年5月31日 : WordPress,wordpressの使い方

WordPressの記事に画像を挿入する方法_カバー画像

この記事では、Wordpressのブログ記事に画像を挿入する方法を説明します。
難しい操作などはありませんが、初めてWordpressを使用する方など参考にしていただければと思います。

まずは、画像を準備

アップしたい画像をPCの任意のフォルダに準備しておきましょう。暗すぎる写真、Webページのレイアウトからはみ出てしまうほど大きな画像ではいけません。画像補正やサイズの調整(Wordpressでサイズ制限をかけてある場合は省略しても可)をして保存しておきます。

ファイル名について

ファイル名は英数字

WP Multibyte Patchなどプラグインが入っていれば、日本語ファイル名でも画像を表示できますが、サーバーの引越しなどの際に不具合が出る可能性がありますので、『画像ファイル名は英数字のみ』にすることが一番良いです。

ブログ記事編集画面

画像が準備できましたら、Wordpressにログインして記事編集画面を開きます。タイトル、本文などを入力しましょう。

ブログ記事編集画面

※画面のレイアウトやアイコンはWordpressのバージョンやインストールしているプラグインなどによって異なります。

画像を挿入したい箇所にカーソルを移動する

画像が挿入する場所は、点滅しているカーソルの位置になります。

カーソル位置

メディアを追加

メディアを追加ボタンをクリックします。

ブログ記事編集画面

記事に挿入したい画像を選択

メディアを挿入

『ファイルをアップロード』というタブをクリックして、下記のどちらかの方法で挿入したい画像を選択します。
『メディアライブラリ』をクリックすると、過去にアップロードした画像を選択することができます。今回は新規画像を挿入する方法を説明してきます。挿入方法は基本的に同じです。

ファイルのアップロードには下記の2つの方法があります。

1. ファイルを画面に直接『ドロップ』

画像をドロップ

2. 『ファイルを選択』ボタンをクリックしてファイルを選択

画像ファイルを選択

画像の情報を入力

画像の情報は入力しなくてもブログ記事に画像を表示することはできますが、検索エンジンに画像の内容を伝えるためや、Wordpress内で画像を管理する際に、この情報を記入しておくと役立ちます。

画像の情報を入力
入力項目

url

ここに表示されているurlが、サーバー上に画像が保管されている場所です。

タイトル

初期設定では、画像のファイル名が自動で入ります。webサイト上では、画像にカーソルを合わせるとタイトルに入力した情報が表示されます(ツールチップ)。※Wordpress3.5以降では、初期設定では使えません。有効化にはカスタマイズが必要です。

キャプション

この項目に入力すると、Web上で画像の下に入力したテキストが表示されます。

代替テキスト(他より重要!)

htmlの『alt属性』の設定になります。他の項目の入力は必要なければ、省いて良いですが、こちらの設定だけは入力することをおすすめします。
その理由としては、alt属性には主に2つの役割(メリット)があるからです。

  • 1. 画像の読み込みに時間がかかる場合やなんらかの理由で読み込まれない場合こちらに入力したテキストが表示されます。不具合があった場合に一応どのような内容が表示されるのかを伝えることができます。
  • 2. 検索エンジンに画像の内容を伝えます。検索エンジンは画像の内容を理解することができません。そこでalt属性のテキストを利用することで、画像検索やページの内容を判断することに利用しています。SEO対策にも一定の効果があります。

説明

この項目は、Wordpress内で画像が増えた時に検索する際に使用されます。説明に画像に関係するキーワードを入れて置くと後から探す際に便利です。ちなみに説明のテキストがWed上に表示されることはありません。
※タイトル、説明に入っているテキストが、Wordpress内で画像を探す際の検索に使用されます。

添付ファイルの表示設定

ここで、画像の配置、リンク先(必要な場合のみ)、表示サイズを決めます。

配置

クリックすると、左、中央、右、なしと項目が表示されます。配置はテンプレートやホームページの作りによって使用できない場合があるので、使用したい場合はスタイルシートのカスタマイズが必要となります。なしを選択すると通常左側に配置されます。

配置

リンク先

画像をクリックした際にのリンク先を設定できます。

リンク先
  • ■なし

    なしは、画像を表示させるのみでクリックしてもなにも表示されません。

  • ■メディアファイル

    画像ファイルが別画面で表示されます。画像の表示サイズはフルサイズです。

  • ■添付ファイルのページ

    Webページに画像が表示されます。メディアファイルでは画像のみがブラウザ上に表示されますが、こちらは、ブログ記事ページのレイアウトの中に画像のみが表示されます。

  • ■カスタムURL

    任意でURLを入力することができます。

リンク先項目

サイズ

記事に使用する画像サイズを選びます。こちらも使用しているテンプレートやホームページによって変わりますが、初期設定では、サムネイル、中、フルサイズと3つの中から選択できます。(Wordpressのサーバー上では、画像をアップロードすると自動的に3つの画像が作られます。)
フルサイズを選択しておいて、後からブログ編集画面でサイズを調整することも可能です。

画像サイズ設定

設定完了_公開

『投稿に挿入』ボタンをクリックすると記事に画像が表示されます。

画像挿入後画面

『テキストモード』をクリックすると、html表示で確認・編集ができます。

編集画面テキストモード

htmlタグについては、以前の記事で内容を説明したページがありますので、詳しく知りたい方は下記ページを参考にしてください。

HTMLタグ入門【初心者向け_ホームページ作成の基本】記事ページ>>

Webページ画面

こちらが記事を保存して公開した実際のWebページの画面になります。

記事公開ページ画面

まとめ

【Wordpressの記事に画像を挿入する方法|Wordpressの使い方】いかがでしたでしょうか?
画像を挿入すること自体は難しくはありませんが、慣れていな方にとっては、設定項目などは用途がイマイチ分からないかも知れません。

お客様からそういった声を度々聞いていただので、今回記事にまとめてみました。何かのお役に立てば幸いです。
次回は画像のレイアウト、編集方法、管理方法なども記事にしていきたいと思います。
それではまた!


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています