バナーを配布したい・・

リク記事です・・・

ここのブログのようにマウスを乗せるだけでバナーのタグを選択できるようにしたいです

右サイドバーの一番上のバナー配布方法のやり方です・・・
はじめての方用にタグの作り方から説明しますのでわかっている方は初めの部分はスルーして下さい

まずはタグを作ります

記事を書くで記事にバナー画像を貼り付けます

※このときオリジナルを選択してください・・・

別にこのサイズでしたらオリジナルもサムネイルでも変わりはありませんが・・・

オリジナルの方が画像のＵＲＬが短いんです・・フリープラグインの文字数節約です

記事に貼り付けたら　HTMLタグを表示


HTMLで赤字以外を削除してから　メモ帳とかにコピーしておきます－１
コピーしたら　再びタグの非表示にします

バナー画像をクリックして選択してから「リンク」ボタン

ＵＲＬに自分のブログのアドレスを入れて「リンク」ボタン

そしたら・・・またまたHTMLタグを表示に

また・・・　タグをメモ帳とかにコピーしておきます－２　　このタグを配布することになります

記事は公開するわけではありませんのでそのまま終了させちゃってかまいません

これから説明する方法は禁止タグが入っているので記事やフリースペースには使えません

使えるのは　フリープラグインだけです

方法はいくつもありますがフリープラグインに貼り付けるので出来るだけ文字数を節約しています

まずは・・・よくあるクリックすると選択できる・・・あれ

<img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif " width="160" border="0" target="_blank" /><br>
<input value='<a href="http://ameblo.jp/exlink/"><img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif " width="160" border="0" target="_blank" /></a>' readonly onclick="this.select()" style="width:160px">
<p>貼っていただけたらうれしいです</p>

水色のタグがはじめにコピーした部分で緑のタグが後でコピーしたところです

style="width:160px"　この部分は枠の長さをバナー画像の横幅にあわせています

別にあわせなくともいいのですが・・・合わせた方が・・・カッコイイ・・・です

他にもフリープラグインに文字数の余裕があるのでしたら

style="background-color:#fff;color:#666;width:160px"・・・とかのように

枠内の色やタグの文字色なども指定できます・・・わたしのは　color:#666 です

※タグの文字色によっては選択したときに背景が反転しない場合もあります
　やはり文字数節約のためカラーコードを
　　#ff00ff を　#f0f　　、　#ffffff を　#fff のように3桁で使います

style="background-color:#fcf;color:#f0f;width:160px" (左↓)

style="background-color:#cff;color:#00f;width:160px" (右↓)

で

最後に　<p>貼っていただけたらうれしいです</p>　のようなメッセージをつけて

このままフリープラグインに貼ります

文字を小さくしたい場合は<p style="font-size:10px">貼っていただけたらうれしいです</p>
実際に見ながらフォントサイズを調整下さい

あるいは文字色もって～場合はここでも可能ですがフリースペース文字数節約のために

　<p class="ban">貼っていただけたらうれしいです</p>　こうしておいて

ＣＳＳの編集で

.plugin .ban{

font-size:10px;/*文字サイズ*/

color:#ff00ff;/*文字色*/

}

もちろん文字サイズをさわる場合だけでもこの方法にすれば10文字節約できます

<img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif" width="160" border="0"><br><p style="font-size:8px">バナーのタグです↓ご自由にお持帰り下さい</p>
<input value='<a href="http://ameblo.jp/exlink/"><img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif" width="160" border="0" target="_blank" /></a>' readonly onclick="this.select()" style="background-color:#ccc;width:160px">

次に・・このブログのようにカーソルをのせるだけで選択する方法・・・・　

onclick　が　onmouseover　に 変わるだけです・・ガッカリしましたか？

<img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif " width="160" border="0" target="_blank" /><br>
<input value='<a href="http://ameblo.jp/exlink/"><img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif " width="160" border="0" target="_blank" /></a>' readonly onmouseover="this.select()" style="width:160px">
<p>貼っていただけたらうれしいです</p>

一般的にはテキストエリア（textarea）を使っている場合が多いと思いますが

コチラの方がチョットだけ文字数節約にもなるし・・・

テキストエリアのcolsはキッチリ横幅が決まっているわけではありませんので

バナーの横幅に合わない場合もでてきますのでコチラの方法を説明しています

onclickの代わりに onfocusでも出来ますし

readonly="readonly" を文字数節約のために　readonly と略しちゃったりもしています・・・

<br />　も文字数節約のため　<br> に

文字数オーバーでフリープラグインに保存できない場合は・・・

水色部分の　height="45"　や　alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" 　や　　width="160" border="0" target="_blank"　などを削除してください

水色部分は自分のブログに表示するだけなので必要ではありますが文字数節約のために削除します

target="_blank　これはアメブロのバグでまったくココには必要ありませんので真っ先に削除です

この際・・・ついでなので・・・

上のようにリンクボタンでリンクを貼った場合

アメブロのバグによりおかしなタグになります

<a href="http://ameblo.jp/exlink/" target="_blank" ><img height="45" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20090522/01/exlink/14/87/g/o0159004510184492677.gif " width="160" border="0" target="_blank" /></a>

リンクボタンを使うと　 target="_blank"　水色部分 に付きますがまったく意味の無い場所です

本来・・新しいウィンドウでリンクを開く場合には　target="_blank"　赤字部分　にないとおかしいです

気になる方はなおしておいてください・・・・

あるいはリンクするときにリンク先の表示方法 を同じウィンドウでリンクしてください

style="background-color:#ccc;width:160px"　この部分もＣＳＳへ持っていけるのかも？（未検証です）

これはフリープラグインにしか貼り付けられません

サイドバーの配置で「フリープラグイン」を表示したい位置にドラッグすることを忘れないで下さい

お持帰りいただいたバナーはフリースペース、フリープラグイン、メッセージボード、記事中などドコにでも貼ることができます

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

まだ質問がきてもいないのに・・・・

勝手におせっかいな回答しちゃいます・・・

直リンってなんですか？

素材サイトには
「直リンしないで～」
「ダウンロードして使ってね～」
って注意書きが必ずあります

素材サイトの画像をダウンロードして自分の画像フォルダーにアップして使うと
タグは・・<img src="http://stat.ameba.jp/user_images/20090531/21/abcdef/2e/bd/g/o0123456.gif">　
こんなんになるはずです

でも素材サイトの画像に直接リンクしちゃっていると
<img src="http://www.sozai.com/123.gif">　　このようになります
どちらも同じ画像があなたのブログに表示されます

上のタグの意味は・・・
img 画像は　sozai.com にある　123.gif　って画像を表示します
だからsozai.comに見に行ってきて表示してね・・・

つまりみなさまのブログのページを１回開かれるたびにsozai.comに見に行ってきて表示しているわけです
みなさまのページが100回開かれたら100回sozai.comに見に行ってきて表示しているわけです

