ブログ配布バナーのスクリプトを作る

はい。はるかです。
今回は、情報提供という事で配布バナーを
簡単にカット＆ペーストしブログに貼り付ける方法を
記載します。




例では、アメーバブログを使いますが、
殆どのブログやWebサイトで使える方法ですので
是非ともマスターしてくださいね。

1.配布バナーを作る

まず配布用のバナーを作ります。
大きさはいろいろですが、150ｘ50くらいの小さいサイズが
良いでしょう。
もちろん、大きいのや動いたり点滅したりするのも
可能ですが、配布バナーというのは
貼って紹介して頂くものなので
自己主張は、ほどほどにした方が良いでしょう。

私は、ブログデザインと自分のプロフィール画像を合成して
ペイントで数分で作りました＾＾；

画像の劣化が激しいので、できたらPNGファイルで作った方が良いです。
BMPはサイズが大きいのでやめましょう。

2.スクリプトを作る

バナーは、フリープラグインに入れる方が良いでしょう。
スクリプトは以下の様になります。

↓黒いところをダブルクリックで全選択されるのでCTRL+C等でコピー

バナーの上の文字<br />
<img border="0" src="画像のURL" alt="ブログ名称" />
<input value='<a href="ブログのURL" target="_blank"><img border="0" src="画像のURL" alt="ブログ名称" /></a>' readonly onclick="this.select()" style="width:150px">
<br />バナーの下の文字<br />

↑のスクリプトは。メモ帳などにコピーします。
必要なのは、

• バナー画像のURL
• ブログのURL

ですが、ブログのURLは、だれでも分かりますね。
問題は、バナー画像です。
それでは、アメブロでバナー画像のURLを取得する方法を
実践してみます。

例という事で、http://ameblo.jp/moja0517/entry-11876107998.html
を使ってみたいと思います。

２．１普通にブログを書くを選ぶ

ブログを書く→画像ボタン
ここまでは、いつも操作している通りですね。

２．２画面の通りオリジナル画像を選択する

画像フォルダの画面が表示されたら
オリジナル画像のラジオボタンを選んで
バナーに使いたい画像を選択します。

２．３画像のURLを取得する

画像がオリジナル画像で張り付いたら
もう、出来たも同然です。
あとは、図のようにリンク先をコピーします。
＜ＩＥの場合＞
画像を右クリックでショートカットのコピー
＜Firefoxの場合＞
画像を右クリックでリンク先のURLをコピー
＜chromeの場合＞
画像を右クリックで画像のURLをコピー


画像のURLがコピーできたら、メモ帳などに貼り付けておきます。
ファイル名はｏＸＸＸＸＸＸとなっていたら成功です。
tで始まるファイル名は、サムネイル（Thumbnailの略）ですので
失敗です。オリジナルが選択されないです。

３.出来たスクリプトを確認する

メモ帳などで、自分のブログにあった設定を作ります。

うまくできたら次のようになるはずです。

当ブログはリンクフリーです<br>
<img border="0" src="http://stat001.ameba.jp/user_images/20141009/11/moja0517/70/e7/p/o0200005013092305132.png" alt="まあみのピグ日記" /><br>
<input value='<a href="http://ameblo.jp/moja0517/" target="_blank"><img border="0" src="http://stat001.ameba.jp/user_images/20141009/11/moja0517/70/e7/p/o0200005013092305132.png" alt="まあみのピグ日記" /></a>' readonly onclick="this.select()" style="width:200px">
<br>ブログに貼り付けてね<br>

４.完成

上手にスクリプトができたら、
フリープラグインに貼り付けてみましょう。

４．１．プラグインの追加を開く

図のように、マイページからブログ右側の≡の部分をクリックして
「プラグインの追加」を選びます。

４．２.フリープラグインの画面を出す

次の画面が表示されるので、フリープラグインを押します。

４．３．フリープラグインを保存

フリープラグインに入れたいスクリプトを入れて
「保存」ボタンを押します。
スクリプトのコピーはCTRL+Cで、
ペーストはCTRL+Vボタンで出来ます。


以降は一度設定するだけで以後は触りません

４．４．メニューから配置設定を選ぶ

同じように、≡をクリックして「配置設定」を選びます。

４．５．フリープラグインをドラッグする

フリープラグインのアイコンをマウスでつかんで
空いたスペースの所に落とします。
ドラッグアンドドロップといいます。

４．６．保存する

ドラッグアンドドロップが終わったら、
図のように勝手に入ります。
場所は好きな位置に出来ます。
場所が決定したら、「保存」を押します。


以上でおしまいです。

それじゃ、またね♪
おやすみ♡