Wordpressテーマの販売やHTMLテンプレートの無料配布

Image Widgetでサイドバーなどのウィジェットエリアにバナー画像を簡単に設置しよう!

2015.12.06

img_w_01

 こんな感じで、サイドバーなどに広告バナー画像を設置するときはどのような方法で画像を貼っていますか?

基本的には、<img から始まるコードを書き、その画像に<a href から始まるコードでリンクを貼っていると思います。

通常は下記のようなコードを記述して画像を表示させ、リンクを貼ります。

<a href="リンクURL"><img src="画像URL" width="300" height="250" alt=""/></a>

ウィジェットエリアに、「テキスト」ウィジェットなどを設置して、
その中に上記のようなコードを書けば画像とリンクを貼れますが、ちょっとめんどくさくないですか?

アフィリエイトタグなどをそのまま記述したいときは、
テキストウィジェットにアフィリエイトタグを書き込めばいいのですが、
アフィリエイトタグではなく、アップロードした画像にリンクを貼りたいときは、
ソースコードを記述するのが面倒・・・って感じになってしまいます。

簡単に画像をアップロードしてリンクを貼ることが出来るプラグイン

Image Widget」という無料プラグインがあれば、
自分で用意した画像をアップロードして、リンクを簡単に貼ることが出来ます。
当サイトのサイドバーにあるバナーも、このプラグインでバナーを設置しています。

管理画面の「プラグイン」→「新規追加」画面で、「Image Widget」と検索。

img_w_02

「Image Widget」が見つかりましたら、「今すぐインストール」をクリックしてインストールし、
有効化を行ってください。

有効化をすると、管理画面の「外観」→「ウィジェット」のページに、
「画像ウィジェット」というウィジェットが追加されます。

img_w_03

このウィジェットをサイドバーなどのウィジェットエリアに設置します。

画像設置とリンク方法

img_w_04
 画像を選択

「画像を選択」という枠の部分をクリックすると、メディアアップローダーが開きます。そこで画像をアップロードしたり、すでにアップロードしてある画像を選択することが出来ます。

 タイトル

画像の上に表示されるリードの中のタイトルです。リードタイトルは必要ないという時には、何も書き込まなくてOKです。

 代替テキスト

画像のalt属性。ここに何も記述しないときは、上のタイトルと同じテキストがalt属性になる。

 キャプション

画像の下に出るテキストを記述することができる。画像だけを表示したいときは何も記載しなくてOKです。

 リンク

画像に貼るリンクアドレス(画像をクリックしたときの飛び先)。別ページのリンクアドレスやアフィリエイトタグの中のリンクアドレスを記載するとバナーにリンクを貼ることが出来ます。

 Link ID

この画像ウィジェット専用にcssを付け加えてデザインを変更したいときは
クラス名を付けることが出来る。
cssを付け加える必要がないときは未記入でOKです。

 同一ウインドウで開く(プルダウンメニュー)

画像をクリックしたときに、「同一ウインドウで開く」か
「新規ウインドウで開く」かなどを選択することができます。

 サイズ

バナーの画像サイズを選択することができます。
フルサイズ、サムネイルサイズ、中サイズ、大サイズ、カスタムサイズから選択できます。

 配置

画像の配置を選択できます。
サイドバーなどに設置したときに、画像を左構え、中央、右構えのどれかを選択できます。

 

Image Widgetの活用方法

wordpressのテーマによっては、
サイドバー以外にもウィジェットエリアが設けられているテーマがあります。
当サイトで販売してるテーマ「Movist」であれば、サイドバーの他に、
TOPページのメインエリアやスマホやタブレットなどのモバイルでサイトを見た時の
画面下部にもウィジェットエリアがあります。

img_w_06 img_w_05

 

このようにウィジェットエリアがあるところであれば、
サイドバー以外の場所でも「Image Widget」でバナー画像を設置することができますので、
そのウィジェットエリアの横幅にあったバナー画像を選択して設置しましょう。

当サイトに掲載された記事・写真の無断転載を禁じます
Copyright 2015 HTM-WEB All Rights Reserved.