画像の拡大縮小/配置/回転/リンク設定/代替テキスト

写真を使ってページに追加した画像に対して、大きさを拡大・縮小したりリンクを設定する方法について解説します。なお写真をページに追加する方法については「写真(画像)の追加」を参照して下さい。

(2022 年 04 月 13 日公開 / 2022 年 04 月 13 日更新)

画像の大きさを拡大・縮小

画像をアップロードした時、ページ内に収まる大きさの場合は元の大きさとなり、ページよりも画像の幅が大きい場合にはページに合わせて縮小されて表示されます。アップロードした画像は後から大きさを変更できます。画像の「右」「下」「右下」に画像の大きさを変更するための●が表示されています。

p7-1

この●をマウスでドラッグすることで画像の大きさを変更することができます。なお画像の縦横の比率は変わらないので、どの位置にある●を使っても同じです。下記では右下にある●を左上の方にドラッグして大きさを小さくしています。

p7-2

「保存」すれば、変更した大きさで画像が表示されます。

p7-3

また画像下のツールバーを使って画像を拡大縮小することもできます。「拡大」ボタンをクリックすると画像の大きさが拡大します。(画像の本来の大きさよりも拡大はできません)。

p7-4

「縮小」ボタンをクリックすると画像の大きさが縮小します。(縮小可能な限界はあります)。

p7-5

「ページに合わせる」ボタンをクリックするとページの中で表示可能な最大の大きさまで画像が拡大します。(画像の本来の大きさよりも拡大はできません)。ページに合わせるを実際に試してみます。

p7-6

ページに合わせるボタンを実際にクリックしてみます。次のようにページの中で表示可能なサイズまで拡大されて表示されました。

p7-7

画像の配置(左揃え、中央揃え、右揃え)

画像をページの中でどのように配置するのか(水平方向)を指定することができます。デフォルトでは左揃えになっています。

p7-8

左揃えの場合、画像が左側に寄って表示されます。

p7-9

中央揃えにした場合、画像は中央(水平方向)に表示されます。

p7-10

実際に試してみると次のように中央に表示されます。

p7-11

右揃えにした場合、画像が右に寄って表示されます。

p7-12

画像の回転(右回り、左回り)

画像を回転させて表示させることができます。左回りに回転させた場合、反時計回りに90度回転します。

p7-13

実際に試してみると次のよう90度回転して表示されます。

p7-14

回転の場合はボタンを1回クリックする毎に回転が行われます。先ほどの状態からもう一度左回りに回転をクリックするとさらに90度回転して表示されます。

p7-15

右回りに回転させた場合、時計回りに90度回転します。

p7-16

画像がクリックされた時に拡大表示するかどうか

本来の大きさよりも小さく表示している場合に限りますが、ページに表示された画像を閲覧者がクリックした時に拡大表示するかどうかを設定することができます。デフォルトではオフになっており、画像をクリックしても何も起こりません。

拡大表示をオンにしたい場合には、ツールバー上の「クリックして拡大させる」ボタンをクリックして下さい。

p7-17

それでは実際に試してみます。Jimdoにログインしていない状態でページを表示し、拡大表示をオンに設定した画像をクリックして下さい。

p7-18

画像が拡大されて表示されます。(ただ画像のオリジナルの大きさで表示されるというわけではないようです)。

p7-19

リンクの設定(内部リンク、外部リンク)

画像に対してリンクを設定することができます。リンクは同じサイト内の別のページ(内部リンク)と外部のサイトへのリンクが選択できます。リンクを設定するにはツールバーの「写真にリンク」ボタンをクリックして下さい。

p7-20

リンク先を設定する画面が表示されます。

p7-21

同じサイト内の別のページへのリンクを設定する場合は「内部リンク」タブをクリックし、その下にあるドロップダウンメニューをクリックして下さい。

p7-22

作成済みの他のページの一覧が表示されますので、リンクを設定したいページをクリックして下さい。

p7-23

画面右側の「リンクを設定」と書かれた個所をクリックすればリンクの設定は完了です。

p7-24

-- --

外部のサイトへリンクを設定する場合は「外部リンクかメールアドレス」タブをクリックし、下のテキストボックスに外部リンクであればURL、メールアドレスであれば user@example.com のようなメールアドレスを入力して下さい。

p7-25

内部リンクの場合と同じように画面右側の「リンクを設定」と書かれた個所をクリックすればリンクの設定は完了です。

-- --

なお画像に設定したリンクを解除したい場合には、ツールバー上の下記ボタンをクリックして下さい。画像に設定されていたリンクが解除されます。

p7-26

キャプションと代替テキストの設定

画像にキャプションと代替テキストを設定した場合には、ツールバー上の「キャプションと代替テキスト」ボタンをクリックして下さい。

p7-27

サブタイトル(キャプション)と代替テキストを指定する画面が表示されます。

p7-28

今回は次のように指定してみました。

p7-29

キャプションに設定したテキストは画像の下に表示されます。代替テキストは画像のALT属性に値が設定されます。

p7-30

-- --

説明は省略しますが他にも「Pinterestでのシェアを許可する」かどうかを設定することができます。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。