スマートフォン用の表示で見る

画像を貼ってみる

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

imgタグを書く

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

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

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

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

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

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

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

  1. 過去日記に画像を登録
  2. 登録した画像のアドレスを見る
    • http://d.hatena.ne.jp/images/diary/ユーザーID/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;}』と記入します。

タグを使うに戻る← | →フォームを使ってみるに進む