ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1908-01-03画像を貼ってみる

画像を貼ってみる

imgタグを書いて画像を貼る方法です。ヘッダやフッタで使えますし、日記に登録する1日1枚の画像以外にも、画像が表示できるようになります。

まず画像のアドレスを調べる

インターネット上の画像にはアドレスがあります。画像のアドレス(URL)をブラウザで見るには、以下のような方法があります。

  1. その画像を右クリック(Windows)したりcontrolキーを押しながらクリック(Mac)したりしてメニューを表示させる
  2. “画像を開く”などを選んで画像だけの画面を表示させる
  3. アドレスバーに画像ファイルのアドレスが表示される

はてなダイアリーガイドのロゴ画像

上の画像で試してみると、『http://d.hatena.ne.jp/dav/guide/images_sugio/hatena_bnr_h2.gif』がこの画像のURLだとわかります。

  • 【注意/表示できない】あなたがパソコンに保存しているだけの画像はimgタグで表示することはできません。「ネット上に公開された画像」である必要があります。あなたの契約するプロバイダが提供するホームページサービスや、各種ウェブスペース、または過去日記に登録した画像などをご利用ください。
  • 【注意/表示できない】ジオシティーズは現在、外部のサイトからイメージを呼び出せない仕様になっています。ジオシティーズでアップロードした画像を、はてなダイアリーで表示させることはできません。
  • 【注意/自分にしか見えない】ログインしないと閲覧できないようなサイトにアップした画像はたいてい、(自分には見えても)一般の人に表示されないのでご注意ください。

imgタグを書く

画像のアドレスを以下のような書式でimgタグの中に書くと、画像が表示できます。

<img src="画像のアドレス">

のようにします。たとえば

<img src="http://d.hatena.ne.jp/dav/guide/images_sugio/hatena_bnr_h2.gif" alt="はてなダイアリーガイドのロゴ画像">

日記や、ヘッダやフッタに上のように入力すると、画像が表示されるでしょう。alt="○○"というのは、画像が表示されないときや画像が表示されない環境で読んでいる人のための文章、代替文です。書いておくと万人向けになりますが、言葉では代替しようがないような場合はなくてもかまいません。

  • 【注意/著作権侵害】自分以外のサイトの画像を、無断で自分の日記で表示するのは著作権の侵害行為になり得ます。他人の画像を複製・加工したものをアップロードした場合も同様です。著作権侵害は親告罪といって著作権者自身から訴えられなければ罪に問われませんが、訴えられてもおかしくない行為です。あきらかな侵害行為と認められる場合ははてな利用規約により、はてなの判断で削除されることがあります。
  • 【補足】「はてなダイアリー共有フォルダ」にはユーザー共有でだれでも使ってよいと提供されたアイコン等の画像が納められています。これは著作権を気にせず利用できます。

過去日記に登録した画像を利用する

1日に複数の画像を載せたいときや、日記のデザインに用いる画像があるとき、(はてなフォトライフを使うのが一般的だとは思いますが)過去日記に登録した画像を利用する方法もあります。とくに過去でなくても、どこか空いている日付ででもできます。

  1. 過去日記に画像を登録
  2. 登録した画像のアドレスを見る
    • http://d.hatena.ne.jp/images/diary/ユーザー名/2000-01-01.jpg のようなアドレスです。
  3. 表示したいところに、imgタグで貼付ける
    • 日記の中で使う時は、<img src="http://~~" alt="代替文" class="photo">のようにclass="photo"を入れておくと、普通に登録した画像と同じように配置されます(テーマ利用時)。
  • 【関連ガイド】スタイルシートに『body{background-image:url("画像のアドレス");}』のように書いて、日記全体の背景にすることもできます。詳しくは応用編「ページ全体の見栄えを変えてみよう2」をご覧ください。

画像リンクを作る

imgタグをaタグで囲むと、画像リンクになります。

<a href="リンクするアドレス"><img src="画像のアドレス" alt="あれば代替文"></a>

のようにします。たとえば

<a href="http://www.hatena.ne.jp/"><img src="http://d.hatena.ne.jp/images/hatenade.gif" alt="はてな"></a>

はてな

になります。

  • 【補足】ブラウザによって画像に枠線が出ます。枠線を表示したくない場合は、詳細設定でスタイルシートに『img {border: none;}』と記入します。

sugiosugio2004/10/08 08:29このページのガイドで疑問の残った方は、ここにコメントをお願いいたします。その他よろしければご指摘ください。

 | 

ホームページ制作