<< Firefox 関連記事メニュー Portable Firefo... >>
 

投稿欄などのフレームを丸く表示する方法

はじめに

 私のサイトは投稿欄などのフレームを丸くしています。このフレームは、バックグランドイメージを利用して実現しています。丸いフレームを表示する方法として、エキサイトを例題に説明したいと思います。なお、エキサイトの例題ですが、他のサイトでも利用できますので、いろいろ試して下さいね。

a0031863_1447147.gif


難易度:★★
はじめての方には、ちょっと難しいかもしれないです。できたときには、すごく嬉しいですよ。頑張って下さいね^^





簡単な説明

 丸フレームを実現する方法として、図2に示すように、frametop、framemain、framebottomの3つのクラスで構成します。各クラスのバックグランドイメージに、フレームの上、中、下の画像を表示するようにします。
a0031863_14471539.jpg

図2 構成図


画像の作り方

 丸フレームを作るためには、上部、中部、下部の3つの画像を用意する必要があります。3つの画像は別々に作ると繋ぎ目がずれたりするなどの問題が発生します。繋ぎ目を目立たなくシームレスにするためには、ひとつの完成した丸フレームとして作成、画像を上部、中部、下部に分ける方法が簡単です。

なお、画像の作り方は、以下のリンクをご覧下さい。

2006-04-02 11:39 Excelを利用した簡単な画像素材の作り方

実際に3つに分けて利用してる画像の例です。この画像を参考にすると作る時の理解の助けになるかもしれません。

上部
中部
下部

※中部の画像は、Y方向に連続で表示するため、必要最小限の画像を切り抜くだけでOKです。



HTML部分

exciteのブログの投稿欄の<div class="POST_BODY"><$postcont$></div>の部分の前後に、以下のようにframetop、framemain、framebottomのクラスを割り当てたdivのブロックを配置します。

HTML部分抜粋


<div class="frametop"></div>

<div class="framemain">

<div class="POST_BODY"><$postcont$></div>
</div>

<div class="framebottom"></div>




メモ:framemain を配置しないで、POST_BODY部分で実現しても良いのですが、ブラウザ間のバグ対策や、調整を楽にするために framemain を配置しています。


CSS編集

HTML部分で、frametop、framemain、framebottomのクラスを割り当てたので、以下のようにCSSを編集します。height:部分は、画像の高さに合わせて設定して下さい。

CSS編集



/*投稿欄フレーム*/
/*上部*/
.frametop{
width:100%;
background-color:#ffffff;
background-image:url("イメージURLアドレス");
background-position:bottom;
background-repeat:no-repeat;
height:11px;
}

/*中部(メイン部分)*/
.framemain{
width:100%;
background-color:#ffffff;
background-image:url("イメージURLアドレス");
background-position:center;
background-repeat:repeat-y;
}

/*下部*/
.framebottom{
width:100%;
background-color:#ffffff;
background-image:url("イメージURLアドレス");
background-position:top;
background-repeat:no-repeat;
height:15px;
}


frametopは、イメージを下に表示し、framebottomはイメージを上に表示するように指定することがポイントです。



今日のポイント
  • 丸フレームを利用するときには、上、中、下の3つの画像を用意して表示する。

  • 画像を作成するときには、ひとつの画像を作成し、上部、中部、下部に分ける。

  • 中部の画像は、Y方向に連続で表示するため、必要最小限の画像を切り抜くだけでOKです




最後に

丸みのあるフレームで構成するだけで、なんだかちょっと、素敵に見えますよね。それほど難しくないので、挑戦してみてはいかがでしょうか。そして、素敵なフレームを作ったら、あなたのブログでそのフレームを配布してみてはいかがでしょうか。素敵なフレームを作ったら教えて下さいね。


お勧めリンク

現在の私が利用している雛形です。興味の有る方は、ご覧下さい。ちょっと難しいかなぁ。
2006-01-14 11:09 コピペでできるCSS編集 バックグランド編1/2
2006-01-08 15:02 コピペでできるCSSレイアウト(excite編)

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-04-22 14:48 | │├投稿欄
<< Firefox 関連記事メニュー Portable Firefo... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。