複数カテゴリーに所属していたので”ブログ村のバナー”を横に並べておりました。バナーの画像と文字がセットになっているので、画像だけ抜き出して、スペースを入れながら並べて貼り付けます。それでも横に並ばない時は、divタグやtableタグを使いました。

ブログ村のカテゴリーバナーを分解する

まずブログ村のカテゴリーバナーって、こんな感じ↓

<a href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.html” target=”_blank”><img alt=”にほんブログ村 (大区分名)ブログ (カテゴリー名)へ” border=”0″ src=”https://(大区分名).blogmura.com/(カテゴリー名)/img/(画像名).gif” height=”31″ width=”88″ /></a><br />
<a href=”https://(大区分名).blogmura.com/(カテゴリー名)/ranking.html” target=”_blank”>にほんブログ村</a>

これらは、「画像リンク」(黄色マーカー部分)と「テキストリンク」(水色マーカー部分)の2つに分解できます。

画像リンクの部分

<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 />が入っています。

バナーを横に並べる

大抵の場合、上記の画像のHTMLだけを2つ続けて貼り付けると勝手に横に並びます。

にほんブログ村 ライフスタイルブログ ミニマリストへ  にほんブログ村 その他生活ブログ 家計管理・貯蓄へ  にほんブログ村 その他生活ブログ 節約・節約術へ

(↑今、ブログ村に入っていないので、クリックしないでください。笑。)

二つのバナーの間にスペースを空けたいときは、間に&nbsp;をつなげて書き入れます。

これで大抵の場合は並ぶんじゃないかな?

仕組みが分かってしまえば、難しくない作業ですが、ブログを始めたばかりの頃の最初の難関がこれでした。

なつかし~。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください