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タグを作成する
１．ブログ記事を新規追加して、
バナー写真をアップロードします。
２．テキストモードにします。
３．バナー写真の下に、HTMLタグをコピペします。
下の、どちらか好きな方をコピペします。
・同じウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL”><img src=”画像URL” alt=”” border=”0″ /></a>
・別ウィンドウで新しいリンク先を開く場合
<a href=”リンク先URL” target=”_blank”><img src=”画像URL” alt=”” border=”0″ /></a>
４．リンク先のURLを用意します。
バナーをクリックした時に、飛んでほしいページのURLです。
５．下書き保存をして、Ctrl押しながら、「投稿を表示」をクリックします。
６．バナー写真の上で右クリックをします。
「画像アドレスをコピー」をクリックします。
７．今コピーしたものを貼りつけてみます(青いところ）
赤いところは、赤いところ
青いところは、青いところへ
それぞれ、コピペします。
これで、バナーのHTMLタグをが出来ました♪
ブログのサイドバーに貼る方法
１．バナーのHTMLタグをコピーします。
２．
①外観
②ウィジェット
をクリックします。
３．サイドバーに「テキスト」を新しく持っていきます。
タイトルをつけて
①コピーしたHTMLタグを貼りつけます。
②「保存」をクリックします。
４．ブログを見てみます。
サイドバーの一番下に、今作ったバナーが表示されました！！
クリックして、ちゃんと飛んでほしいページに飛ぶことが出来たら完成です。
お疲れ様でした！！
こんな感じになります！
・同じウィンドウで新しいリンク先を開く場合
・別ウィンドウで新しいリンク先を開く場合
バナーは、サイドバー以外でも、記事下に貼ってもいいですね。
別ウィンドウで開くかどうかは、あなたの好きな方で大丈夫です。
オリジナルのバナーが出来ると、なんだかとっても嬉しくなります。
自分だけのバナーだからですね。
どんどん、ブログが自分らしくなってくるのも嬉しいです。
是非、バナーを作ってみたい方は挑戦してみてください♪
お悩み相談はLINEからお気軽に！ 今だけ限定！ネガティブな人ほど成功する？！ 「ネガティブさを活かせる魔法の思考法」プレゼント中♪
自信がないからこそ夢が叶う方法知りたいですか？ ▼３つの秘密の動画で暴露してます・・・（無料）
⇒人生は今からやり直せます！
お仲間募集中！ ▼好きなことをお仕事にしませんか？
⇒ブログとは未来を作るものです！
こちらも合わせてどうぞ
LEAVE A REPLY