目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

株 式 会 社 アイ オー データ 機 器 CSS 解 説 書

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

1.CSSとは? 3

1.CSSとは? CSSとはカスケーディングスタイルシート の 略 で HTMLにデザインを 加 えるために 開 発 されたも のです ブログのほとんどはHTMLとCSSで 構 成 されていて CSSに 手 を 加 えれば 誰 でも 簡 単 に カスタマイズすることができる 点 もブログの 楽 しみの 一 つではないでしょうか まずはその 効 果 を ご 覧 ください CSS 適 用 前 (HTMLのみの 状 態 ) 4

1.CSSとは? CSS 適 用 後 (HTML+CSS) left_layout HTMLにCSSを 加 えるだけでこんなにも 変 わります 見 た 目 に 加 え 読 みやすさも 増 したこと がお 分 かりになるかと 思 います この 解 説 書 ではCSSについて 大 まかにしか 説 明 していませ んが これを 期 にぜひCSSをマスターしてあなただけのオリジナルブログに 挑 戦 してみてくだ さい 5

予 備 知 識 cssの 解 説 に 入 る 前 に 予 備 知 識 として 下 記 をご 覧 ください ボックスについて Margin border paddingを 図 に 表 すとこのようになります マージン:margin の 周 りの 空 間 :padding 123456 枠 線 :border 上 の 各 には2 種 類 のスタイル 指 定 の 方 法 があります 一 つは 上 下 左 右 を 個 別 に 指 定 する 方 法 例 : border-left : 1px; 左 の 枠 線 を1pxに margin-top : 5px; 上 のマージンを5pxに padding-bottom : 6px; 下 のパディングを6pxに というやり 方 と これらを 一 括 で 指 定 する 方 法 です 例 : border : 0px 0px 1px 0px; 枠 線 の 一 括 指 定 上 0px 右 0px 下 1px 左 0px (borderだけでなく padding marginとも 必 ずこの 順 番 です ) padding: 5px; パディングの 一 括 指 定 上 下 左 右 とも5pxに 6

2.common.css #container コンテナ(ブログ 全 体 ) #banner バナー #content コンテンツ.sidebar.entry エントリ サイドバー commmon.cssは 大 きくこのように 分 けることができます それぞれについての 解 説 は 次 ページからになっています 7

