WordPressのブログのサイドバーに手作りバナーを貼る方法

WordPressのブログのサイドバーに手作りバナーを貼る方法

こんにちは♪
はるです。

ブログのまとめ記事を作ったり、特集記事を書いた時は、バナーを作ってブログのサイドバーに貼るといいです。
バナーはペイントを使って、自分で簡単に作ることが出来ます。
⇒ペイントを使ったバナーの作り方

では、その手作りバナーをWordpressのブログのサイドバーに貼るにはどうしたらいいのでしょうか。
その方法をお伝えしていきます。


スポンサーリンク

バナーのリンク先の構成HTMLタグって?

バナーを作ったら、リンク先の構成HTMLタグ、と呼ばれるものを作成します!

 

しんさんの記事が参考になります。
ペイントでのバナーの作り方や、バナーのサイズ、なぜバナーをつくるのか、というところも説明してくださっているので、とてもわかりやすいです。
初心者でも簡単!バナーの作り方 サイズや画像加工、リンク先の構成HTMLタグ

 

・同じウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL“><img src=”画像URL” alt=”” border=”0″ /></a>

 

・別ウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL” target=”_blank”><img src=”画像URL” alt=”” border=”0″ /></a>

このHTMLタグの、青文字のところにリンクを入れるだけで完成するのです!!

 

簡単にできるはずが、、

画像URLってなに?
サイドバーに貼るにはどうしたらいい?

というところで、最初の頃、私はよくつまずきました、、

なので、その辺りを解説していきます。

 

動画をご覧ください

詳しい説明は以下にあります。

 

 

詳しい説明

HTMLタグを作成する

ws000020

1.ブログ記事を新規追加して、
バナー写真をアップロードします。

 

ws000017a

2.テキストモードにします。

 

ws000018a

3.バナー写真の下に、HTMLタグをコピペします。
下の、どちらか好きな方をコピペします。

・同じウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL”><img src=”画像URL” alt=”” border=”0″ /></a>

・別ウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL” target=”_blank”><img src=”画像URL” alt=”” border=”0″ /></a>

 

ws000019a

4.リンク先のURLを用意します。
バナーをクリックした時に、飛んでほしいページのURLです。

 

ws000020

5.下書き保存をして、Ctrl押しながら、「投稿を表示」をクリックします。

 

ws000021a

6.バナー写真の上で右クリックをします。
「画像アドレスをコピー」をクリックします。

 

ws000022a

7.今コピーしたものを貼りつけてみます(青いところ)

赤いところは、赤いところ
青いところは、青いところへ

それぞれ、コピペします。

これで、バナーのHTMLタグをが出来ました♪

 

ブログのサイドバーに貼る方法

ws000023a

1.バナーのHTMLタグをコピーします。

 

ws000024a

2.
①外観
②ウィジェット
をクリックします。

 

ws000025a

3.サイドバーに「テキスト」を新しく持っていきます。
タイトルをつけて
①コピーしたHTMLタグを貼りつけます。
②「保存」をクリックします。

 

ws000027a

4.ブログを見てみます。
サイドバーの一番下に、今作ったバナーが表示されました!!
クリックして、ちゃんと飛んでほしいページに飛ぶことが出来たら完成です。

お疲れ様でした!!

 

こんな感じになります!

・同じウィンドウで新しいリンク先を開く場合

・別ウィンドウで新しいリンク先を開く場合

 

バナーは、サイドバー以外でも、記事下に貼ってもいいですね。

別ウィンドウで開くかどうかは、あなたの好きな方で大丈夫です。

オリジナルのバナーが出来ると、なんだかとっても嬉しくなります。
自分だけのバナーだからですね。
どんどん、ブログが自分らしくなってくるのも嬉しいです。

是非、バナーを作ってみたい方は挑戦してみてください♪





自信がない・・
不安がいっぱい・・
そんなあなただからこそ夢が叶う♪
期間限定!!
やりたいことが見つかってお仕事に出来る!
▼3つの秘密の動画をプレゼント中~(無料)



▼美味しいレシピで夢を叶えるならこちら(有料)



こちらも合わせてどうぞ