ブログランキングのバナーを横並びで表示する方法

「同じジャンルのブログを書いている人と交流したい」「アクセス数が欲しい」「他の人のブログを参考にしたい」など、様々な理由からブログランキングに登録している人がいると思います。

そして、ブログランキングに登録している人は、ブログランキング界のツートップである「にほんブログ村」「人気ブログランキング」の両方に登録している人も多いでしょう。

どちらのブログランキングも、ブログに専用のバナーを貼る必要があり、そのバナーがクリックされることでポイントが入りランキングされるシステムになっています。

ただ、それぞれの専用バナーを貼り付けると縦に並んでしまいますが、スペースを節約したくてバナーを並びにしたい場合もあると思います。

そこで今回は、ブログランキングのバナーを横に並べる方法を紹介します。

ブログランキングのバナーを横並びで表示する方法

ブログランキングのバナーのサイズを合わせる

ブログランキングのバナーは様々なサイズがありますが、きれいに並べて表示させる場合は、それぞれのブログランキングのバナーのサイズが同じくらいであると見栄えが良くなります。

お勧めは以下のサイズのバナーを用いることです。

上記以外のバナーを使ってしまうと、それぞれのランキングで対応するものを自作しなくてはいけなくなったりするので注意しましょう。

バナーだけを表示する場合の横並びで表示させる方法

ブログランキングのサイトからバナーのタグをコピーすると、「バナー」とブログランキング名の「テキスト」が両方表示されます。

バナーのタグを見てみると、バナーとテキストは次のように分かれています。

バナーのHTML：赤字
テキストのHTML：青字

それぞれのバナーのタグだけをコピーして、連続するように貼り付けると次のように横並びになります。

バナーの間の距離を空けたい場合は、後ろのバナーの左端付近にカーソルを合わせて、文字入力の時と同様にスペースボタンを押すことで間隔を空けることができます。

バナーとテキストを横並びに表示する方法

バナーとテキストを両方表示させる場合は、それぞれのタグを連続するように張り付けても、次のように表示崩れを起こしてしまいます。

そこで、バナーとテキストを両方並べて表示させるためには、テーブル内に入れ込むという方法があるので、次のコードを使います。

するとテキストとバナーの両方を横並びで表示することができます。

バナーの数が2個以上に増やす場合は、次のようなコードになります。

おわりに