バナーの設置手順
ブログのサイドバーに、バナー画像を貼ってリンク集などを作る手順について解説します。アフィリエイトタグの設置やテキストリンク集も同じ手順で応用できます。
画像をアップロードして、それをプラグインのフリーエリアに貼るまでを順を追って解説します。
バナー画像をアップロードする
はじめに画像を自分のブログにアップロードして、画像のURLを取得する手順から説明します。
Amazonアソシエイト、一般的なアフィリエイトのように、商品画像やバナーを直接使用できるもの、用意されているリンクコードをそのままコピーペーストすればいい場合は、「フリーエリアに設置」の項目へ進んでください。
自作のバナー画像や、「直リンク」が許可されていない画像は、ユーザ自身の管理画面からアップロードして使用します。
- １.［ツール］メニューにある「ファイルアップロード」の画面を開きます
-
２.［参照］ボタンを押すとウィンドウが開いて、PCにあるファイルが表示されます
その中からアップロードしたいファイルを選択します - ３.［アップロード］ボタンを押して、PC上のファイルをブログサーバへアップロードします
［参照］ファイルをアップロードする
画像のパスを調べる
アップロードが完了したファイルは、一覧表の中に表示されます。
サムネイル部分をクリックすると、別画面で画像が開きます。ブラウザのアドレスバーに表示されるのがその画像のパスです。この画像をブログに貼る際には、アドレスバーからこのパスをコピーペーストする方法が簡便です。
「フリーエリア」にバナーを設置する
バナー画像などを貼るスペースとして、フリーエリアを追加します。
［環境設定］メニューの「プラグイン」を開いて、「公式プラグイン追加」画面へ進みます。
［追加］をクリックすると、編集画面が開くので、テキストエリア内にコードをペーストします。
画像タグの記述方法
自分がアップロードした画像を、フリーエリアに貼るには、次のようにHTMLを記述します。
サンプルコードをそのままコピーペーストしても使えますが、「画像のパス」部分などはアドレスバーからコピーしたパスに差し替えてください。またクォーテーション「"」で前後を括る必要があるので、パスをペーストする際に消さないように注意してください。
<div>
<img src="画像のパス" />
</div>
画像にリンクを貼りたい場合には次のように記述します。
バナーをクリックすると別のサイト（友人のブログなど）を開くようにしたり、商品画像にアフィリエイトリンクを貼る場合なども同様です。
<div>
<a href="リンク先のURL">
<img src="画像のパス" />
</a>
</div>
画像の下に文字を入れたい場合は次のように記述します。
<div>
<a href="リンク先のURL">
<img src="画像のパス" /><br />
文字を入れる
</a>
</div>
２つ目、３つ目の画像を貼りたい場合は、上記のコードを同じように繰り返し入れてください。
１つのフリーエリア内に画像は何点でも入れることができるので、１回ごとにフリーエリアを追加する必要はありません。
