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 で表示できます。


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




■ 次の記事に進む

HTML入門編(4)(フォームで遊んでみよう)

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!第4回ではフォーム(テキストボックス)などを表示して遊んでみます。Yahoo!の検索ボックスも作ってみましょう。

続きを見る


■ 最初から読む

HTML入門編(1)(WordPress で HTML を使ってみよう!)

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か?」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る




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









Presented By Irojiro Haraguro .Com

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