HTML講座も今回で最終回です。
今回は、よく使うHTMLタグの組み合わせと活用方法についてお話します。

これを覚えておくと
ブログのサイドバーにバナーを設置するといった
ブログのカスタマイズができるようになるので
ブログアフィリエイトをする人はぜひ身につけておきましょう。

最後に、HTMLタグを使った画像の載せ方についても
お伝えするのであなたのブログカスタマイズの幅がぐーんと広がりますよ。

<ブログアフィリエイトで必要なHTML講座記事一覧>

第1回目:HTMLって何?~アフィリエイトに必要なHTML講座1~

第2回目:HTMLを覚える理由~アフィリエイトに必要なHTML講座2~

第3回目:HTMLの基本的な形~アフィリエイトに必要なHTML講座3~

第4回目:アフィリエイトでよく使うHTMLを紹介~HTML講座4~

第5回目:アフィリエイトでよく使うHTMLその2~HTML講座5~

ブログアフィリエイトで身につけるべきHTMLタグ応用編

ブログアフィリエイトでよく使うHTMLタグがあります。
それは、画像にリンクを付けてブログに載せるHTMLです。

こういうやつです。↓

<a href=”https://free-lifebusiness225.com/2048.html “>
<img src=”https://free-lifebusiness225.com/wp-content/uploads/2016/03/182aaf3dcd4b4de3f345d692bea9a5e8.jpg”width=”180″ height=”180″ ></a>

これは複数のタグが組み合わさっています。
一つずつ解体してみましょう。

①<a href=”【URL】”>

これは、リンクタグでしたね。
クリックするとURLのページに飛ぶことができます。

②<img src=”【画像のURL】” >

これは画像を載せたい時に使う画像タグです。

URLは画像の保存場所を表すURLを入れます。

その他としては

③width=”180″ height=”180″

があります。

これは画像の大きさと幅を調整するタグです。
「180」という数字の部分で画像の大きさと幅を調整することができます。

とっても長ったらしいHTMLタグでしたが
1つ1つは基本的なHTMLタグが組み合わさっているだけなんです。

HTMLタグは複数のタグをこのように組み合わせて
使うことでより文字だけじゃなくブログのカスタマイズにも使えます。

今回、紹介したHTMLタグの組み合わせは
一番使えるのはブログのサイドバーです。

めいこのブログのサイドバーには
メルマガ登録やツール紹介のバナーがありますが
これはただ画像を載せているだけでなく
ツールの詳細ページやメルマガの登録ページに飛ぶようになっています。

こうしておくと、ブログにやってきた人が気になって
クリックしたらすぐに内容が見ることができます。

最後にどのように使えばいいか紹介しますね。

ブログのサイドバーに画像を載せる方法

まずは、サイドバーに載せたい画像を
ワードプレスに登録しておきましょう。

ワーソプレスのダッシュボードから
①メディアを選択⇒②新規追加をクリックします。

ワードプレスメディア

載せたい画像をファイルを選択またはドロップで登録します。

画像登録2

これでワードプレスに画像を登録させることができました。

次に、下記のHTMLタグをコピペして
飛ばしたいサイトのURLと画像のURLを【】の部分に入れます。
 
<a href=”【URL】”>
<img src=”【画像のURL】”width=”180″ height=”180″ ></a>

画像のURLは先ほど、画像登録で使った
メディアからライブラリを選択してください。
すると、下記のようにワードプレスに登録してある画像の一覧が出てきます。

画像保存3

↑この中から、ブログに載せたい画像を選んでクリックします。

添付ファイルの詳細という画面が出てきます。
画面の右側にURLというのがあります。
これが画像のURLになるのでコピー&ペーストしましょう。

画像保存4
 
載せたい画像と表示させたいページのリンクを
HTMLタグに入れた状態が下記のタグです。↓

<a href=”https://free-lifebusiness225.com/2048.html”>
<img src=”https://free-lifebusiness225.com/wp-content/uploads/2016/03/182aaf3dcd4b4de3f345d692bea9a5e8.jpg”width=”180″ height=”180″ ></a>

このタグをうっかり消さないように
ひとまずメモ帳などに残しておいてくださいね。

続いて、ワードプレスのウィジェットの画面を表示しましょう。
ダッシュボードからワードプレスの外観⇒ウィジェットの画面を選択すると出てきます。↓
画像登録5
 
利用できるウィジェットから
テキストを選択して先ほどのHTMLタグを
コピー&ペーストして貼り付けて保存します。
 
画像保存6
赤い四角で囲っている部分がリンク付きの画像HTMLタグです。
他にもサイドバーに載せたい文章などがあれば入力すれば
一緒に載せることもできます。
最後に、保存をクリックしましょう。
これで、サイドバーに画像を載せることができます。
自分のブログを確認してみましょう。↓

サイドバー

こんな風にサイドバーに画像を載せることができます。
ちゃんと画像を押せばリンクページに飛ばすことができます。

ブログアフィリエイトではサイドバーに商品の画像バナーを
載せる機会が絶対にあるので今回紹介した
HTMLタグを覚えておくと便利ですよ。

長いので、いちいち手で入力してたら
打ち間違いの原因になるのでメモ帳などに
貼り付けてあなたのパソコンに保存しておくといいですよ。
あなたのブログのカスタマイズに役立ててくださいね。

テントウムシライン

170

最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら 下のランキングバナーを一回押していただけますと嬉しいです。 みなさんのひとポチが励みになります!

にほんブログ村 小遣いブログ アフィリエイトへ

外注化×アドセンスメルマガやっています。無料プレゼント実施中!!

めいこおすすめアドセンス外注化の教科書