(　簡単に説明するためにキャッシュは無視しています　）

実際作業をしているのはsozai.comが入っているサーバー（コンピュータ）です
「チョット見せてよ～」ってリクにサーバーが「はいよ～」ってね

みなさまのブログから100回リクエストがあれば100回それに答えているわけです
みなさま以外にも直リンされていたらそれこそ世界中から「チョット見せてよ～」ってリクエストが殺到するわけです・・・
サーバーの処理（通信）能力がそれに使われすぎると
同じサーバーを使っているほかのサイトの表示が遅くなったり（重くなったり）します

そんなことで忙しくなったり他のサイトに迷惑をかけて困るのがサーバーです

「ちょっと・・・sozai.comさん！いい加減にしてよね！」
「このサーバーはあんただけのためにやってるんじゃないんだからね」
「同じサーバーの他の人に迷惑でしょ・・・」
「何とかできないんだったら料金アップしますよ！」
「イヤならこのサーバーから出て行って！」

これが直リンしないでって～お願いの理由です

このためサーバーによっては他からの直リンの場合は画像を表示させないサーバーもあります

「チョット見せてよ～」ってリクにサーバーが「やだよ～」って拒否します

FC2などもそうです

よく背景とか表示されないんですが・・って質問が来て

見ると背景の画像のＵＲＬがFC2からの直リンだったって場合がけっこうあります

みなさまのブログに貼ってある画像もアメブロ以外からの直リンでは表示されないようになっています
当然・・わたしの配布しているバナーも直リンのタグですから・・・

アメブロ以外で貼っていただいたとしても×が付いて表示されません・・・・

↑ココログに貼り付けてみました・・・　無残にもバナーは表示されません (T_T)

リンク元が画像を削除したり

リンク元のサイトがなくなったりしたら

直リンしている画像は二度と表示されることはありません

使いたい画像は必ずダウンロードして自分の画像フォルダーにアップして使ってください

・・・・じゃあ

バナーのタグはそのまま貼り付けたら直リンじゃん

うっ・・・鋭い！よく気が付きましたね・・・　（一人突っ込みも大変です）

バナーを直リンされるメリット・デメリットがあって・・

・デメリット

　上で説明したように直リンされているとサーバーに負担がかかります

　（・・アメブロの場合は別のブログといってもアメブロという大きなサーバーの中同士なので直リンにはならないのですが・・・　）

・メリット

　バナーが直リンされているので

　新しくバナーを作り変えた時にいちいちお知らせしなくても新しいバナーをサーバーにアップするだけで自動的にみなさまに貼ってもらっているバナーが新しいバナーに変ります

　（・・アメブロの場合は新しいバナーをアップすると画像のＵＲＬが変ってしまうのでこのメリットはありません　）

　サイトを廃止したとき・・アメブロでしたら退会したとき・・・

　当然バナーはなくなりますのでみなさまのブログには画像はありませんって×が替わりに表示されます

　みなさまが気が付いてすぐにリンクを削除しますので

　いつまでもリンク切れのまま放置されることがなくなります

　タグをコピペで貼り付けてもらうほうが貼ってもらいやすい

　（バナーをダウンロードして画像フォルダーにアップしてそれにリンクを貼ってください・・・

　　誰もめんどくさがって貼ってくれません・・・コピペならカンタンに貼ってもらえます）

以上ようにメリット・デメリットを考えると

バナーは直リンしてもらった方がメリットが大きいのです

ただ・・・
そのためにはデメリットによる影響を最小限にするためにバナーのサイズをより小さくしておきます

（縦横のサイズではありません・・容量を小さくします）

わたしのバナーの上で右クリック→プロパティ・・・
サイズ・・241467バイトもあります（241KB）・・・
とてもじゃないけど普通のサイトでしたら直リンで配布できない大きさです
アメブロどうしだから配布できるサイズです

いろんなバナーの上で右クリック→プロパティでサイズを調べてください
たいていは88×31ピクセルで1KBくらいではないでしょうか
アニメーションを使って大きくても10KBを越えるバナーはあまりありません

アフェリエイト以外で個人のバナーが241KBなんて・・・・　話になりません・・・・・

なんか調子こいて・・いっぱい書きすぎちゃった・・・

わけがわからなかったらすみません　m(_ _)m

ペタおねだりボタンが増えましたけど・・・

どうせだったらアメンバー限定記事の画像のように

それぞれに別の class名をつけてほしかったです

そうすれば自動で自分の作った画像に変更できるんですが・・・

アメブロさま～　お願いしますよ～

どうせだからかわいく

↑これはわたしのではありませんよ～

アメブロの標準ボタンです

みなさまも記事を書くところに標準で付いています

・・・・・

バナー配布の記事・・・・・

すごくまじめにやっていますのでもう少しお待ちください・・・

バナーの貼り方・・・

バナー配布の前に・・・

貼り方を教えて・・・・　って声がドコからともなく・・・

１　バナー下の枠の上にカーソルをもって行きます

２　枠内が反転して選択された状態になるので右クリックしてコピー

３　フリースペース（フリープラグインでもメッセージボードでも記事でもＯＫです）に貼り付けます

４　サイドバーの配置でフリースペースをバナーを表示させたい位置にドラッグさせます

完成です・・・・・・

ついでにリク画です・・・・

↓こちらは画像を保存して自分のブログの画像フォルダーにアップして使ってください