忍者ブログ

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

Body部分とスクロールバーを指定する

Bodyの部分の指定は、前回(=Body部分を指定する)でほぼ指定し終えましたが、ちょっと物足りないので自分なりに少し追加したいと思います。

また、全体に関する指定としてスクロールバーの色も指定したいと思います。
スクロールバーは主にIEでしか見れませんが、見れるときはちょっとおしゃれな感じがします^^

そのほか、ブラウザごとの誤差を修正する指定も追加しようと思います。

今回はスタイルシートだけの変更です。
Body部分の指定に自分なりに少し追加します。
自分としては文字タイプが1つというのは気になるので、複数指定に変えます。
font-family :Verdana,"ヒラギノ角ゴ Pro W3", "MS Pゴシック",Osaka,sans-serif ;

左にあるものから順に優先的にしていされます。

また、Bodyにも余白の指定を入れておきます。
margin :0px ;
padding:0px ;


さらに行間の指定をいれます。
line-height: 150% ;

行の高さを文字サイズ×150%と指定しました。
逆に言えば、行と行の間の隙間を50%としたということになります。

それと、これはインターネットエクスプローラー(IE)独自のスタイルシートタグなのですが、付け加えておきます。
word-break : break-all ;
word-wrap :break-all ;

上の指定が文の改行の仕方について指定するもので、下が単語の途中で改行するかどうかを指定するものです。どちらも途中でも何でも改行するようにしました。
理由は、改行しないと長い単語かなにか(特にURL)がきたときに重なったり、幅が広くなってテンプレートが崩れたりするからです。

以上の変更を加えてスタイルシートのBody部分は
/*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 :Verdana,"ヒラギノ角ゴ Pro W3", "MS Pゴシック",Osaka,sans-serif ;
font-weight:normal;
margin :0px ;
padding:0px ;
line-height: 150% ;
word-break : break-all ;
word-wrap :break-all ;

}


これで一応Body部分の指定は終わります
この状態でプレビューを見ても前回の状態とほとんど変わりありません。

今度は、ブラウザ間の誤差を修正する指定をいれます。
指定を入れる適当なものがないので新しく増やしました。
/*ブラウザ間の誤差修正*/
html * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

これは、内容的に/*BODY全体に関する設定*/の直前、「全ブロックの共通設定」の一番上にいれることにします。
入れるとテンプレートの編集機能がおかしくなるのでやめて、「トップブロック用デザイン」のすぐ上にいれることにしました。

それから、スクロールバーの指定です。
細い枠のように表示したかったのでこのように指定しました。
/*スクロールバーの色指定*/
html,body {
scrollbar-track-color : #ffffff ;
scrollbar-3dlight-color : #e6e6cc ;
scrollbar-arrow-color :#e6e6cc ;
scrollbar-darkshadow-color : #e6e6cc ;
scrollbar-face-color : #ffffff ;
scrollbar-highlight-color : #ffffff ;
scrollbar-shadow-color : #ffffff ;
}

実際にはこう見えます
スクロールバーの見本
背景色と似た色を使ったので違和感が少ないです。

ここで前にセンタリングの時に利用したmainBlockの指定にいきます。
いま背景画像が記事部分やサイド部分すべてに表示されてしまっています。
このままだとちょっと見づらいので記事になる部分は背景画像を見えないようにしたいと思います。これにはbackground-color(背景色)を白を指定したいと思います。

また、センタリングをするために余白でmarginを使いました。これはborderで指定される枠線の外側の余白を指定するものなので、内側も指定しておきたいと思います。内側はpaddingで指定します。
/*全体の設定*/
#mainBlock {
width:770px;
text-align: center;
margin :0px auto 0px auto ;
padding:0px ;
background-color:#ffffff;

}

ここまで指定するとこんな感じになります。
忍者テンプレート5

大分テンプレートらしくなってきました。
次はTOP部分の指定に行きたいと思います

追記:問題発生!! Firefoxでは白に指定した部分が途中で途切れる!?
解決しました。下の部分に回りこみを解除するためclear:both;を入れたら直りました。
/*一番下のブロック(著作権表示が書かれる場所)の設定*/
#FooterBlock {
clear:both;
height: 200px;
text-align: center;
}
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
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