画像やリンクをホームページに設定する方法
Publish2011/01/09(日)
Update2021/01/22(金)
ホームページを運用する上でよくある作業が、「画像を埋め込む」「リンクを設定する」作業になります。慣れてしまえば難しくはありませんが、最初は何をすればいいのかわかりにくいと思うので、作業手順を紹介します。
画像の埋め込み方法
まず、画像の埋め込み方法について解説します。
ブログやホームページに画像を掲載したいけど、「やり方がわからない！」という方はご確認くだしさい。
画像を貼り付けるためには基本的には以下の様な手順で対応する流れになります。
- 画像を用意する
- 画像のリサイズ/編集をする
- 画像をアップロードする
- 画像をHTMLに追記する
画像を用意する
まずは貼り付けるための画像を用意しましょう。
画像は、「自分で写真をスマホやデジカメなどで撮影」してもいいですし、「ストックフォトで購入する」などして用意していただいても構いません。
ですが、決してネット上から拾ってきた画像などを作者の許可なく使うということはしないようにしてください。
画像の作成者には著作権があり、画像の無断使用や複製は著作権を侵害する行為です。
ふにすでも画像の無断使用などをされていることを見かけたら、お客さんにきちんと状況を説明し、改善していただくようにしていただいています。
どうしてもその画像を使用したい場合は、権利者様に許可を得てから使用するようにしましょう。
もちろん掲載許可が下りるまでは、ホームページ上で公開してはいけません。
このブログで紹介している下記記事などを参考に、画像をご用意いただくとよいかと思います。
画像のリサイズ/編集をする
スマホなどで撮影、ストックフォトで購入などしてご用意いただいた画像ですが、基本的にはホームページ上で使用するにはサイズが大きいはずです。
そのままのサイズでホームページに使用すると、大きすぎて見た目が不恰好になってしまいますし、ホームページの表示速度に悪影響を与えます。
HTML上でサイズを指定して見た目だけ小さくする事もできますが、根本的な解決方法ではありません。
閲覧してくれた人だけでなく、検索エンジンにもやさしくないので、画像を使用する場合は画像サイズを変更して対応しましょう。
画像のサイズを変更する場合は「リサイズ」、画像自体の明るさやコントラストの調整を行うことを「編集」と言いますが、これらの作業は専用のソフトなどが必要です。
こちらのブログでも過去何個かサービスやソフト/アプリを紹介しておりますので、参考ください。
- 画像の切り抜きやリサイズなどの加工ができる「fotor」
- いてける画像編集ツール「Pixlr Editor」
- イラスト・挿絵・アイコンなどの作成に使える「AutoDraw」
- 画像編集ができるiPhoneアプリ「Snapseed」
- Web用画像のファイルサイズを抑えるメリットと使えるツール【検証データ付き】
画像をアップロードする
ソフトなどを使ってホームページ用に画像を変更させたあとは、画像をサーバー上にアップロードします。
アップロードする前に確認しておかないといけないのが、画像のファイル名と拡張子です。
ファイル名は半角英数になっていて（全角とかだとうまく表示されない場合があります。）、きちんと拡張子が「.jpg」「.gif」「.png」のいずれかになっているのかを確認してください。
ホームページ用に使う画像は、基本的にはこの3つの種類の画像を使用します。
また、アップロードする先に同じ名前のファイルがないかも確認しておきましょう。
同じ名前のファイルがサーバー上にある場合、上書きされて元のファイルが消えてしまうので注意しましょう。
少し話が横道にそれますが、ファイルの命名ルールを設定しておく事をおすすめします。
たとえば2021年1月9日に撮影した椿の写真の場合とかだと
「20210109_tubaki_01.jpg」
のような名前にしておけば何月何日に撮影した何の写真なのかがすぐに分かるので、データを管理する場合も楽です。
話を戻します。画像のアップロードの用意ができたら、いよいよ画像をアップロードします。
画像をサイトにアップロードする方法は色々ありますが、今回はFTPと呼ばれるサーバーに直接画像をアップロードする方法を紹介します。
FTPについては、下記記事で詳しく手順を紹介しておりますので、ご確認ください。
サーバーへのデータの転送・アップロード方法。FTPの使い方・基礎知識
画像をHTMLに追記する
画像をアップロードする事ができたら、次はいよいよ画像をサイトに埋め込みましょう。
埋め込むタグは以下の様な感じです。
<img src="https://funnis.net/html.jpg" />
「img src」の先に画像の固有のURLを指定することで、画像を読み込むことができます。
画像の固有URLは、サーバーに画像をアップロードした際に、ホームページのどのフォルダにアップロードしていたかを確認し、URL欄に直接URLを記入するとアクセスして確認できます。
なお、公開の方法はFTPが使えない場合など、利用するサービスやブログによって異なる場合があります。
その場合は、それぞれのサービスで推奨されている方法に合わせて公開してください。
ここまで読んでいただいて分かるように、画像を表示するだけであれば、方法はそれほど難しくありません。
それよりも画像の編集やサーバーへのアップロードの方がはるかに難しいです。
なので、難易度は初心者の人にはそれなりに高くなります。
自分でできそうにないと感じた場合は、作成者に依頼するほうが早い場合もありますので、状況に応じて判断された方がいいと思います。
ただ、この知識もホームページを運営する上で知っておいて損のない知識なので、実際に自分がするかどうかはおいておき、覚えておいた方がいいのは間違いありません。
いきなり覚えようとせず、何回か実際にやってみて「体で覚える」のがいいと思います。
補足：WordPressの場合の手順
よくいただく質問で、WordPressの場合の手順を質問いただきますが、WordPressの場合の手順は別の記事で対応手順を書きましたので、下記URLをご確認ください。
メディアからファイルをアップロードする
リンクの設定方法
次に、ホームページから他のページやファイルに対してリンクを貼る手順を説明します。
ホームページにリンクを貼る手順
ホームページにリンクを貼る。
実はこのリンクという機能こそが、インターネットの原点です。
元々インターネットという概念がない世界では、ファイルは手元にあるドキュメントだけでした。
そのファイル自体を回線でつないで相互に閲覧できるようにしたというのがインターネットの始まりといわれています。
世界の新しい価値観になったインターネットの誕生が、「リンク」が最初だったと考えると実に感慨深いものですよね。
余談はここまでにして、実際にリンクをさせるタグはこういう風に書きます。
<a href="リンク先">リンク先を説明する文字列</a>
リンクタグは「aタグ（アンカータグ）」といいまして、簡単に説明すると「a href」にイコールを繋ぎ、""の中にリンクさせたいURLを指定してあげて、囲込みの中にリンクさせたいテキストや画像などを設定することでリンクとして機能します。
たったこれだけでリンクを貼ることができるんです。
覚えておくと便利です。
余談ですが、リンクさせるテキストや画像を変えるだけで、そのリンクのクリック率もけっこう変わります。
WordPressやその他のCMS、ウェブサービスなどではボタンひとつでリンクを設定することもできますが、内容はaタグを適用させているだけですので、この基礎さえ分かっていれば全ての状況でリンクを設定することができるようになります。
まとめ
ホームページ上に「画像を貼る」「リンクを設定する」というのは、ホームページを運用していく上で基礎的な知識になります。
ボタンやショートカットなどを利用していただくのは全く問題ないですが、その原理を知っておくとどのような環境下でも適応することができますので、ホームページを運営される方全てに知っておいて欲しい知識だと思います。
