*

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をこれから始めるあなたへ贈る

5つのステップで簡単!

「YouTube の始め方ガイド」プレゼント中~
ちょっと見てみる(無料)


パソコン苦手の主婦の方にも安心!優しいYouTubeの教科書

⇒YouTubeで好きなことをコツコツアップする秘密がたっぷり

 -ブログお役立ち,

  関連記事

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

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

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

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

no image

【修正中】LINE Cameraでコラージュの使い方♪簡単に1枚の写真にまとめることが出来る!

こんにちは♪ はるです。 コラージュって知ってますか? TwitterやFacebookなどのSNS

ペイントで可愛い簡単バナーの作り方♪自分で作れるって嬉しい!

こんにちは♪ はるです。 まとめ記事や特集記事を作った時に、ブログのサイドバーに貼るバナー。 このバ

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

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

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

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

写真の権利は撮影者にある!パクリ予防には署名をオススメ。

こんにちは♪ はるです。 ブログに載せる写真ですが、署名を入れていない人が多いので、気になります。

  Message

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


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


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


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


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


    はるがYouTubeに出会ったきっかけとは?!


    YouTube実践編での気づき


    はるの想いが詰まっているかも??

  • はるさん用イラスト1

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

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

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

     

    YouTubeをこれから始めるあなたへ贈る

    5つのステップで簡単!
    「YouTube の始め方ガイド」プレゼント中~

    ネットビジネス初心者さんにも出来るように、YouTubeの始め方を解説してます。
    はると一緒に、楽しくYouTubeを始めましょう♪
    ちょっと見てみる(無料)

     

さとうめぐみ直伝!手帳術を実践して幸せになるための最初にやること5つ

こんにちは♪ はるです。 今年こそは手帳を使いこなしたい!と張り切って買ったものの 手帳は真っ白なの

さとうめぐみの「幸せおとりよせ手帳」その効果を実感するために必要こととは?

こんにちは♪ はるです。 ずっと思い描いている夢があるけれど、なかなか叶えられない。。 やりたいこと

人生が変わる!さとうめぐみ著「幸運を呼び込む2度書き手帳術」レビュー

こんにちは♪ はるです。 今年こそは手帳を使いこなしたい いつも計画は立てるのに実行できない 時間を

【特集記事】美容院で学ぶリアルビジネスで使えるマーケティングまとめ

こんにちは♪ はるです。 美容院に行くと、リアルビジネスでのマーケティングの気づきや学びがたくさんあ

美容師さんの魔法の手が人を幸せに出来る理由から学ぶマーケティング

こんにちは♪ はるです。 久しぶりに美容院へ行ってきました。 大晦日の日にあえて行ってきたんです。