忍者ブログ

Customize in Ninja Blog

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

2017.03│ 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ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Body部分を指定する

ヘッダ部分の構造に続き、Body部分の構造に入ります。
このBody部分(<body>~</body>)に書かれた内容が実際にパソコンで見るページになります。
なので、すこしずつテンプレートを作成しながら分析しようと思います。
テンプレート作るのは後回しにしようかとも思ったのですが、そのほうが分かりやすいので・・・

HTMLが文書を、スタイルシート(CSS)がデザインを担当すると考えて作ってあるのがテンプレートの基本です。
ですので、ここからはスタイルシートと合わせてみていかなければちょっと分かりづらいことになってきます。

今回は、テンプレート全体の構造と全体を指定しているスタイルシートについてまでで
Body部分の1行目には
<div id="mainBlock">

とあります。これはこのテンプレートを画面全体のどのぐらいの位置にブログ全体を表示するかを決めるためのもののようです。これは最後の</body>の手前に閉じタグ</div>があります。

といっても分かりにくいので、下の図を作りました。
画面全体がbodyで指定される部分で、その中に水色の部分があります。これが<div id="mainBlock">~</div>が表示する部分です。

ブロック説明

なんでBodyで全体の指定を指定しているのに、さらにブログの全体を表示するためのタグを入れているかと思うこともあります
テンプレートによりますが、この方が全体をセンタリングするときに有効なのです。

それではテンプレートを作り始めながら分析していくことにします。
初期の何も入力していないテンプレートはこのように見えていると思います。
忍者テンプレート1

気づいたことはありませんか?
たいていのブログはブログ全体が真ん中によって、左右に余白があります。
これは左に内容が寄ってます。
センタリングをしてないからです。

なのでセンタリングをしたいのですが、残念なことに忍者ブログのテンプレートの作成システムにはこのセンタリングの項目はないです。
なので自分で指定するしかありません。

指定はスタイルシートで行います。
まずBody部分に真ん中に表示するよう指定します。
/*BODY全体に関する設定*/
body {
text-align : center ;
}

この上でmainBlock部分全体を真ん中に寄せるようスタイルシートを記入します。
この真ん中寄せには余白を指定するmarginを利用します。
/*全体の設定*/
#mainBlock {
margin-top : 0px ;
margin-right :auto ;
margin-bottom : 0px ;
margin-left : auto ;

}

と、指定します。意味は上の余白は「0px」、右の余白は「自動で決めます」、下の余白は「0px」、左の余白は「自動で決めます」という意味になります。
左右の余白をブラウザに自動的に決めさせると、左右の余白が等しくなって結果的に真ん中によります。

結果的に上の4つmargin指定は統合することが可能なので、初期設定の幅と合わせると
/*全体の設定*/
#mainBlock {
width:770px;
text-align: center;
margin : 0px auto 0px auto ;
}

のようになるかな、と思います。
この指定がが終わるとプレビューは次のようになります。
忍者テンプレート2

ここで忍者ブログ独自のテンプレート作成システムで背景色、背景画像、文字サイズ、リンク色、リンクの装飾などを決めます。
下がその場所です。
忍者ブログの編集画面BODY部分

私の場合は
背景色・・・#ffffff(白)
背景画像・・・背景画像ー網URL:http://file.start.blog.shinobi.jp/ami.GIF
画像の位置・・・左上
画像の繰り返し・・・繰り返す
文字色・・・#656565(灰色)
文字タイプ・・・sans-serif(ゴシック)
文字の太さ・・・normal(標準)
リンクの色・・・#cc9966(薄めの茶色)
リンクの装飾・・・none(なし)
マウスが来たときのリンク色・・・#ccb17a(上よりもさらに薄い茶色)
マウスが来たときのリンクの装飾・・・underline(下線)

と指定しました。

これでスタイルシートにどのように指定されているかを見てみると、
/*BODY全体に関する設定*/
body {
text-align : center ;
background-color:#ffffff;
background-position:left top;
background-image:url('http://file.start.blog.shinobi.jp/ami.GIF');
font-size:12px;
color:#656565;
font-family:sans-serif;
font-weight:normal;
}
/*通常のリンクの設定*/
a:link {
color:#cc9966;
text-decoration:none;
}
/*過去に見たことがあるページのリンクの設定*/
a:visited{
color:#cc9966;
text-decoration:none;
}
/*アクティブ状態のリンクの設定*/
a:active {
text-decoration:underline;
color:#ccb17a;
}
/*カーソルが合っている状態のリンクの設定*/
a:hover {
text-decoration:underline;
color:#ccb17a;
}

のようになりました(変化した部分だけを表示してます)。

この指定でプレビューを見ると次のようになります。
忍者テンプレート3

これで大体、全体が整ったでしょうか?

次はもう少し細かく設定を加えたいと思います。
PR
*COMMENT-コメント-
*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
02

04
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