忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.10│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

プラグイン部分の編集

コメント投稿部分やトラックバック部分を先にやろうと思っていたのですが、サイド部分は常に表示されているにもかかわらず、何にもいじってないって言うのはちょっと寂しいので、サイド部分のプラグインを先にいじることにします。

プラグインはカテゴリーが1~5まであります。
後々、3カラムなどにするときには、このカラムが重要になってくるのでしょうが、今のところはただ上から順に並んでいるだけです。

なので、HTMLは変更しないことにします。
今回はCSSのみの変更です。
まずは忍者ブログのテンプレート編集機能であらかじめ指定しておきます。
編集機能の部分はこうなってます。
テンプレート編集画面プラグイン部分

ここで私の場合、
・プラグイン全体の背景色・・・#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:#ffffff;
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;
}

ここまでの指定でプレビューするとこのようになります。
忍者テンプレート12
やっぱりサイドを指定するとずいぶん違いますね(^◇^)
今回はこのへんでやめておきます。
PR
*COMMENT-コメント-
▽こんばんは(^^
どうも、カスタマイズBBSではお世話になりました、miu_uimです。
あるふぁさんのブログをついに発見して嬉しかったので足跡残してみましたv
忍者ブログのカスタマイズについてのブログなのですね〜。
σ(^ー゜)も少し似たことをやってるので親近感を感じますし、とても勉強になりました(^^
また一つ巡回サイトが増えたわ♪

注:みうみうさんよりのコメントを再現しました。コメントの日時は「2006-03-24-Fri 18:44:37 」です。
△Re:こんばんは(^^
カスタマイズといってもあんまりたいしたこと書いてないです。
タイトル負けですね( ̄□ ̄|||)
でも、他に書くことないので・・・orz

みうみうさんのブログは和風なんですね~
いいなぁ・・・
色合いが綺麗です。
BLEACHファンなのですか? 
アイコンが並んで表示されたとき「おおっ!」と思ってしまいました。

これからもどうぞよろしく~

注:この返信は再現です。本来の日時は「2006-03-24-Fri 19:58」です。
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
09

11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter