*

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で好きなことをコツコツアップする秘密がたっぷり


スポンサーリンク

 -ブログお役立ち,

  関連記事

no image

ブログの記事タイトルと動画のタイトルは変えるべき?メリットは?

こんにちは♪ はるです。 ブログと動画の連動は最強です! ですが、ブログ記事と動画のタイトルは同じで

no image

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

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

no image

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

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

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

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

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

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

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

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

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

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

no image

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

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

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

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

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

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

  Message

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

  • はるさん用イラスト1

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

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

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

     

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


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


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


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


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


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

今こそ死語がナウい?タンマの意味になるへそなブログのネタ帳【ユル昭和 malo 宝島社】

こんにちは♪ はるです。 文章書いていると、もうどうにも、私って、死語ばかり使っているような。。 は

いろり会に参加!ネガティブな自分を受け入れることが出来た驚きの日

こんにちは♪ はるです。 先日ブログのお仲間「ゆたんぽせらぴすと・イクミさん」のワークショップに参加

iPhoneなどで撮った動画ってどこにバックアップ取ってますか?

こんにちは♪ はるです。 動画のバックアップについて、お客さまから、質問を頂きました! iPhone

【特集】YouTubeの著作権、肖像権で引っかからない、侵害しないためのまとめ

目次1 著作権、肖像権について1.1 著作権1.2 肖像権1.3 ブログでの注意点1.4 料理作りの

YouTubeのチャンネル登録ボタンを作成してWordPressブログに設置する方法

こんにちは♪ はるです。 YouTubeを始めて、チャンネルの方向性が定まってきたら、 Wordpr