微妙なレイアウトの調整ができるスペーサーGIFを使ってみよう！

ファンブログ小技・裏技投稿日：2012年05月05日 06:15

サイドバーのバナー同士がくっつかないように隙間を入れたり、作成した項目の最後に隙間を入れるのに改行タグの <br /> を使っていると思いますが、この <br /> で空く隙間の広さは決まっているので微調整ができません。
<br /> を使って隙間はできたけど...もう少し狭くしたいって思ったことってありませんか？

<br />

<br />

<br />

次の項目

spacer.gif

次の項目

▲

そんなときに <br /> の代わりに「スペーサーGIF」を使いますと...

? こんな感じで簡単に余白や隙間の微調整ができちゃうんです。

スペーサーGIFというのは、1×1ピクセルのとっても小さい透明な画像のことです。この透過するGIF画像の横幅（width）や高さ（height ）を指定することで、思いどおりの余白や隙間を作ることができます。

※ 赤い三角の上をドラッグしますと、透明の gif 画像が反転されます。
※ 横幅（width）5px、高さ（height ）10pxで指定しています。

実はこのスペーサーGIFは、ファンブログのサイドバーの項目の隙間調整に使われているんです。透明な画像なので見えないのですが、項目と項目の間をドラッグすると反転表示されますので確認することができます。

本来は1×1ピクセルの透明な画像をアップロードすることから始めなくてはいけないのですが、この使用されているスペーサーGIFのURLを指定することで、簡単にスペーサーGIFが使えちゃうんです。(≧ω≦)b

▼ それではやり方の説明です ▼

このタグコードは記事内では使用できません。原因はタグ内で使用していますファンブログのオリジナルタグ {$BlogTmplUrl$} が記事内ではうまく変換されないためです。記事以外の場所では問題なく変換されますので、サイドバーの項目やHTMLファイルでご利用ください。

ボックス内にマウスを置くだけ でタグコードが 全て選択 されますので、 右ボタン⇒コピー でお持ち帰りください。

<div align="center"><img src="{$BlogTmplUrl$}img/spacer.gif" alt="" width="5" height="10" /></div>

このタグコードを <br /> の代わりに貼るだけで、ファンブログのスペーサーGIFが挿入されます。
中央揃えのタグ <div align="center"> ～ </div> の指定があった方がスペーサーとして使いやすいので、通常はそのままにしてください。

スペーサGIFの大きさはデフォルトの指定値の、横幅 5px 高さ 10px に指定してあります。
高さを調整したい場合は img タグの最後の height="10" の数字を変更することで増減できます。

いかがでしたでしょうか？スペーサーGIFは少し古いレイアウトの手法なのですが、項目内でバナー広告とセットで使うと微妙なレイアウトの調整ができますのでとても便利です。項目以外の場所でも使用できますが、本来はCSSで数値指定するのがベストなので、あくまでも裏技的なものとしてお使いください。( ^ω^;)）

+++ 追記 +++

今回使用しましたファンブログのオリジナルタグ {$BlogTmplUrl$} は非公開のもので、現在使用しているスキンのURL /template/※※※※/ に変換されます。 {$BlogTmplUrl$} を使用することでデフォルトのサイドバー項目の imgファイルの指定ができますので、詳しい方は色々とお試しくださいませ。(´・ω・`)b

※上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※Htmlタグのご使用につきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜　次の記事を読む　≫