画像の貼り方(画像のリサイズやアップロードとかも)

Publish2011/01/09(日)

Update2016/01/02(土)

画像の貼り方(画像のリサイズやアップロードとかも)

ブログやサイトに画像を貼りたいけど、「やり方がわからない!」という方はいませんか?

今回はそんな方のために、ブログやサイトに画像を貼り付けるための方法をご紹介します。
画像を貼り付けるためには基本的には以下の様なステップで対応する流れになります。

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

1.画像を用意する

まずは貼り付けるための画像を用意するところからはじめましょう。
画像は、「自分で写真をデジカメとかで撮影」してもいいですし、amanaなどの「ストックフォトで購入する」などして用意しましょう。
決してネット上から拾ってきた画像などを作者の許可なく使うとかしないでくださいね。
画像の作成者には著作権があり、画像の無断使用や複製は著作権を侵害する行為です。
使用したい場合は、権利者様に許可を得てから使用するようにしましょう。

さて、用意した画像は基本的にサイズが大きいはずです。
そのままのサイズでサイトとかに使用すると、大きすぎて見た目が不恰好になってしまいますし、サイトの表示速度に悪影響を与えます。
HTML上でサイズを指定して見た目だけ小さくする事もできますが、根本的な解決方法ではありません。
閲覧してくれた人だけでなく、検索エンジンにもやさしくないので、画像を使用する場合は画像サイズを変更して対応しましょう。

2.画像を編集する

画像編集の大事さは分かっていても、変更方法が難しくてよくわかんないという理由で詰まっている人が多いかと思います。
実際によくその相談もされていますし。
今回は、初心者でも比較的簡単に使えるであろうソフトを紹介します。
それが「縮小専用」です。
このフリーソフトを使えば、誰でも簡単に画像のリサイズができちゃいます。
ソフトの使い方はダウンロード先のサイトに載っているのでそちらを見てくださいね。

3.画像をアップロードする

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

少し話が横道にそれますが、ファイルの命名ルールを設定しておく事をおすすめします。
たとえば2011年1月9日に撮影した椿の写真の場合とかだと
「20110101_tubaki_01.jpg」
のような名前にしておけば何月何日に撮影した何の写真なのかがすぐに分かるので、データを管理する場合も楽です。

話を戻します。画像のアップロードの用意ができたらいよいよ画像をアップロードします。
画像をサイトにアップロードする方法は色々ありますが、今回はFTPと呼ばれるサーバーに直接画像をアップロードする方法をご紹介します。
FTPを使用する場合はサーバーのIDとかパスワードをFTPクライアントと呼ばれるソフトに設定して、サーバーに接続してファイルを転送します。
サーバーのFTP情報はサーバー管理者かサイトの制作者に聞けば、たいがい知っているので分からない方は聞いてみるといいと思います。
そのFTPクライアントソフトについては詳しくは違う機会で説明しようと思いますがよくあるものだとFFFTPFilezillaが無料で使えるソフトです。
そのソフトをお使いのパソコンにインストールして、環境設定を行うことで画像をサーバーにアップロードできるようになります。

4.画像をHTMLに追記する

画像をアップロードする事ができたら次はいよいよ画像をサイトに埋め込みましょう。
(やっと本編ですね…長くなってしまってすいません…。)

埋め込むタグは以下の様な感じです。

<img src="http://funnis.net/html.jpg" />

「img src」の先に画像の固有のURLを指定してあげるだけです。
画像の固有URLは、サーバーに画像をアップロードした際にどのサイトのどのフォルダにアップロードしていたかを確認し、URL欄に直接URLを記入するとアクセスして確認できます。
この記述をHTMLに追記すれば、画像が表示されます。
(公開の仕方はサイトやブログによって異なるのでそれぞれの公開する方法に合わせて公開してください。)

ここまで読んでいただいて分かるように、画像を表示するタグはそれほど難しくありません。
それよりも画像の編集やサーバーへのアップロードの方がはるかに難しいです。
なので、難易度は初心者の人にはそれなりに高くなります。
自分でできそうにないと感じた場合は、サイト制作者に依頼するほうが早い場合もありますので、状況に応じて判断された方がいいと思います。
ただ、この知識もサイトを運営する上で知っておいて損のない知識なので、実際に自分がするかどうかはおいておき、覚えておいた方がいいのは間違いありません。
いきなり覚えようとせず、何回か実際にやってみて「体で覚える」のがいいと思います。

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

ふにすでぐち

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

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

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

関連記事

  • 検索キーワードの種類とそれを意識したストーリーを考えよう検索キーワードの種類とそれを意識したストーリーを考えよう サイトを見てもらうための方法のひとつとして、Googleの検索からサイトへのアクセスを獲得する方法があります。 一般的にSEOと呼ばれるものですが、今回はSEOのテクニックではなくて、ユーザーから見た場合のサイトへの到達理由とその意味を考えてみたいと思います。 キーワード検索の種類 まず、検索サイトでは特定のキーワードを入力する事でユーザーが情報を検索できるわけ […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]
  • StyleGuideを活用しようStyleGuideを活用しよう 今回はサイト運用をよりクオリティの高い状態で維持させつつ、作業効率の向上も行える可能性をもつ「StyleGuide」について説明します。 StyleGuideとは StyleGuideを使用するメリット StyleGuideをテストに使用する StyleGuideを作るの便利なStyle Guide […]
  • 検索エンジンへのモバイル対策と考え方、チェックツール検索エンジンへのモバイル対策と考え方、チェックツール 先日Googleのオフィシャルブログより、検索結果に関する重大と思える発表がありました。 それがこちらです。 Finding more mobile-friendly search […]
  • 検索順位を確認するときはChromeのシークレットモードを使う検索順位を確認するときはChromeのシークレットモードを使う サイトを運営していて、検索からの流入が気になる人は多いと思います。 流入が気になるという事は、設定したメインのキーワードの順位も気になるはずですよね。 そこで色々なツールで順位を確認するかと思いますが、自身で目視で確認したいという人はGoogleChromeのシークレットモードを使って検索しましょう。 シークレットモードって何? GoogleChromeを使っ […]
  • サイトを公開する前後にチェックすることリストサイトを公開する前後にチェックすることリスト 今日はサイトの公開前後に確認する事をまとめる事にします。 作ってチェックしたけど、実は漏れてたってことがないようにしたいし、しないといけないですよね。 では目次。 GoogleAnalytics FacebookのOGP Twiitercard Google+のrel="author" ページタイトル description Webマスターツールへの […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

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

このブログについて

ふにすのお仕事

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

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

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

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

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

Category

Month