2006年11月24日
枠線（border）の上にボックスを配置しましょう。（CSS編集）
ここの記事ブロック要素に枠線を設定しましょう（CSS編集）や引用に枠線を設定しましょう（CSS編集）では、記事の中でアピールしたい文章を枠線（border）で囲んでみました。
この記事では、お友達の果報は寝て待て(-_☆)のPavlobaさんの記事引用の表示をさらにカスタムしてみる？を参考にさせていただいて、枠線囲みになっている枠線（border）の上に、ボックスを配置してタイトルを入力できるようにしましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
枠線（border）の上にボックスを配置しましょう。（CSS編集）
記事の中のある部分を枠線で囲みます。その枠線上にボックスを配置したいので、枠線で囲んだ部分を基準にしてボックスを配置することになります。（これを相対配置といいます。）そのために、positionプロパティをrelativeに設定するのがコツです。
ここで作成したクラス名はyozoが勝手に名付けたものです。もちろん同じものを使用されても構いませんし、ご自分でわかりやすい名称にしても構いません。（半角英数文字で小文字を使用しましょう。）
- position: relative;→相対配置にします。
- top: -1.3em;
→枠線上端からの位置を-1.3em（上端から外へ1.3文字分の高さ）にします。 - width:15em→ボックスの幅を15em（15文字分の幅）にします。
- margin: 0px auto;
→ボックス全体の余白を上下は0pxとし、左右はautoにしてセンタリングします。ただし、IE6.0ではセンタリングされません。 - padding: 0.1em;→枠線と枠内の文章との余白を0.1文字分とします。
- text-align:center;→ボックス内の文字のセンタリング。
- color: #ffffff;→枠内の文字色を#ffffff(白色)にします。
- background: #ff9900;→枠内の文字色を#ffffff(白色)にします。
- border: #666666 1px solid;→枠線の設定内の文字色を#ffffff(白色)にします。
- color: #ffffff;→枠内の文字色を#ffffff(白色)にします。
- background: #ff9900;→背景色を#ff9900にします。
- border: #666666 1px solid;→枠線の種類・太さ･色を設定します。
CSS編集で追加するコード
/*全角15字boxtitle*/.boxtitle15
{
position: relative; /*相対配置*/
top: -1.3em; /* ボックスの高さ調節 */
width:15em; /* ボックスのサイズ*/
margin: 0px auto; /* センタリング*/
padding: 0.1em; /* テキストと枠線の間の余白 */
font-size: 12px; /* 文字サイズ */
text-align:center; /* ボックス内の文字のセンタリング*/
color: #ffffff; /* 文字色*/
background: #ff9900; /* 背景色 */
border: #666666 1px solid; /* 枠線のスタイル */
}
このボックスのソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<div class="textfrm"><div class="boxtitle15">ボックスの中の文字</div>枠線内の文章はここに入力します。</div>
上の例の通りに記事に入力すると、このようになります。
ボックスの中の文字
枠線内の文章はここに入力します。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New おいしく感じた理由 | Top | ブロック要素に枠線を設定しましょう（CSS編集） Old≫
トラックバックURL
トラックバック
≫ 引用の表示をさらにカスタムしてみる？ from 果報は寝て待て(-_☆)
前に、引用の表示を設定してみる記事を書いて、その後も着々と(？)表示の仕様を増やしていました。今回はciteタグを使って、引用の表示をチョコっと変えてみようと思います。Ｓａｍｐｌｅ以前の記事：『引用の表示を指定してみました』 引用先をタイトルっぽく表示してみ [Read More]
コメント
(ノ゜ω゜)ノ*.オオォォォォォォォー
このボックスはこんな風なＣＳＳ設定なのですね!!
以前から記事で何度か見ていたのですが、どうやっているんだろうって
思っていたのです。
これなら色を変えるだけで雰囲気も変わりますし、
とっても見やすいですよね〜♪勉強になりました〜。
ありがとうございます♪(*- -)(*_ _)ペコリ
Posted by まゆび at 2006.11.24 19:21 | edit
コメント
おおおーっっっ！！これはかわいい！！！
しかも使い勝手が良さそうですねー。
むむ、、ぜひ私も活用させていただきたいですー。
yozo殿ー。いつもいつも色々教えてくださってありがとうございます☆
Posted by babar at 2006.11.24 21:45 | edit
コメント
＞以前から記事で何度か見ていたのですが、どうやっているんだろうって思っていたのです。
あらら・・・そうだったのですか♪記事にしようって思いながら、ついついずるずる先延ばしにしちゃってましたよ。お待たせしてごめんなさいね。m(_ _)m
＞これなら色を変えるだけで雰囲気も変わりますし、とっても見やすいですよね〜♪
そうでしょ♪色やらフォントサイズなど色々変更して遊んでみてくださいね。Ｖ(○⌒∇⌒○) ｲｴｰｲ
Posted by まゆびさんへ at 2006.11.24 21:57 | edit
コメント
＞しかも使い勝手が良さそうですねー。むむ、、ぜひ私も活用させていただきたいですー。
どうぞ♪どうぞ♪色やら、フォントサイズやらご自由に変更して楽しんでくださいね♪
喜んでいただけてうれしいですよ♪☆d(o⌒∇⌒o)b ★ｲｴｰｲ★ d(o⌒∇⌒o)b☆
＞yozo殿ー。いつもいつも色々教えてくださってありがとうございます☆
いえいえ♪こちらこそいつも応援ありがとーございまっす♪大変励みになっています m(_ _)m
Posted by babarさんへ at 2006.11.24 22:00 | edit
コメント
そしてそして・・・。
TBに記事の紹介までと、至れり尽くせりありがとうございました♪
細かくキッチリ指定されていて、改めて自分トコの記事を見るとやってるコトの雑さ加減を思い知らされます（。。；）
行き当たりﾊﾞｯﾀﾘ的な感がﾌﾟﾝﾌﾟﾝ臭ってるんで、それはそれで私らしいのですが(爆)
改めてウチでも紹介させていただきたいと思います(・∀・)
P.S.
返しのTB入れさせていただきました♪(ﾟ▽ﾟ*)
Posted by Pavloba at 2006.11.24 22:27 | edit
コメント
＞TBに記事の紹介までと、至れり尽くせりありがとうございました♪
いえいえ♪こちらこそ、随分前から利用させていただいていたのに、
紹介記事が遅れて申し訳ありませんでした。m(_ _)m
position:relative;がポイントですよね。親ブロックからの位置指定のほうが
設定しやすいですからね。とっても勉強になりましたよ。(*^-^)
＞改めてウチでも紹介させていただきたいと思います(・∀・)
たった今、お邪魔させていただきました。紹介してくださってありがとーございまっす♪m(_ _)m
追伸：トラバが繋がっていなかったようですので、
勝手ながらyozoの方で繋がせていただきました。m(_ _)m
Posted by Pavlobaさんへ at 2006.11.24 22:51 | edit
コメント
ｙｏｚｏさん( ^-^)ﾉ(* ^-^)ﾉおはょございまっす♪
早速過去記事で試してみました♪
貧疎な引用が可愛らしくなりましたｙｏ〜〜〜〜!!*:.｡.:*・(*´∀｀)ﾟ｡.:・*ﾎﾟﾜﾝ
新しい投稿で本格始動する際にご紹介させてくださいっ♪
ｙｏｚｏさん!!!人´∀｀).☆.。.:*ぃつもありがとぉござぃまっす*:.☆.。
Posted by ウッキ at 2006.11.25 09:11 | edit
コメント
これはいいですね(･ω･)(._.)(･ω･)(._.)ｳﾝｳﾝ♪
とてもわかりやすく見えますもの〜♪
ボックスを左寄せなどにするときは
> margin: 0px auto;
この部分を margin: 0px 0px; とかって指定すればよいのですかね？？？
それとも違う部分なのかなぁ・・(｀-ω-´)むぅ・・（笑
私のブックマークはyozoさんテキストいっぱいにです（笑
今日も・・(´･ﾉω･`)ｺｯｿﾘ
いつもありがとうございます♪
Posted by モンビッケ at 2006.11.25 10:54 | edit
コメント
＞♪⌒ヽ(*゜O゜)ノ スゴイッ!!!これは すばらしいですね(*´ｪ`*)ｷｬｧ
喜んでいただけてうれしいですよ♪Pavlobaさんに一緒に感謝しましょう♪(^○^)
＞貧疎な引用が可愛らしくなりましたｙｏ〜〜〜〜!!*:.｡.:*・(*´∀｀)ﾟ｡.:・*ﾎﾟﾜﾝ
＞新しい投稿で本格始動する際にご紹介させてくださいっ♪
わぁ♪可愛らしくなりましたか〜♪Ｖ(○⌒∇⌒○) ｲｴｰｲ
紹介まで。本当にありがとーございまっす♪楽しみにしておきまっすヾ(〃^∇^)ﾉわぁい♪
Posted by ウッキさんへ at 2006.11.25 11:22 | edit
コメント
＞これはいいですね(･ω･)(._.)(･ω･)(._.)ｳﾝｳﾝ♪とてもわかりやすく見えますもの〜♪
そうでしょ♪ちょっとしたタイトルを枠線上につけると、なんとなくカッコイイかも。ヾ(￣o￣;)ｵｲｵｲ
＞margin: 0px 0px; とかって指定すればよいのですかね？？？
そうですよ。IE6.0と同じように見せるのなら、/*margin：0px auto;*/のようにコメントアウトするといいでしょうね。左端にぴったり寄せるのでしたら、margin:0px 0px -6px 0px;みたいに、左マージンをマイナス指定にするか、下のようにしたら、左上にタブのように設定できると思いますよ。（ただし、文字サイズ等が違うと微調整しなきゃいけませんよ。）色々試してみてくださいね♪
/*top: -1.3em; ボックスの高さ調節 */←コメントアウトします。
top: -28px; /*ボックスの高さ調節 */←変更します。（単位はemからpxにしました。）
left: -6px; /* ボックスの左位置調節 */←追加します。
/*margin: 0px auto;センタリング*/←コメントアウトします。
＞私のブックマークはyozoさんテキストいっぱいにです（笑
いつもありがとーございまっす♪大変励みになっていますよ。m(_ _)m
Posted by モンビッケさんへ at 2006.11.25 11:39 | edit
コメント
そしてyozoblogが位置しなかったよ。
ただしきのうは入力するつもりだった？
Posted by BlogPetのうさも at 2006.11.25 17:13 | edit
コメント
おお！長い！記事投稿よりも長いコメントだね♪v(*'-^*)ｂぶいっ♪
＞きょうは上下しなかった。そしてyozoblogが位置しなかったよ。
えっ？タイトルの位置のことかな？ちゃんと設定したはずだけど・・・(^-^;
＞ただしきのうは入力するつもりだった？
えっ？きのうは入力するつもりだったのに、今日はやめた・・・
みたいな人聞きのわるいことを・・・（;￣ー￣A ｱｾｱｾ･･･
Posted by BlogPetのうさもさんへ at 2006.11.25 18:16 | edit
コメント
コメントでも教えていただいてありがとうございます〜＾＾
早速φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓです♪
Posted by モンビッケ at 2006.11.26 14:25 | edit
コメント
えへへ・・・お役に立てましたでしょうか♪（;￣ー￣A ｱｾｱｾ･･･
お時間あるときにでも色々楽しんでみてくださいね♪＼(*⌒0⌒)ｂがんばっ♪
Posted by モンビッケさんへ at 2006.11.26 18:25 | edit
コメント
過去記事で試した分なのですが･･･どうやら別記事に<span ~>などの
文字の飾りつけなどが重なった場合に崩れるようなんです･･･
(￣ω￣;)ｴｰﾄｫ...大きく左に跳んでしまいます（一度外して保留にしていまっす）
なにか改善策はありますでしょうか〜？
Posted by ウッキ at 2006.11.29 11:40 | edit
コメント
＞過去記事で試した分なのですが･･･どうやら別記事に<span ~>などの
＞文字の飾りつけなどが重なった場合に崩れるようなんです･･･
2006.11.25 09:11のウッキさんのコメントではＯＫだったのですね。別記事のspanタグ等のエラーが原因とのこと。はっきりとは言えませんが、記事のタグをチェックされたらよろしいかと思いますよ。ｓｐａｎタグだけでなく、他のタグもチェックしてくださいね。＼(*⌒0⌒)ｂがんばっ♪
Posted by ウッキさんへ at 2006.11.29 16:41 | edit