画像のサイズ・配置・挿入

Wordpressの使い方5

こちらのページでは「画像のサイズ」「画像の配置」「画像の挿入(挿入済み画像の設定変更と削除)」についてご説明させていただきます。
(当社で2015年以降に作成させていただいたWordpressサイトを対象としています。)

WordPressでは画像の挿入も簡単に行うことができます。

画像のサイズ

画像のサイズはサムネイル<中サイズ<大サイズ<フルサイズから選択することができます。(任意のサイズに設定することも可能ですが、ここでは省略させていただきます。)

大サイズとフルサイズが同じ大きさに表示されていますが、これはコンテンツの幅を超える大きさの場合は縮小されて表示されるようになっているためです。

サムネイル

画像の表示例-サイズの種類 SAMPLE

中サイズ

画像の表示例-サイズの種類 SAMPLE

大サイズ

画像の表示例-サイズの種類 SAMPLE

フルサイズ

画像の表示例-サイズの種類 SAMPLE

画像のサイズについてはこちらでも書いています。→自分でホームページが更新できる!? [画像の表示例-サイズの種類]

画像の配置

画像は「なし」「左」「中央」「右」から配置場所を設定することができます。

「左」または「右」を選択するとその後の文章や画像がその横に配置されます。以下はその例です。

配置-なし

画像の表示例-サイズの種類

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

配置-左

画像の表示例-サイズの種類

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

配置-中央

画像の表示例-サイズの種類

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

配置-右

画像の表示例-サイズの種類

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

回り込みの解除

画像の表示例-サイズの種類 SAMPLE

写真の横に配置したい文章です。この文章が短く、写真の高さに満たない場合があります。

この文章は写真の横に配置したくありません。回り込みの解除を行う必要があります。

解除方法

Wordpress 画像の回り込みの解除

  1. 回り込みを解除したい文章をドラッグで選択した状態にします。
  2. ツールバーにある「Quicktags」のプルダウンメニューから「Clear」を選択します。
解除方法を実行すると・・・

画像の表示例-サイズの種類 SAMPLE

写真の横に配置したい文章です。この文章が短く、写真の高さに満たない場合があります。

この文章は写真の横に配置したくありません。回り込みの解除を行う必要があります。


 

上記の解除方法は2015年以降に当社でWordpressを利用してホームページを作られた方を対象としており、Wordpressのもともとの機能ではありません。


 

画像の配置についてはこちらでも書いています→自分でホームページが更新できる!? [画像の表示例-標準的な配置]

画像の挿入

画像のサイズと配置につい画像のアップロードサイズに制限がありますので、あまりに大きなサイズの画像はアップロードできないことがありますのでご注意ください。(アップロードできるサイズはご利用になられているサーバーの環境で異なります。)

1.「メディアを追加」を選択します。

Wordpress 画像の挿入1

2.ファイルをアップロードします。

wp-manual005_2

3.「添付ファイルの表示設定-配置」で「なし/左/中央/右」から選択します。

Wordpress 画像の挿入3

4.「添付ファイルの表示設定-リンク」で「なし/メディアファイル/添付ファイルのページ/カスタムURL」から選択します。

※画像をクリックして拡大表示するように設定したい場合は「メディアファイル」を選択してください。

※画像をクリックして他のページにリンクしたい場合は「カスタムURL」を選択し、リンク先のURLを入力してください。

Wordpress 画像の挿入4

5.「添付ファイルの表示設定-サイズ」で「サムネイル/中サイズ/大サイズ/フルサイズ」から選択します。

Wordpress 画像の挿入5

6.「投稿に挿入」を選択します。

Wordpress 画像の挿入6

すでにアップロード済みの画像を挿入したい場合

1.「メディアを追加」を選択します。

Wordpress 画像の挿入1

2.「メディアライブラリ」から挿入したい画像を選択します。

Wordpress 画像の挿入7

3.前述した「3〜5」の設定を行い、「6.投稿に挿入」で完了です。

挿入済み画像の設定変更

挿入した画像の配置やサイズ、リンクの設定を変更したい場合は以下の手順で変更することができます。

配置の変更

1.画像を選択します。

2.表示されたメニューから希望の「配置」のアイコン(左から左寄せ/中央揃え/右寄せ/なし)を選択します。

Wordpress 挿入済み画像の配置の設定変更

サイズの変更

1.画像を選択します。

2.表示されたメニューから「編集」アイコンを選択します。

Wordpress 挿入済み画像のサイズの設定変更

3.「設定を表示」の「サイズ」で希望のサイズに変更し、「更新」ボタンで設定を反映させます。

Wordpress 挿入済み画像のサイズの設定変更-2

リンク先の変更

1.画像を選択します。

2.表示されたメニューから「編集」アイコンを選択します。

Wordpress 挿入済み画像のサイズの設定変更-1

3.「設定を表示」の「リンク先」で希望のリンク先に変更し、「更新」ボタンで設定を反映させます。

Wordpress 挿入済み画像のリンク先の設定変更

挿入済み画像の削除

1.画像を選択します。

2.表示されたメニューから「削除」アイコンを選択します。

Wordpress 挿入済み画像の削除

お問い合わせフォーム