【2020年3月更新】
ブログ村で複数カテゴリーに所属する時に、バナーを横に並べる方法です。
バナーの「画像」と「文字」がセットになっているので、まず画像だけ抜き出し、並べて貼り付けます。
ブログ村のバナーの場所
ログイン → ランキング参加 → INポイントバナー
ブログ村のカテゴリーバナーを分解する
まずブログ村のカテゴリーバナーって、こんな感じ↓
<a href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking/in?p_cid=(カテゴリー番号)” target=”_blank”><img src=”https://b.blogmura.com/(大区分名)/(カテゴリー名)/88_31.gif” width=”88″ height=”31″ border=”0″ alt=”にほんブログ村 (大区分名)ブログ (カテゴリー名)へ” /></a><br /><a href=”https://(大区分名).blogmura.com/ (カテゴリー名) /ranking/in?p_cid=11026170″>にほんブログ村</a>
太文字が「画像リンク」の部分です。
<br /> は改行で、残りは「テキストリンク」。
横に並べる
大抵の場合、上記の画像のHTML(太字部分)だけを2つ続けて貼り付けると勝手に横に並びます。
二つのバナーの間にスペースを空けたいときは、間に「&」と「nbsp;」をつなげて書き入れます。
もし縦に並んじゃう場合は、imgからスタートする<>のどこかに 「style=”display: inline-block;”」と書き入れてみるといいかもです。
<img src=”https://b.blogmura.com/88_31.gif” style=”display: inline-block;” width=”88″ height=”31″ border=”0″ alt=”ブログランキング・にほんブログ村へ”>
画像リンクの部分の意味
<a href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.html” target=”_blank”><img alt=”にほんブログ村 (大区分名)ブログ (カテゴリー名)へ” border=”0″ src=”https://(大区分名).blogmura.com/(カテゴリー名)/img/(画像名).gif” height=”31″ width=”88″ /></a>
- 最初の
<aは、アンカー(リンク)の開始タグ。これはリンクの設定のHTMLですよ！という開始文 - href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.htmlの部分はリンク先
- target=”_blank”は、新しいタブで開くための指定
/>は、リンク開始タグの終わり。<imgはこのリンクは画像ですよ！という開始文- alt=”にほんブログ村 (大区分名)ブログ (カテゴリー名)へ”は、画像の説明。ホバーすると見える。
- border=”0″は、枠線なし
- src=”https://(大区分名).blogmura.com/(カテゴリー名)/img/(画像名).gif”は、画像のアドレス
- height=”31″は、画像の高さ(ピクセル)
- width=”88″は、画像の幅(ピクセル)
/>内側の画像タグimgの終わり。閉じタグはなし。</a>外側のアンカー(リンク)を閉じタグ
こうやって、画像でのリンクが表現されています。
テキストリンクの部分の意味
<a href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.html” target=”_blank”>にほんブログ村</a>
- 最初の
<aは、アンカー(リンク)の開始タグ。これはリンクの設定のHTMLですよ！という開始文 - href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.htmlの部分はリンク先
- target=”_blank”は、新しいタブで開くための指定
/>は、リンク開始タグの終わり。- 「にほんブログ村」は、リンクのテキスト。
</a>リンクの閉じタグ
バナーとテキストの間の改行
画像とテキストリンクの間の<br />が改行です。
最後までお読みいただきましてありがとうございました。