CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
インデントが利かないテンプレートを修正する
不適切な箇所のご指摘を受けましたので、記事を訂正しました。
忍者ブログにはたくさんのテンプレートが出ていますが、その指定の仕方は実はいろいろです。
気が付かずに使っていらっしゃる方が大半だと思いますが、なかには気が付いて「どうしてだろう?」と頭を悩ます方もいるかもしれません。
忍者エディターの機能の中にインデントがあるのをご存知ですか?
ツールバーの2段目、リストの箇条書き用のボタンからおたまじゃくしまで続く4個のボタンがそうです。
これを使うと、文章が少し中に入り込んで表示されます。
しかし、このボタンを使っても表示が変わらないテンプレートがあります。
こういうテンプレートは、CSSの最初によく下記のような指定がしてあります。
余白の取り方がそれぞれ違う、各ブラウザの見え方を同じにするために使われているのですが、すべてのタグに指定が効いてしまうため、インデントが無効になるという不具合が生じるわけです。
ただ、作者が意図的にインデントをしていない場合がありますので、まずこれらの指定がCSSの中にあるかどうかを調べてください。もしあれば、そこを修正すればいいことになります。CSS*TEMPさんの二つ目のコメントも参考にしてください。
タグは下記のとおりです。リストと番号付きリストは記事部分の指定箇所にあると思います。
.EntryTextBox ul や .EntryTextBox ol のように、タグが後ろに付いています。
まず引用文の場合です。
コメントのCSS*TEMPさんがサンプルの指定を書いてくださっていますし、ここでは私がWebstyle #01 シリーズで使用した指定をご紹介しますので、参考にしてください。
Marginは外余白、paddingは内余白です。余白は記事に合うように調整してください。
次にリストと箇条書きの場合です。
忍者ブログの基本テンプレートを利用したテンプレートの場合は、次のサンプルを参考にしてください。同じくWebstyle #01シリーズで使用した指定です。これは記事部分にしか効力はありません。
お使いのテンプレートが明らかに違う方式の場合は、作者さんに聞いてみてください。
忍者ブログにはたくさんのテンプレートが出ていますが、その指定の仕方は実はいろいろです。
気が付かずに使っていらっしゃる方が大半だと思いますが、なかには気が付いて「どうしてだろう?」と頭を悩ます方もいるかもしれません。
忍者エディターの機能の中にインデントがあるのをご存知ですか?
ツールバーの2段目、リストの箇条書き用のボタンからおたまじゃくしまで続く4個のボタンがそうです。
これを使うと、文章が少し中に入り込んで表示されます。
しかし、このボタンを使っても表示が変わらないテンプレートがあります。
こういうテンプレートは、CSSの最初によく下記のような指定がしてあります。
* { margin:0; padding:0; }この星型はユニバーサルセレクトと言って、タグをリセットするためのものです。
余白の取り方がそれぞれ違う、各ブラウザの見え方を同じにするために使われているのですが、すべてのタグに指定が効いてしまうため、インデントが無効になるという不具合が生じるわけです。
ただ、作者が意図的にインデントをしていない場合がありますので、まずこれらの指定がCSSの中にあるかどうかを調べてください。もしあれば、そこを修正すればいいことになります。CSS*TEMPさんの二つ目のコメントも参考にしてください。
タグは下記のとおりです。リストと番号付きリストは記事部分の指定箇所にあると思います。
.EntryTextBox ul や .EntryTextBox ol のように、タグが後ろに付いています。
引用文: blockquote
リスト:ul
番号付きリスト:ol
もしこのような指定がどこにもない場合、引用文とリスト用の指定を新たに作ってやることで問題を回避できます。リスト:ul
番号付きリスト:ol
まず引用文の場合です。
コメントのCSS*TEMPさんがサンプルの指定を書いてくださっていますし、ここでは私がWebstyle #01 シリーズで使用した指定をご紹介しますので、参考にしてください。
Marginは外余白、paddingは内余白です。余白は記事に合うように調整してください。
blockquote { margin:10px 20px; padding:10px; border:dotted 1px #AAA; }
次にリストと箇条書きの場合です。
忍者ブログの基本テンプレートを利用したテンプレートの場合は、次のサンプルを参考にしてください。同じくWebstyle #01シリーズで使用した指定です。これは記事部分にしか効力はありません。
お使いのテンプレートが明らかに違う方式の場合は、作者さんに聞いてみてください。
.EntryTextBox ul, .EntryTextBox ol { margin:10px 20px; padding:0px 20px; }注)CSS*TEMPさんの指定の中にあるemは、使われている文字の高さです。
TRACKBACK
TrackbackURL
COMMENT
はじめまして、こんにちは!
思わず見とれてしまいました。
ところで、全称クラスタ*ですが、「絶対的な効力がある」という表現は読者に誤解を与えてしまうのではないかと思います。全称クラスタの効力は、クラスタのなかでもっとも弱いです。
例えば、
blockquote {
margin:1em 0 1em 1em;
padding:0.5em;
background:#fafafa;
}
のように記述するだけで全称クラスタの効力はblockquoteに及ばなくなります。
全称クラスタのmargin,paddingのリセットを消せばblockquoteやul,olの余白を出すことができるテンプレートもあると思いますが、ちゃんと作られているテンプレートであればhN,form,fieldset,input,textareaなどの要素にデフォルトスタイルであるmargin,paddingが適用されてしまい、大きな型崩れが起きてしまうかもしれません!
テンプレート作成がんばってください!
Design up blog
http://csstemplate.blog.shinobi.jp/
ありがとうがざいます
熟練者の方にご訪問いただくとは、とても光栄です。
その上お褒めの言葉まで頂き、天に昇っております。
この記事については反省しております。すべてご指摘の通りです。
ついこの間まで尻尾のある猿だったものですから、不適格なことを書いてしまいました。
ご指摘を肝に銘じて、もっと勉強いたします。
早速記事を訂正いたしました。
不適切なところがありましたら、またご指摘ください。
早く人間に進化できるように、努力いたします。
ご教授をありがとうございました!
どういたしまして・・
私のデザインセンスなんて、くろろさんに比べたら米粒みたいなものですよ。
気になる点をあえてあげるのであれば、ulに関してでしょうか。リストのマークに画像を使う場合、人によってはこんなCSSを書くことがあります。
ul {
margin:1em 0 0.7em 0;
padding:0;
list-style:none;
}
ul li {
margin:0 0 0.3em 0;
padding:0 0 0 20px;
background:url('list16x16.png') left top no-repeat;
}
list-style-imageではなく、liの背景にリストのマークの画像を入れてしまうやり方です。もしこのような指定がなされていた場合、ulのmarginを増やしてしまうとリストの位置が少しおかしくなってしまうことがあります。
あえて言うならばここですが、そこまで大きな型崩れにはならないと思うので訂正するほどではないと思います;^^
Re:どういたしまして・・
確かにそういうこともありますね。そこまで考えていませんでした。
それに、意図的にmargin-leftを入れていない場合もあるわけですね。
ここが初心者と熟練者の大きな差です。
早速、記事を修正いたしました。
これなら何とか合格点が取れましたでしょうか?
CSS*TEMPさんの前に立つと、生徒になった気分です。緊張します
最後のお言葉にほっとしました(^^;)