画像やリンクをホームページに設定する方法

Publish2011/01/09(日)

Update2017/07/10(月)

ホームページを運用する上でよくある作業が、「リンクを設定する」「画像を埋め込む」作業になります。慣れてしまえば難しくはありませんが、最初は何をすればいいのかわかりにくいと思うので、作業手順を紹介します。

画像の埋め込み方法

まず、画像の埋め込み方法について解説します。
ブログやホームページに画像を掲載したいけど、「やり方がわからない!」という方はご確認くだしさい。
画像を貼り付けるためには基本的には以下の様な手順で対応する流れになります。

  1. 画像を用意する
  2. 画像のリサイズ/編集をする
  3. 画像をアップロードする
  4. 画像をHTMLに追記する

画像を用意する

まずは貼り付けるための画像を用意しましょう。
画像は、「自分で写真をスマホやデジカメなどで撮影」してもいいですし、amanaなどの「ストックフォトで購入する」などして用意していただいても構いません。
ですが、決してネット上から拾ってきた画像などを作者の許可なく使うということはしないようにしてください。
画像の作成者には著作権があり、画像の無断使用や複製は著作権を侵害する行為です。
ふにすでも画像の無断使用などをされていることを見かけたら、お客さんにきちんと状況を説明し、改善していただくようにしていただいています。
どうしてもその画像を使用したい場合は、権利者様に許可を得てから使用するようにしましょう。
もちろん掲載許可が下りるまでは、ホームページ上で公開してはいけません。
このブログで紹介している下記記事などを参考に、画像をご用意いただくとよいかと思います。

画像のリサイズ/編集をする

スマホなどで撮影、ストックフォトで購入などしてご用意いただいた画像ですが、基本的にはホームページ上で使用するにはサイズが大きいはずです。
そのままのサイズでホームページに使用すると、大きすぎて見た目が不恰好になってしまいますし、サイトの表示速度に悪影響を与えます。
HTML上でサイズを指定して見た目だけ小さくする事もできますが、根本的な解決方法ではありません。
閲覧してくれた人だけでなく、検索エンジンにもやさしくないので、画像を使用する場合は画像サイズを変更して対応しましょう。
画像のサイズを変更する場合は「リサイズ」、画像自体の明るさやコントラストの調整を行うことを「編集」と言いますが、これらの作業は専用のソフトなどが必要です。
こちらのブログでも過去何個かサービスやソフト/アプリを紹介しておりますので、参考ください。

画像をアップロードする

ソフトなどを使ってホームページ用に画像を変更させたあとは、画像をサーバー上にアップロードします。
アップロードする前に確認しておかないといけないのが、画像のファイル名と拡張子です。
ファイル名は半角英数になっていて(全角とかだとうまく表示されない場合があります。)、きちんと拡張子が「.jpg」「.gif」「.png」のいずれかになっているのかを確認してください。
ホームページ用に使う画像は、基本的にはこの3つの種類の画像を使用します。
また、アップロードする先に同じ名前のファイルがないかも確認しておきましょう。
同じ名前のファイルがサーバー上にある場合、上書きされて元のファイルが消えてしまいますので注意しましょう。

少し話が横道にそれますが、ファイルの命名ルールを設定しておく事をおすすめします。
たとえば2011年1月9日に撮影した椿の写真の場合とかだと
「20110101_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タグを適用させているだけですので、この基礎さえ分かっていれば全ての状況でリンクを設定することができるようになります。

まとめ

ホームページ上に「画像を貼る」「リンクを設定する」というのは、ホームページを運用していく上で基礎的な知識になります。
ボタンやショートカットなどを利用していただくのは全く問題ないですが、その原理を知っておくとどのような環境下でも適応することができますので、ホームページを運営される方全てに知っておいて欲しい知識だと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ふにすWeb相談所

ソーシャルとか。

NewEntry

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month