広告が下に長くなってしまうときには?

アメブロで記事の中に広告を設置したいという方も多いかと思います。

しかし、そのまま設置してしまうと、図のように下に長くなってしまい、スペースを取ってしまうといった場合もあります。

アメブロに広告を横並び表示させる方法3 (1)

今回は、アメブロで広告を横並びに設置する方法についてご案内いたします。

ブログ記事の編集

まずは、新規記事の場合はブログ管理画面の右上にある「三本線」ボタンを、押して出てきたメニューの「ブログを書く」を押します。

アメブロに広告を横並び表示させる方法3 (2)

既に書いた記事の場合は、ブログ管理画面の右上にある「三本線」ボタンを、押して出てきたメニューの「記事の編集・削除」を押します。

アメブロに広告を横並び表示させる方法3 (3)

編集したい記事の「編集」を押します。

アメブロに広告を横並び表示させる方法3 (4)

記事の編集画面で、「HTML表示」を押します。

アメブロに広告を横並び表示させる方法3 (5)

広告を設置したい場所に、以下を追加します。

広告が2つの場合

<div style="display: inline-block;width: 300px;">
【1つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 300px;">
【2つ目の広告のタグ】
</div>

広告が3つの場合

<div style="display: inline-block;width: 200px;">
【1つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 200px;">
【2つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 200px;">
【3つ目の広告のタグ】
</div>

広告が4つの場合

<div style="display: inline-block;width: 150px;">
【1つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 150px;">
【2つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 150px;">
【3つ目の広告のタグ】
</div>
<div style="display: inline-block;width: 150px;">
【4つ目の広告のタグ】
</div>

アメブロに広告を横並び表示させる方法3 (6)

ブログの編集を終えたら「全員に公開」または「アメンバー限定公開」を押します。

アメブロに広告を横並び表示させる方法3 (7)

広告が横並びに追加されました。

アメブロに広告を横並び表示させる方法3 (8)

まとめ

以上、アメブロで広告を横並びに設置する方法についてご紹介させていただきました。

広告を設置する際には、見栄えにも十分気を付けたいものです。

皆さんも見やすい広告によって、ブログの価値をより高めてください。

「アメーバキング2」アメブロ売上倍増&アクセスアップの多機能ツール

http://ci-s.net/amebaking2/

  • アメブロにサムネイル画像なし人気記事一覧を表示させる方法
  • アメブロのサイドバーに広告を貼る方法
  • アメブロに広告を横並び表示させる方法
  • アメブロのタイトルをヘッダー画像に変更する方法

Twitterでフォローしよう

  • アフィリエイト
    無料ブログでのアフィリエイト危険性4つの理由
    2018年6月2日
  • アフィリエイト
    アフィリエイト初心者におすすめのASP一覧 11選
    2018年8月18日
  • ネット副業収入
    いままでのネット副業収入実績
    2018年1月7日
  • ネット副業種類
    モノオク登録方法、自宅の空き部屋、空きスペースを貸すだけの副業
    2019年6月19日
  • アフィリエイト
    プロアフィリエイターの作業環境やツール、サイト11個紹介
    2018年5月11日
おすすめの記事
ネット副業種類
目次1 FXについて2 どういう人がFXで稼いでいるの?3 FXで稼ぐためのレバレッジ4 スワップ金利を利用して確実に稼ぐ方法5 FXで月収...
ライブドアブログ カスタマイズ初心者講座
目次1 ライブドアブログについて2 ライブドアブログの登録準備3 ライブドアブログの登録の仕方 ライブドアブログについて ライブドアブログは...