にほんブログ村や人気ブログランキングではオリジナルバナーを作成することができます。
関連記事はコチラ
オリジナルバナーを作成している多くの方が、ブログにそのまま貼り付けて縦に並んだ状態になっていると思います。
これでも勿論良いのですが、横並びにした方がスッキリしないでしょうか？
本記事ではこんな感じの横並びにする方法を解説します！
横並びにするコード
横並びにするには、画像やアフィリエイトを中央寄せ横並びにする方法のコードを用います。
このコードならスマホなどの小さい画面でも画像サイズが自動調整されるので、キレイに横並びになってくれます。
ただし、コードの使用に制限のあるエキサイトブログや楽天ブログなどでは使用できないのでご了承ください。
オリジナルバナーを横並びにするコードは次のようになります。
バナー①とバナー②の部分にオリジナルバナーのタグを差し替えて使って下さい。
10の部分はバナー間の隙間になるので、適宜変更してください。数値を上げれば間隔が広くなります。
ただ、そのまま貼り付けると以下のようになります。
文字リンクの大きさや位置が気になると思うので、その部分は微調整を行う必要があります。
Bloggerでの方法は次項で解説します。
Bloggerでの調整方法
記事の投稿のHTMLビューを用いるのが簡単です。
左のメニューの投稿から【新しい投稿】で新規記事を作成します。
投稿ページ左上のマークから【HTMLビュー】に切り替えます。
【HTMLビュー】の状態で先程のコードを貼り付けます。
オリジナルバナーのタグを差し替えたら【HTMLビュー】から【作成ビュー】に切り替えます。
そうしたら文字リンクの部分をドラッグして、⇩の画像部分で文字の大きさと位置を調整してください。
調整が完了したら、再び【HTMLビュー】に切り替えます。
（今回は文字リンクをそれぞれ文字サイズ標準・中央揃えに変更しました。）
そこで表示されたコードが完成したコードになります。
コピーして記事に貼り付けたり、投稿のテンプレートに貼り付けてご使用ください。
関連記事はコチラ ➡ 投稿テンプレート（定型文）の作成方法
作成した記事はそのまま削除しても、別の記事に使って頂いても構いません。
オリジナルバナーをスッキリ横並びに！
にほんブログ村と人気ブログランキングなど２つ以上ランキングに参加していたら、そんなに難しいコードではないので挑戦してみてくださいね！
ちなみに当ブログではオリジナルバナーを使用していません。
上記に載せているオリジナルバナーはこの記事用に即席で作成しました(笑)
別ブログバラを咲かせることが好き！では以下のような感じで使っています。
統一性のある画像にしたり、真逆の画像にしてみたり……横並びを意識して画像で遊んでみると個性が出て面白いかもしれませんよ。
