インデントが利かないテンプレートを修正する

不適切な箇所のご指摘を受けましたので、記事を訂正しました。

忍者ブログにはたくさんのテンプレートが出ていますが、その指定の仕方は実はいろいろです。
気が付かずに使っていらっしゃる方が大半だと思いますが、なかには気が付いて「どうしてだろう？」と頭を悩ます方もいるかもしれません。

忍者エディターの機能の中にインデントがあるのをご存知ですか？
ツールバーの2段目、リストの箇条書き用のボタンからおたまじゃくしまで続く4個のボタンがそうです。
これを使うと、文章が少し中に入り込んで表示されます。
しかし、このボタンを使っても表示が変わらないテンプレートがあります。
こういうテンプレートは、CSSの最初によく下記のような指定がしてあります。

* {
        margin:0;
        padding:0;
    }

この星型はユニバーサルセレクトと言って、タグをリセットするためのものです。
余白の取り方がそれぞれ違う、各ブラウザの見え方を同じにするために使われているのですが、すべてのタグに指定が効いてしまうため、インデントが無効になるという不具合が生じるわけです。
ただ、作者が意図的にインデントをしていない場合がありますので、まずこれらの指定がCSSの中にあるかどうかを調べてください。もしあれば、そこを修正すればいいことになります。CSS*TEMPさんの二つ目のコメントも参考にしてください。
タグは下記のとおりです。リストと番号付きリストは記事部分の指定箇所にあると思います。
.EntryTextBox ul や .EntryTextBox ol  のように、タグが後ろに付いています。

引用文： blockquote
リスト：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は、使われている文字の高さです。

記事内の画像に外余白をつける

新しくなったプレビューには画像がついています。
そこで気がつかれた方がたくさんいると思いますが、記事の文章が画像にぴったりくっついているものと、少し離れているものがあります。
この差は、画像に外余白が付いているか、いないかです。
私もそこまで考えて指定していなかったので、記事が写真にくっついてましたが、テンプレート大修正をした時に「月の華」以外は修正しました。
これは他のテンプレートにも有効ですので、プレビューで写真と記事がくっついているものにも使えます。


テンプレート編集ページへの行きかたは以前に何度も説明してあるので省略します。
ページ右下のCSSの最初のブロックに次の指定を貼り付けてください。

    img {
        margin:2px;        
        border:none;
    }

上記のmarginは外余白です。borderは枠線です。ここでは枠なしを指定しています。
これで、全ての画像と記事との間に少し間が開きます。
気になる方は試してみてください。

もしも、記事以外には外余白が欲しくない場合は「記事ブロック」のなかに次の指定を貼り付けてください。
セレクタの「.EntryText 」は記事文章を指定する部分ですが、テンプレートによってはセレクタが別の名前になっています。分かればその名前で指定してください。分らない場合は上記の方法でしてください。

.EntryText img {
    margin:2px 4px;
}

テンプレートを左寄り、右寄り、または中央にする

猫テンプレは左寄りですが、中央に持ってきたい方のために説明をいたします。
また、中央にあるテンプレを左右に寄せるのも簡単ですので、ついでにここで説明したいと思います。
これはCSSを変更しなければなりません。

まず、テンプレート設定 / 編集ページに入り、変更したいテンプレートの右からテンプレート編集ページに入ります。
ページの右下のCSSを少しスクロールして、「メインブロックの設定」を探します。
そこには下のような指定がしてあります。

「左寄せにする指定」

#mainBlock {
    width:780px;
    margin:0px auto 0px 0px;　　　　　（「上」「右」「下」「左」の順番で指定する）
    padding:0px 10px;
    text-align:center;
    background-color:#FFF;
}

これを中央に持ってきたい場合は次のように変更します。

「中央にする指定」

#mainBlock {
    width:780px;
    margin:0px auto;　　　　　　（上下と左右が同じ場合の指定で「上下」「左右」の順）
    padding:0px 10px;
    text-align:center;
}

