Clipper's Memorize No Future.
Welcome to the Tokyo Underground Airport on it's opening day.
Weblog, as it were an Airport. The first 'blog' is about to take-off.
超簡単！CSS講座（引用の囲み方）
ブログでは、引用についてはちゃんとblockquoteタグを使って書くのが一般的になってますが、それを点線で囲んだりするのもちゃんとブログの慣例になってます。 でも、はじめたばかりの人は、けっこうそれのやり方がわからないみたいなので、簡単に説明してみようとおもいます（聞かれることが多いので……）。まず、templeteの編集から、stylesheetに定義を加えることが必要です。 blockquoteをしたときに、どのようにさせるかを定義するわけですが、今回はClipper'sでやっている、点線で黄色く囲む方法を説明します。 templeteの編集から、stylesheetを開き、そこに下のように加えてみてください。
blockquote { margin-right: 2em; margin-left: 2em; padding-left: 1em;border: dashed 2px #FFCC66; width: auto }これが何を意味しているかは、CSSの勉強が必要ですが、意外と簡単です。 まずmargin-rightは、右のマージン（空白）をどれくらいにするかの設定です。今回は2emにしてありますが、もうすこし空けたい方は、数字を増やしてみてください。margin-leftについても同様です。左のマージンを指定する項目ですので。 そして、border: dashed 2px #FFCC66の説明をちょいと。 これは囲む線についての定義です。dashedは点線を意味します。例えば、直線で囲みたい場合は、dashedをsolidに書き換えれば、直線で囲まれます。2pxは、囲む線の太さを表していますから、太くしたい場合は数字を上げてください。逆の場合は下げてください。 最後は、その囲む線の色です。これは普通のRGB関数で、HTMLと同じように指定するだけですので、割と簡単だと思います。こんな感じでしょうか？＞質問者
トラックバック
http://www.cottonfab.org/mt335/mt-tb.cgi/7074
この一覧は、次のエントリーを参照しています: 超簡単！CSS講座（引用の囲み方）:
» 腱qヒF・q痃F・wヒ]・|ヒ> 送信元 纛uъ､・帥q｢・・rR・u,
Clipper's Memorize No Future. ・{疵L・違qF・・p~綣{・ｦ・・qC・r痃E・・q@・rヒ鯛 ・lockquote・帥qｮ・y竢^・ｃqE纖吾q.・・q+筝p誥ｪ・r痃J・・qB・・q]・}ヒ+・qヒClipper's Memorize No Future. ・{疵L・違qF・・p~綣{・ｦ・・qC・r痃E・・q@・rヒ鯛 ・lockquote・帥qｮ・y竢^・ｃqE纖吾q.・・q+筝p誥ｪ・r痃J・・qB・・q]・}ヒ+・qヒ [詳しくはこちら]
» 引用箇所を囲む定義 送信元 マサログのトビラ β版
昨日ですが、CSS に手を加えました。
Blockquote：引用文の書式設定を参考にしたのは、■超簡単！CSS講座（引用の囲み方）
Clipper's Memorize No Future のnishi さんの記事ですが、僕のような初心者には、たいへん分かりやすいです。オリジナル・テーマ では、
blockquo [詳しくはこちら]
» 今日も懲りずにカスタマイズ 送信元 colors
もっとやりたいことがたくさんあるけど、とりあえず自分の力でできるのはここまで。あ [詳しくはこちら]
» 引用部分のデザイン変更 送信元 Jolie's
Clipper's Memorize No Future.さんを参考に、引用部分の体裁を変えてみました。 これはテスト。 blockquote { margin-right: 2em; margin-left: 2em; padding-left: 1em;border: dashed 2px #FFCC66; width: auto }... [詳しくはこちら]
» 引用文のカスタマイズ 送信元 感想箱
ブログを始めてから、今までよりいろんなブログを見るようになりました。
そこでちらほらと、引用文が枠に囲まれているのを見て僕もやってみたいと思い、
いろいろ探した結果、Clipper's Memorize No Future.さんの超簡単！CSS講座（引用の囲み方）
という記事を発見しま [詳しくはこちら]
» 引用文のカスタマイズ 送信元 感想箱
ブログを始めてから、今までよりいろんなブログを見るようになりました。
そこでちらほらと、引用文が枠に囲まれているのを見て僕もやってみたいと思い、
いろいろ探した結果、Clipper's Memorize No Future.さんの超簡単！CSS講座（引用の囲み方）
という記事を発見しま [詳しくはこちら]
» ちょっといじってみました 送信元 韓国語お勉強中
ブログの細かいところを、ちまちまといじってみました。
わかりやすいところでは、引用タグのスタイルをいじってみた。
引用部分は点線で囲むようにしました。
引用には「<blockquote>」っていうタグを使うものなんですね・・・。
・・・初めて知りました。
. [詳しくはこちら]
» 人生ぱくり、ぱくられ／酒井若菜 送信元 リネージュ（アルタイル）で活動する魔術師やらの日記っぽいもの
Clipper's Memorize No Future. - 超簡単！CSS講座（引用の囲み方） より
ブログでは、引用についてはちゃんとblockquoteタグを使って書くのが一般的になってますが、それを点線で囲んだりするのもちゃんとブログの慣例になってます。
でも、はじめたばかりの人は、. [詳しくはこちら]
» Blogで引用の囲み枠をつける 送信元 とも*BLOG
livedoor Blog、テンプレートが色々あるのはいいんだけどw｣w｣w｣。
デフォルトの引用の枠が無くて、テンプレートを変えるたびにCSSで[blockquote]を追記しなきゃいけなくて、ちょ～めんどい。以下は自分のメモ用です。
■引用の枠をつけるためにCSSに[blockquote]を入れる [詳しくはこちら]
» 引用文のカスタマイズ。 送信元 ダイナマイトアタック！
引用文を線で囲んだりするやり方を手に入れたく、 【Clipper's Memor [詳しくはこちら]
» 引用文のカスタマイズ。 送信元 ダイナマイトアタック！
引用文を線で囲んだりするやり方を手に入れたく、 【Clipper's Memor [詳しくはこちら]
» 引用を囲んでみる（ブログカスタマイズ） 送信元 Return of the まにあな日記
たまにはブログのカスタマイズでもしてみようと思い、文章の引用を囲めるようにしてみた。
文章を囲む方法としては大きく２つあるようで、１つは「blockquote」タグを使うもの。もう１つは「fieldset」と「legend」を使うもの。
blogデザインカスタマイズ事典では前者. [詳しくはこちら]
» 羂|ヒJ・・q隠lockquote 送信元 Walk the Talk!!
Clipper's Memorize No Future.: 超簡単！CSS講座... [詳しくはこちら]
» 羂|ヒJ・・q隠lockquote 送信元 Walk the Talk!!
Clipper's Memorize No Future.: 超簡単！CSS講座... [詳しくはこちら]
» 羂|ヒJ・・q隠lockquote 送信元 Walk the Talk!!
Clipper's Memorize No Future.: 超簡単！CSS講座... [詳しくはこちら]
コメント (11)
先生、質問です。
2emのemってなんでしょうか？なぜ10pxというふうにピクセル数で指定しないで先生はemを使用しているのでしょうか？
まず説明いたします。
ページボックスのサイズを決めたり、特定のページに定義を適用したりするのに使うのが@page規則です。
この@page規則内では'em'や'ex'といった単位が使えまないことになってます。
相対単位では、唯一'px'が使用可能です。＞質問者
また、@page規則内の'margin-top'、'margin-bottom'のパーセンテージは、例外的にページボックスの高さを参照します。
要は、相対単位の'px'、'em'は@page規則内or外かで決まります。
すみません、説明されている内容をまったく理解できません。@page規則ってはじめて聞きました。そもそもemが何の略なのかもわかりません。emとは何なのでしょうか？私は普段pxでピクセル指定していますが、特に困ったことも起こっていません。pxを使いつづけるべきでしょうか？それともemに変更すべきでしょうか？
PXを使いつづけてよいと思います。これからスタイルシートは同じものに統一されるとおもうし。そうしてください。
僕はできませんでした。template編集でstylesheetに加えるだけでいいんですか？これだけやればあとは勝手に点線で黄色く囲んでくれるものなのでしょうか？
＞atsuさん
そうですよ。
「マサログのトビラ β版」のimac01sum6gr ことmasalog です。ややこしくてすみません。
大変遅くなりましたが、僕の記事へのコメントありがとうございます！
僕もいまいち'em'の使い方が理解できないでいます（それだけではありませんが）。ようするに、ここでは2バイト文字を2個分、ということでしょうか？？
Hmmmmm interesting !!!
引用文のタグを探していて、とてもカンタンで分かりやすい
こちらのページを参考に・・・というか、真似させていただきました！
リンクもさせていただきました！
ありがとうございました
引用文のタグを探していて、とてもカンタンで分かりやすい
こちらのページを参考に・・・というか、真似させていただきました！
リンクもさせていただきました！
ありがとうございました
わざわざ足を運んでくださってコメントありがとうございます。文字化けTB3つも送信してしまって申し訳ありません・・・BLOG初心者でいまいちわかっておりません（言い訳）ブラウザのせい（？）にしときます。
- CC License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.
- 広告