枠線(border)の指定
ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文の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 非表示 solid 1本線 double 2本線 groove 窪んだ線 rigde 隆起した線 inset 全体が窪んだように表示 outset 全体が隆起したように表示 dashed 破線 dotted 点線
なお指定内容によってはブラウザによって表示が異なる場合がありますのでご注意ください。
- サブカテゴリーリストを定義型リストでマークアップする
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
- グローバルナビゲーション(その1:基本スタイル)
- RSS フィードにスタイルシート(CSS)を適用する
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
≫ わたくし用カスタムメモ from et [えっと] きまぐれぶろぐ
■未
BlogPeople リンクにスクロールバーをつける by PIROBLO... [続きを読む]
≫ 引用タグの設定 from (´д`)ブログ
ニュースのカテゴリでよく使う引用タグ blockquote の設定が スタイルシ... [続きを読む]
≫ MTのblockquote編集 from 電脳社会
MovableTypeをちょこっとカスタマイズしてみました。他のブログサイトを見... [続きを読む]
前から変えてみたいと思ってたんですけど、面倒で放置しておりました。が、丁寧にまとめられてるのを見て私も変更してみました。ありがとうございました。
>Kinさん
こんばんはー。
バッチリ変わってますね!
記事参照ありがとうございます。
丁寧なご回答ありがとうございました。
>ゆえさん
いえいえ、どういたしまして。
はじめまして。
ライブドアの普通のテンプレを使用してるのですが、以前から「blockquote」の変更をしたくて、方法を探していたところ、こちらにたどりつきました。付箋紙風、の記述の仕方を参考にさせてもらいました。ありがとうございました。
(リンクフリーとのことなので、これからも読ませてもらいたいので、 BlogPeople のリストにくわえさせてもらいました。どこで報告していいかわからなくて、こちらでご報告しておきます。)
>三五子さん
はじめまして。
記事参照ありがとうございました。
無事に設定できたようでよかったです。
記事以外の質問も受けておりますので、ご不明な点がございましたらご連絡ください。
ではでは!

