画像を使用する



画像がないWebサイトだとなんか寂しい感じがしますよね。画像を使って見栄えのいいWebサイトにしていきましょう。

ということで画像の使用方法を説明していきます。

メニューバーの「メディア」→「新規追加」からメディアのアップロード画面にいきますので、「ファイルを選択」を押して画像ファイルを選択すればアップロード完了です。画像を画面にドラッグしてもアップロード可能です。サーバーの容量なども考えて画像のサイズはあまり大きくないほうがいいかもしれません。

 

画像

 

メニューバーの「メディア」→「ライブラリ」でアップロードしてある画像の一覧を確認できます。削除などもここで行えます。

 

画像1

 

次に画像の表示方法ですが、投稿画面にある「メディアを追加」ボタンを押します。

 

記事

 

メディアを挿入する画面に移りますので、メディアライブラリから表示したい画像を選択して「投稿に挿入」ボタンを押すと画像を表示させることができます。

 

画像2

 

このように画像を表示することができます。

 

wordpress

 

ここで、上の画像を選択するとクリックして画像の表示されているページに飛ぶのを確認できます。これは画像にリンク先を指定しているってことなんです。テキストを見ますと、

→記事のサポート機能を使う

 

<a href=”http://wordpress.quickht.com/wp-content/uploads/2014/01/wordpress.png”><img alt=”wordpress” src=”http://wordpress.quickht.com/wp-content/uploads/2014/01/wordpress-300×300.png” width=”300″ height=”300″ /></a>

 

というような感じになっているはずです。これは、赤字の部分がリンク先の指定をしていて、青色の部分が単に画像の表示をしています。また、下のテキストで緑色に表示している所は画像のサイズを表しています。この数値を変えることで画像の大きさを変えることができます(この画像ファイルの名前はwordpress.pngです)。

 

wordpress-300×300.png” width=”300” height=”300

 

以上のことをふまえてプログラムを下のようにしてみました。

 

<img alt=”wordpress” src=”http://wordpress.quickht.com/wp-content/uploads/2014/01/wordpress.png” width=”200″ height=”” />

 

下の画像が表示結果です。まず、リンク先の設定をしていないためページ移動をしません。また、大きさを「width=”200″」としたため少し小さくなりました。また「height=””」と値を入れていませんが、このようにするとwidthに割合を合わせて大きさを自動調整してくれます。どちらの値も入れなかった場合にはアップロードしてある画像の大きさがそのまま表示されます。

 

wordpress

 

少し工夫をして、下のようなプログラムで画像を表示してみます。始めの画像との違いですが、赤色のリンク先の部分を変えています。

 

<a href=”http://wordpress.quickht.com/“><img alt=”wordpress” src=”http://wordpress.quickht.com/wp-content/uploads/2014/01/wordpress-300×300.png” width=”300″ height=”300″ /></a>

 

下の画像が表示結果です。クリックしてもらうとわかりますがプログラムの変更により、画像の表示ページにいかずに別のページにいくことが確認できます。

 

wordpress

 

このように画像を使ってリンク先に飛ばすということができるようになります。

こんな感じで↓

 

トップページ

 

間違ってもクリックをする方が思っていた所と違うリンク先に飛ばさないように気をつけましょう。

最後に、画像表示のプログラムを知っておけば(コピー&ペーストでOK)、投稿記事以外にもテーマ編集などで画像を利用することができるようになります。

→直接プログラムをいじってみる