さて、今回から数回に分けて ＣＳＳについて超・初心者の私が、どうやって今 みなさんが見てる当ブログのテンプレートをカスタマイズしたか？について書こうと思います。
まず、ブログを始めるにあたって最初に考えたのは『テンプレートをカスタマイズしたい！』と言う事。
もともと"人と同じ"と言うのが嫌いな私が『用意されたテンプレートをそのまま使う』なんて、とても出来ない！
そこで始めにしたのが【カスタムテーマ変更】で≪タイトルバナー≫にオリジナル画像を挿入したり、≪ページ全般の設定≫≪サイドバー項目≫などを変更したのだが ・・・・・・・ん～ 何か物足りない。
やはり背景に画像を入れたり、サイドバーのメニュータイトルも変えたいな～ なんて思っちゃって・・・・・
そこで気になったのが【カスタムCSSを編集】と言う項目だ。
【カスタムCSSを編集】の説明を読んでみると・・・・・ CSSを利用する事で様々な変更が出来ると言う事。
しかし超・超～～初心者の私には、説明を呼んでも CSS？ ID？ クラス？ 何を言ってるのか、"サッパリ"（？ _ ？）
そこでCSSについて何処かで説明してないか？と思い、検索して色々調べてみて解った事は、CSSを入力するには、"セレクタ""プロパティ""値"と言うのがあって、これを指定してやれば細かくテンプレートをカスタマイズ出来ると言う事だ。
しかし・・・ この"セレクタ""プロパティ""値"を指定すれば良いと言われても、これまたどう指定してやれば良いのか？
┐（´∇｀）┌ （ サッパリ解らん! ）
それでも"プロパティ"や"値"については、一覧を記載してるページがあったので良かったのだが、"セレクタ"については解らない・・・・・
『・・・・・ん？ 待てよ！？ そう言えば、ココログ内で検索してないな！』『ココログで検索すれば、カスタマイズしてる人の記事があるかもしれない！』と思い、早速検索をしてみた。
"ビンゴ!!"カスタマイズしてる人の記事が出て来た～♪
～ヽ（＊ ´∇｀）ノ
・・・・・・・・・つづく
/*セレクタ＆記入例*/ | |
/*ページ全体背景など*/ | body {background-image:URL( ); } |
/*バナー（タイトル部分）*/ /*背景画像*/ | #banner { |
/*コメント背景(別ウィンドウ･エントリー下ともに）*/ /*背景画像*/ | #container { background-image:url( ); background-position: left top; } |
/*コメント日時（背景・色・フォント変更）*/ /*背景色*/ | .content h2 { |
/*コメントタイトル（背景・色・フォント変更）*/ /*フォントカラー*/ /*文字を左５ポイントあける*/ | .content h3 { |
/*コメント記事（本文部分）*/ | .content { |
/*コメントの行間*/ /*フォントカラー*/ | .content P { line-height: 100%; } |
/*コメント入力欄(内容以外/名前･メール･URL部分)*/ | #comment-data{ } |
/*コメント入力欄*/ /*背景画像*/ | #comment-text textarea, background-repeat:no-repeat; |
/*コメント入力欄（サイズ）*/ /*幅*/ | textarea { |
/*コメント表示欄*/ /*背景画像の指定*/ | .comment-body{ background-image:url(); |
/*センター*/ | #center { |
/*左サイドバー*/ | #left { |
/*右サイドバー*/ | #right { |
/*サイドバーの「最近の記事」*/ | #recent-entries{} |
/*サイドバーの「最近のコメント」*/ | #recent-comment{} |
/*サイドバーの「最近のトラックバック」*/ | #recent-trackback{} |
| |
/*スクロールバー*/ | html { scrollbar-face-color: #800000; scrollbar-shadow-color: #330000; scrollbar-darkshadow-color: #000000; scrollbar-3dlight-color: #660000; scrollbar-arrow-color: #000000; } |
| |
/*カレンダーのフォントと色*/ /*背景（透過）*/ | #calendar{ |
/*月名のフォントと色*/ /*背景（透過）*/ | #calendar caption{ |
/*曜日のテーブルとフォント*/ /*背景（透過）*/ | #calendar th{ |
/*日付部分のテーブルとフォント*/ /*背景（透過）*/ | #calendar td{ |
/*プロパティ＆値*/ | |||
/*値*/ | /*幅*/ | /*高さ*/ | |
px em pt | width: px; | height: px; | |
| |||
/*フォント設定*/ | /*フォントサイズ*/ | /*文字間隔指定*/ | /*インデント幅指定*/ |
font-family:; | font-size : ; | letter-spacing: pt; | text-indent: pt; |
/*フォント種類*/ | Trebuchet MS', Verdana, sans-serif | ||
/*フォントの大きさ指定*/ | （細）100、200、300、400、500、600、700、800、900（太） | ||
/*太めの文字*/ bolder | /*標準*/ normal | /*細めの文字*/ lighter | |
| |||
/*枠線関連一括指定*/ | /*カラー一括指定*/ | /*枠幅一括指定*/ | /*スタイル一括指定*/ |
Border: ; | border- color: ; | border- width: px; | border-style:; |
/*枠線を個別で指定する場合*/ | | | |
/*上の枠線*/ | /*下の枠線*/ | /*左の枠線*/ | /*右の枠線*/ |
border-top | border-bottom | border-left | border-right |
/*枠線のスタイル(種類)*/ | /*ボーダー無し*/ none | ||
/*点線*/ | /*破線*/ | /*切れ目の無い実線*/ | /*二重線*/ |
dotted | dashed | solid | double |
/*溝線枠*/ | /* 稜線枠*/ | /*陥没線枠*/ | /*浮上線枠*/ ボックスのボーダーより内側全体が隆起になるように表示します。 |
groove | ridge | inset | outset |
| |||
/*背景*/ | /*背景色*/ | /*背景画像*/ | /*背景リピート*/ |
background | background-color: ; | background-image: url(); | background-repeat: ; |
/*１列に繰り返す*/ | /*画像を繰返さない*/ | /*背景位置指定*/ | /*位置設定*/ |
repeat-y repeat-x | no-repeat | background-position: ; | left center right |
/*透過－背景で選択した色になる*/ transparent | |||
| | | |
/*ＨＴＭＬ入力*/ | ||
/*画像挿入*/ <img title="●●" src="http://maverik.cocolog-nifty.com/banner/★★"width="150" border="1px" /> <img title="MAVERIKbanner" src="http://maverik.cocolog-nifty.com/banner/maverik01.png" width="150" border="1px"/> | ||
/*記事本文ＨＴＭＬにスクロールウインドを出すコード*/ <pre style="BORDER-RIGHT: #660000 1px outset; BORDER-TOP: #660000 1px outset; OVERFLOW: scroll; BORDER-LEFT: #660000 1px outset; WIDTH: 100%; BORDER-BOTTOM: #660000 1px outset; FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif; LETTER-SPACING: 5pt; HEIGHT: 100px; BACKGROUND-COLOR: #ffffcc"><p>記事本文</p></pre> | ||
/*文中にリンクを挿入*/ | /*ＨＴＭＬ内のフォントサイズ指定*/ | |
/*改行*/ | /*段落*/ | |
なるほどぉ。。。
返信削除さすがっすね。
いきなりオリジナリティー爆発って感じで見習わないとです＾＾；