--年--月--日

スポンサーサイト

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

画像の枠線を設定しましょう(CSS編集)

 画像の枠線(border)を設定して、画像が引き立つようにしてみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。


基本の設定

 枠線(border)の設定は、CSSで下のように「太さ」「線の種類(線種)」「線の色」をそれぞれ設定します。
  • 太さ <例> border-width: 5px;
  • 線の種類(線種) <例> border-style: solid;
    実線(solid)・二重線(double)・破線(dotted)など
  • 線の色 <例>border-color: #FF7F8F;

061026pic1.jpg

この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)


<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)とします。


061026pic2.jpg

この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)


<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
人気blogランキング

スポンサーサイト

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

メイン

≪New BlogPet「うさも」の背景紹介 ハロウィン1(Haloween) | Top | BlogPet「うさも」の背景紹介 さまざまの秋3(キノコスタンド 紅葉 秋空) Old≫

トラックバックURL


コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
おぉぉ、見出しがメチャわかりやすいですね!
これはまたマイブックマーク行き決定~♪・・って
いつもホント勉強させてもろてありがとうございます♪
しかもメチャわかりやすいです(・ω・)(._.)(・ω・)(._.)ウンウン♪

コメント

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

>おぉぉ、見出しがメチャわかりやすいですね!
>これはまたマイブックマーク行き決定~♪
いつも♪いつも♪ありがとーございまっす♪喜んでいただけてうれしいし、
とても励みになりまっす♪ m(_ _)m
これからも、がんばりまっす。ィェ‐ィ v(´▽`v)))))).......((((((v´▽`)v ィェ‐ィ

コメント

yozoさん、こんばんは♪(o^∇^o)ノ
オオーw(*゜o゜*)w なるほど!!borderの色を綺麗な色にして
太くするだけでも額縁みたいになって素敵ですね~♪(゚-゚*)(。。*)ウンウン
この見出しも画像を使わなくてもこうして綺麗に設定できるんだなぁと
参考になりました。
自分のブログのメインの色と合わせれば統一されたブログが出来ますよね♪
とってもためになる記事をありがとうございました♪ペコリ(o_ _)o))

コメント

yozoさん、こんばんわ♪(゚▽゚*)

いつもCSSに書き込もうと思いつつ、結局手打ちで毎回書いてる私です( ̄∀ ̄;)
ちゃんと整理したいなら、キチンとした方がスッキリできていいですよね。
それに統一感も持てるし・・・。

なんかclass="colorful"が妙にツボで好きです(・∀・;)

コメント

こんばんは。yozoちゃん。
ちょっと質問・・・。おバカな質問だったりするんだけど・・・。
CSS編集って・・・。
どこでするのでしょうか・・・。
私・・。やった事あるかなぁ・・・。
テンプレート編集でするのかなぁ???
これって、写真でも使えるんだよね♪
ごめんね・・・。おばかさんな質問で・・・。

いいなぁーと思ったことはまずやってみるのが一番かなと思ったので!!!

コメント

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

>borderの色を綺麗な色にして太くするだけでも額縁みたいになって素敵ですね~♪
そうなんですよ♪色は目立つようにしましたが、みなさんのセンスでいくらでも楽しめる簡単な技だと思いまっす♪(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

>この見出しも画像を使わなくてもこうして綺麗に設定できるんだなぁと参考になりました。
えへへ・・・実はこれをメインにしたつもりなんですよ。画像を使わずに、おしゃれな感じのデザインってできないかなって思っていたのですよ。(*^-^)

>自分のブログのメインの色と合わせれば統一されたブログが出来ますよね♪
ふふふ・・・yozoは色オンチなんで、うまくできないのですが、まゆびさんなら、
上手に使いこなせそうですね。いつでも遊んでみてくださいね♪v(。・ω・。)ィェィ♪

コメント

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

>いつもCSSに書き込もうと思いつつ、結局手打ちで毎回書いてる私です( ̄∀ ̄;)
あらら・・・実は細かい調整はyozoもすべてstyle="★△◎:△★◇;”で、済ませてしまいますが、記事ソースがわかりにくくなりますので、なるべく細かいクラスでも、設定するように努力しています。ヾ( ̄o ̄;)オイオイ  XHTML1.0は問題なしでも、XHTML1.1では非推奨とのことでしたからね。┐( -"-)┌ヤレヤレ... 先の話ですけどね。(^○^)

>なんかclass="colorful"が妙にツボで好きです(・∀・;)
ありがとーございまっす♪予約語にないユーモアのある言葉って考えたら、カラフルでしたから、英語にしてみましたよ。(ノ∇≦*)キャハッッッ♪

