第１６回.ファンブログカスタマイズ講座（整頓編？）：ブリカマ日記

第１６回.ファンブログカスタマイズ講座（整頓編？）

さーて昨日なぎこたさんとりらくさん、また先日みかんさんとＨＴＭＬタグの
使い方みたいなことをやり取りしていたのですが、せっかくなので
カスタマイズ講座として詳しく説明しようかな？と、、、

ではでは第１６回のファンブログカスタマイズ講座です～(^O^)／

結構気になっている方多いかもしれませんが、アフェリエイトバナーとか
の配置がバラバラなのを直す方法ですね。

まずは真ん中

次に左

次に右

如何ですか？こんな感じに思い通りに動かせます。

では実際のタグです。
※本来「＜＞」括弧は半角文字ですが半角で書くと画面に表示されず
そのタグが適用されるので全角にしています。

これが真ん中にしているタグです。
＜div align="center"＞
＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg"＞
＜/div＞

この赤い部分のタグに囲まれた部分がすべて指定した位置に表示されますよ(^O^)／
今回は＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg"＞ですね。
当然たくさん入れることもできますので、たくさんのバナーを一気にそろえたい
場合は一番上と下にこの赤い＜div＞タグを指定すればいいのです～(^.^)

そして左、右はちょっと変更するだけです(^^♪
＜div align="center"＞を＜div align="left"＞にすれば左
＜div align="center"＞を＜div align="right"＞にすれば右

簡単ですよね？！

さてここまでできた方はステップアップ！！

画像の大きさを調整して見栄えよくしましょう(^O^)／

たとえば以下のようなのは見栄えが良くないですよね(^_^;)

そこで大きさをそろえてあげましょう！

ね♪この方がいいでしょ？
って同じバナーばかり気持ち悪いですね（笑）
これはタグにちょっと追加してあげるだけです。

＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg"＞
＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg" width="140px"＞

上下の違いわかりますよね？

そうです。「width="140px"」の部分ですね。
これで幅が変えられます。
しかしここで注意！同時に高さも変わります！
上下比率を保ったまま画像の大きさは変更されます。

通常はこの使い方がいいと思います。
しかし高さが微妙に違っているものってありますよね。。。
たとえばこんな感じ・・・

これも気になりますよね～(-_-)

これはこうします！
＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg" height="26px" width="140px"＞＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg" height="26px" width="140px"＞＜img src="https://fanblogs.jp/burikama/file/469/c2luYnVyaf4B.jpg" height="26px" width="140px"＞

「height="26px"」が追加されてますね。
これで高さ、幅が自由に変えられます。
でこうなります～

これできれいにそろいました～(^O^)／

ここで気を付けていただきたいことがあります。
画像はもともとの大きさより大きくすると、見た目が汚くなります。。。
なので汚くならない範囲内で数値を調整してくださいね。

ということで位置とサイズ調整をすれば見た目問題はほぼ解決できるかと(^O^)／
位置調整のテクニック、画像サイズ調整のテクニック組み合わせて思い通りの
ページに仕上げましょう(^O^)

わからないことがあったら聞いてくださいね～(^^♪

【ファンブログカスタマイズの最新記事】