サイドバーのバナーを見映え良く揃えよう
おっと、その前に【 注意事項 】
今回の手法はサイドバーと記事入力欄で基本的に共通ですので、ファンブログでは記事の記入時に左のサイドバーに表示されている[オプション]内の[HTMLで記事を書く]と[改行を有効にする]にチェックを入れた状態にしておいて下さいね。このチェックが外れているとHTMLを含んだ記事の入力は変になります。
今回は「揃えよう*1」という事で、通常(一般的に多用する)のバナーやテキストリンクについての説明になります。
ですから皆さんがお好みの「 Ads 」「ウィジェット」「ガジェット」「リスティング」等々のバナーの中味が変動(リンク先からの情報や商材が変わる)されて表示するバナーには対応していません。
動くバナーに関しては後日でも記事にしますので右サイドバーの「見映え良く揃えよう*2」でご確認下さい。
サイドバーにフリースペースを設定して、そのままバナーのHTMLを挿入すると左に寄ってしまうのでサイズ(幅)の違うバナーを並べるとガタガタに表示されてしまいますね。
・・・となります。
そんな場合にはHTMLの
・文頭に <p align="center">
・文末に </p>
を追加入力してください。
・・・となります。
そして <p align="center"> を <p align="right"> にすると・・・
・・・となります。
変更部分をご理解いただけましたでしょうか?
つまりバナーを指定する場所・・・ ↓↓↓
予定位置:左( align属性を『 left 』にする)
予定位置:中央( align属性を『 center 』にする)
予定位置:右(align属性を『 right 』にする)
です。(英語の左・中・右なんですよっ)
見やすいレイアウトをするとクリック率が上がるそうですよ!
位置を変えて、クリック率アップだぁ〜
えっ、バナーがたくさんあるから全部に必要かって!?
いえいえ、前記したHTMLの応用でセンター(中心)に寄せる場合だと、指定する最初のバナーの文頭に <p align="center"> を挿入して、最後のバナーの文末に </p> を挿入してやれば全てが一度に中寄せになります。
んっ・・・
バナーの上下間隔に隙間が無い? もしくは間隔がありすぎる!?
右サイドバーに関連記事をリンクしてありますのでご利用くださいねっ
ではでは、( ^^) _旦~~
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/special/eco/eco_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/han/images/banner_program/sp-sample_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/han/images/banner_program/tokusyu_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/han/images/banner_program/sp-catdog_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/han/images/banner_program/sp-kids_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/i/banner/sp-iPhone_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/i/banner/sp-nosmoking_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/i/banner/sp-wake_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/special/styleup/styleup_170-60.jpg)
![[stmx] - ソーシャルマーケットプレイス](http://image.d-064.com/special/testkit/sp-testkit_170-60.jpg)



![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/images/myu_program/120-240_02.gif)


この記事へのコメント
有難う御座います
何時でもご利用くださいね ( ^^) _旦~~
こういうコメントってウレシイですね
私の記事でよろしければ、ご自由にお楽しみ下さい。
出来ました!!!
バナーの間に隙間が出来ました!!
感激です・・・
わかりやすい説明ですね^^。
ところで記事中でなく左右の所カレンダーの下とかに広告貼りたいんですけど、やり方がわかりません。いつしかお暇ありましたら記事書いてください!!
コメントもありがとうございます。
今後もヨロシク御願い致します。
詳しくはそちらのブログでご連絡ということで、・・・後程。。。
恥じまして、ド素人なりにカスタマイズの記事を書いています
wiko と申します。
非常にわかりやすいご説明で、とても勉強になりました。
文章も簡潔で、解説の途中に入る図解がありますので、
初心者の方にやさしい内容で、感服いたしました。
私は記事を書くのが非常に遅いので、時間がなくなってしまい
テキストだけでも四苦八苦しております。
図解入り解説は、ついついスルーしてしまって、ずらずらと
長く綴ってしまいます。これではいけませんね。(/ω・\)
記事内容はボチボチですが、お楽しみ下さい (^_-)-☆
ではでは、( ^^) _旦~~
コメントで、とても親切・丁寧におしえていただいて
ありがとうございました
おかげさまで、念願の中央揃えが完成しましたぁ〜
とっても嬉しいで〜す
しかも、あんなにカンタンにできてしまうとはビックリでした
これからも勉強させていただきますネ
よろしくおねがいしま〜すぅ
りんくしてしまいましたが、よろしいでしょうか?
また来ま〜す♪
おひさしぶりで〜す
センターでの揃えかたが分からなかったので
とても勉強になりましたぁ〜
やはり見栄えが大切ですよネ!!
髭のマスターさんのブログにくると
いつも、とっても勉強になります
これからも、よろしくお願いしま〜す♪
コメントが遅くなってしまってスミマセンでしたm(__)m
可愛いなんてほめてくれて嬉しいです
しかし・・・
私なんてパソコンいじったの先月が始めてで今でもちょっとあたふたです
何かアドバイスがあったら教えてくださいねん