日本ブログ村に参加しているブログの末尾で、必ず目に入るのがバナーなんだ。
これをポチッと押してくれとか、キャプションを付けて、お願いするわけです。
押してくれると、日本ブログ村のジャンル別ランキングにポイントが付きます。
そして、ポイントが加算されればされるほど、順位が上昇する仕組みなのです。
それで、複数ジャンルに登録すると、バナーを幾つか貼り付けねばなりません。
まあ、Javaスクリプトの記述を、単純にブログに貼るのは難しくありません。
ただ、それだと縦一列に並ぶだけで、横に並べたいと思う人も多いみたいです。
自分も横に並べてみたいと思って悪戦苦闘しましたが、今回成功いたしました。
実際、ブログ村参加者のブログ投稿では、紹介している人がいるけどシンプル。
バナーとバナー間に、スペースを設けるような工夫が紹介されていないのです。
つまり、単純に並べただけ、その間にスペースも無くて押し間違いをしやすい。
それに、ブログ村のアイコンよりバナーを単純なボタンにしてすっきりしたい。
など、色々な要望もあるはずだし、クリックで新しいタブに移行したいとかも。
それで、新しいデザインのブログ村から、バナーのスクリプトをコピーします。
それを貼付けて実行したら、画面がそのままブログ村に移り変わってしまった。
以前はそうじゃなかったんだけど、どこか記述が違うと気が付いて調べてみた。
分かったのは、'_blank'というスクリプトが不足しており、追加して直りました。
他には、バナーの間にスペースを設けるんだけど、一般的には「 」です。
ただ、これにも色々とスペース幅に種類があるので、お好みで選べばいいんだ。
例えば、スペース一個分「 」を連続して書けば、空白文字が連続表示。
 |
| シンプルなバナーも用意 |
問題なのは、横に並んだバナーが、表示画面の大きさに応じて綺麗に並ぶこと。
例えば、ブログをBloggerのスマホデザインから、iPodの画面に上手く並べたい。
これは、iPhone5Sと同じ４インチ画面で、まだアップルがサポートしています。
だから、この程度で表示して見ても、見栄えがよいようにしておきたいんだな。
加えて、一行の真ん中に表示されるように、レイアウト可変で作ってみました。
さらに、ブログ村専用のバナーでなくても良い人に単純なボタンに換えたんだ。
というわけで、でき上がったスクリプトを、参考までに末尾で載せておきます。
ここまで、ていねいにスクリプトを紹介した人はいないんじゃないかと思いますが、みんな”日本ブログ村”の仲間なんだし、気に入って使ってもらうことで、ポイントが増えてランキングがあがるのであれば、それはそれでよいのではないかと思うのでした。
＜おまけ＞ ※朱書きの箇所は、所属するランキングのURL・呼称を貼ってね。
①日本ブログ村のバナーを使った並列表示
<div style="text-align: center;">
いいねと思ったら、三つポチっとね！<br />
<a href="https://snow.blogmura.com/ranking.html" target="_blank">
<img alt="にほんブログ村 スキースノボーブログへ" border="0" height="31" src="//snow.blogmura.com/img/snow88_31.gif" width="88" />
</a>
 
<a href="https://snow.blogmura.com/ski/ranking.html" target="_blank">
<img alt="にほんブログ村 スキースノボーブログ スキーへ" border="0" height="31" src="//snow.blogmura.com/ski/img/ski88_31.gif" width="88" />
</a>
 
<a href="https://travel.blogmura.com/traveldiary/ranking.html" target="_blank">
<img alt="にほんブログ村 旅行ブログ 旅日記・旅の思い出へ" border="0" height="31" src="//travel.blogmura.com/traveldiary/img/traveldiary88_31.gif" width="88" />
</a>
<br />
<a _blank="" href="https://snow.blogmura.com/ski/ranking.html" target="_blank">
<span style="font-size: x-small;">にほんブログ村</span>
</a>
           
<span style="font-size: x-small;">
<a href="https://snow.blogmura.com/ranking.html" target="_blank">にほんブログ村
</a>
             
</span>
<a _blank="" href="https://travel.blogmura.com/traveldiary/ranking.html" target="_blank">
<span style="font-size: x-small;">にほんブログ村
</span>
   
</a>
</div>
②シンプルなボタンをバナーにした並列表示
<div style="text-align: center;">
いいねと思ったら、三つポチっと押してね！<br />
<input type="button" value="スキースノボ"" style="background-color:#00FFFF;color:#FFFF33;border-color:#CCCCCC;font-size:10px;border-width:2px";font-family: "Meiryo UI";font-weight: bold
onClick="window.open('https://snow.blogmura.com/ranking.html','_blank')" />
</a>
<input type="button" value="スキー命"" style="background-color:#0099FF;color:#FFFF33;border-color:#CCCCCC;font-size:11px;border-width:2px";font-family: "Meiryo UI";font-weight: bold
onClick="window.open('https://snow.blogmura.com/ski/ranking.html','_blank')" />
</a>
<input type="button" value="旅日記思い出"" style="background-color:#FFFF99;color:#0099FF;border-color:#CCCCCC;font-size:11px;border-width:2px";font-family: "Meiryo UI";font-weight: bold
onClick="window.open('https://travel.blogmura.com/traveldiary/ranking.html','_blank')" />
</a>
<br />
<a _blank="" href="https://snow.blogmura.com/ski/ranking.html" target="_blank">
<span style="font-size: x-small;">にほんブログ村</span>
</a>
 
<span style="font-size: x-small;">
<a href="https://snow.blogmura.com/ranking.html" target="_blank">にほんブログ村
</a>
   
</span>
<a _blank="" href="https://travel.blogmura.com/traveldiary/ranking.html" target="_blank">
<span style="font-size: x-small;">にほんブログ村
</span>
 
</a>
</div>
いいねと思ったら、三つポチっとね！
0 件のコメント:
コメントを投稿