ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
人気ブログランキング
FC2ブログランキング今回は、ブログのバナーについてご質問を戴きましたので、
記事にまとめてみます。
質問：こちらのブログのバナーを貼りたいんですが、
何かバナーがあれば教えていただきたいんですが・・・。
回答：
自分のバナーのタグを紹介するのには、どうしたらいいの？｜リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）
上記の記事が大変参考になりました。ありがとうございました。
では、さっそくマイブログのバナータグの作成手順をまとめてみたいと思います。
【１】バナー画像の作成
まず、画像編集ソフト（Inkscape）を使って、
下記の通り、バナー画像を作成しました。
【２】gifアニメの作成
下記サイトを利用して、上記【１】で作成したバナー画像を
gifアニメにしてみました。
GIFアニメ(アニメーション)作成 | 写真画像加工編集サイト/無料フリーソフト
出来上がったgifアニメがこちらです。
↓↓↓
【３】バナータグの作成
下記の通りタグを作成します。
<center><img src="バナー画像のＵＲＬ"><br><input
value='<a href="http://ameblo.jp/アメーバＩＤ/" target="_blank"><img
src="バナー画像のＵＲＬ"></a>' readonly onclick="this.select()"
style="background-color:#FFB6C1;color:#FF69B4;width:160px;border:1px
solid #cccccc;"></center>
実際に作成した下記のバナータグをフリープラグインへ追加します。
↓↓↓
<center><img src="http://stat.ameba.jp/user_images/20121123/20/kiyo-customize/38/a5/g/o0250008412299341480.gif"><br>◆マイブログのバナータグです。<br>もしよかったら、ご使用くださいね。<br>
↓↓↓<br><input value='<a href="http://ameblo.jp/kiyo-customize/" title="アメブロをカスタマイズしよう！" target="_blank"><img src="http://stat.ameba.jp/user_images/20121123/20/kiyo-customize/38/a5/g/o0250008412299341480.gif" alt="アメブロをカスタマイズしよう！"></a>' readonly onclick="this.select()" style="background-color:#FFFFFF;color:#000000;width:250px;border:1px solid #cccccc;"></center>
↓↓↓<br><input value='<a href="http://ameblo.jp/kiyo-customize/" title="アメブロをカスタマイズしよう！" target="_blank"><img src="http://stat.ameba.jp/user_images/20121123/20/kiyo-customize/38/a5/g/o0250008412299341480.gif" alt="アメブロをカスタマイズしよう！"></a>' readonly onclick="this.select()" style="background-color:#FFFFFF;color:#000000;width:250px;border:1px solid #cccccc;"></center>
右サイドバーには、次の通り表示されています。
もしよろしかったら、上記のバナーを使ってくださいね。
<<上記のバナーをあなたのブログに設置する方法は、次の通りです。>>
１．上記の赤枠内のタグの上で左クリックすると、
次のようになります。
２．そのままで右クリックし、タグをコピーします。
３．あなたのブログに貼り付けてくださいね。
（注意点）
上記のタグをそのままコピーして、あなたのブログに張付けてください。
記事の投稿欄、メッセージボード、フリースペース等に張付けてくださいね。