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

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

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

忍者エディターの機能の中にインデントがあるのをご存知ですか？
ツールバーの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;
}

プレビューの見苦しさは忍者のせい

全部のテンプレートの修正が完了しました。
修正ポカで、AKIのコメント編集ページが左に寄ってしまっていたので、ついでに直しときました。
大量修正をすると決まって何かポカするので怖いのですが、今回はこれだけでした（汗）
一応、これ以上修正する気はありません。
ただ、2月25日修正分には、挿入される画像に外余白指定をつけておきました。

さて、新しくプレビューに画像が入りましたね。
はっきりいって見苦しいし、コメントページに大ポカが入っているので、苦情が忍者に寄せられていました。
記事のプレビューにもあの写真が出てきてたんですって。って、記事のプレビューがあるのを今気がつきました（ハハハハハ・・・・・）
しかし、忍者だってコメントページのポカに気がつかないはずはない。
どうして直さないんだろう？直せないのかしらん？
テンプレ作者の皆さんも、苦い顔をされていらっしゃるでしょうに・・・・・・

ところで、次のテンプレートを製作中なのですが、テクニックの壁を越えるのにアップアップしております。
一応まだ妥協していないのでもちっとがんばってみますけど、旅行に行く話しが出てるので、期限ぎれになったら白旗掲げて登録します。
xinxin さん、尊敬します！

ちょっと訂正

IE8のベータ2版で表示がえらく違ってたのでギョッとしたのですが、そのあとIE8のRC版でもう一度見たらIE7と同じになってました。
ちぇっ、びっくりして損した。
どちらにせよ修正はしないといけなかったからいいや。
時間ができたら残りも訂正する予定ですが、まだ先になりそうです。
まあ、残りは季節ものだから大丈夫でしょう。

実は次のにとりかかってますが、テクニックのお勉強に時間がかかってます。
デザインはできたんだけどなあ。
いま忙しいし、次のテンプレはだいぶ先になりそうです。

ランキング用バナー等の設置方法

いろいろとエディターの機能を試していたら、記事部分のフッターの利用の仕方を覚えました。
説明にはランキング用バナーや広告を設置するためだと書いてあります。
そこで忍者のフッターを試してみたら・・・・・・

あれ？フッターを作るとなぜか追記文のブロックができてしまう。
ようく説明を読んでみたら、何とランキング用バナーや広告は記事のすぐ下に表示されずに追記文章のブロックへ入れられるので、いくらやってもそのまま表示されない！

いったい何のためのランキング用バナーなのか、分からなくなっちゃうじゃありませんか！
隠れて見えない広告なんて、何の意味があるんですか？!

と憤慨したもので、私のテンプレートでは簡単に設置できるように改良しようと思い立ちました。
今回一斉に全テンプレートを修正することにしたので、この機会を利用しました。
ランキング用バナーをプラグインに入れているけれど、記事の下にも入れてクリックしやすくしたい方は、ぜひこの新機能をご利用ください。


それではこれから付け方を説明しますが、これはとても簡単です。
まず、16日以降に更新されたテンプレートをダウンロードしてください。
そしてテンプレート設定ページに行き、テンプレート名の右からテンプレート編集ページに入ります。
ページの右上のHTMLをスクロールしていくと、「記事ブロック」の見出しが見えてきます。
テンプレートによって上部にあるものと、下部にあるものとがあります。
もう少しスクロールするとこのような所が出てきます。

<!-- ==========　記事フッターブロック　========== -->
                <div class="RankingBannerBlock">

<!-- ここにランキングバナーや広告のソースを貼り付けてください -->

                </div>
<!-- ==========　記事フッターブロック　エンド ========== -->

ここにランキング用バナーや広告などのソースを貼り付けると、全ての記事の下に同じバナーや広告が表示されます。
記事ごとに広告を変えたい場合は、エディターに張り付けてください。

忍者ツールズがちゃんと対応してくれたら、こんなことをしなくてもいいんですけどねえ。
新ツール開発もいいけれど、ブログ部門ももっと充実させてほしいものです。でなきゃいつまでたっても小さいままです。
コメントにこの機能を書きこんで、忍者ツールズを啓発するのもいい手ですよね