*

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

      2016/11/09

こんにちは♪
はるです。

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

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

お疲れ様でした!!

 

こんな感じになります!

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

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

 

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

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

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

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









あなたの好きなことで楽しく動画を作ってみませんか?

「YouTubeの始め方ガイド」

「10万再生の秘密」プレゼント中~

ちょっと見てみる(無料)



YouTubeで30万再生された秘密のお話を暴露中!

好きなことが、お金になる唯一の方法



スポンサーリンク

 -ブログお役立ち,

  関連記事

たった5記事のブログで集客出来てお客さんが感動でウルウルする最大の秘密

こんにちは♪ 地元のお仲間で作っている、お祭り好きのおはやし会 おはやしのプロではないので、ほぼボラ

LINE Cameraでブログの写真に文字入れ機能を使って署名を入れる方法

こんにちは♪ はるです。 ブログに載せる写真に署名を入れる時に、iPhoneで署名を入れることが出来

ネットビジネスでハンドルネームが残念な名前にならないための注意点4つ

こんにちは♪ はるです。 ネットビジネスを始める時に ブログでも、YouTubeでも、ハンドルネーム

iPhoneで料理写真を美味しく撮る魔法のテクニックを伝授

こんにちは♪ はるです。 お料理ブログで何が一番大事ですか? と聞かれたら、間違いなく「愛情」なので

クリスマスお茶会を開催♪スマホで写真撮影をぐっと上達する撮り方のコツ

こんにちは♪ はるです。 2016年12月22日(木)に お客さまをお招きして、お茶会を開催しました

【効果あり過ぎ注意】気持ちを込めてブログを書くことが出来る秘密の方法

こんにちは♪ はるです。 読者さんからこのような質問を頂きました。 「気持ちを込めてブログを書くこと

ブログの文字数は1記事に何文字以上書いたらいいですか?【初心者編】

こんにちは♪ はるです。 「ブログの文字数は、1記事に何文字書いたらいいですか?」 このような質問を

no image

ひゆきさんから学ぶブログのプロフィールを書く時に意識すること3つ

こんにちは♪ はるです。 ブログでのプロフィールって、とても大事です。 何かの記事を読んで、とても共

LINE Cameraを使って料理写真を美味しそうに加工しよう♪アプリを使うと簡単!

こんにちは♪ はるです。 iPhoneで撮影した写真をiPhoneで加工することが出来ます。 料理の

no image

もったいない!見出しを活用してブログの文章を読みやすくする方法

こんにちは♪ はるです。 あなたのブログは見出しを使ってますか? せっかく文章をいっぱい書いても、見

  Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • はるさん用イラスト1

    こんにちは♪
    猫かぶりユーチューバー
    ふわっと優しさコンサルタントの、はるです。
    ⇒詳しいプロフィールはこちらからどうぞ♪

    好きなことを仕事にしたい!
    好きなことをして、生きていきたい!
    ネットビジネスで好きなことを発信してみたい。
    でも、ネットビジネスって何やったらいいの?
    ネットビジネスって言葉、ちょっとコワイ。。。

    じゃあ、まずは好きなことを動画にとって、YouTubeにアップしてみませんか?
    なにもユーチューバーみたいに派手なことしなくていいんです。
    あなたがなんとなく好きなこと、ちょっとだけ得意なことを動画に撮るだけです。

     

    YouTubeをこれから始めるあなたへ贈る
    5つのステップで簡単!
    「YouTube の始め方ガイド」プレゼント中~
    ⇒詳しくはこちら
     


  • 初めての方が最初にやること、こちらです!


    YouTubeで迷ったらこちら。丁寧な動画解説付き。


    コピペはダメ!ルールを守ってYouTubeを楽しもう♪


    動画編集がめんどくさい人にオススメ


    iPhoneでここまで出来る!動画編集に感動

ネットビジネスでハンドルネームが残念な名前にならないための注意点4つ

こんにちは♪ はるです。 ネットビジネスを始める時に ブログでも、YouTubeでも、ハンドルネーム

地味にスゴイは褒め言葉!ドラマ「校閲ガール」から学ぶ目立たなくていい仕事術

こんにちは♪ はるです。 地味な私はダメなんだ、 目立たない私にはビジネスなんて無理なんだ、 そんな

あきらめないで!長い動画の編集にひと工夫するだけで再生数アップになるコツ

こんにちは♪ はるです。 動画編集で悩むことの一つに、長い動画の編集に時間がかかる、ということがあり

ブログの文字数は1記事に何文字以上書いたらいいですか?【初心者編】

こんにちは♪ はるです。 「ブログの文字数は、1記事に何文字書いたらいいですか?」 このような質問を

YouTubeで、何分の動画を作ったら、見てもらえますか?【初心者編】

こんにちは♪ はるです。 「YouTubeで、何分の動画を作ったら、見てもらえますか?」 このような