たった1行のHTMLコードで、ほぼすべてのウェブサイトにクリック可能な画像を追加できます。必要なのは、画像につけるURLとウェブサイトのURL2つだけです。

押さえておくべきこと

  • <a href="https://www.wikihow.com">wikiHow</a>というHTMLコードでwikiHow.com へのハイパーリンクが作成され、 「wikiHow」がクリック可能になります
  • リンクのクリック可能な部分を「wikiHow」という単語ではなく写真にしたい場合は、これを<img src="full-path-to-image.jpg"> というHTMLタグに置き換えます
  • この例では、正しいコードは次のようになります。<a href="https://www.wikihow.com"><img src="full-path-to-image.jpg"></a>

方法 1
方法 1 の 2:
HTMLコードを書く

  1. 1
    HTMLファイルを作成する テキストエディタを開き、新規作成します。index.htmlというファイル名で保存します。
      • テキストエディタは何でも構いません。Windowsのメモ帳やMac OS Xのテキストエディットも使えます。
      • HTML用のテキストエディタを使いたい場合、WindowsやMac OS X、Linux対応のテキストエディタAtomをこちらからダウンロードしましょう。
      • テキストエディットを使う場合、HTMLファイルを書き始める前にフォーマットメニューをクリックし、「標準テキストにする」をクリックします。これは、ウェブブラウザでHTMLファイルがきちんと読み込まれるための設定です。
      • Microsoft Wordなどのワードプロセッサは、HTMLを書くのに適していません。目に見えない文字やフォーマットが含まれ、HTMLファイルを崩し、ウェブブラウザで正確に表示されなくなるからです。
  2. 2
    基本のHTMLコードをコピー&貼り付けする 下のHTMLコードを選択してコピーした後、index.htmlファイルに貼り付けます。
    <a href="DESTINATION URL"><img src="IMAGE URL" /></a>
    
  3. 3
    画像のURLを探す インターネットで画像を検索し、画像を右クリックします。ブラウザの種類によって、「画像のURLをコピー」「画像アドレスをコピー」「イメージのアドレスをコピー」をクリックします。
      •FirefoxとInternet Explorerは「画像のURLをコピー」、Chromeは「画像アドレスをコピー」、Safariは「イメージのアドレスをコピー」と表示されます。
  4. 4
    画像のURLを貼り付ける index.htmlファイルに戻り、マウスを使って「IMAGE URL」をクリック&ドラッグして選択し、CTRL + Vで画像のURLを貼り付けます。
  5. 5
    リンク先のURLを追加する index.htmlの「DESTINATION URL」を削除し、 https://www.google.com と入力します。
      •リンク先のURLは何でも構いません。
  6. 6
    HTMLファイルを保存する
  7. 7
    ウェブブラウザでHTMLファイルを開く index.htmlファイルを右クリックし、好きなウェブブラウザで開きます。
      • ブラウザに画像が表示されない場合、テキストエディタのウィンドウで、index.htmlの画像ファイル名が正しく入力されているか確認しましょう。
      • ブラウザに画像ではなくHTMLコードが表示される場合、index.htmlファイルがリッチテキスト形式で保存されています。別のテキストエディタを使ってHTMLファイルを作成してみましょう。
    広告

方法 2
方法 2 の 2:
HTMLコードを理解する

  1. 1
    アンカータグを理解する HTMLコードは開始タグと終了タグで構成されています。<a href="">タグが開始タグ、</a>が終了タグです。これはアンカータグと呼ばれ、ウェブページにリンクを貼るために使われます。[1]
    • <aは、ブラウザにリンクの表示を指示します。 hrefは「HTML reference」の略語で、=" "の間の文字すべてをリンクにするようブラウザに指示します。2つのクオーテーションマークの間にはどんなURLでも入力できます。
    • </a>はブラウザにアンカータグを閉じたことを伝えます。
    • <a href=""></a>の間に文字を追加した場合、ウェブページ上でその文字がクリック可能なリンクになります。例えば、<a href="https://www.google.com">Google</a> と書くと、Googleへのリンクを作ることができます。
  2. 2
    画像タグを理解する <img>タグは終了タグが不要なタグです。<img src="" />または<img src=""></img>と書けば問題ありません。[2]
    • <imgタグは、ブラウザに画像を表示するように指示します。srcは「source」の略語で、=はブラウザに" "の間の文字を読みそこから画像を取得するように指示します。
    • />は、ブラウザに画像タグを閉じるよう指示します。
    • 例えば、{{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}}と書くと、そのURLにある画像が取得されウェブブラウザに表示されます。
  3. 3
    コードを使う <a href="DESTINATION URL"><img src="IMAGE URL" /></a> を使って、HTMLコードを読み込めるウェブページどこにでもクリック可能な画像を追加してみましょう。
    広告

関連記事

画像検索で簡単に人物を特定する画像検索で簡単に人物を特定する
ワイヤレスマウスを接続するワイヤレスマウスを接続する
ウェブサイトの公開日を調べるウェブサイトの公開日を調べる
キズの付いたCDを修復する
テレビでNetflixからログアウトするテレビでNetflixからログアウトする
winmail.datを開くwinmail.datを開く
DVDプレーヤーを接続するDVDプレーヤーを接続する
EMLファイルを開くEMLファイルを開く
海外でのブラックハートの絵文字の使用海外での🖤(ブラックハート)の絵文字の使用
XMLファイルを開くXMLファイルを開く
YouTube動画のコメント欄に指定した再生時間へのリンクを貼るYouTube動画のコメント欄に指定した再生時間へのリンクを貼る
AndroidでSMSを別の端末に移行するAndroidでSMSを別の端末に移行する
DLLファイルを開くDLLファイルを開く
電話が盗聴されているか調べる電話が盗聴されているか調べる
広告

このwikiHow記事について

wikiHowは「ウィキ」サイトの一つであり、記事の多くは複数の著者によって共著されています。 この記事は、匿名の筆者を含む16人が執筆・推敲を行い、時間をかけて編集されました。 この記事は2,526回アクセスされました。
このページは 2,526 回アクセスされました。

この記事は役に立ちましたか?

広告