/* Theme Name: Office-ichikawa Theme URI: http://www.www.www/ Description: This is my sample theme. */ a:hover img.over { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )"; } /********************************************************************* * トップページのセンターメニュー *********************************************************************/ .page div.post .boxmenu { background-image: none; /* 固定ページでは表示しない */　　　 font-size: 1.00em; /* 見出しの文字サイズ */ color: #3848B0; /* 見出しの文字色を白に指定 */ font-weight: bold; /* 太字に指定 */ /* background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 7px 25px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ } .page div.post .boxmenu a { text-decoration: none; /* リンク部分の下線を削除 */ color: #3848B0} /* リンク部分の色を水色に指定 */ .page div.post .boxmenu_green { background-image: none; /* 固定ページでは表示しない */　　　 font-size: 1.00em; /* 見出しの文字サイズ */ color: #37942E; /* 見出しの文字色を白に指定 */ font-weight: bold; /* 太字に指定 */ /* background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 7px 25px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ } .page div.post .boxmenu_green a { text-decoration: none; /* リンク部分の下線を削除 */ color: #37942E} /* リンク部分の色を水色に指定 */ .page div.post .boxmenured { background-image: none; /* 固定ページでは表示しない */　　　 font-size: 1.00em; /* 見出しの文字サイズ */ color: #FF4E00; /* 見出しの文字色を白に指定 */ font-weight: bold; /* 太字に指定 */ /* background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 7px 25px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ } .page div.post .boxmenured a { text-decoration: none; /* リンク部分の下線を削除 */ color: #FF4E00} /* リンク部分の色を水色に指定 */ .page div.post .boxmenup { font-size: 1.00em; /* 固定ページの文字サイズ */ padding: 0 0 0 0px; line-height: 1.5} /* 記事の行間隔を1.6倍に指定 */ .page div.post p { font-size: 1.00em; /* 記事本文の文字サイズ */ padding: 0 0 0 10px; line-height: 1.6} /* 記事の行間隔を1.6倍に指定 */ /********************************************************************* * 基本 *********************************************************************/ /* 表示に使用する日本語フォントを指定 */ body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; text-align:center} a {text-decoration: none; /* リンク部分の下線を削除 */ color: #0c8bcd} /* リンク部分の色を水色に指定 */ a img {border: none} /* リンクを設定した画像のまわりの罫線を削除 */ /********************************************************************* * ヘッダー *********************************************************************/ div#header {font-family: 'Trebuchet MS', sans-serif;/* ヘッダー部に表示するフォントを指定 */ margin-bottom: 5px} /* ヘッダー部の下の余白を20ピクセルに指定 */ div#header h1 {font-size: 0.75em;/* ヘッダー部のH1の文字サイズを指定 */ margin: 0}/* ヘッダー部のH1のまわりの余白を削除 */ div#siteinfo {font-size: 0.75em;/* ヘッダー部のH1の文字サイズを指定 */ margin: 0}/* ヘッダー部のH1のまわりの余白を削除 */ div#siteinfo a {color: #000000} /* ヘッダー部のH1の文字色を黒に指定 */ div#header p#desc {font-size: 1em; /* サイトの説明の文字サイズを指定 */ font-weight: bold; /* サイトの説明を太字に指定 */ color: #999999; /* サイトの説明文字の色をグレーに指定 */ margin: 0 0 5px} /* サイトの説明のまわりの余白を削除、下の余白のみ指定 */ div#subinfo {text-align: right; /* RSSフィードへのリンクを右揃えに指定 */ font-size: 0.75em; margin: -15px 0 5px} /* RSSフィードへのリンクの配置を上に32ずらして、下に余白を設定 */ /********************************************************************* * ナビゲーションバー（ヘッダーの横メニュー） *********************************************************************/ div#nav {font-size: 1.00em; /* 文字サイズを指定 */ height: 30px; /* 高さを指定 */ background-color: #4169E1; /* 背景色を水色に指定 */ border: solid 1px #aaaaaa; /* まわりにグレーの罫線を表示 */ margin-bottom: 1px} /* 下に余白を指定 */ div#nav ul {margin: 0; /* ulのまわりに挿入される余白を削除 */ padding: 0} /* 同上 */ div#nav li {list-style-type: none; /* リストマークを削除 */ float: left} /* リンクを横に並べて表示するように指定 */ div#nav li a {display: block; /* リンクをブロック要素として表示 */ width: auto; /* リンクの横幅を自動に指定 */ padding: 0px 18px; /* 記事のタイトルの余白を上下0ピクセル、左右18ピクセルに指定 */ line-height: 30px; /* リンクの高さを指定 */ border-right: solid 1px #aaaaaa;/* リンクを太さ1ピクセルのグレーの罫線で区切るように指定 */ color: #ffffff; /* リンクの文字色を白に指定 */ font-weight: bold; /* 太字に指定 */ text-align: center} /* リンクを中央揃えに指定 */ div#nav li a:hover {background-color: #c4f254} /* カーソルを重ねた時の背景色緑に指定 */ /********************************************************************* * ナビゲーションバー（ヘッダーの横メニューの画像バージョン） *********************************************************************/ div#nav_sp { margin: 0; /* まわりに挿入される余白を削除 */ padding: 0 border-bottom: solid 1px #ffffff; /* 下に罫線を指定 */ float: left} /* 高さを指定 */ div#nav_sp a { margin: 0; /* まわりに挿入される余白を削除 */ padding: 0 } /* 高さを指定 */ /********************************************************************* * コンテナ　本来は1025pxだけど、タブレットでSPナビが改行されるので2px増やした *********************************************************************/ div#container {width: 1027px; /* コンテナでグループ化した部分の横幅 */ background-color: #ffffff; /*背景色を白に指定 */ text-align:left; margin: auto} /* コンテナでグループ化した部分を中央に配置 */ /********************************************************************* * wrap *********************************************************************/ div#wrapper {width: 790; /* wrap部分の横幅を指定 */ /* background-color: #006633; 背景色を緑に指定 */ margin: 0 10px 0 0; float: left} /* wrapを左に配置 */ /********************************************************************* * コンテンツ *********************************************************************/ div#content {width: 560px; /* コンテンツ部分の横幅を指定 */ margin: 0 0 0 10px; float: right} /* コンテンツを右に配置 */ p.title {font-weight: bold; /* 記事の上のページタイトルの文字を太字 */ color: #585858; /* 記事の上のページタイトルの文字色をグレーに指定 */ width: 300px; /* 記事の上のページタイトルの横幅を200ピクセル */ margin: 0 0 10px; /* 記事の上のページタイトルと記事の間に10ピクセル入れる */ padding: 0 30px 0 10px; /* 記事の上のページタイトルの右の余白30ピクセル、左に10ピクセル */ background-image: url(img/bar.png); /* 記事の上のページタイトルの背景に画像を指定 */ background-repeat: no-repeat; /* 記事の上のページタイトルの背景画像を繰り返さない */ background-position: right top} /* 記事の上のページタイトルの背景画像の表示位置を指定 */ p.pagenation {font-size: 0.75em; /* 前後の記事へのリンクの文字サイズ */ overflow: hidden} /* 後続のコンテンツの回り込みを防ぐための指定 */ span.oldpage {float: left} /* 古い記事へのリンクを左に配置 */ span.newpage {float: right} /* 新しい記事へのリンクを右に配置 */ /********************************************************************* * 記事（ブログの記事） *********************************************************************/ div.post {margin-bottom: 30px; /* 記事の下に30ピクセルの間隔をあける */ background-color: #ffffff; overflow: hidden} /* 記事の回りこみを解除 */ div.post h2 {background-image: url(img/chip.png); /* 記事のタイトルの前に表示する画像を指定 */ background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ background-position: left center; /* 画像の表示位置を指定 */ border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 0.875em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 18px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 0} /* 記事のタイトルの余計な余白を削除 */ div.post h2 a {color: #000000} /* 記事のタイトルの文字色を白 */ div.post p { font-size: 1.000em; /* 記事本文の文字サイズ */ padding: 0 0 0 10px; line-height: 1.6} /* 記事の行間隔を1.6倍に指定 */ div.post p.postcat {text-align: right; /* カテゴリーを右揃えで表示するように指定 */ margin: -10px 10px 10px 0} /* カテゴリーの表示位置を上に10ピクセルずらして、右と下に10ピクセル */ div.post p.postcat a {font-size: smaller; /* カテゴリーの文字サイズを一回り小さく指定 */ background-color: #a7d043; /* カテゴリーの背景を緑に指定 */ border-radius: 2px; /* カテゴリーの背景を2ピクセルの角丸で表示 */ color: #ffffff; /* カテゴリー文字を白に指定 */ padding: 1px 5px} /* カテゴリーの余白を上下に1ピクセル、左右に5ピクセル指定 */ div.post p.postinfo {color: #0c8bcd; /* 投稿年月日の文字の色を水色に指定 */ text-align: right; /* 投稿年月日の文字の右揃えに指定 */ margin: 0} /* 投稿年月日のまわりの余白を削除 */ div.post h5 { /* background-image: url(img/chip.png); /* 記事のタイトルの前に表示する画像を指定 */ /* background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ /* background-position: left center; /* 画像の表示位置を指定 */ font-weight: normal; /*background-color: #CCFFFF; カテゴリーの背景を緑に指定 */ border-color: #CCFFFF; border-style: solid; /* 記事のタイトルの上に罫線を指定 */ border-width: 2px; /* border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 20px } div.post h6 { /* background-image: url(img/chip.png); /* 記事のタイトルの前に表示する画像を指定 */ /* background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ /* background-position: left center; /* 画像の表示位置を指定 */ font-weight: normal; background-color: #CCFFFF; /* カテゴリーの背景を緑に指定 */ /* border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ /* border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 20px } /* 記事のタイトルの余計な余白を削除 */ /* 記事内の画像 */ .aligncenter {display: block; /* 配置を中央に指定したときの設定 */ margin-left: auto; margin-right: auto} .alignleft {float: left; /* 配置を左に指定したときの設定 */ margin-right: 10px; margin-bottom: 10px} .alignright {float: right; /* 配置を右に指定したときの設定 */ margin-left: 10px; margin-bottom: 10px} .wp-caption {border: solid 1px #aaaaaa; /* キャプションをつけて記事の本文に挿入した画像を罫線で囲む */ text-align: center; padding-top: 5px} /********************************************************************* * サイドバー（左） *********************************************************************/ div#sidebar-left .widget { border: solid 2px #4169E1; /* まわりに水色の罫線を表示 */ margin-bottom: 15px /* 記事の間隔を指定 */ } div#sidebar-left {width: 220px; /* サイドバーの幅を指定 */ /* background-color: #FFFF00; 背景色を黄色に指定 */ float: right} /* サイドバーを左端に配置 */ div#sidebar-left ul {margin: 0; /* メニューのまわりの余白を削除 */ padding: 0; /* メニューの内側の余白を削除 */ list-style-type: none} /* メニューに表示されるリストマークを削除 */ div#sidebar-left .widget {margin-bottom: 20px} /* メニューの間隔を指定 */ div#sidebar-left h2 {font-size: 1.00em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 2px 10px; /* 見出しの文字位置 */ margin: 0} /* まわりの余白を削除 */ /* 左サイドメニューの項目（1階層） */ div#sidebar-left li li {font-size: 0.85em; /* リンクの文字サイズを指定 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 10px 5px; /* 画像の微調整 */ /*border-bottom: dotted 1px #aaaaaa; /* リンクの下に点線を入れる */ margin: 10px 0 10px 0} /* リンクのまわりの余白を削除 */ div#sidebar-left li li a {color: #000000; /* リンクの文字を黒に指定 */ /* display: block; リンクをブロック要素として表示 */ padding: 0 0 0 20px } /* リンクの文字の上下に5ピクセル、左右に10ピクセルの余白 */ div#sidebar-left li li a:hover {background-color: #f7e29e} /* カーソルを重ねたときの背景をオレンジ色に指定 */ /* 左サイドメニューの項目（2階層） */ div#sidebar-left li li li {font-size: 0.85em; /* リンクの文字サイズを指定 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 20px 5px; /* 画像の微調整 */ /*border-bottom: dotted 1px #aaaaaa; /* リンクの下に点線を入れる */ margin: 10px 0 10px 0} /* リンクのまわりの余白を削除 */ div#sidebar-left li li li a {color: #000000; /* リンクの文字を黒に指定 */ /* display: block; リンクをブロック要素として表示 */ padding: 0 0 0 30px } /* リンクの文字の左に20ピクセルの余白 */ /********************************************************************* * サイドバー（右） *********************************************************************/ div#sidebar {width: 225px; /* サイドバーの幅を指定 */ /* background-color: #3366CC; 背景色を青に指定 */ float: left} /* サイドバーを右端に配置 */ div#sidebar ul {margin: 0; /* メニューのまわりの余白を削除 */ padding: 0; /* メニューの内側の余白を削除 */ list-style-type: none} /* メニューに表示されるリストマークを削除 */ div#sidebar .widget { border: solid 2px #4169E1; /* まわりに水色の罫線を表示 */ margin-bottom: 15px /* メニューの間隔を指定 */ } div#sidebar h2 {font-size: 0.85em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ background-image: none; /* 固定ページでは表示しない */ /* border-radius: 3px; 見出しの背景を角丸に指定 */ padding: 2px 10px; /* 見出しの文字位置 */ margin: 0} /* まわりの余白を削除 */ div#sidebar li li {font-size: 0.75em; /* リンクの文字サイズを指定 */ border-bottom: dotted 1px #aaaaaa; /*リンクの下に点線を入れる */ margin: 0} /* リンクのまわりの余白を削除 */ div#sidebar li li a {color: #000000; /* リンクの文字を黒に指定 */ display: block; /* リンクをブロック要素として表示 */ padding: 5px 10px} /* リンクの文字の上下に5ピクセル、左右に10ピクセルの余白 */ div#sidebar li li a:hover {background-color: #f7e29e} /* カーソルを重ねたときの背景をオレンジ色に指定 */ /********************************************************************* * サイドバー（右）テキストヴィジェット *********************************************************************/ div#sidebar .textwidget p{ margin: 5px 0 5px 0 /* 記事の間隔を指定 */ } /********************************************************************* * サイドバー（右）記事 *********************************************************************/ div#sidebar .post { border: solid 2px #4169E1; /* まわりに水色の罫線を表示 */ margin-bottom: 15px /* 記事の間隔を指定 */ } div#sidebar .post p { font-size: 0.750em; /* 記事のタイトルのフォントサイズを指定 */ padding: 0 10px /* 記事左右にの間隔を指定 */ } div#sidebar .post h2 {font-size: 0.85em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ background-image: none; /* 固定ページでは表示しない */ border-top: none; /* 記事のタイトルの上に罫線を指定 */ border-bottom: none; /* 記事のタイトルの下に罫線を指定 */ padding: 2px 10px; /* 見出しの文字位置 */ margin: 0} /* まわりの余白を削除 */ /********************************************************************* * フッター *********************************************************************/ div#footer {border-top: solid 1px #aaaaaa; /* フッターの上に点線を入れる */ padding: 6px 0; /* 罫線の下に余白を入れる */ clear: both} /* フッターが他のコンテンツに回り込むのを防ぐ為の指定 */ div#footer p {font-size: 0.75em; /* コピーライトの文字サイズを指定 */ font-style: normal; /* コピーライトの斜体を解除して、正体に指定 */ font-family: Verdana, sans-serif; /* コピーライトの表示に使うフォントを指定 */ text-align: center; margin: 0} /* コピーライトのまわりの余白を削除 */ /********************************************************************* * ギャラリー *********************************************************************/ .gallery-item {width: 33%; /* 各列の幅を３３％に設定 */ float: left; /* 画像を横に並べる為の設定 */ margin-top: 0; /* 画像の上の余白をゼロに */ text-align: center} /* 画像とキャプションを中央構えに */ .gallery img {border: solid 1px #aaaaaa; /* 画像のまわりに1ピクセルの罫線を表示 */ padding: 5px} /* 罫線の内側に余白を設定 */ .gallery a:hover img {background-color: #c4f254} /* 画像にカーソルを重ねたときの白ふち部分のいろを緑に指定 */ .gallery dd {margin: 0; /* キャプションのまわりの余白を削除 */ font-size: 0.75em} /* キャプションの文字サイズを指定 */ .gallery br+br {display: none} /* ギャラリーの末尾に挿入される余計な改行を削除 */ /********************************************************************* * 天気と気温 *********************************************************************/ p.tenki {width: 50px; /* 横幅を指定 */ float: left; /* 配置を左に指定 */ text-align: center; /* 表示は中央構え */ border: solid 1px #f3b62f; /* 罫線で囲む */ padding: 5px; /* 内側に5ピクセルの余白 */ margin-right: 10px; /* 罫線の外側の右に余白 */ margin-bottom: 10px} /* 罫線の外側の下に余白 */ /********************************************************************* * 関連記事 *********************************************************************/ div.related {border: solid 1px #aaaaaa; /* 関連記事を罫線で囲む */ margin-top: 20px} /* 罫線の上に20ピクセルの余白 */ div.related p {color: #ffffff; /* 見出し文字を白 */ background-color: #a7d043; /* 背景を緑 */ margin: 0; /* 余白を削除 */ padding-left: 10px} /* 見出しの左に余白を10ピクセル */ div.related ol {font-size: 0.75em} /* 関連記事の文字サイズを指定 */ /********************************************************************* * 記事の個別ページ *********************************************************************/ .single div.post h2 {background-color:#333333; /* 個別ページの見出し背景色をダークグレーに指定 */ color: white} /* 文字を白に指定 */ .single div.post h2 a {color: white} /* リンクの色を白に指定 */ .single div.post h3 {background-image: url(img/chip.png); /* 記事のタイトルの前に表示する画像を指定 */ background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ background-position: left center; /* 画像の表示位置を指定 */ border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.250em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 18px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 0 0 10px 0} /* 記事のタイトルの余計な余白を削除 */ .single div.post h4 { background-image: none; /* 固定ページでは表示しない */ font-size: 1.10em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 6px 10px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ color: white /* 文字を白に指定 */ } /********************************************************************* * 固定ページ *********************************************************************/ .page div.post h1 { background-image: none; /* 固定ページでは表示しない */ font-size: 1.00em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 2px 10px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ color: white /* 文字を白に指定 */ } .page div.post h1 a {color: white} /* リンクの色を白に指定 */ .page div.post h2 { background-image: none; /* 固定ページでは表示しない */ font-size: 1.00em; /* 見出しの文字サイズ */ color: #ffffff; /* 見出しの文字色を白に指定 */ background-color: #4169E1; /* 見出しの背景を水色に指定 */ /* border-radius: 3px; /* 見出しの背景を角丸に指定 */ padding: 2px 10px; /* 見出しの文字位置 */ margin: 0; /* まわりの余白を削除 */ color: white /* 文字を白に指定 */ } .page div.post h2 a {color: white} /* リンクの色を白に指定 */ .page div.post h3 {background-image: url(img/chip.png); /* 記事のタイトルの前に表示する画像を指定 */ background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ background-position: left center; /* 画像の表示位置を指定 */ border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.250em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 18px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 0 0 10px 0} /* 記事のタイトルの余計な余白を削除 */ .page div.post p {font-size: 1.000em; /* 固定ページの文字サイズ */ padding: 0 0 0 10px; line-height: 1.6} /* 記事の行間隔を1.6倍に指定 */ /********************************************************************* * 分割した記事へのリンク *********************************************************************/ #postpage {text-align: center; /* リンクを中央揃え */ padding-top: 20px; /* リンクの上に余白 */ clear: both} /* リンクが画像などの横に回りこむのを解除 */ #postpage a {border: solid 1px #aaaaaa; /* ページ数を罫線で囲む */ padding: 5px 10px; /* 罫線内に上下5ピクセル、左右10ピクセルの余白 */ margin: 0 10px} /* 余白を左右10ピクセル */ #postpage a:hover {background: #f7e29e} /* リンクにカーソルを重ねたときの背景色を指定 */ #postpage span {padding: 5px 10px; /* 表示中のページ数の罫線内の余白を指定 */ color: #888888; /* 表示中のページ数の文字の色をグレーに指定 */ background: #dddddd} /* 表示中のページ数の背景色を薄いグレーに指定 */ #postpage a span {padding: 0; /* 表示中にページ数に適用した設定が、他のページの表示に影響しないようにするための指定 */ color: black; /* */ background: none} /* */ /********************************************************************* * 記事の前に出力する記事タイトルの一覧 *********************************************************************/ ul.post {list-style-type: none; /* リストのマークを削除 */ margin: 0 0 30px 0; /* 下に余白を設定 */ padding: 0; /* 内側の余白を削除 */ border-top: dotted 1px #aaaaaa} /* 上にを引く */ ul.post li {border-bottom: dotted 1px #aaaaaa; /* 各タイトルの下に点線を表示 */ background-image: url(img/chip.png); /* タイトルの行頭にマーク画像を表示 */ background-repeat: no-repeat; /* 画像を繰り返さない */ background-position: left center; /* 画像の表示位置を左の真ん中 */ padding: 15px 0 15px 20px} /* タイトルの上下の余白を15ピクセル、左の余白を20ピクセル */ ul.post li a {color: #000000} /* タイトルの文字を黒 */ ul.post li span {font-size: smaller; /* 投稿年月日の文字をひとまわり小さく指定 */ color: #888888} /* 投稿年月日の文字の色をグレーに指定 */ /********************************************************************* * カテゴリーページの「続きを読む」 *********************************************************************/ div.post a.more {font-size: smaller} /* 続きを読むのフォントサイズ */ /********************************************************************* * サムネイル画像 *********************************************************************/ div.post p.thumb {float: left; /* サムネイル画像を左に表示 */ margin: 0 10px 10px 0} /* サムネイル画像の右と下に余白 */ /********************************************************************* * トップページのタイトルの一覧 *********************************************************************/ ul.toplist {list-style-type: none; /* リストのマークを削除 */ margin: 0 0 30px 0; /* 下に余白を設定 */ padding: 0; /* 内側の余白を削除 */ border-top: dotted 1px #aaaaaa} /* 上にを引く */ ul.toplist li {font-size: 0.875em; font-weight: bold; border-bottom: dotted 1px #aaaaaa; /* 各タイトルの下に点線を表示 */ background-image: url(img/chip.png); /* タイトルの行頭にマーク画像を表示 */ background-repeat: no-repeat; /* 画像を繰り返さない */ background-position: left center; /* 画像の表示位置を左の真ん中 */ padding: 5px 0 5px 20px} /* タイトルの上下の余白を5ピクセル、左の余白を20ピクセル */ ul.toplist li a {color: #000000} /* タイトルの文字を黒 */ ul.toplist li span {font-size: smaller; /* 投稿年月日の文字をひとまわり小さく指定 */ color: #888888} /* 投稿年月日の文字の色をグレーに指定 */ /********************************************************************* * おすすめ記事 *********************************************************************/ div#pickup div.post {border: dotted 2px #f3b62f; /* おすすめの記事のまわりに罫線 */ background-color: #ffeedd; /* 背景をオレンジに */ padding: 15px} /* 罫線の内側に余白 */ /********************************************************************* * ステータス記事 *********************************************************************/ div#sidebar li#status h2 {background-color: #333333; /* ステータスの見出しの背景色 */ border-radius: 0} /* ステータスの見出しの角丸表示をオフ */ div#sidebar li#status ul {border: solid 1px #aaaaaa} /* ステータス記事を点線で囲む */ div#sidebar li#status li {padding: 5px 10px} /* 点線の内側に余白 */ div#sidebar li#status span {color: #888888} /* 投稿日の文字の色をグレー */ /********************************************************************* * ウィジェットを使ったステータス記事 *********************************************************************/ /* ステータス */ div#sidebar li#execphp-2 h2 {background-color: #333333; /* ステータスの見出しの背景色 */ border-radius: 0} /* ステータスの見出しの角丸表示をオフ */ div#sidebar li#execphp-2 ul {border: solid 1px #aaaaaa} /* ステータス記事を点線で囲む */ div#sidebar li#execphp-2 li {padding: 5px 10px} /* 点線の内側に余白 */ div#sidebar li#execphp-2 span {color: #888888} /* 投稿日の文字の色をグレー */ /********************************************************************* * 人気記事ランキング *********************************************************************/ div#sidebar ol {margin: 0; /* 人気記事ランキングのリストの、まわりの余白を削除 */ padding: 0; list-style-type: none} /* 人気記事ランキングのリスト番号を削除 */ div#sidebar ol li a:before {content: counter(mycount); /* 行頭に番号を挿入するように指定 */ font-family: 'Trebuchet MS', sans-serif; /* 番号のフォントを指定 */ font-weight: bold; /* 番号を太字にする */ font-size: larger; /* 番号のフォントを一回り大きくする */ color: #ffffff; /* 番号の文字色を白 */ background-color: #f3b62f; /* 番号の背景をオレンジ色 */ padding: 2px 7px; /* 番号のまわりの余白を上下2ピクセル、左右7ピクセル */ margin-right: 7px; /* 右側に7ピクセルの余白 */ vertical-align: -2px} /* 番号の上下方向の表示位置を調整 */ div#sidebar ol li {counter-increment: mycount} /* 記事ごとに番号を増やすように指定 */ div#sidebar ol li span {text-align: right} /* お知らせの日付を右へ */ /********************************************************************* * パンくずリスト *********************************************************************/ /* 記事の個別ページとアーカイブページ（カテゴリーページ、月別ページ）の場合に適用 */ /*.single div#header, .archive div#header {margin-bottom: 0px} /* ヘッダー部の下の余白を5ピクセルに指定　 */ div#breadcrumb {margin-bottom: 5px} /* パンくずリストの下の余白サイズを指定 */ div#breadcrumb div {display: inline; /* パンくずリストのリンクを横に並べて表示に指定 */ font-size: 0.75em} /* フォントサイズを指定 */ /********************************************************************* * ページ番号リンク *********************************************************************/ p.pagenum {text-align: center} /* 中央に表示する */ p.pagenum a, p.pagenum span {padding: 3px 6px; /* 番号のまわりの余白 */ color: #ffffff} /* 番号の色 */ p.pagenum a {background-color: #78982b} /* 番号の背景色を緑 */ p.pagenum span {background-color: #a7d043} /* 表示中の番号は明るい緑 */ /********************************************************************* * フッターメニュー *********************************************************************/ div#footer {background-color: #4169E1; /* フッターの背景をダークグレー */ padding: 20px 0px 20px 30px} /* フッターの内側の余白を指定 */ div#footermenu ul {width: 230px; /* 各段の横幅を260ピクセルに指定 */ float: left; /* 各段を横に並べる設定 */ margin: 0 20px 0 0; /* 段の間隔を30ピクセルに指定 */ padding: 0; /* 余計な余白を削除 */ list-style-type: none} /* リストマークを削除 */ div#footermenu ul ul {width: auto; /* 各メニューに横幅の指定などが影響しないように指定 */ float: none; /* */ margin: 0} /* */ div#footermenu .widget { /*border: solid 2px #4169E1; /* まわりに水色の罫線を表示 */ margin-bottom: 20px} /* メニューの間隔を20ピクセルに指定 */ div#footermenu h2 {font-size: 0.85em; /* 見出しの文字サイズを指定 */ color: #ffffff; /* 見出しの文字を白に指定 */ background-color: #aaaaaa; /* 見出しの背景色をグレーに指定 */ /*border-radius: 3px; /* 背景を半径3ピクセルの角丸に指定 */ padding: 2px 10px; /* バーの内側の余白を指定 */ margin: 0} /* バーのまわりの余白を削除 */ div#footermenu li li {font-size: 0.85em; /* リンクの文字サイズを指定 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 10px 5px; /* 画像の微調整 */ /*border-bottom: dotted 1px #aaaaaa; /* リンクの下に太さ1ピクセルのグレーの点線を入れる */ margin: 10px 0 10px 0} /* リンクのまわりの余白を削除 */ div#footermenu li li a { /*color: #ffffff; /* リンクの文字を白に指定 */ /* display: block; /* リンクをブロック要素として指定 */ padding: 5px 0px 0px 20px} /* リンクの上下の点線と間隔を5ピクセルに指定。リンクの左右の余白を10ピクセルに指定 */ div#footermenu li li a:hover {background-color: #f7e29e; /* カーソルを重ねたときのリンクの背景色をオレンジ色に指定 */ color: #000000} /* カーソルを重ねたときのリンクの文字の色を黒色に指定 */ div#footermenu li li li {font-size: 0.85em; /* リンクの文字サイズを指定 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 20px 5px; /* 画像の微調整 */ /*border-bottom: dotted 1px #aaaaaa; /* リンクの下に太さ1ピクセルのグレーの点線を入れる */ margin: 10px 0 10px 0px} /* リンクのまわりの余白を削除 */ div#footermenu li li li a { /*color: #ffffff; /* リンクの文字を白に指定 */ /* display: block; /* リンクをブロック要素として指定 */ padding: 5px 0px 0px 30px} /* リンクの上下の点線と間隔を5ピクセルに指定。リンクの左右の余白を10ピクセルに指定 */ div#footer p {clear: both; /* コピーライトの回り込みを解除する */ color: #ffffff; /* コピーライトの色を白に指定 */ border-top: solid 1px #ffffff; /* コピーライトの上に太さ1ピクセルの白色の罫線を表示 */ padding-top: 8px; /* コピーライトと罫線との間を8ピクセルに指定 */ margin-right: 30px} /* コピーライトの右側に30ピクセルの余白を挿入 */ /********************************************************************* * お問い合わせ *********************************************************************/ .wpcf7-form {background-color: AliceBlue; /* フォーム全体の背景色を緑に指定 */ padding: 20px; /* ボックス内の余白を20ピクセルに指定 */ border-radius: 20px} /* ボックスを半径20ピクセルの角丸に指定 */ .wpcf7-form span.req {color: #aa0000; /* 「必須」の文字の色を赤色に指定 */ font-size: smaller} /* 「必須」の文字サイズを一回り小さく */ .wpcf7-form input {width: 80%} /* お名前、メールアドレスの入力フィールドの横幅を８０％に指定 */ .wpcf7-form textarea {width: 100%} /* お問い合わせ内容の入力フィールドの横幅を１００％に指定 */ .wpcf7-form p.submit {text-align: center} /* 送信ボタンを中央揃えに指定 */ .wpcf7-form .wpcf7-submit {width: 200px} /* 送信ボタンの横幅を200ピクセルに指定 */ /********************************************************************* * ニュース記事 *********************************************************************/ ul.newslist {/*border: solid 1px #aaaaaa; ニュース記事をかこむ */ padding: 10px; /* 罫線の内側に余白 */ margin: 0 0 20px; /* 罫線の下に余白 */ font-size: 0.95em} /* フォントサイズを指定 */ ul.newslist li {list-style-type: none; /* リストマークを削除 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 0 3px; /* 画像の微調整 */ padding-left: 16px; /* 記事タイトルの左に余白 */ line-height: 18px} /* 行の高さを指定 */ /*ul.newslist a {color: #000000} リンクの文字の色を黒に指定 */ ol.newslist li span { color: #666666; /* 投稿年月日の文字の色をグレー */ text-align: right} /*ニュースの投稿年月日*/ div.newsdate{ color: #666666; /* 投稿年月日の文字の色をグレー */ margintop: 0; text-align: right} /*全てのニュース*/ div.newsall{ font-size: 0.75em; text-align: right } div.newsall a{ color: #0c8bcd } /********************************************************************* * パンくずリスト（プラグイン） *********************************************************************/ div#breadcrumbp { font-size: 0.85em; display: inline } /********************************************************************* * 検索フォーム *********************************************************************/ div#searchbox{text-align: right;/* 検索ボックスをを右揃えに指定 */ margin: -20px 0 5px} #searchform, #searchform div { display: inline /* 　検索フォームをパンくずの横に並べるための設定 */ } #searchform label {display: none} /* 「検索：」と表示されたラベルを隠す */ #s {border: solid 1px #aaaaaa; /* テキストボックスの枠線をグレーの点線に設定 */ border-radius: 5px; /* 半径5ピクセルの角丸に指定 */ padding: 3px 8px} /* 余白を上下3ピクセル、左右8ピクセル */ #s:hover, #s:focus {background-color: #eeeeee} /* テキストボックスにカーソルを重ねた時や選択されたときの背景色を明るいグレーに指定 */ #searchsubmit {background-color: #666666; /* 送信ボタンの背景を濃いグレー */ border-radius: 5px; /* 半径5ピクセルの角丸に指定 */ color: #ffffff; /* 文字の色を白 */ border: solid 1px #aaaaaa; /* 罫線をグレーの点線 */ padding: 2px 8px; /* 余白を上下2ピクセル左右8ピクセル */ margin-right: 10px} /* 送信ボタンの右側の余白を10ピクセル */ #searchsubmit:hover {background-color: #aaaaaa} /* 送信ボタンにカーソルを重ねた時に背景色をグレー */ div#subinfo img {vertical-align: bottom} /* 送信フォームとRSSフィードのリンクの下部を揃える */ /********************************************************************* * 検索結果 *********************************************************************/ .search p.title {width: auto; /* タイトルの横幅をautoに指定 */ background: #333333; /* 背景色をダークグレーに指定 */ color: #ffffff; /* 文字色を白 */ padding: 10px; /* タイトルまわりの余白を10ピクセル */ font-size: 1.25em} /* フォントサイズを指定 */ /* 検索結果がない場合 */ .search-no-results p.title {text-align: left; /* タイトルを左構え */ margin-bottom: 50px} /* 下の余白を50ピクセル */ .search-no-results #content {text-align: center; /* コンテンツの行構えを中央 */ line-height: 2; /* 行の高さを2倍 */ border: solid 1px #333333; /* 太さ1ピクセルのダークグレーの罫線 */ padding-bottom: 40px} /* 罫線の内側に40ピクセルの余白 */ /********************************************************************* * RSSフィード *********************************************************************/ p.feed {font-size: 1.00em; /* font-family: Verdana, Helvetica, sans-serif;*/ border: solid 1px #0c8bcd; padding: 5px; margin: 10px 0} p.feed a {color: #444444; text-decoration: none} p.feed img {vertical-align: middle; margin-right: 8px} /********************************************************************* * ソーシャルメディアのリンクに関する設定 *********************************************************************/ /*.wp_social_bookmarking_light div:nth-child(2){width:70px}*/ div.wp_social_bookmarking_light {padding: 30px 0} /********************************************************************* * 回り込み解除（IEのバグ対策） *********************************************************************/ .clearfix:after { /*floatの解除、ここがポイント*/ display:block; clear:both; height:0px; visibility:hidden; content:"."; } /********************************************************************* * 記事のテーブル用 *********************************************************************/ table.kiji{ border-top:1px solid #663300; border-left:1px solid #663300; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; } tr.kiji{ color: #ffffff; font-weight: bold; border-right:1px solid #663300; border-bottom:1px solid #663300; background-color:#4169e1; padding:0.3em 1em; text-align:center; } .kiji td{ border-right:1px solid #663300; border-bottom:1px solid #663300; padding:0.3em 1em; } div.post .question { background-image: url(img/q.gif); /* 記事のタイトルの前に表示する画像を指定 */ background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ background-position: left top; /* 画像の表示位置を指定 */ font-weight: bold; background-color: #DCE6F2; /* カテゴリーの背景を緑に指定 */ border-radius: 10px; /* カテゴリーの背景を2ピクセルの角丸で表示 */ /* border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ /* border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px 10px 60px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 10px } div.post .answer { background-image: url(img/a.gif); /* 記事のタイトルの前に表示する画像を指定 */ background-repeat: no-repeat; /* 画像が繰り返し表示されないように指定 */ background-position: left top; /* 画像の表示位置を指定 */ /*font-weight: bold; /* 太字 */ background-color: #FEF6F0; /* カテゴリーの背景を緑に指定 */ border-radius: 10px; /* カテゴリーの背景を2ピクセルの角丸で表示 */ /* border-top: solid 1px #aaaaaa; /* 記事のタイトルの上に罫線を指定 */ /* border-bottom: solid 1px #aaaaaa; /* 記事のタイトルの下に罫線を指定 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px 10px 60px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 10px } div.post .postkyoutyo { background-color: #DCE6F2; /* カテゴリーの背景を緑に指定 */ border-radius: 10px; /* カテゴリーの背景を2ピクセルの角丸で表示 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px 10px 15px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 10px } div.post .postkyoutyo li { line-height: 25px; /*padding-left: 16px;*/ margin: 20px 0px } /********************************************************************* * facebookページ *********************************************************************/ p.f_right img {vertical-align: middle; float:right; margin-right: 8px} /********************************************************************* * ＱＡ記事 *********************************************************************/ ul.qalist {border: solid 1px #aaaaaa; /* QA記事をかこむ */ padding: 10px; /* 罫線の内側に余白 */ margin: 0 0 20px; /* 罫線の下に余白 */ font-size: 1.00em} /* フォントサイズを指定 */ ul.qalist li {list-style-type: none; /* リストマークを削除 */ background-image: url(img/arrow.png); /* 背景画像に三角を表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 0 3px; /* 画像の微調整 */ padding-left: 16px; /* 記事タイトルの左に余白 */ line-height: 18px} /* 行の高さを指定 */ /********************************************************************* * 顧問料金ページの顧問コース表 *********************************************************************/ div#komon {margin: 0 0 0 0} div#komon ul {margin: 0 0 0 5; /* ulのまわりに挿入される余白を削除 */ font-size: 0.75em; padding: 0} /* 同上 */ /********************************************************************* * ベネフィット *********************************************************************/ ul.benefitlist {border: solid 1px #aaaaaa; /* ニュース記事をかこむ */ padding: 10px; /* 罫線の内側に余白 */ margin: 0 10px 20px 10px; /* 罫線の下に余白 */ font-size: 1.00em} /* フォントサイズを指定 */ ul.benefitlist li {list-style-type: none; /* リストマークを削除 */ background-image: url(img/check.gif); /* 背景画像にチェックを表示 */ background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */ background-position: 0 0; /* 画像の微調整 */ padding-left: 25px; /* 記事タイトルの左に余白 */ line-height: 28px} /* 行の高さを指定 */ /********************************************************************* * センターメニュー *********************************************************************/ .centermenu {border: solid 1px #aaaaaa; /* ニュース記事をかこむ */ padding: 10px; /* 罫線の内側に余白 */ margin: 0 5px 20px 5px; /* 罫線の下に余白 */ width: 95%; /*横幅を指定 */ font-size: 1.00em} /* フォントサイズを指定 */ .centermenu .title {font-weight: bold; /* 記事の上のページタイトルの文字を太字 */ /*width: 300px; 記事の上のページタイトルの横幅を200ピクセル */ color: #37942E; /* 見出しの文字色を白に指定 */ height: 35px; margin: -10px -10px -10px -10px; /* 記事の上のページタイトルと記事の間に10ピクセル入れる */ padding: 5px 0 0 20px; /* 記事の上のページタイトルの右の余白30ピクセル、左に10ピクセル */ background-image: url(https://www.sr-consultant.net/wp-content/uploads/2015/05/cen_menu_green2.png); /* 記事の上のページタイトルの背景に画像を指定 */ background-repeat: no-repeat; /* 記事の上のページタイトルの背景画像を繰り返さない */ background-position: left top; /* 記事の上のページタイトルの背景画像の表示位置を指定 */ } .centermenu .title a { text-decoration: none;/* リンク部分の下線を削除 */ color: #37942E;/* リンク部分の色を水色に指定 */ } /********************************************************************* * 画像の表示 *********************************************************************/ img{max-width:100%;height:auto} /********************************************************************* * 記事の強調（簡易） *********************************************************************/ div.post .postkyoutyo_lite { border: solid; /* ボーダーを1本線 */ border-radius: 10px; /* カテゴリーの背景を2ピクセルの角丸で表示 */ font-size: 1.000em; /* 記事のタイトルのフォントサイズを指定 */ padding: 10px 10px 10px 15px; /* 記事のタイトルの余白を上下10ピクセル、左右18ピクセルに指定 */ margin: 10px } /********************************************************************* * 入力用フォームのサイズを大きく *********************************************************************/ .single input[type="text"]{ padding:10px; font-size:120%; width:270px; text-align: right; }