猫テンプレは右下にもう一匹猫がいるので、背景色のbackground-color:#FFF;を取ります。
こうすると、テンプレは中央に来て、なおかつ右下の猫が見えます。
右寄りにしたい場合は下記のようにしてください。

「右寄りの指定」

#mainBlock {
    width:780px;
    margin:0px 0px 0px auto;
    padding:0px 10px;
    text-align:center;
    background-color:#FFF
}

完全に中央にするのではなく左から少しだけ離したい場合は、「左寄せの指定」を使って最後の「左」に希望するピクセルを指定してください。その分だけ左側から離れていきます。
指定の仕方は簡単ですので、カスタマイズをされるときに活用してください。

プラグインの日付を右に持ってくる

新しい結果が出たので、以前にここに書いた記事を変更しました。


質問が出ましたので、カスタマイズで説明をしたいと思います。
どうして私のテンプレートでは、プラグインの日付が左なのか？
XHTMLで書いているからです。
XHTMLで書かれている、他の作者さんのテンプレートにも同じ現象が見られます。
ではなぜそうなるのか？
プラグインはタグの付いたブロックが呼び出されることと、忍者ツールズがへまをしていることに起因しています。

忍者ツールズはHTMLを使っているので、XHTMLとは折り合いが悪いんですよね。
特に携帯の絵文字がひどい
サイトチェックをすると、山の如くエラーが出てきます（ははは；）

さて、これはプラグインの設定では変更できません。直接CSSを変更する必要があります。
しかしやってみると、基本テンプレートをいじくっていないにも関わらず、CSSで左右を変更することもできません。仕様がないので、HTMLに書かれているセレクタをコピーする方法にしました。
プラグイン設定ページからHTML編集ページに入り、クラスセレクタのplugin_data とplugin_data_date をコピーして、CSSの中の「各プラグイン共通項目用設定」のブロックの、同じ名前のセレクタと差し替える。
こうすれば、HTMLとCSSは必然的に一緒になるから変更できるようになります。
ところが、後になって気が付きました。
プラグインのHTML編集ページをよーく見ると、プラグインのセレクタは小文字で始まっているのに、CSSは大文字で始まってる？！
私は確かに目が悪いけどここまで目が悪かったのかと、気が付いたあとちょっとショックでした（＾＾；）

すこし説明を付けますと・・・
HTMLは大文字も小文字も同じものとして認識しますが、XHTMLでは大文字と小文字が区別されます。
つまり、大文字と小文字は全く違うものとして扱われるわけです。
プラグインの日付が右に行かなかったのは、これが原因です。
しかし、まさか忍者ツールズがこんなへまをしているとは思いもかけませんでした・・・・・・

CSSをよくご存じの方は、該当箇所のセレクタを小文字に変えてください。
それだけで日付の左右を変更することができます。
他の方は、追記に修正済みCSSを付けましたのでコピーして使ってください。
該当箇所への行き方も説明してあります。


追記：　２００９年２月に全テンプレートを修正しました。私のテンプレートの場合は、再度ダウンロードするだけでOKです。他のテンプレートは下を参照してください。

引用文に枠をつける

引用文を使われる方は少ないかもしれませんが、エディターに「ブロック引用」のボタンがあります。
高機能エディターの２段目、オタマジャクシのようなボタンがそうです。
これを押すと、隣のボタンの「インデント」と同じように文章が右にずれます。
一見同じ機能のように見えますが大きな違いがあり、「ブロック引用」は枠をつけたり背景色を変えたりできます。
どう違うのかを知りたい方は、次の文章を見てください。

まず普通の「インデント」です。これは文章を引っ込めるだけの役割です。
 

今度は「ブロック引用」です。同じく引っ込みますが、枠、または背景色が出ます。

この「ブロック引用」は、CSS で指定していなければ「インデント」とまったく同じに見えます。
ご使用のテンプレートがブロック引用処理されているかどうかは、実際に試してみれば分かります。
私のテンプレートには付いていなかったのですが、後から付け加えました。
下にCSS を付けましたので、カスタマイズされたい方は利用してください。
とても簡単ですので、ブロック引用処理のしていないテンプレートを使われている方も参考にしてください。