コメント

>enuちゃん、こんばんはー♪

>CSS編集って・・・。どこでするのでしょうか・・・。
わぁ!ちゃんと書いてなかったですね♪ごめんなさいね。m(_ _)m
えっと、下の記事だったらわかりやすいと思いますよ。
http://yozoblog2.blog63.fc2.com/blog-entry-382.html

>私・・。やった事あるかなぁ・・・。テンプレート編集でするのかなぁ???
その通りですよ。やったことあるよ。スクロールバーの色の変更するときに、CSS編集したのですよ。あそこでやればいいのです。CSS編集の欄の一番下に追加するだけですよ。(^○^)

>これって、写真でも使えるんだよね♪
(*^▽^*)ノハーイ 写真やキャプチャーも同じ画像ですから大丈夫ですよ。

>いいなぁーと思ったことはまずやってみるのが一番かなと思ったので!!!
(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪ そうですよね♪わかんなかったら遠慮なく聞いてくれればいいですよ。それにね。たぶんわからないのは、enuちゃんだけじゃないですよ。勇気を出して質問してくれたenuちゃんのおかげで、この記事のCSS編集ができるようになった人もきっとでてくると思います。そして、enuちゃんのコメントのおかげで、yozoの記事がさらにわかりやすくなったのですからね。yozoはenuちゃんい大感謝してまっす。m(_ _)m
お時間あるときにでも、楽しんでみてくださいね♪\(*⌒0⌒)bがんばっ♪

コメント

yozoさん、こんばんヮ~♪
助かりました~ヽ(;´Д`)ノ
いちいちペイントで細-い線しか入れられず・・・だったので、とっても便利な設定です。
いつもウッキ環境に優しい技術の提供をありがとうございまっすm(_ _"m)ペコーッチ
これから使わせていただきま~っすo(゚▽゚o)(o゚▽゚)o
って・・・ウッキちゃんすんなり出来るかしら・・・
いや!大丈夫!!!スクロールバーを教えていただいた時に足してましたねヾ(;´▽`A``
その下に入れればいいのですね!!頑張りまっす♪

コメント

ヽ(゚∀゚)ノこんばんは~。

おお!見出しっっ!
これは目から鱗!
すばらしいアイディアですっっ!ヽ(゚∀゚)ノサッスガァ~

あと、色の設定もclassで設定すれば使いやすくていいですね!
早速、活用させていただきます!ヽ(゚∀゚)ノ

サンゴの色もグー(^_-)-☆

実用的な情報を、いつもありがとうございます~。(*´Д`*)

コメント

yozoさん、はじめまして。

ブログを9/1から始めたばかりの初心者以前のmyugeと申します。
yozoさん、mioさん、まゆびさんのブログのカスタマイズ記事に助けられています。
私も小粋空間さんのFC2テンプレを使わせていただいておりますので、
yozoさんのカスタマイズ記事にはいつも涙ものです。
一言、心からの御礼を申し上げたく書き込みさせていただきました。
ありがとうございます&今後もお世話になりますので(断言!)、よろしくお願いいたします。

コメント

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

>助かりました~ヽ(;´Д`)ノいちいちペイントで細-い線しか入れられず・・・
>だったので、とっても便利な設定です。
ヾ(〃^∇^)ノわぁい♪  喜んでいただけてうれしいですよ♪ class名や色、幅などご自由に変更して、もっとウッキさんらしく飾ってみてくださいね。(*^-^)

>これから使わせていただきま~っすo(゚▽゚o)(o゚▽゚)o
>って・・・ウッキちゃんすんなり出来るかしら・・・
大丈夫ですよ。仰るとおりに、スクロールバーの設定を書き込んだ下にでも、追加すればいいですよ。いろいろ遊んでみてくださいね。\(*⌒0⌒)bがんばっ♪

もしも何かありましたら、遠慮なくコメントくださいね。ヒソヒソ(ノ・o・((。_。*)フムフム

コメント

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

>おお!見出しっっ!これは目から鱗!すばらしいアイディアですっっ!ヽ(゚∀゚)ノサッスガァ~
いえいえ♪ホームページなんかでは、よく使っているアイディアみたいですよ。でも、ブログで小見出しなんかを必要とするとき(バトン記事の項目とか、手順など)などには、簡単に使えますから便利だと思いまっす(^○^)

>あと、色の設定もclassで設定すれば使いやすくていいですね!
>早速、活用させていただきます!ヽ(゚∀゚)ノ サンゴの色もグー(^_-)-☆
わぁいヽ(゚ー゚*ヽ)(ノ*゚ー゚)ノわぁい 活用してくれるのですか?class名(sango、colorful、sango_titleなど)、色、幅、線種など各種設定はご自由に変更してくださいね。もちろんそのまま使ってくださっても構いませんが、デザインよりも説明を主として色を考えましたから、せめて色だけでも変更した方がいいかもしれませんよ。(゚ー゚;Aアセアセ

>実用的な情報を、いつもありがとうございます~。(*´Д`*)
いえいえ♪こちらこそ、いつも盛り上げてくださってありがとーございまっす♪m(_ _)m

コメント

>myugeさん、おはよーございまっす♪いらっしゃいませー♪

>ブログを9/1から始めたばかりの初心者以前のmyugeと申します。
yozoと申します。ご丁寧な挨拶ありがとーございまっす♪こちらこそ拙いブログで恐縮です。ご来訪大歓迎でっす。よろしくお願いします。m(_ _)m

>yozoさん、mioさん、まゆびさんのブログのカスタマイズ記事に助けられています。
わぁ♪そうだったのですか♪それなら話は早いっすね。もうご存知の通り、ブログカスタマイズやBlogPetだけでなく、すべてのブログ運営において、yozoも、お二人にはたくさん助けていただいてますよ。といいますか、ありがたいことにyozoは多くのお友達に本当に支えられています。そしてこのことこそ、yozoの唯一の最大の自慢なのですよ。(^○^)

>私も小粋空間さんのFC2テンプレを使わせていただいておりますので、
>yozoさんのカスタマイズ記事にはいつも涙ものです。
myugeさんも小粋ユーザーでしたか♪癖もなく、カスタマイズ自由で軽量のテンプレートですから、これからもお世話になるつもりですよ。yujiroさんの記事を一つクリアするとそれだけスキルアップする。そんな素敵なブログですよね。(゚-゚*)(。。*)ウンウン

>ありがとうございます&今後もお世話になりますので(断言!)、よろしくお願いいたします。
こちらこそ、参考にしていただけるようにがんばりまっす。というかお互い勉強するということで、よろしくお願いします。m(_ _)m

コメント

yozoさん、こんにちは。borderで見出しをつくるというアイデアは素晴らしいですね。勝手ながらCSSコードを色だけ変更させていただいて、使わせていただきました。おかげ様で、記事がとても見やすくなったと自惚れています。本当にありがとうございました。m(_ _)m
 なお、CSSの設定の記事を作成しましたので、勝手ながらこちらの記事にトラバ入れさせていただきました。m(_ _)m

コメント

>yolipさん、こんにちはー♪
この見出しはyozoもよく使ってますよ。区切り線だけだと殺風景ですからね。 ('-'*)エヘ
さっそくお邪魔させていただきましたが、とても見やすくなってますね。お役に立ててうれしいですよ。大変励みになりまっす♪ m(_ _)m

追伸:トラバありがとーございまっす♪ こちらからも
お返しのトラバ入れさせていただきました m(_ _)m

コメント

yozoさん( ^-^)ノ(* ^-^)ノおはょございまっす♪

またまた お世話になりますた~ヽ(*´▽`)ノ )))ヒャッホーイ♪
ププッ ( ̄m ̄*) 切り替え線に応用させていただいたのでっす・・・
便利・・・うふ♪(* ̄ω ̄)v 文章力の乏しいσ(・ω・*)には とても・・・( ̄∇ ̄;) ハッハッハッ
いつ なん時 何を思いついても・・・yozoさんちには参考記事が必ずあるのでいっす♪
ありがとーございました~ペコm(_ _;m)三(m;_ _)mペコ

コメント

>ウッキさん、こんばんはー♪

>ププッ ( ̄m ̄*) 切り替え線に応用させていただいたのでっす・・・
おっ!そうなのですか!切り替え線ですか・・・ちょっと覗かせていただきまっす。
ダッシュ!((( 三( -_-)  ( ̄∧ ̄)(_ _)フムフム・・・ Юヽ(^O^ o) お待たせしました♪
なぁ~るほど、記事内の話題の切り替え線というわけですね。タイトルってことにするのでなくって、話題の切れ目に線を入れるのもいいですね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>いつ なん時 何を思いついても・・・yozoさんちには参考記事が必ずあるのでいっす♪
(*゚ー゚*)ポッ ちょっとばかりお役に立てたようですね。「うまくいったよ!」って、
言っていただけるととても励みになりまっす。m(_ _)m

コメントする

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

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

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


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