こんにちは。
『やさしいブログの作り方』の松田です。
サイドバーのフリースペースやフリープラグインにはバナー画像やブログパーツなどを貼りつけることができます。
しかしバナー画像やブログパーツをそのまま設置していると、サイドバーの幅と画像やブログパーツの幅が合っていないためにサイドバーがガタガタしてしまうことがあります。
ブログパーツの中には横幅が調整できるものがありますので、それはサイドバーの幅に合わせればきれいに表示されますが、そうではない場合は意図的にセンタリングするとすっきり見えることがあります。
今日は意外と知られていないセンタリング（中央寄せ）のやり方をご紹介します。
例えば以下の記述は私のフェイスブックのバナーのソースです。
これをそのままフリースペースに貼りつけると左寄せの状態でバナーが貼りつきます。
これをセンタリングするには、
のようにセンタリングしたい内容の記述の頭に<div align="center">、最後に</div>を追記します。
ちょっとしたことで、サイドバーがすっきり見やすくなりますので、「ガタガタしてる～」というかたは一度試してみてくださいね。＾＾
『やさしいブログの作り方』の松田です。
サイドバーのフリースペースやフリープラグインにはバナー画像やブログパーツなどを貼りつけることができます。
しかしバナー画像やブログパーツをそのまま設置していると、サイドバーの幅と画像やブログパーツの幅が合っていないためにサイドバーがガタガタしてしまうことがあります。
ブログパーツの中には横幅が調整できるものがありますので、それはサイドバーの幅に合わせればきれいに表示されますが、そうではない場合は意図的にセンタリングするとすっきり見えることがあります。
今日は意外と知られていないセンタリング（中央寄せ）のやり方をご紹介します。
例えば以下の記述は私のフェイスブックのバナーのソースです。
<!-- Facebook Badge START --><a href="http://ja-jp.facebook.com/people/Takehiro-Matsuda/100003246065158" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Takehiro Matsuda">Takehiro Matsuda</a><br/><a href="http://ja-jp.facebook.com/people/Takehiro-Matsuda/100003246065158" target="_TOP" title="Takehiro Matsuda"><img src="http://badge.facebook.com/badge/100003246065158.66.208922674.png" style="border: 0px;" /></a><br/><a href="http://ja-jp.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="自分だけのバナーを作成しましょう。">バナーを作成</a><!-- Facebook Badge END -->
これをそのままフリースペースに貼りつけると左寄せの状態でバナーが貼りつきます。
これをセンタリングするには、
<div align="center"><!-- Facebook Badge START --><a href="http://ja-jp.facebook.com/people/Takehiro-Matsuda/100003246065158" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Takehiro Matsuda">Takehiro Matsuda</a><br/><a href="http://ja-jp.facebook.com/people/Takehiro-Matsuda/100003246065158" target="_TOP" title="Takehiro Matsuda"><img src="http://badge.facebook.com/badge/100003246065158.66.208922674.png" style="border: 0px;" /></a><br/><a href="http://ja-jp.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="自分だけのバナーを作成しましょう。">バナーを作成</a><!-- Facebook Badge END --></div>
のようにセンタリングしたい内容の記述の頭に<div align="center">、最後に</div>を追記します。
ちょっとしたことで、サイドバーがすっきり見やすくなりますので、「ガタガタしてる～」というかたは一度試してみてくださいね。＾＾