HTML / CSS 入門

HTML入門編(3)(画像とリンクを貼ってみよう)


笑顔でパソコンを操作する女性

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!

第3回では、HTML で「画像」と「リンク」を貼る方法をご紹介します。

画像をHTMLを使って貼ってみる

■ 画像を表示してみたサンプル

HTML を使って画像を表示してみます。

※ 単純に画像を表示する場合、WordPress の「画像ブロック」を使っていただくほうが簡単ですが、今回はあえて HTML を使います。

ポイント

パリのクリスマスマーケットのマドンナのオブジェ

■ 実際にHTMLを使って画像を表示する手順

Step.1 WordPress で画像を登録する

表示する画像を登録します。

イメージのアップロード画面
  • WordPress の管理画面から [メディアライブラリ] の [新規作成] で、画像をアップロードします。
ファイルパスの取得
  • 画像の詳細を表示して、「ファイルの URL」をコピーしておきます。

Step.2 <img> タグを使う

画像を表示する 「HTMLタグ」は <img> です。

「カスタムHTMLブロック」で次のサンプルを記述します。

<img src="https;//xxxxxxx/xxxxx/xxx.jpg">

赤字の URL の部分を、先ほどコピーした「ファイルのURL」に差し替えてください。

※ <img> タグは閉じない( </img> で閉じる必要のない)タグです。

Step.3 幅と高さを指定する

必須ではありませんが、「幅」と「高さ」を指定すると、表示したい大きさに拡大縮小して表示します。

<img wifth="480" height="480" src="https;//xxxxxxx/xxxxx/xxx.jpg">

上記の例では、幅(width)を 480、高さ(height)を 480 の正方形として、画像を拡大縮小して表示する指定です。

Step.4 完成です

完成です。プレビューなどで実際の画面を見て画像の表示を確認してください。

■ <img> タグを解説

画像を表示する「HTMLタグ」は <img> です。

<img> タグの主な属性は次の通りです。

属性説明必須記載例
src画像の URL を指定します。
src="https://xxx/xxx.jpg"
width / height画像を表示する「横幅」と「高さ」を指定します。
指定すると画像をロードする前に指定の大きさを画面上で確保するため、ページの表示スピードが速くなります。
基本的には(拡大縮小しない場合でも)指定するようにします。
width="480" height="480"
title画像の上にマウスを置いたときにポップアップする文字列を指定します。
title="クリスマス"
alt画像の説明(要約)を記載します。
ここで指定された文字列が、画像を表示しなブラウザなどで代替えテキストで表示されますので、適切に記載します。
alt="パリのクリスマスマーケットのマドンナのオブジェ"

※ alt 属性は <img> タグでは、必ず指定する属性 と定義されていますので書くようにしてください。

■ 記載のサンプルです。

<img alt="パリのクリスマスマーケットのマドンナのオブジェ" title="クリスマス" wifth="480" height="480" src="https://xxx/xxx.jpg">

リンクを HTML で作ってみる

■ リンクを表示してみたサンプル

HTML を使ってリンクを表示してみます。

※ 単純にリンクを表示する場合、WordPress の「リンクボタン」を使っていただくほうが簡単ですが、今回はあえて HTML を使います。

■ 実際にHTMLを使ってリンクを表示する方法

Step.1 <a> タグを使う

画像を表示する 「HTMLタグ」は <a> です。

「カスタムHTMLブロック」で次のサンプルを記述します。

<a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener">Yahoo!ページを新しいウィンドウで表示します。</a>

「https://www.yahoo.co.jp」 の URL の部分を、適宜リンクしたい URL に差し替えてください。

Step.4 完成です

完成です。プレビューなどで実際の画面を見て画像の表示を確認してください。

■ <a> タグを解説

リンクを表示する「HTMLタグ」は <a> です。

<a> タグの主な属性は次の通りです。

属性 説明必須記載例
hrefリンク先のURLを指定します。
href="https://www.yahoo.co.jp/"
targettarget="_blank" で新しいウィンドウを表示します。
(※自ウィンドウ内でページを切り替える場合は、target 属性は記載不要です)
target="_blank"
relリンク先のページとの関係を記載します。
target="_blank" を指定した場合 rel="noopener" を書くようにしてください。(※)
rel="noopener"

※ 「rel="noopener"」 は、一つのセキュリティ対策です。フィッシング詐欺対策となりますので、「target="_blank"」 を使って新しいウィンドウで表示する場合には、必ず 「rel="noopener"」 も指定してください。

まとめ

今回は、<img> タグで画像の表示を、<a> タグでリンクの表示を紹介させていただきました。

テキストの表示(装飾)を変える以外にも、画像やリンクなども HTML で表示できます。

どんどん楽しいページを作っていきましょう!

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


「WordPress で HTML / CSS を使う」一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com