「ブログランキングのバナーを貼ったけれど、意外と場所を取るのが気になる」という方へ。コンパクトに表示するカスタマイズ方法をお伝えします。
目次(クリックでジャンプ)
改造前…
こんな感じでバナーとテキストが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)という箇所に自分のバナーを貼り付けます。
上の「クリックしてね♪」という文字も書き換えるか、消してもOKです。ゴミが残らないように、テキストエディタでオレンジの部分を消すのが確実です。
設置
テキストエディタでコードをコピーして、自分のブログのウィジェットなどに貼り付ければ終了です。
「Cocoon」の場合は、ダッシュボードの「外観」「ウィジェット」から貼る場所を選んで「テキスト」ウィジェットの「html」欄に貼り付けるのがオススメです
お役に立てたら
うれしいです。