サイトカスタマイズ】ブログランキングのバナーを横に並べる

CSS&Html&PHP

「ブログランキングのバナーを貼ったけれど、意外と場所を取るのが気になる」という方へ。コンパクトに表示するカスタマイズ方法をお伝えします。

改造前…

こんな感じでバナーとテキストが4段にも渡って表示されます。これはスペースを取りすぎですね。

にほんブログ村 受験ブログ 中学受験(指導・勉強法)へ
にほんブログ村


中学校受験ランキング

改造後!

2個を横並びにしてみました。

こうなります

↓ クリックしてね♪ ↓
にほんブログ村 受験ブログ 中学受験(指導・勉強法)へ

改造方法

テストの上、自己責任で使用して下さい。これにより生じた損害について当ブログは一切の責任を負いません。

テキストを削除

WordPressで新しい文書を作り、ランキングサイトからコピペしたリンクタグを貼り付けます。上のような四段で表示されるでしょう。

リンクテキストだけを削除します。

コードをコピペ

改行で段落を変えてからテキストエディタを開いて、下のコードを貼り付けてください

<div style=”width: 220px; text-align: center; margin: 0; padding: 0;”>↓ クリックしてね♪ ↓</div>
<div style=”display: flex; margin: 0; padding: 0; justify-content: space-around; width: 220px;”>
<div>(バナー1)</div>
<div>(バナー2)</div>
</div>

こんな感じに表示されますね。

↓ クリックしてね♪ ↓
(バナー1)
(バナー2)

カスタマイズ

(バナー1)、(バナー2)という箇所に自分のバナーを貼り付けます。

上の「クリックしてね♪」という文字も書き換えるか、消してもOKです。ゴミが残らないように、テキストエディタでオレンジの部分を消すのが確実です。

設置

テキストエディタでコードをコピーして、自分のブログのウィジェットなどに貼り付ければ終了です。

「Cocoon」の場合は、ダッシュボードの「外観」「ウィジェット」から貼る場所を選んで「テキスト」ウィジェットの「html」欄に貼り付けるのがオススメです

お役に立てたら

うれしいです。

この記事に関する質問がございましたらメールTwitterでどうぞ!

タイトルとURLをコピーしました