文章で画像やアドセンスを囲むように表示をする

文章の中に画像やアドセンスなどを貼る時にそのまま貼るとこんな感じなります。これだとドカッと空白ができてしまうので、あまり見栄えが良くないという現象が起こります。こんな感じに。


そこで、どうすればよいのかと考えたのです。まず、古典的なやり方は、ホームページビルダーなどのホームページ製作用ソフトを使います。で、テーブルを使って、記事の部分と画像挿入部分を作ろうと思ったのですが、これはうまくいかず・・・どうすればよいのか考えていたところ、ありました英語のサイトで紹介していました。日本のサイトでもあると思いますが、日本語で検索しても思っているものが出てこなかったので、英語で検索しました。

How to easily wrap text around Google Adsense or Chitik ads


要するに、画像などの文章で囲みたいものを
＜div style="display:block;float:right;margin: 5px 5px 5px 5px;"＞
ここに囲みたいものを入れます。
＜/div＞
＊実際に使用の時は「＜」と「＞」は半角を使ってください。

で、囲むだけです。
「float:right」のは、文章で囲むモノが記事の右にきます。


これで思っている形ができるようになりました。以外に簡単そうに見えるのですが、知識がないと簡単にできるようでなかなかできません。私の場合は、色々独学でやっているので、本当に骨が折れます。


しかし、一度分かってしまうと色々なことに応用が利くと思いますので、ブログをされている人はぜひ使ってみてください。