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

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が公開しているウェブマスターアカデミーを紹介します。 サイトをこれから作ろうという場合、まず何からしていいものやらと思うことになりますが、その手順をGoogleが教えてくれるコンテンツという非常に効果的かつ有益な内容になっています。 この内容をしっかり学習することで、Webサイトの作成、運用をスムーズに行うことができるよう […]
  • Webサイトの運用にかかせないテスト環境構築のススメWebサイトの運用にかかせないテスト環境構築のススメ 今日は、サイト運用をより効果的に行うための方法の一つとして僕も実践している「テスト環境を作成する」ことについて書きます。 Webサイトのテスト環境を作る理由とメリット まず、テスト環境を作るというと、「そんなのめんどくさい」とか、「作る側の人だけでしといてくれたらいい」とか、そういう意見をいただくこともあるのですが、テスト環境は作成して使っていくことで多くのメリッ […]
  • 会社概要のページと会社沿革のページはけっこう大切会社概要のページと会社沿革のページはけっこう大切 最近サイトを運用する事もしてますが、実は作る仕事の方が今は多くて、サイトの制作をけっこうしているんですが、作っているコンテンツで会社概要や会社の歴史コンテンツを編集する機会があってそこで感じた事を今日は書こうと思います。 その作っているサイトはとある会社のサイトなんですが、特徴のある商品を1世紀以上売っているようなところで、けっこうな歴史があります。 なので、会社概要ペー […]
  • ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。 今回はホームページ/Webサイトのアクセスアップを行う際の基礎知識として、サイトへのアクセスが発生する流入経路にはどの様なものがあるのかを考察します。 単純にサイトにアクセスを集めれば売上が上がるということではありませんが、どの様な人に見てもらうかや、ホームページ/Webサイト上での成果を出すためには、アクセスをどこからどうやって集めるのかということを知っておくことは必要で […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]
  • キャッシュよさらば【Webサイトのキャッシュを削除する方法のまとめ】キャッシュよさらば【Webサイトのキャッシュを削除する方法のまとめ】 今日はキャッシュの削除方法を紹介します。 え?キャッシュ?今さら?とか思わないでください。 キャッシュに関する一般の人の理解は未だかなり低く、そもそもキャッシュとは何か?という事を知らない人がまだまだたくさんいます。 仕事上色々なWebに関する相談をいただくのですが、その中でもキャッシュに関する質問はいつまでたっても減りません。 「それキャッシュが原因ですよ」 […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

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

このブログについて

ふにすのお仕事

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

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

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

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

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

Category

Month