Customize in Ninja Blog

まずは忍者ブログのテンプレート編集機能であらかじめ指定しておきます。
編集機能の部分はこうなってます。


ここで私の場合、
・プラグイン全体の背景色･･･#ffffff(白)
・プラグイン全体の背景画像･･･画像使用なし
・プラグインタイトルの背景色･･･#ccb17a
・プラグインタイトルの背景画像･･･画像使用なし
・タイトル文字･･･サイズ 13px 太字　色#ffffff
・タイトル余白･･･上：3px 右：5px　下：2px 左：5px
タイトル周りのボーダー･･･種類：線を引く　上：1px 右：1px 下：1px 左：1px 色#cccccc
・プラグインの背景色･･･#ffffff
・プラグインの背景画像･･･画像使用なし
・プラグインの文字･･･サイズ11px　色#656565
と指定しました。
これでスタイルシートの「プラグインブロック用デザイン」の部分が

/*プラグイン表示箇所全体の設定*/
.PluginBlock {
width: 220px;
text-align: left;
float:left;
background-color:#ffffff;
}
/*プラグイン表示箇所の背景や余白設定*/
.PluginInnerBlock {
padding:10px;
}
/*プラグインのタイトル（名称）部分の設定*/
.PluginTitle {
border-top-width:1px ;
border-right-width:1px ;
border-bottom-width:1px ;
border-left-width:1px ;
background-color:#ccb17a;
font-size:13px;
color:#ffffff;
border-style:solid;
border-color:#cccccc;
padding-top:3px ;
padding-right:5px ;
padding-bottom:2px ;
padding-left:5px ;
font-weight:bold;
-moz-border-radius: 10px;
}
/*プラグインの説明部分の設定*/
.PluginExplanation {
padding: 10px;
}
/*プラグインが表示される場所の設定*/
.pluginContents {
padding: 10px;

background-color:#ｆｆｆｆｆｆ;
font-size:11px;
color:#656565;
}

のようになるはずです。これをさらに変更していきます。

/*プラグイン表示箇所全体の設定*/は余白の指定を付け加えます。

.PluginBlock {
width: 220px;
text-align: left;
float:left;
background-color:#ffffff;
margin:0px;
padding:0px;
}

/*プラグイン表示箇所の背景や余白設定*/にも余白の指定を加えておきます。

.PluginInnerBlock {
padding:10px;
margin:0px;
}

/*プラグインのタイトル（名称）部分の設定*/にはボーダーを変更して、角を丸くする指定を加えたいと思います。

.PluginTitle {
border-top:1px solid #ffffff ;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #ffffff ;
background-color:#ccb17a;
font-size:13px;
color:#ffffff;
padding-top:3px ;
padding-right:5px ;
padding-bottom:2px ;
padding-left:5px ;
font-weight:bold;
-moz-border-radius: 10px;
}

ただし、角が丸く表示されるのはFirefoxなど、対応している一部のブラウザだけです。

/*プラグインの説明部分の設定*/には、プラグイン部分の本文部分と同じように表示されるよう文字サイズなどを加えておきます。

.PluginExplanation {
padding: 10px;
margin:0px;
background-color:#ffffff;
font-size:11px;
color:#656565;
}

/*プラグインが表示される場所の設定*/には余白の指定を加えておきます。

.pluginContents {
padding: 10px;
background-color:#ffffff;
font-size:11px;
color:#656565;
margin:0px;
}

ここまでの指定でプレビューするとこのようになります。

やっぱりサイドを指定するとずいぶん違いますね(^◇^)
今回はこのへんでやめておきます。