2.common.css common.cssでは ブログ 全 体 の 幅 背 景 色 リンク 色 文 字 の 色 など 細 かな 指 定 を 行 っているとこ ろです スタイル 指 定 の 数 は 他 のCSSと 比 べると 多 いですがその 分 重 要 なところです /* bodyの 設 定 */ body 部 分 は 主 にブログの 外 側 ( 背 景 の 部 分 )の 指 定 をします /* bodyの 設 定 */ body { background-color:#ffffff; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center; /*background-repeat: repeat-x;*/ font-size: 90%; line-height: 140%; background-attachment: fixed; background-image:url(../img/bg.gif); color:#ffffff; background-color margin-left margin-top margin-right margin-bottom text-align background-repeat font-size line-height background-image color ページ 全 体 の 背 景 色 を 指 定 します ページの 左 マージンを 指 定 します ページの 上 マージンを 指 定 します ページの 右 マージンを 指 定 します ページの 下 マージンを 指 定 します bodyに 含 まれる の 行 揃 えを 指 定 します 背 景 画 像 の 繰 り 返 しの 仕 方 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています ページ 全 体 の 文 字 のサイズを 指 定 します ページ 全 体 文 字 の 行 間 を 指 定 します ページの 背 景 画 像 を 指 定 します ページ 全 体 の 文 字 の 色 を 指 定 します 8

2.common.css /* リンクカラー 設 定 */ ここではリンクの 色 の 指 定 をします まだ 見 ていないリンク 色 すでに 見 たリンク 色 など 細 かく 指 定 することができます /* リンクカラー 設 定 */ a {text-decoration: underline;color:#cc0000; a:link {text-decoration: underline;color:#cc0000; a:visited {text-decoration: underline;color:#cc0000; a:active {text-decoration: underline;color:#cc0000; a:hover {TEXT-DECORATION:none ; COLOR:#FFFFFF ; background-color:#cc0000 ; a a:link a:visit a:active a:hover リンクのスタイルを 指 定 します まだ 見 ていないリンクのスタイルを 指 定 します すでに 見 たリンクのスタイルを 指 定 します マウスボタンを 押 したときのリンクのスタイルを 指 定 します カーソルがそのリンクの 上 にある 時 のスタイルを 指 定 します /* 見 出 し 用 タグの 設 定 */ ここでは 見 出 し 用 の 文 字 (h 要 素 )を 指 定 します /* 見 出 し 用 タグの 設 定 */ h1, h2, h3 { margin: 0px; padding: 0px; font-weight: normal; ここでは h1 要 素 h2 要 素 h3 要 素 を 一 括 で 指 定 しています margin padding font-weight 文 字 のマージンを 指 定 します 文 字 のパディングを 指 定 します 文 字 の 太 さを 指 定 します /* バナーのリンク(ブログタイトルのリンク)*/ バナー 部 分 のリンク つまりブログのタイトル 部 分 のリンクのスタイルを 指 定 します /*バナーのリンク*/ #banner a{text-decoration: none;color:#ffffff; #banner a:link{text-decoration: none;color:#ffffff; #banner a:visited {text-decoration: none;color:#ffffff; #banner a:active {text-decoration: none;color:#ffffff; #banner a:hover {TEXT-DECORATION:underline;COLOR:#FFFFFF;background:none; a a:link a:visit a:active a:hover リンクのスタイルを 指 定 します まだ 見 ていないリンクのスタイルを 指 定 します すでに 見 たリンクのスタイルを 指 定 します マウスボタンを 押 したときのリンクのスタイルを 指 定 します カーソルがそのリンクの 上 にある 時 のスタイルを 指 定 します 9

2.common.css /* ブログ 全 体 サイズなどの 設 定 */ ブログの 全 体 のサイズの 指 定 をします ブログの 幅 ブログの 背 景 などはここで 指 定 してください /* ブログ 全 体 のサイズなどの 設 定 */ #container { margin-right:auto; margin-left:auto; padding: 15px 15px 0px 15px; width: 760px; border: 0px solid; background-color: #FFFFFF; text-align: left; line-height: 160%; position: relative; left: 0px; top: 0px; margin-right margin-left padding width border background-color text-align line-height position left top ブログの 右 マージンを 指 定 します ブログの 左 マージンを 指 定 します ブログのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します ブログの 横 幅 を 指 定 します ブログの 枠 線 の 指 定 をします ブログの 背 景 色 を 指 定 します ブログ 内 の 文 字 の 行 揃 えを 指 定 します ブログ 内 の 文 字 の 行 間 を 指 定 します ブログの 位 置 を 指 定 します ここでは 相 対 位 置 に 指 定 しています positionとセットで 使 用 します ブログを 右 に 指 定 数 だけ 移 動 します positionとセットで 使 用 します ブログを 下 に 指 定 数 だけ 移 動 します 10

2.common.css /* バナー 部 分 の 枠 設 定 */ バナー(TOPイメージ)のサイズ マージン バナー 内 の 文 字 などの 指 定 をします /* バナー 部 分 の 枠 設 定 */ #banner { margin-left:0px; margin-right:0px; margin-bottom:15px; height: 100px; border-top: none; border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid; background:url(../img/header.gif) no-repeat top center; color: #FFFFFF; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif; text-align: rleft; margin-left margin-right margin-bottom height border-top border-left border-right border-bottom background color font-family text-align バナーの 左 マージンを 指 定 します バナーの 右 マージンを 指 定 します バナーの 下 マージンを 指 定 します バナーの 高 さを 指 定 します バナーの 上 枠 のスタイルの 指 定 をします バナーの 左 枠 のスタイル 指 定 をします バナーの 右 枠 のスタイル 指 定 をします バナーの 下 枠 のスタイル 指 定 をします バナーの 背 景 を 一 括 で 指 定 します バナー 内 の 文 字 の 色 を 指 定 します バナー 内 のフォントの 指 定 をします バナー 内 の 文 字 の 行 揃 えを 指 定 します 11

2.common.css /* バナー 部 分 のタイトルのサイズなど*/ ここではタイトルのサイズ 細 かい 位 置 などの 設 定 をします /* バナー 部 分 のタイトルのサイズなど*/ #banner h1 { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: -5px; font-size: 140%; font-weight: bold; line-height:30px; padding:20px 0px 0px 30px; letter-spacing: 0em; margin-left margin-top margin-right margin-bottom font-size font-weight line-height padding letter-spacing タイトルの 左 マージンの 指 定 をします タイトルの 上 マージンの 指 定 をします タイトルの 右 マージンを 指 定 します タイトルの 下 マージンを 指 定 します タイトルの 文 字 サイズを 指 定 します タイトルの 太 さを 指 定 します タイトルの 行 間 を 指 定 します タイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します タイトルの 文 字 間 隔 を 指 定 します /* バナー 部 分 のサブタイトルの 指 定 */ サブタイトルのスタイルの 指 定 をします /* バナー 部 分 のサブタイトル 設 定 */ #banner h2 { color: #FFFFFF; font-size: 100%; padding:0px 0px 0px 30px; color font-size padding サブタイトルの 文 字 の 色 を 指 定 します サブタイトルの 文 字 の 大 きさを 指 定 します サブタイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します 12

2.common.css /* コンテンツブロック 部 分 の 枠 設 定 */ コンテンツ 部 分 (エントリ)の 枠 の 指 定 をします /* コンテンツブロック 部 分 の 枠 設 定 */.content { margin-left: none; margin-right: none; padding: 0px 5px 0px 5px; border: none; /* background-color: #FFFFFF; */ color: #333333; margin-left margin-right padding border background-color color コンテンツの 左 マージンを 指 定 します コンテンツの 右 マージンを 指 定 します コンテンツのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツ 枠 のスタイル 指 定 をします コンテンツの 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくく り 適 用 されないようにしています コンテンツ 内 の 文 字 の 色 を 指 定 します /* コンテンツヘッダー 設 定 */ コンテンツスペースの 一 番 上 の 部 分 の 設 定 をします /* コンテンツヘッダー 設 定 */.contentheader { margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px; height: 0px; color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; margin-top margin-bottom padding height color font-family font-size コンテンツヘッダーの 上 マージンを 指 定 します コンテンツヘッダーの 下 マージンを 指 定 します コンテンツヘッダーのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツヘッダーの 高 さの 指 定 をします コンテンツヘッダー 内 の 文 字 の 色 を 指 定 します コンテンツヘッダー 内 のフォントを 指 定 します コンテンツヘッダー 内 の 文 字 のサイズを 指 定 します 13

2.common.css /* コンテンツセパレーター 設 定 */ 各 コンテンツの 間 に 入 るセパレーター( 区 切 り)の 指 定 をします /* コンテンツセパレーター 設 定 */.contentseparater{ margin-top: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; height: 0px; /* background:url(../img/contentseparater.gif) repeat left center; */ color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; margin-top margin-bottom padding height background color font-family font-size コンテンツセパレーターの 上 マージンを 指 定 します コンテンツセパレーターの 下 マージンを 指 定 します コンテンツセパレーターのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 しま す コンテンツセパレーターの 高 さの 指 定 をします コンテンツセパレーターの 背 景 を 一 括 で 指 定 します ここでは 使 用 しないため コ メント(/* */)でくくり 適 用 されないようにしています コンテンツセパレーター 内 の 文 字 の 色 を 指 定 します コンテンツセパレーター 内 のフォントの 指 定 をします コンテンツセパレーター 内 の 文 字 のサイズを 指 定 します 14

2.common.css /* ページ 中 央 部 分 のフッター 設 定 */ ページ 中 央 部 分 のフッター(コンテンツスペースの 一 番 下 )の 設 定 をします /* ページ 中 央 部 分 のフッター 設 定 */.contentfooter{ margin-top: 5px; margin-bottom: 10px; padding: 0px 0px 0px 0px; height: 0px; /* background:url(../img/contentfooter.gif) repeat left center; */ color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; margin-top margin-bottom padding height background color font-family font-size コンテンツフッターの 上 マージンを 指 定 します コンテンツフッターの 下 マージンを 指 定 します コンテンツフッターのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツフッターの 高 さの 指 定 をします コンテンツフッターの 背 景 を 一 括 で 指 定 します ここでここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています コンテンツフッター 内 の 文 字 の 色 を 指 定 します コンテンツフッター 内 のフォントを 指 定 します コンテンツフッター 内 の 文 字 のサイズを 指 定 します /* エントリブロック 及 びエントリ 本 文 の 設 定 */ エントリ( 記 事 )に 関 する 細 かい 設 定 をします 1エントリをエントリブロック とします /* エントリブロック 及 びエントリ 本 文 の 設 定 */.entry { color:#000000; margin-left: none; margin-right: none; padding: 15px 10px 5px 6px; border: none; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; color margin-left margin-right padding border font-family font-size エントリ 内 の 文 字 の 色 を 指 定 します エントリの 左 マージンを 指 定 します エントリの 右 マージンを 指 定 します エントリのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリの 枠 線 を 指 定 します エントリ 内 のフォントを 指 定 します エントリ 内 の 文 字 のサイズを 指 定 します 15

2.common.css /* エントリヘッダー( 日 付 ) 設 定 */ エントリヘッダー(エントリの 日 付 )の 指 定 をします /* エントリヘッダー( 日 付 ) 設 定 */.entryheader { margin-bottom: 15px; padding: 0px 2px 2px 2px; color: #1E2061; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 90%; text-align: left; font-weight: bold; text-transform: uppercase; border-bottom:1px solid #1E2061; margin-bottom padding color font-family font-size text-align font-weight text-transform border-bottom エントリヘッダーの 下 マージンを 指 定 します エントリヘッダーのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリヘッダーの 文 字 の 色 を 指 定 します エントリヘッダーのフォントを 指 定 します エントリヘッダーの 文 字 のサイズを 指 定 します エントリヘッダーの 文 字 の 行 揃 えを 指 定 します エントリヘッダーの 文 字 の 太 さを 指 定 します 英 単 語 の 大 文 字 小 文 字 の 区 別 をつけるための 指 定 です ここではすべて 大 文 字 で 表 示 されるように 指 定 しまいます エントリヘッダーの 下 枠 のスタイルを 一 括 で 指 定 します /* エントリセパレータ 設 定 */ ここではエントリセパレータの 指 定 をします エントリセパレータとは 各 エントリの 下 につけられる 区 切 りのことです 同 じ 日 に 複 数 のエントリがあった 場 合 に 表 示 されます /* エントリセパレータ 設 定 */.entryseparater{ margin-top: 0px; margin-bottom: 15px; padding: 0px 0px 0px 0px; height: 15px; border-bottom: 1px dashed #1E2061; margin-top margin-bottom padding height border-bottom エントリセパレータの 上 マージンを 指 定 します エントリセパレータの 下 マージンを 指 定 します エントリセパレータのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 しま す エントリセパレータの 高 さを 指 定 します エントリセパレータの 下 枠 のスタイルを 一 括 で 指 定 します 16

2.common.css /* エントリフッター */ エントリフッター の 指 定 をします エントリフッター は 各 エントリの 下 にスペースを 設 けるために 設 置 されます 通 常 は 透 明 ですが 背 景 色 の 指 定 などを 行 えば 表 示 させることもできます /* エントリフッター */.entryfooter{ margin-top: 0px; margin-bottom: 15px; padding: 0px 0px 0px 0px; height: 15px; border-bottom: 0px solid #999999; margin-top margin-bottom padding height border-bottom エントリフッター の 上 マージンを 指 定 します エントリフッター の 下 マージンを 指 定 します エントリフッター のパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリフッター の 高 さを 指 定 します エントリフッター の 下 枠 のスタイルを 一 括 で 指 定 します /* エントリのpタグ 設 定 */ エントリのpタグの 指 定 をします pタグは 主 に 追 記 コメント トラックバックに 使 用 されます デフォ ルトでは 本 文 と 同 じ 文 字 色 にしてありますが ご 自 信 で 変 更 することもできます /* エントリpタグ 設 定 */.entry p { margin-bottom: 10px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; font-weight: normal; text-align: left; line-height: 150%; margin-bottom color font-family font-size font-weight text-align line-height エントリpタグの 下 マージンを 指 定 します エントリpタグの 文 字 の 色 を 指 定 します エントリpタグのフォントを 指 定 します エントリpタグの 文 字 のサイズを 指 定 します エントリpタグの 文 字 の 太 さを 指 定 します エントリpタグの 文 字 の 行 揃 えを 指 定 します エントリpタグの 行 間 を 指 定 します 17

2.common.css /* エントリ 本 文 の 引 用 タグ 設 定 */ エントリ 本 文 に 引 用 文 を 用 いる 場 合 に 使 用 されます 細 かい 指 定 はここでできます /* エントリ 本 文 の 引 用 タグ 設 定 */.entry blockquote { line-height: 150%; line-height 行 間 を 指 定 します /* エントリ 本 文 の 設 定 <li>タグ */ エントリ 本 文 の<li>タグの 指 定 をします /* エントリ 本 文 の 設 定 <li>タグ*/.entry li { line-height: 150%; line-height 行 間 を 指 定 します /* エントリh2 設 定 */ エントリ 内 の<h2>の 指 定 をします エントリ 詳 細 ページにある この 記 事 へのコメント などの 部 分 に 使 用 されています /* エントリh2 設 定 */.entry h2 { margin-bottom: 5px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 100%; font-weight: bold; text-align: left; margin-bottom color font-family font-size font-weight text-align エントリh2の 下 マージンを 指 定 します エントリh2の 文 字 の 色 を 指 定 します エントリh2のフォントを 指 定 します エントリh2の 文 字 のサイズを 指 定 します エントリh2の 文 字 の 太 さを 指 定 します エントリh2の 文 字 の 行 揃 えを 指 定 します 18

2.common.css /* エントリタイトル 設 定 */ エントリのタイトル 文 字 <h3>のスタイルを 指 定 します /* エントリタイトル 設 定 */.entry h3 { margin-bottom: 0px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 120%; font-weight: bold; text-align: left; margin-bottom color font-family font-size font-weight text-align エントリタイトル の 下 マージンを 指 定 します エントリタイトル の 色 を 指 定 しています エントリタイトル のフォントを 指 定 します エントリタイトル の 文 字 のサイズを 指 定 します エントリタイトル の 文 字 の 太 さを 指 定 します エントリタイトル の 文 字 の 行 揃 えを 指 定 します /* エントリ 者 情 報 設 定 */ 各 エントリの 一 番 下 に 出 る 投 稿 者 情 報 の 細 かい 指 定 をここでします /* エントリ 者 情 報 設 定 */.entry p.posted { padding:5px; margin-bottom: 15px; color: #999999; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; font-weight: bold; text-align: left; line-height: normal; background-color:#e6e6e6; padding margin-bottom color font-family font-size font-weight text-align line-height background-color エントリ 者 情 報 のパディングを 一 括 で 指 定 します エントリ 者 情 報 の 下 マージンの 指 定 をします エントリ 者 情 報 の 文 字 の 色 を 指 定 します エントリ 者 情 報 のフォントを 指 定 します エントリ 者 情 報 の 文 字 のサイズを 指 定 します エントリ 者 情 報 の 文 字 の 太 さを 指 定 します エントリ 者 情 報 の 文 字 の 行 揃 えを 指 定 します エントリ 者 情 報 の 行 間 を 指 定 します エントリ 者 情 報 の 背 景 色 を 指 定 します 19

2.common.css /* サイドバーとフリーエリアの 設 定 */ サイドバーとフリーエリアのスタイル 指 定 をします サイドバーとフリーエリアのタイトルは 違 うところ で 指 定 しているので ここではサイドバーとフリーエリア 内 の 項 目 についてのスタイル 指 定 となりま す /* サイドバーとフリーエリアの 枠 設 定 */.sidebar,.freearea{ color:#000000; margin-top: 25px; margin-bottom: 10px; padding: 0px 10px 0px 10px; border: 0px dotted #666666; /* サイドバーのボーダー 設 定 */ /*background-color: #100000; */ color margin-top margin-bottom padding border background-color サイドバーとフリーエリアの 文 字 の 色 を 指 定 します サイドバーとフリーエリアの 上 マージンの 指 定 をします サイドバーとフリーエリアの 下 マージンの 指 定 をします サイドバーとフリーエリアのパディングの 指 定 をします 上 右 下 左 の 順 に 指 定 します サイドバーとフリーエリアの 枠 のスタイルを 一 括 で 指 定 します サイドバーとフリーエリアの 背 景 色 の 指 定 をします ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしてあります 20

2.common.css /* サイドバータイトルとフリーエリアタイトル 設 定 */ サイドバーのタイトルとフリーエリアのタイトルのスタイル 指 定 をします ( 以 下 タイトルと 略 ) /* サイドバータイトルとフリーエリアタイトル 設 定 */.sidebar h2,.freetitle{ border-bottom:1px solid #1E2061; padding: 5px 5px 0px 5px; /*background:url(../img/title_bg.gif) no-repeat center center;*/ color: #1E2061; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 90%; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing:.1em; border-bottom padding background color font-family font-size text-align font-weight text-transform letter-spacing タイトルの 下 枠 のスタイルを 一 括 で 指 定 します タイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します タイトルの 背 景 の 指 定 の 一 括 でしています ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています タイトルの 文 字 の 色 を 指 定 します タイトルのフォントを 指 定 します タイトルの 文 字 のサイズを 指 定 します タイトルの 文 字 の 行 揃 えを 指 定 します タイトルの 文 字 の 太 さを 指 定 します 英 単 語 の 大 文 字 小 文 字 の 区 別 をつけるための 指 定 です ここではすべて 大 文 字 で 表 示 されるように 指 定 しまいます タイトルの 文 字 間 隔 を 指 定 します /* サイドバー 小 項 目 の 配 置 */ サイドバー 内 の 小 項 目 の 配 置 を 指 定 をします /* サイドバー 小 項 目 の 配 置 */.sidebar ul { margin: 0px; padding-left: 10px; margin padding-left サイドバー 小 項 目 のマージンを 一 括 で 指 定 します サイドバー 小 項 目 の 左 パディングを 指 定 します 21

2.common.css /* サイドバー 小 項 目 の 設 定 */ サイドバー 小 項 目 の 指 定 をします ( 以 下 項 目 と 略 ) /* サイドバー 小 項 目 の 設 定 */.sidebar li { margin-top: 10px; margin-bottom: -5px; margin-left: 0px; padding-left: 0px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; text-align: left; line-height: 140%; list-style-type: none; margin-top margin-bottom margin-left padding-left color font-family font-size text-align line-height list-style-type 項 目 の 上 マージンを 指 定 します 項 目 の 下 マージンを 指 定 します 項 目 の 左 マージンを 指 定 します 項 目 の 左 パディングを 指 定 します 項 目 の 文 字 の 色 を 指 定 します 項 目 のフォントを 指 定 します 項 目 の 文 字 のサイズを 指 定 します 項 目 の 文 字 の 行 揃 えを 指 定 します 項 目 の 行 間 を 指 定 します 項 目 前 のマークの 指 定 をします ここでは 無 しに 指 定 しています /* サイドバー 内 画 像 の 枠 */ サイドバー 内 に 画 像 を 入 れたときの 枠 を 指 定 します /* サイドバー 内 画 像 の 枠 */.sidebar img { border: 0px solid #666666; margin-bottom: 5px; border margin-bottom サイドバー 内 の 画 像 の 枠 のスタイルを 一 括 で 指 定 します サイドバー 内 の 写 真 の 下 マージンを 指 定 します 22

2.common.css /* サイドバー 内 リンク 設 定 */ サイドバー 内 のリンク 集 の 指 定 をします /* サイドバー 内 リンク 設 定 */.link-note { margin-bottom: 15px; padding: 3px; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; text-align: left; line-height: 150%; margin-bottom padding font-family font-size text-align line-height リンク 集 の 下 マージンを 指 定 します リンク 集 のパディングを 一 括 で 指 定 します リンク 集 のフォントを 指 定 します リンク 集 の 文 字 のサイズを 指 定 します リンク 集 の 文 字 の 行 揃 えを 指 定 します リンク 集 の 行 間 を 指 定 します /* プロフィール 写 真 の 配 置 */ プロフィールの 写 真 の 位 置 を 指 定 します /* プロフィール 写 真 の 配 置 */.photo { margin-bottom: 5px; text-align: center; margin-bottom text-align プロフィール 写 真 の 下 マージンを 指 定 します プロフィール 写 真 の 行 揃 えを 指 定 します /* プロフィール 写 真 の 枠 */ プロフィールの 写 真 の 枠 を 指 定 します /* プロフィール 写 真 の 枠 */.photo img { border: 0px solid #666666; border プロフィール 写 真 の 枠 のスタイルを 一 括 で 指 定 します 23

2.common.css /* コメント 設 定 */ コメントの 指 定 をします /* コメント 設 定 */ #comment-data { float: left; margin-right: 15px; padding-right: 15px; width: 180px; border-right: 1px dashed #1E2061; text-align: left; float margin-right padding-right width border-right text-align コメントの 全 体 の 位 置 を 指 定 します コメントの 右 マージンを 指 定 します コメントの 右 パディングを 指 定 します コメントの 横 幅 を 指 定 します コメントの 右 枠 のスタイルを 一 括 で 指 定 します コメント 内 の 文 字 の 行 揃 えを 指 定 します 24

2.common.css /* ページ 最 下 部 フッターの 枠 設 定 */ ページ 最 下 部 のフッターの 指 定 をします フッターに 画 像 を 使 用 したいときはここで 指 定 してくださ い /* ページ 最 下 部 フッターの 枠 設 定 */ #footer { height: 43px; border-top: 0px solid; border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid; background-color: #FFFFFF; /*background:url(../img/footer.gif) no-repeat center ; */ color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; text-align: left; height border-top border-left border-right border-bottom background-color background color font-family text-align フッターの 高 さを 指 定 します フッターの 上 枠 を 指 定 します フッターの 左 枠 を 指 定 します フッターの 右 枠 を 指 定 します フッターの 下 枠 を 指 定 します フッターの 背 景 色 を 指 定 します フッターの 背 景 を 一 括 で 指 定 します ここでは 使 用 しないため コメント(/* */)でく くり 適 用 されないようにしています フッターの 文 字 の 色 を 指 定 します フッターのフォントを 指 定 します フッターの 文 字 の 行 揃 えを 指 定 します 25

2.common.css common.cssの 最 後 に 記 入 されているコードは MACのInternet Explorerでコメントを 入 力 すると 文 字 化 けする という 現 象 を 防 ぐための コードです 知 識 のある 方 以 外 触 らないでください /* コメント 入 力 フォーム 設 定 */ コメント 入 力 フォーム 内 の 指 定 をします /* コメント 入 力 フォーム 設 定 */ textarea[id="comment-text"] { font-family: "Hiragino Kaku Gothic Pro W3", "Osaka", "MS PGothic", "MS PMincho", "Hiragino Mincho Pro W3", "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; width: 80%; textarea.comment-text { font-family: "Hiragino Kaku Gothic Pro W3", "Osaka", "MS PGothic", "MS PMincho", "Hiragino Mincho Pro W3", "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; font-family width コメント 入 力 フォームのフォントを 指 定 します コメント 入 力 フォームのサイズを 指 定 します 26

3.calendar.css 27

3.calendar.css calendar.cssでは カレンダーのスタイルに 関 することを 指 定 しています カレンダーの 文 字 の 色 な どはここで 編 集 することができます /* カレンダー 設 定 */ カレンダーの 指 定 します /* カレンダー 設 定 */ #calendar { line-height: 100%; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif; font-size: 100%; padding: 0px; text-align: center; margin-bottom: 0px; line-height color font-family font-size padding text-align margin-bottom カレンダー 内 の 文 字 の 行 間 を 指 定 します カレンダー 内 の 文 字 の 色 を 指 定 します カレンダー 内 のフォントを 指 定 します カレンダー 内 の 文 字 のサイズを 指 定 します カレンダー 内 のパディングを 一 括 で 指 定 します カレンダー 内 の 文 字 の 行 揃 えを 指 定 します カレンダーの 下 マージンを 指 定 します /* カレンダーのキャプション 設 定 */ カレンダーの 年 月 ( 例 :2005 年 9 月 )のスタイル 指 定 をします /* カレンダーのキャプション 設 定 */ #calendar caption { padding: 5px; color: #004594; font-weight: bold; padding color font-weight カレンダーキャプション のパディングを 指 定 します カレンダーキャプション の 文 字 の 色 を 指 定 します カレンダーキャプション の 文 字 の 太 さを 指 定 します 28

3.calendar.css /* カレンダーのテーブル 設 定 */ カレンダーのテーブルの 指 定 をします /* カレンダーのテーブル 設 定 */ #calendar table { padding: 1px; border-collapse: collapse; border: 0px; font-size: 10px; width: 100%; padding border-collapse border font-size width カレンダーテーブルのパディングを 指 定 します テーブルの 枠 線 の 表 示 形 式 を 指 定 します テーブルの 枠 線 のスタイルを 指 定 します テーブル 内 の 文 字 のサイズを 指 定 します テーブルの 横 幅 を 指 定 します /* カレンダーの 曜 日 設 定 */ カレンダーの 曜 日 のスタイル 指 定 をします /* カレンダーの 曜 日 設 定 */ #calendar th { text-align: center; font-weight: normal; /* background-color: #eeeeee; */ text-align font-weight background-color 曜 日 の 行 揃 えを 指 定 します 文 字 の 太 さを 指 定 します 曜 日 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 29

3.calendar.css /* カレンダーの 日 付 設 定 */ カレンダーの 日 付 の 指 定 をします /* カレンダーの 日 付 設 定 */ #calendar td { text-align: center;.calendar {.calendard {.calendardbg { text-align: center; text-align: center; text-align: center; background:url(../img/calendardbg_back.gif) no-repeat center center; text-align background 日 付 の 行 揃 えを 指 定 します 日 付 の 背 景 を 一 括 で 指 定 します 30

4.archive_layout.css 31

4.archive_layout.css archive.cssでは アーカイブページ( 月 別 エントリ カテゴリ 別 エントリ 日 別 エントリ)のスタイル 指 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ アーカイブページの 指 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { width: 760px; overflow: hidden; border-top: none; border-left: none; border-right: none; border-bottom: none; padding: 0px 0px 0px 0px; /* background-color: #FFFFFF; */ width overflow border-top border-left border-right border-bottom padding background-color アーカイブページの 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します アーカイブページの 上 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 左 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 右 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 左 枠 のスタイルを 一 括 で 指 定 します アーカイブページのパディングを 一 括 で 指 定 します 上 右 下 左 の 順 に 指 定 し ます アーカイブページの 背 景 を 指 定 します ここでは 使 用 しないため コメント(/* */) でくくり 適 用 されないようにしています 32

5.left_layout.css 33

5.left_layout.css left_layouto.cssは 左 にメニュー 右 にエントリ にするためのcssです widthを 指 定 することでメ ニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 くださ い /* ページの 左 部 分 の 設 定 */ メニューを 左 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 左 部 分 の 枠 設 定 */ #left { float: left; width:189px; overflow: hidden; border-top: none; border-left: none; border-right: 0px solid #CCCCCC; border-bottom: 0px solid; background-color: #E8E8DD; float width overflow border-top border-left border-right border-bottom background-color メニューの 位 置 を 指 定 します ここでは 左 に 指 定 しています メニューの 横 幅 を 指 定 します メニューからはみ 出 した の 扱 いを 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します メニューの 背 景 色 を 指 定 します 34

5.left_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリの 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: right; width: 570px; overflow: hidden; border-top: none; border-left: none; border-right: none; border-bottom: none; /* background-color: #FFFFFF; */ float width overflow border-top border-left border-right border-bottom background-color 中 央 部 分 の 位 置 を 指 定 します ここでは 右 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 35

6.right_layout.css 36

6.right_layout.css right_layouto.cssは 右 にメニュー 左 にエントリ にするためのcssです widthを 指 定 することで メニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 くださ い /* ページ 右 部 分 の 枠 設 定 */ メニューを 右 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 右 部 分 の 枠 設 定 */ #right { float: right; width: 189px; background-color: #E8E8DD; border-top: none; border-left: 0px solid #CCCCCC; border-right: none; border-bottom: 0px solid; overflow: hidden; float width background-color border-top border-left border-right border-bottom overflow メニューの 位 置 を 指 定 します ここでは 右 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 背 景 色 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します メニューからはみ 出 した の 扱 いを 指 定 します 37

6.right_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリの 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: left; width: 570px; overflow: hidden; /* background-color: #FFFFFF; */ border-top: none; border-left: none; border-right: none; border-bottom: none; float width overflow background-color border-top border-left border-right border-bottom 中 央 部 分 の 位 置 を 指 定 します ここでは 左 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 38

7.three_layout.css 39

7.three_layout.css three_layout.cssは 右 にメニュー 左 にメニュー 中 央 部 にエントリ にするためのcssです width を 指 定 することでメニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 ください /* ページ 左 部 分 の 枠 設 定 */ メニューを 左 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 左 部 分 の 枠 設 定 */ #left { float: left; width: 180px; border-top: none; border-left: 0px solid; border-right: 0px solid #CCCCCC; border-bottom: 0px solid; overflow: hidden; background-color: #E8E8DD; float width border-top border-left border-right border-bottom overflow background-color メニューの 位 置 を 指 定 します ここでは 左 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 左 メニューの 背 景 色 を 指 定 します 40

7.three_layout.css /* ページ 右 部 分 の 枠 設 定 */ ページの 右 メニューの 設 定 をします /* ページ 右 部 分 の 枠 設 定 */ #right { float: right; width: 180px; border-top: none; border-left: 0px solid #CCCCCC; border-right: 0px solid; border-bottom: 0px solid; overflow: hidden; background-color: #E8E8DD; float width border-top border-left border-right border-bottom overflow background-color メニューの 位 置 を 指 定 します ここでは 右 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します メニューの 背 景 色 を 指 定 します 41

7.three_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリ 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: left; width: 400px; overflow: hidden; /*background-color: #E6E6E6;*/ border-top: none; border-left: none; border-right: none; border-bottom: none; float width overflow background-color border-top border-left border-right border-bottom 中 央 部 分 の 位 置 を 指 定 します ここでは 右 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 42