<< 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 | │├投稿欄 | Trackback | Comments(8)
トラックバックURL : http://potto.exblog.jp/tb/3514396
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented at 2006-04-29 20:41
ブログの持ち主だけに見える非公開コメントです。
Commented by blue_moon_rabbit at 2006-06-20 00:53
こんばんは^^
チャレンジしてみて上・中・下と何とか(笑)引っ付いたのですが
テキストが左寄せになると左端から飛び出してしまい(汗)
余白を入れてみたのですがタグがぐちゃぐちゃになっているようで(笑)
ぽっとさんのようにテキストの位置が綺麗にならないのです
Commented by potto37 at 2006-06-20 20:31
blue_moon_rabbitさん、こんばんは^^
POST_BODY部分をwidthでサイズを指定し、paddingで空白を入れます。
画像は、POST_BODY部分をwidthのサイズよりも大きめに作るのがコツでしょうか。

現象を見ていないのでなんともいえないのですが、今までのサイズに空白を入れると、今までの記事がずれることがあります。
その場合は、画像を大きめにする必要があります。

.framemain部分にテキストのセンター寄せを指定し、
POST_BODYで左寄せして調整する方法も考えられます。

ヒントだけですけど、参考になれば幸いです。

Commented by blue_moon_rabbit at 2006-06-20 22:13
ぽっとさんご丁寧にありがとうございます
>POST_BODY部分をwidthのサイズよりも大きめに作るのがコツ
なるほど。。。テストしてみましたがWinで確認していないので
怖ろしくて公開できてませんが(;^_^A アセアセ…
明日確認してみます。ほんとうにありがとうございました
Commented by potto37 at 2006-06-26 20:23
blue_moon_rabbitさん、こんばんは
私のところは、以下の記事と同様な方法で表示しています。
ご参考になるのか分からないですが、よろしかったらどうぞ。

http://potto.exblog.jp/2985117/
http://potto.exblog.jp/3018875/
Commented by Rhapsody_N at 2006-08-07 02:29
こんばんは!以前にもヘンテコな質問をしてしまったものです(^^;
また質問があるのですが。

この記事に書いてあるように、枠を付けたいと思いまして、
エクセルで作って、上中下に分けて画像を保存しました。
そしてHTML部分とCSS部分に、とりあえずそのままコピペさせていただきました(^^;
イメージURLのところは、自分で作った画像をアップロードして、そのURLを入れて・・・と、間違っていないと思うのですが、なぜかその画像が表示されません(涙)
記事の一番上に日付が入っているからいけないとか、そういうのがあるのでしょうか?
(しかも、その日付はどうやって入れたかを忘れました・・・)
なんだかさっぱりわからなくなってきました。
もしよければ、何かヒントをいただけませんでしょうか・・・?
よろしくお願い致します。
Commented by potto37 at 2006-08-07 19:44
Rhapsody_Nさん、こんばんは。
ちょっと忙しくて、全てを見てあげられないのでヒントだけですが、挑戦してみて下さい。

1.まず、CSSの指定を一番上の方にして下さい。
これで表示がされると思います。(たぶん)

2.画像のサイズを調整して下さい。
収まりが悪いので、画像の調整をお願いします。
回りの空白はぎりぎりまでトリミングして下さい。

3.マージン、padding、幅、高さなどを調整して下さい。

Commented by Rhapsody_N at 2006-08-07 22:19
質問に答えてくださってありがとうございます!
とりあえずCSSの上の方にしてみたら、画像が表示されました!
そして、まわりの空白はギリギリまでなくしてみたのですが、
横棒しか見えないんですよね・・・。
画像が大きいのかな?と思い、ペイントでサイズを小さくしてみたのに
変わらず横棒のみなんです(> <;)
スキン編集の画面では600pxに設定しているはずで、
ペイントでサイズを小さくした画像は横幅は500pxなんですけど・・・。
(コレは、ペイントのキャンパスのサイズというのを500pxにしたということです)
padding(ですかね?)を左に入れてみたら、角の曲線は表示されましたが
反対に右側はなんだかさらに見えなくなっちゃってるような気がして・・・。
てことはやっぱりまだサイズが大きいってことなのでしょうか?
また良く分からなくなってきちゃいました(涙)
何度も質問してしまい、申し訳ありません・・・。
<< Firefox 関連記事メニュー Portable Firefo... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。