2008年11月19日
2006年10月26日
画像の枠線を設定しましょう（CSS編集）
画像の枠線（border）を設定して、画像が引き立つようにしてみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
基本の設定
枠線（border）の設定は、CSSで下のように「太さ」「線の種類(線種)」「線の色」をそれぞれ設定します。
- 太さ ＜例＞ border-width: 5px;
- 線の種類(線種) ＜例＞ border-style: solid;
実線(solid)・二重線(double)・破線(dotted)など- 線の色 ＜例＞border-color: #FF7F8F;
この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="sango" />
この画像のclass="sango"のCSSコード
.sango
{
border-width: 10px;
border-style: solid;
border-color: #FF7F8F;
}
※なお、このコードを1行にまとめてかくと、
.sango{border:10px solid #FF7F8F;}となります。
枠線（border）の色を個別に設定
枠線（border）の色を上下左右で変更したいときは
border-color: 上の色 右の色 下の色 左の色;というように指定します。（時計回りです）
個別に設定するときは、上の色(border-top-color）・右の色(border-right-color）・下の色(border-bottom-color）・左の色(border-left-color）とします。
この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="colorful" />
この画像のclass="colorful"のCSSコード
.colorful
{
border-width: 10px;
border-style: solid;
border-color: #FF7F8F #BBC000 #F1BB93 #9883C9;
}
応用例
枠線（border）を使って見出しを作ってみました。左の枠線(border-left）と下の枠線(border-bottom）を次のように設定してみましょう。
基本の設定
枠線（border）の色を個別に設定
応用例
この見出しのソースコード(この見出しを記事に入れるとき、下の通りに入力します。)
<div class="sango_title">基本の設定</div>
<div class="sango_title">枠線（border）の色を個別に設定</div>
<div class="sango_title">応用例</div>
この見出しのclass="sango_title"のCSSコード
.sango_title
{
font-size:15px;
font-weight:bold;
padding-left:0.3em;
border-left: 1em solid #FF7F8F;
border-bottom: 1px solid #FF7F8F;
}
この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New BlogPet「うさも」の背景紹介 ハロウィン１（Haloween） | Top | BlogPet「うさも」の背景紹介 さまざまの秋３（キノコスタンド 紅葉 秋空） Old≫
トラックバックURL
トラックバック
≫ 紅葉・黄葉を楽しもう〜♪ブログの模様替え♪ from のんびり前進じたばた生活
もうすっかり寒くなってきましたね〜!!こちらでもじわじわ木々の葉の色が変わってきました♪紅葉は近所には少ないですが、銀杏はわりとたくさんあるのです♪楽しみだわ♪《《《《♪♪(*´▽｀*)ノ゛うふふ〜さてさてそろそ [Read More]
トラックバック
≫ 枠線（border）で見出しを設置(CSS) from yolipの学舎
左の枠線(border-left）を1文字分の太さにして、そこにアンダーラインとなる下の枠線(border-bottom）を設定して、簡単な見出しを設定しました。枠線（border）の色を変更するだけで、使い分けできるのでとても便利です。見本の記事はコチラ→リンクについて yolipの学舎/ [Read More]
コメント
おぉぉ、見出しがメチャわかりやすいですね！
これはまたマイブックマーク行き決定〜♪・・って
いつもホント勉強させてもろてありがとうございます♪
しかもメチャわかりやすいです(･ω･)(._.)(･ω･)(._.)ｳﾝｳﾝ♪
Posted by モンビッケ at 2006.10.27 00:49 | edit
コメント
＞おぉぉ、見出しがメチャわかりやすいですね！
＞これはまたマイブックマーク行き決定〜♪
いつも♪いつも♪ありがとーございまっす♪喜んでいただけてうれしいし、
とても励みになりまっす♪ m(_ _)m
これからも、がんばりまっす。ｨｪ‐ｨ v(´▽`v)))))).......((((((v´▽`)v ｨｪ‐ｨ
Posted by モンビッケさんへ at 2006.10.27 07:46 | edit
コメント
オオーw(*゜o゜*)w なるほど!!borderの色を綺麗な色にして
太くするだけでも額縁みたいになって素敵ですね〜♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
この見出しも画像を使わなくてもこうして綺麗に設定できるんだなぁと
参考になりました。
自分のブログのメインの色と合わせれば統一されたブログが出来ますよね♪
とってもためになる記事をありがとうございました♪ペコリ(o_ _)ｏ))
Posted by まゆび at 2006.10.27 18:16 | edit
コメント
いつもCSSに書き込もうと思いつつ、結局手打ちで毎回書いてる私です(￣∀￣；)
ちゃんと整理したいなら、キチンとした方がスッキリできていいですよね。
それに統一感も持てるし・・・。
なんかclass="colorful"が妙にツボで好きです(・∀・；)
Posted by Ｐａｖ at 2006.10.27 18:36 | edit
コメント
ちょっと質問・・・。おバカな質問だったりするんだけど・・・。
ＣＳＳ編集って・・・。
どこでするのでしょうか・・・。
私・・。やった事あるかなぁ・・・。
テンプレート編集でするのかなぁ???
これって、写真でも使えるんだよね♪
ごめんね・・・。おばかさんな質問で・・・。
いいなぁーと思ったことはまずやってみるのが一番かなと思ったので!!!
Posted by enu at 2006.10.27 18:46 | edit
コメント
＞borderの色を綺麗な色にして太くするだけでも額縁みたいになって素敵ですね〜♪
そうなんですよ♪色は目立つようにしましたが、みなさんのセンスでいくらでも楽しめる簡単な技だと思いまっす♪(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
＞この見出しも画像を使わなくてもこうして綺麗に設定できるんだなぁと参考になりました。
えへへ・・・実はこれをメインにしたつもりなんですよ。画像を使わずに、おしゃれな感じのデザインってできないかなって思っていたのですよ。(*^-^)
＞自分のブログのメインの色と合わせれば統一されたブログが出来ますよね♪
ふふふ・・・yozoは色オンチなんで、うまくできないのですが、まゆびさんなら、
上手に使いこなせそうですね。いつでも遊んでみてくださいね♪v(｡･ω･｡)ｨｪｨ♪
Posted by まゆびさんへ at 2006.10.27 18:49 | edit
コメント
＞いつもCSSに書き込もうと思いつつ、結局手打ちで毎回書いてる私です(￣∀￣；)
あらら・・・実は細かい調整はyozoもすべてstyle="★△◎:△★◇;”で、済ませてしまいますが、記事ソースがわかりにくくなりますので、なるべく細かいクラスでも、設定するように努力しています。ヾ(￣o￣;)ｵｲｵｲ XHTML1.0は問題なしでも、XHTML1.1では非推奨とのことでしたからね。┐( -"-)┌ﾔﾚﾔﾚ... 先の話ですけどね。(^○^)
＞なんかclass="colorful"が妙にツボで好きです(・∀・；)
ありがとーございまっす♪予約語にないユーモアのある言葉って考えたら、カラフルでしたから、英語にしてみましたよ。(ﾉ∇≦*)ｷｬﾊｯｯｯ♪
Posted by Pavさんへ at 2006.10.27 19:00 | edit
コメント
＞ＣＳＳ編集って・・・。どこでするのでしょうか・・・。
わぁ！ちゃんと書いてなかったですね♪ごめんなさいね。m(_ _)m
えっと、下の記事だったらわかりやすいと思いますよ。
http://yozoblog2.blog63.fc2.com/blog-entry-382.html
＞私・・。やった事あるかなぁ・・・。テンプレート編集でするのかなぁ???
その通りですよ。やったことあるよ。スクロールバーの色の変更するときに、CSS編集したのですよ。あそこでやればいいのです。CSS編集の欄の一番下に追加するだけですよ。(^○^)
＞これって、写真でも使えるんだよね♪
(*^▽^*)ﾉﾊｰｲ 写真やキャプチャーも同じ画像ですから大丈夫ですよ。
＞いいなぁーと思ったことはまずやってみるのが一番かなと思ったので!!!
(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪ そうですよね♪わかんなかったら遠慮なく聞いてくれればいいですよ。それにね。たぶんわからないのは、enuちゃんだけじゃないですよ。勇気を出して質問してくれたenuちゃんのおかげで、この記事のCSS編集ができるようになった人もきっとでてくると思います。そして、enuちゃんのコメントのおかげで、yozoの記事がさらにわかりやすくなったのですからね。yozoはenuちゃんい大感謝してまっす。m(_ _)m
お時間あるときにでも、楽しんでみてくださいね♪＼(*⌒0⌒)ｂがんばっ♪
Posted by enuちゃんへ at 2006.10.27 19:11 | edit
コメント
助かりました〜ヽ(;´Д`)ノ
いちいちペイントで細−い線しか入れられず･･･だったので、とっても便利な設定です。
いつもウッキ環境に優しい技術の提供をありがとうございまっすm(_ _"m)ﾍﾟｺｰｯﾁ
これから使わせていただきま~っすo(ﾟ▽ﾟo)(oﾟ▽ﾟ)o
って･･･ウッキちゃんすんなり出来るかしら･･･
いや！大丈夫!!!スクロールバーを教えていただいた時に足してましたねヾ(;´▽｀A``
その下に入れればいいのですね!!頑張りまっす♪
Posted by ウッキ at 2006.10.28 00:03 | edit
コメント
おお！見出しっっ！
これは目から鱗！
すばらしいアイディアですっっ！ヽ(ﾟ∀ﾟ)ﾉｻｯｽｶﾞｧ〜
あと、色の設定もclassで設定すれば使いやすくていいですね！
早速、活用させていただきます！ヽ(ﾟ∀ﾟ)ﾉ
サンゴの色もグー(^_-)-☆
実用的な情報を、いつもありがとうございます〜。(*´Д`*)
Posted by ビビ at 2006.10.28 00:55 | edit
コメント
ブログを9/1から始めたばかりの初心者以前のmyugeと申します。
yozoさん、mioさん、まゆびさんのブログのカスタマイズ記事に助けられています。
私も小粋空間さんのFC2テンプレを使わせていただいておりますので、
yozoさんのカスタマイズ記事にはいつも涙ものです。
一言、心からの御礼を申し上げたく書き込みさせていただきました。
ありがとうございます＆今後もお世話になりますので（断言！）、よろしくお願いいたします。
Posted by myuge at 2006.10.28 01:06 | edit
コメント
＞助かりました〜ヽ(;´Д`)ノいちいちペイントで細−い線しか入れられず･･･
＞だったので、とっても便利な設定です。
ヾ(〃^∇^)ﾉわぁい♪ 喜んでいただけてうれしいですよ♪ class名や色、幅などご自由に変更して、もっとウッキさんらしく飾ってみてくださいね。(*^-^)
＞これから使わせていただきま~っすo(ﾟ▽ﾟo)(oﾟ▽ﾟ)o
＞って･･･ウッキちゃんすんなり出来るかしら･･･
大丈夫ですよ。仰るとおりに、スクロールバーの設定を書き込んだ下にでも、追加すればいいですよ。いろいろ遊んでみてくださいね。＼(*⌒0⌒)ｂがんばっ♪
もしも何かありましたら、遠慮なくコメントくださいね。ﾋｿﾋｿ(ﾉ･o･((｡_｡*)ﾌﾑﾌﾑ
Posted by ウッキさんへ at 2006.10.28 08:37 | edit
コメント
＞おお！見出しっっ！これは目から鱗！すばらしいアイディアですっっ！ヽ(ﾟ∀ﾟ)ﾉｻｯｽｶﾞｧ〜
いえいえ♪ホームページなんかでは、よく使っているアイディアみたいですよ。でも、ブログで小見出しなんかを必要とするとき（バトン記事の項目とか、手順など）などには、簡単に使えますから便利だと思いまっす(^○^)
＞あと、色の設定もclassで設定すれば使いやすくていいですね！
＞早速、活用させていただきます！ヽ(ﾟ∀ﾟ)ﾉ サンゴの色もグー(^_-)-☆
わぁいヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい 活用してくれるのですか？class名（sango、colorful、sango_titleなど）、色、幅、線種など各種設定はご自由に変更してくださいね。もちろんそのまま使ってくださっても構いませんが、デザインよりも説明を主として色を考えましたから、せめて色だけでも変更した方がいいかもしれませんよ。(ﾟｰﾟ;Aｱｾｱｾ
＞実用的な情報を、いつもありがとうございます〜。(*´Д`*)
いえいえ♪こちらこそ、いつも盛り上げてくださってありがとーございまっす♪m(_ _)m
Posted by ビビさんへ at 2006.10.28 08:44 | edit
コメント
＞ブログを9/1から始めたばかりの初心者以前のmyugeと申します。
yozoと申します。ご丁寧な挨拶ありがとーございまっす♪こちらこそ拙いブログで恐縮です。ご来訪大歓迎でっす。よろしくお願いします。m(_ _)m
＞yozoさん、mioさん、まゆびさんのブログのカスタマイズ記事に助けられています。
わぁ♪そうだったのですか♪それなら話は早いっすね。もうご存知の通り、ブログカスタマイズやBlogPetだけでなく、すべてのブログ運営において、yozoも、お二人にはたくさん助けていただいてますよ。といいますか、ありがたいことにyozoは多くのお友達に本当に支えられています。そしてこのことこそ、yozoの唯一の最大の自慢なのですよ。(^○^)
＞私も小粋空間さんのFC2テンプレを使わせていただいておりますので、
＞yozoさんのカスタマイズ記事にはいつも涙ものです。
myugeさんも小粋ユーザーでしたか♪癖もなく、カスタマイズ自由で軽量のテンプレートですから、これからもお世話になるつもりですよ。yujiroさんの記事を一つクリアするとそれだけスキルアップする。そんな素敵なブログですよね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞ありがとうございます＆今後もお世話になりますので（断言！）、よろしくお願いいたします。
こちらこそ、参考にしていただけるようにがんばりまっす。というかお互い勉強するということで、よろしくお願いします。m(_ _)m
Posted by myugeさんへ at 2006.10.28 09:11 | edit
コメント
なお、CSSの設定の記事を作成しましたので、勝手ながらこちらの記事にトラバ入れさせていただきました。m(_ _)m
Posted by yolip at 2006.12.22 11:57 | edit
コメント
この見出しはyozoもよく使ってますよ。区切り線だけだと殺風景ですからね。 ('-'*)ｴﾍ
さっそくお邪魔させていただきましたが、とても見やすくなってますね。お役に立ててうれしいですよ。大変励みになりまっす♪ m(_ _)m
追伸：トラバありがとーございまっす♪ こちらからも
お返しのトラバ入れさせていただきました m(_ _)m
Posted by yolipさんへ at 2006.12.22 12:38 | edit
コメント
またまた お世話になりますた〜ヽ(*´▽｀)ﾉ )))ﾋｬｯﾎｰｲ♪
ププッ (￣m￣*） 切り替え線に応用させていただいたのでっす･･･
便利･･･うふ♪(*￣ω￣)v 文章力の乏しいσ(･ω･*)には とても･･･(￣∇￣;) ﾊｯﾊｯﾊｯ
いつ なん時 何を思いついても･･･ｙｏｚｏさんちには参考記事が必ずあるのでいっす♪
ありがとーございました〜ﾍﾟｺm(_ _;m)三(m;_ _)mﾍﾟｺ
Posted by ウッキ at 2007.02.28 08:38 | edit
コメント
＞ププッ (￣m￣*） 切り替え線に応用させていただいたのでっす･･･
おっ！そうなのですか！切り替え線ですか･･･ちょっと覗かせていただきまっす。
ﾀﾞｯｼｭ!((( 三( -_-) (￣∧￣)(＿ ＿)ﾌﾑﾌﾑ･･･ Юヽ(^O^ o) お待たせしました♪
なぁ〜るほど、記事内の話題の切り替え線というわけですね。タイトルってことにするのでなくって、話題の切れ目に線を入れるのもいいですね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞いつ なん時 何を思いついても･･･ｙｏｚｏさんちには参考記事が必ずあるのでいっす♪
(*ﾟｰﾟ*)ポッ ちょっとばかりお役に立てたようですね。「うまくいったよ！」って、
言っていただけるととても励みになりまっす。m(_ _)m
Posted by ウッキさんへ at 2007.02.28 20:44 | edit