枠線(border)の指定

枠線(border)の指定

Posted at November 15,2004 1:00 PM
Tag:[]

ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文のblockquoteタグで用いている枠線のスタイルシート指定方法を紹介します。
まず指定フォーマットは下記の通りです。

border: width style color
border-top: width style color
border-right: width style color
border-bottom: width style color
border-left: width style color

「border:?」は全ての枠線を一括指定、「border-xxx:?」は上下左右の枠線を個別指定します。一括指定か個別指定のいずれかを使用します。斜体の部分に枠線の詳細を指定します。それぞれの意味は

width:枠線の幅
style:枠線のスタイル
color:枠線の色

となっています。
次にスタイルシートを外部ファイル(styles-site.css)に記述する場合のサンプルをいくつか記します。ここではblockquoteタグを直接指定する方法で記しておきます。

【シンプルな指定(幅:1px/スタイル:1本線/色:青)】

blockquote { border: 1px solid blue; }

hogehoge hogehoge

【このサイトのblockquote指定(幅:2px/スタイル:点線/色:グレー)】

blockquote { border: 2px dotted 999999; }

hogehoge hogehoge

【付箋紙風(幅:左10px、その他1px/スタイル:1本線/色:緑)】

blockquote { border-left: 10px solid green; border-top: 1px solid green; border-bottom: 1px solid green; border-right: 1px solid green; }

hogehoge hogehoge

幅・色はなんとなくお分かりになると思いますので、スタイル指定のみ下記に列挙しておきます。それぞれどのように表示されるかはお試しになってください。

none非表示(デフォルト)
hidden非表示
solid1本線
double2本線
groove窪んだ線
rigde隆起した線
inset全体が窪んだように表示
outset全体が隆起したように表示
dashed破線
dotted点線

なお指定内容によってはブラウザによって表示が異なる場合がありますのでご注意ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

わたくし用カスタムメモ from et [えっと] きまぐれぶろぐ
■未 BlogPeople リンクにスクロールバーをつける by PIROBLO... [続きを読む]

Tracked on November 19, 2004 7:18 PM

引用タグの設定 from (´д`)ブログ
ニュースのカテゴリでよく使う引用タグ blockquote の設定が スタイルシ... [続きを読む]

Tracked on December 26, 2004 2:01 AM

MTのblockquote編集 from 電脳社会
MovableTypeをちょこっとカスタマイズしてみました。他のブログサイトを見... [続きを読む]

Tracked on April 20, 2005 1:34 AM
コメント

前から変えてみたいと思ってたんですけど、面倒で放置しておりました。が、丁寧にまとめられてるのを見て私も変更してみました。ありがとうございました。

[1] Posted by Kin : November 15, 2004 3:19 PM

>Kinさん
こんばんはー。
バッチリ変わってますね!
記事参照ありがとうございます。

[2] Posted by yujiro : November 15, 2004 8:56 PM

丁寧なご回答ありがとうございました。

[3] Posted by ゆえ : November 16, 2004 7:46 AM

>ゆえさん
いえいえ、どういたしまして。

[4] Posted by yujiro : November 16, 2004 11:15 PM

はじめまして。
ライブドアの普通のテンプレを使用してるのですが、以前から「blockquote」の変更をしたくて、方法を探していたところ、こちらにたどりつきました。付箋紙風、の記述の仕方を参考にさせてもらいました。ありがとうございました。

(リンクフリーとのことなので、これからも読ませてもらいたいので、 BlogPeople のリストにくわえさせてもらいました。どこで報告していいかわからなくて、こちらでご報告しておきます。)

[5] Posted by 三五子 : November 7, 2006 12:28 PM

>三五子さん
はじめまして。
記事参照ありがとうございました。
無事に設定できたようでよかったです。
記事以外の質問も受けておりますので、ご不明な点がございましたらご連絡ください。
ではでは!

[6] Posted by yujiro : November 8, 2006 12:44 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)