ブログ村のバナーを横に並べる方法


【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 />が改行です。

最後までお読みいただきましてありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です