« データは何処に?? | トップページ | Windows Live OneCare PC セーフティ 日本語版公開 »

2006年8月16日

夏休み企画:ココログのカスタマイズその2

せっかく始めた夏休み企画ですが、本日で夏休みも終わり。あっと言う間の夏休み企画でした(^^)。
何とか纏めてみます。

前回は、ココログのデザインはスタイルシート(CSS)で行っており、スタイルシート(CSS)の在処まで確認しました。
スタイルシート(CSS)をカスタマイズすることで、ココログのデザインを変更することが出来ます。
以前はココログプロ以外は自由にカスタマイズを行うことが出来ませんでしたが、春のバージョンアップ後から以下の所で行えるようになりました。

スタイルシート(CSS)をカスタマイズするに
管理ページトップ > ブログ一覧 > 各人のブロブ名 > デザイン > カスタムCSSを編集

上記ページのテキストボックス内に、スタイルシート(CSS)の属性を記述する事で、デザインに反映されます。

スタイルシート(CSS)の特性として、指定されている属性を、後から再度指示して変更する事が出来ます。
現在、

http://maru.cocolog-nifty.com/manabi/styles.css

にて、指定されているスタイルシート(CSS)の属性を、上書きする事で属性を変更させることが出来ます。
http://maru.cocolog-nifty.com/manabi/styles.css

を開いてみると。

body {
margin: 0px 0px 20px 0px;
border: 0;
padding: 0;
background-color: #CCDEF0;
text-align: center;
}

と、有ります。
上記の内容は、html の タグに関して、属性を与えています。

margin: 0px 0px 20px 0px;
margin とは、左右天地の余白を示しており、上記の記述では、上、右、下、左 の余白を指定おり、上記の内容では、下だけ 20px の余白を与えています。

border: 0;
border とは、外枠を表します。0px ですので、外形線は無しを示しています。外形線が不要な場合、border 記述をしなくても可です。

padding: 0;
padding とは、左右天地の余白を示しており、上記の記述では余白無しを示しています。

margin と padding は同じ余白になりますが、margin は外側の余白になり、padding は内側の余白になります。使い分けは少し慣れが必要です。

background-color: #CCDEF0;
background-color とは、背景の色を示します。 #CCDEF0 が指定されて色を表しており、ホームページを制作する場合、色の指示は #CCDEF0 と16進数で表します。詳しくは下記のサイトを参考にしてください。

カラーチャート

text-align: center;
text-align: とは、文字の位置を示します。center にて真中寄せを指示しています。

上記は一例です。
このように、スタイルシート(CSS)は、 という HTML のタグに対して、様々な属性を指定しています。
ココログ(フリー、ベーシック、プラス)で、デザインのカスタマイズとは、上記で指定されている、スタイルシート(CSS)の属性を指定しなおす事で、カスタマイズを行います。

以下の内容を、【カスタムCSSを編集】の「テキストボックス」内に記載します。

body {
background-color: #99CCFF;
}

上記の内容を、【カスタムCSSを編集】の「テキストボックス」内に記載する事で、背景の色を変える事が出来ます。

スタイルシート(CSS)をカスタマイズする場合、HTML のタグに対してどのような属性を与えているかを確認し、そのタグに対して新規の属性を【カスタムCSSを編集】の「テキストボックス」に記述する事で、属性の上書きになり、カスタマイズを行うことが出来ます。

スタイルシート(CSS)の属性等に関しては、下記サイト、書籍等でご確認してください。

http://www.scollabo.com/banban/ref/css.html
http://hp.vector.co.jp/authors/VA022006/css/index.html
http://dhr.at.infoseek.co.jp/simple_style1.htm
http://desperadoes.biz/style/base/index.php
http://hp.vector.co.jp/authors/VA013937/cssref/

HTML のソースと、スタイルシート(CSS)のソースを見比べて、カスタマイズするポイントを見極めてから、変更点を【カスタムCSSを編集】の「テキストボックス」に記載する事で、デザインをカスタマイズする事が出来ます。

慣れていない方には、少し敷居が高いかも知れませんが、少しづつカスタマイズして見てください。
ちなみに、新規の属性を【カスタムCSSを編集】の「テキストボックス」に記載した内容は、

http://maru.cocolog-nifty.com/manabi/styles.css

/* user css */
部分に、記載されます。

お試しください。

|

« データは何処に?? | トップページ | Windows Live OneCare PC セーフティ 日本語版公開 »

「ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6981/11462053

この記事へのトラックバック一覧です: 夏休み企画:ココログのカスタマイズその2:

« データは何処に?? | トップページ | Windows Live OneCare PC セーフティ 日本語版公開 »