--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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からのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


yozoの気が向いたと記2.0の関連記事紹介

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New おいしく感じた理由 | Top | ブロック要素に枠線を設定しましょう(CSS編集) Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪ヾ(=^▽^=)ノ
(ノ゜ω゜)ノ*.オオォォォォォォォー
このボックスはこんな風なCSS設定なのですね!!
以前から記事で何度か見ていたのですが、どうやっているんだろうって
思っていたのです。
これなら色を変えるだけで雰囲気も変わりますし、
とっても見やすいですよね~♪勉強になりました~。
ありがとうございます♪(*- -)(*_ _)ペコリ

コメント

こんばんはー。
おおおーっっっ!!これはかわいい!!!
しかも使い勝手が良さそうですねー。
むむ、、ぜひ私も活用させていただきたいですー。
yozo殿ー。いつもいつも色々教えてくださってありがとうございます☆

コメント

>まゆびさん、こんばんはー♪

>以前から記事で何度か見ていたのですが、どうやっているんだろうって思っていたのです。
あらら・・・そうだったのですか♪記事にしようって思いながら、ついついずるずる先延ばしにしちゃってましたよ。お待たせしてごめんなさいね。m(_ _)m

>これなら色を変えるだけで雰囲気も変わりますし、とっても見やすいですよね~♪
そうでしょ♪色やらフォントサイズなど色々変更して遊んでみてくださいね。V(○⌒∇⌒○) イエーイ

コメント

>ばばるさん、こんばんはー♪

>しかも使い勝手が良さそうですねー。むむ、、ぜひ私も活用させていただきたいですー。
どうぞ♪どうぞ♪色やら、フォントサイズやらご自由に変更して楽しんでくださいね♪
喜んでいただけてうれしいですよ♪☆d(o⌒∇⌒o)b ★イエーイ★ d(o⌒∇⌒o)b☆

>yozo殿ー。いつもいつも色々教えてくださってありがとうございます☆
いえいえ♪こちらこそいつも応援ありがとーございまっす♪大変励みになっています m(_ _)m

コメント

yozoさん、ごぶさたデス(・∀・;)
そしてそして・・・。
TBに記事の紹介までと、至れり尽くせりありがとうございました♪
細かくキッチリ指定されていて、改めて自分トコの記事を見るとやってるコトの雑さ加減を思い知らされます(。。;)
行き当たりバッタリ的な感がプンプン臭ってるんで、それはそれで私らしいのですが(爆)
改めてウチでも紹介させていただきたいと思います(・∀・)

P.S.
返しのTB入れさせていただきました♪(゚▽゚*)

コメント

>Pavlobaさん、こんばんはー♪

>TBに記事の紹介までと、至れり尽くせりありがとうございました♪
いえいえ♪こちらこそ、随分前から利用させていただいていたのに、
紹介記事が遅れて申し訳ありませんでした。m(_ _)m
position:relative;がポイントですよね。親ブロックからの位置指定のほうが
設定しやすいですからね。とっても勉強になりましたよ。(*^-^)

>改めてウチでも紹介させていただきたいと思います(・∀・)
たった今、お邪魔させていただきました。紹介してくださってありがとーございまっす♪m(_ _)m

追伸:トラバが繋がっていなかったようですので、
勝手ながらyozoの方で繋がせていただきました。m(_ _)m

コメント

♪⌒ヽ(*゜O゜)ノ スゴイッ!!!これは すばらしいですね(*´ェ`*)キャァ
yozoさん( ^-^)ノ(* ^-^)ノおはょございまっす♪

早速過去記事で試してみました♪
貧疎な引用が可愛らしくなりましたyo~~~~!!*:.。.:*・(*´∀`)゚。.:・*ポワン
新しい投稿で本格始動する際にご紹介させてくださいっ♪
yozoさん!!!人´∀`).☆.。.:*ぃつもありがとぉござぃまっす*:.☆.。

コメント

yozoさん、おはようございます~♪
これはいいですね(・ω・)(._.)(・ω・)(._.)ウンウン♪
とてもわかりやすく見えますもの~♪
ボックスを左寄せなどにするときは
> margin: 0px auto;
この部分を margin: 0px 0px; とかって指定すればよいのですかね???
それとも違う部分なのかなぁ・・(`-ω-´)むぅ・・(笑
私のブックマークはyozoさんテキストいっぱいにです(笑

今日も・・(´・ノω・`)コッソリ
いつもありがとうございます♪

コメント

>ウッキさん、おはよーございまっす♪

>♪⌒ヽ(*゜O゜)ノ スゴイッ!!!これは すばらしいですね(*´ェ`*)キャァ
喜んでいただけてうれしいですよ♪Pavlobaさんに一緒に感謝しましょう♪(^○^)

>貧疎な引用が可愛らしくなりましたyo~~~~!!*:.。.:*・(*´∀`)゚。.:・*ポワン
>新しい投稿で本格始動する際にご紹介させてくださいっ♪
わぁ♪可愛らしくなりましたか~♪V(○⌒∇⌒○) イエーイ
紹介まで。本当にありがとーございまっす♪楽しみにしておきまっすヾ(〃^∇^)ノわぁい♪

コメント

>モンビッケさん、おはよーございまっす♪

>これはいいですね(・ω・)(._.)(・ω・)(._.)ウンウン♪とてもわかりやすく見えますもの~♪
そうでしょ♪ちょっとしたタイトルを枠線上につけると、なんとなくカッコイイかも。ヾ( ̄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

コメント

きょうは上下しなかった。
そしてyozoblogが位置しなかったよ。
ただしきのうは入力するつもりだった?

コメント

>うさも、こんばんはー♪
おお!長い!記事投稿よりも長いコメントだね♪v(*'-^*)bぶいっ♪

>きょうは上下しなかった。そしてyozoblogが位置しなかったよ。
えっ?タイトルの位置のことかな?ちゃんと設定したはずだけど・・・(^-^;

>ただしきのうは入力するつもりだった?
えっ?きのうは入力するつもりだったのに、今日はやめた・・・
みたいな人聞きのわるいことを・・・(; ̄ー ̄A アセアセ・・・

コメント

yozoさん、(。・ω・。)ノコンチャ☆・゚:*:゚
コメントでも教えていただいてありがとうございます~^^
早速φ(・ω・*)フムフムφ(。_。*)メモメモです♪

コメント

>モンビッケさん、こんばんはー♪
えへへ・・・お役に立てましたでしょうか♪(; ̄ー ̄A アセアセ・・・
お時間あるときにでも色々楽しんでみてくださいね♪\(*⌒0⌒)bがんばっ♪

コメント

yozoさん( ^-^)ノ(* ^-^)ノこんにちわぁ♪

過去記事で試した分なのですが・・・どうやら別記事に<span ~>などの
文字の飾りつけなどが重なった場合に崩れるようなんです・・・
( ̄ω ̄;)エートォ...大きく左に跳んでしまいます(一度外して保留にしていまっす)

なにか改善策はありますでしょうか~?

コメント

>ウッキさん、こんにちはー♪

>過去記事で試した分なのですが・・・どうやら別記事に<span ~>などの
>文字の飾りつけなどが重なった場合に崩れるようなんです・・・
2006.11.25 09:11のウッキさんのコメントではOKだったのですね。別記事のspanタグ等のエラーが原因とのこと。はっきりとは言えませんが、記事のタグをチェックされたらよろしいかと思いますよ。spanタグだけでなく、他のタグもチェックしてくださいね。\(*⌒0⌒)bがんばっ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。