賢威のレイアウトや文字色などをdesign.cssでカスタマイズする方法


/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #fff; }

参考記事→ワードプレス賢威の背景色を変更する方法
/*——————————————————–
2、サイト全体の共通設定

——————————————————-*/

body{ color: #333; }・・・サイト内の文字色の指定

参考記事→ワードプレス賢威の文字フォントサイズや色をCSSで変更または設定する方法

/*●リンク文字*/

a{ text-decoration: underline; }・・・サイト内のリンク装飾

a:link,
a:visited{ color: #39f; }・・・リンクの文字色の指定
a:hover,
a:active{ color: #f60; }・・・カーソルを合わせた時のリンクの文字色の指定

/*——————————————————–
3、エリアの設定
——————————————————–*/

 

#container{
position: relative;
padding-top: 25px;
}

/*——————————————————–
トップ
——————————————————–*/

#top{
position: absolute;
top: 0;
background-color: #fff;
font-size: 1.2em;
}

参考記事→賢威でヘッダーの背景色やテキストのフォントサイズを変更する方法

 

#top-in{
position: relative;
padding: 5px 0;
}

 

#top-menu{ text-align: right; }

 

#top-menu li{
display: inline;
margin-left: 1em;
list-style: none;
}

 

#top-menu li a{
padding-left: 12px;
background: url(./images/icon/icon-arrow01.png) left center no-repeat;
}

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background-color: #fff;
font-size: 1.2em;
}

#header-in{ padding: 1em 0; }

参考記事→賢威でヘッダーの背景色やテキストのフォントサイズを変更する方法

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em;
font-size: 3em;
}

参考記事→賢威のヘッダーにあるタイトル(ロゴ)・文章の横幅を変更する方法

/*●ヘッダーロゴテキスト*/

.header-logo a{ text-decoration: none; }

.header-logo a:link,
.header-logo a:visited{ color: #333; }
.header-logo a:hover,
.header-logo a:active{ color: #f60; }

 

/*●ヘッダーテキスト・右上の文章*/

#header-in #header-text{
float: right;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #333;
}

#header h1{
float: right;
margin-bottom: 1em;
font-size: 1.167em;
}

参考記事→賢威のヘッダーにあるh1タグを移動させる方法
/*——————————————————–
グローバルナビ
——————————————————–*/

#global-nav{
background-color: #fff;・・・グローバルメニューの背景色を指定
border-bottom: 4px solid #000;・・・グローバルメニューの下線の設定(線の太さ、線の種類、線の色)
} /*メニュー下のラインの設定*/

参考記事→賢威でヘッダーの背景色やテキストのフォントサイズを変更する方法

 

#global-nav dl{
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

#global-nav dt,
#global-nav dd{
margin: 0;
padding: 0;
}

/*●メニューボタンを非表示*/

#global-nav .btn-gnav{ display:none; }

/*●グローバルメニュー*/

#global-nav .menu-wrap{ display: block; }

#menu{
padding-bottom: 5px;
font-size: 1.2em;
}

#global-nav #menu li{
position: relative;
float: left;
margin: 0;
border-right: solid 1px #000; /*右側のボーダーの色*/
list-style: none;
font-weight: bold;
}

#global-nav #menu li.first{ border-left: solid 1px #000; } /*一番左のメニューだけに追加指示*/

#global-nav #menu li{ white-space: nowrap; }

 

/*メニューのデザイン*/

 

#global-nav #menu li a{

display: block;
padding: 0.8em 2em;・・・文字の余白の指定
color: #333; /* メニューのフォントの色*/・・・グローバルメニューの文字色を指定
text-decoration: none;・・・文字装飾の指定
}

#global-nav #menu li a:link,
#global-nav #menu li a:visited{ background-color: #fff; } /*すでに訪れたリンクの背景色*/
#global-nav #menu li a:hover,
#global-nav #menu li a:active{ background-color: #efefef; } /*マウスカーソルを乗せた時の背景色*/

#global-nav #menu li ul{
display: none;
position: absolute;
top: 100%;
left: 0;
width: 12em;
}

参考記事→賢威のグローバルメニューのフォントサイズや背景色の変更方法

 

/*ドロップダウンメニューのデザイン*/

#global-nav #menu li ul li{
margin: 0;
padding: 0;
width: 10em;・・・ドロップダウンメニューの幅の指定
background-color: #eaeaea;・・・ドロップダウンメニューの背景色の指定
border-top: 0;
border-right: 0;
white-space: normal;
}

#global-nav #menu li ul li a{
display: block;
padding: 0.8em 2em;
}

#global-nav #menu li ul ul{
top: 0;
left: 100%;
}

#global-nav .showMenu{ display: block!important; }

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-in{ padding-top: 1.5em; }
/*●メイン画像*/
#main-image{
padding-top: 1.5em;
}

#main-image-in{
position: relative;
padding-bottom: 1.5em;
}

#main-image img{
width: 100%;
height: auto;
}

#main-image .catch-copy{
position: absolute;
top: 1em;
left: 1em;
color: #fff;
font-size: 3em;
}

/*●パン屑ナビ*/
#breadcrumbs{
clear: both;
margin-bottom: 1.5em;
font-size: 1.2em;・・・パン屑ナビの文字の大きさを指定
}

#breadcrumbs li{
display: inline;
margin-right: 0.5em;
line-height: 1.8;
text-align: right;
list-style: none;
}

#breadcrumbs li a{
padding-right: 15px;
background: url(./images/icon/icon-brc.gif) center right no-repeat;
}

参考記事→賢威のパンくずリストのフォントサイズや表示の変更方法

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/

#main-contents{ font-size: 1.4em; }・・・メインコンテンツの文字のサイズを指定

参考記事→ワードプレス賢威の文字フォントサイズや色をCSSで変更または設定する方法

#main-contents .contents{
margin-bottom: 3.5em;
padding: 0 10px;
}

 

/*●H2タグ*/

#main-contents h2{
margin: 0 0 1.5em;
padding: 0.9em;
border-top: 3px solid #000;・・・上線の設定(線の太さ、線の種類、線の色)
background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;・・・背景画像の指定
font-size: 1.286em;・・・文字サイズの指定
font-weight: bold;・・・文字の太さを指定
}

#main-contents h2 a:link,
#main-contents h2 a:visited{ color: #333; }・・・h2の文字色の指定

#main-contents h2 a:hover,
#main-contents h2 a:active{ color: #f60; }・・・h2の文字色の指定

#main-contents h2.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

 

参考記事→ワードプレス賢威の文字フォントサイズや色をCSSで変更または設定する方法

/*●H3タグ*/

#main-contents h3{
margin: 0 0 1.5em;
padding: 0.8em;
border: 2px solid #414141;
font-size: 1.143em;
font-weight: bold;
}

#main-contents h3 a:link,
#main-contents h3 a:visited{ color: #333; }

#main-contents h3 a:hover,
#main-contents h3 a:active{ color: #f60; }

#main-contents h3.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

/*●H4タグ*/

#main-contents h4{
margin: 0 0 1.5em;
padding: 0.8em;
border: 1px solid #8e8e8e;
font-weight: bold;
}

#main-contents h4 a:link,
#main-contents h4 a:visited{ color: #333; }

#main-contents h4 a:hover,
#main-contents h4 a:active{ color: #f60; }

#main-contents h4.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

/*●H5タグ*/

#main-contents h5{
margin: 0 0 1.5em;
padding: 0 0.8em 0.5em;
border-bottom: 2px solid #414141;
font-weight: bold;
}

#main-contents h5.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

#main-contents h5 a:link,
#main-contents h5 a:visited{ color: #333; }

#main-contents h5 a:hover,
#main-contents h5 a:active{ color: #f60; }

/*●段落タグ*/

#main-contents p{ margin-bottom: 1.5em; }

/*●リストタグ*/

#main-contents ul,
#main-contents ol{
margin: 0 0.8em 1.5em 1.7em;
padding: 0;
}

#main-contents li{
margin-bottom: 0.5em;
line-height: 1.5em;
}

/*●引用タグ*/

#main-contents q{
margin: 0 2px;
padding: 0 8px;
background: #efefef;・・・引用箇所の背景色を指定
}

#main-contents blockquote{
overflow: auto;
margin: 0 1em 1.5em;
padding: 1em;
border: 3px solid #ddd;
background: #efefef;
color: #444;
}

/*●テーブルタグ*/

#main-contents table{
margin-bottom: 1.5em;
padding: 0;
border-top: 1px solid #959595;
border-left: 1px solid #959595;
}

 

/*「table」の1行目に「colspan」を利用する場合は「auto」を指定する*/
/*#main-contents table{ table-layout: auto; }*/

 

#main-contents th,
#main-contents td{
padding: 0.5em;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;
}

#main-contents th{
background-color: #f0f0f0;
font-weight: bold;
text-align: left;
}

/*●テーブルタグ スタイル01*/

#main-contents table.table-style01 th,
#main-contents table.table-style01 td{
text-align: left;
vertical-align: top;
}

/*●最新情報(リストタグ)*/

#main-contents ul.news{
margin: 0 0 3.5em;
padding: 0;
padding-bottom: 0;
}

#main-contents ul.news li{
margin-bottom: 1em;
padding: 0 1em 1em;
border-bottom: 1px dotted #414141;
line-height: 1.4em;
list-style: none;
}

/*●最新情報(定義タグ)*/

#main-contents dl.news{
margin: 0;
margin-bottom: 3.5em;
padding: 0;
}

#main-contents dl.news dt{
float: left;
width: 9em;
margin: 0;
padding: 0;
padding-left: 1em;
}

 

/*最新情報のアイコン設定*/

#main-contents dl.news dd.cat{
float: left;
overflow: hidden;
width: 6em;
height: 1.5em;
padding: 0.1em 0.3em 0;
border-bottom: none;
background: #333;
color: #fff;
font-size: 0.858em;
text-align: center;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#main-contents dl.news dd{
margin: 0 0 10px 0;
padding: 0 1em 0.8em 16.5em;
border-bottom: 1px dotted #414141;
}

 

/*カテゴリの文字数が多い場合はコメントアウトを解除*/

/*#main-contents dl.news dd.cat{
clear: none;
width: auto;
}

#main-contents dl.news dd{
clear: both;
padding: 0 1em 0.8em 1em;
}*/
/*●最新情報2(定義タグ)*/

#main-contents dl.news02{
margin: 0;
margin-bottom: 3.5em;
padding: 0;
}

#main-contents dl.news02 dt{
display: block;
margin: 0 0 0.5em 0;
padding: 0;
padding-left: 1em;
font-weight: bold;
}

#main-contents dl.news02 dd{
margin: 0 0 0.5em 0;
padding: 0 1em 0.8em 1em;
border-bottom: 1px dotted #414141;
}

#main-contents dl.news02 dd.cat{
margin: 0;
padding: 0 1em 0.5em 1em;
border: 0;
}

#main-contents dl.news02 dd.cat ul{
margin: 0;
padding: 0;
/zoom : 1;
}

#main-contents dl.news02 dd.cat ul:after{ content : ”; display : block; clear : both; height:0; }

#main-contents dl.news02 dd.cat li{
clear: none;
overflow: hidden;
float: left;
height: 1.5em;
margin-right: 0.5em;
padding: 0.1em 0.3em 0;
background: #333;
color: #fff;
font-size: 0.858em;
text-align: center;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#main-contents dl.news dd.cat{ font-weight: bold; }
#main-contents dl.news dd.cat.color01{ background: #4784bf; }
#main-contents dl.news dd.cat.color02{ background: #dd6673; }
#main-contents dl.news dd.cat.color03{ background: #39a869; }
#main-contents dl.news dd.cat.color04{ background: #e8ac51; }
#main-contents dl.news dd.cat.color05{ background: #a55b9a; }
#main-contents dl.news dd.cat.color06{ background: #aac863; }

/*●定義タグ スタイル01*/

#main-contents dl.dl-style01{
margin: 0 0 3.5em;
padding: 0;
}

#main-contents dl.dl-style01 dt{
float: left;
width: 9em;
margin: 0;
padding: 0 0 0 1em;
}

#main-contents dl.dl-style01 dd{
margin: 0 0 10px 0;
padding: 0 1em 0.8em 10em;
border-bottom: 1px dotted #414141;
}

/*●定義タグ スタイル02*/

#main-contents dl.dl-style02{
margin-bottom: 1.2em;
padding: 0;
border: 1px solid #777;
border-top: 0;
background-color: #ddd;
}

#main-contents dl.dl-style02 dt{
margin: 0;
padding: 0.5em;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
font-weight: bold;
}

#main-contents dl.dl-style02 dd{
margin: 0;
padding: 0.8em 1.0em;
background-color: #fff;
}

/*●チェックリスト(リストタグ)*/

#main-contents ul.checklist{
margin: 0 0 1.5em;
padding: 1em;
padding-bottom: 0;
border: 1px solid #414141;
}

#main-contents ul.checklist li{
margin-bottom: 1.5em;
padding-top: 5px;
padding-left: 24px;
background: url(./images/icon/icon-check01-red.png) left top no-repeat;
list-style-type: none;
}

/*●戻る&進むリンク*/

.link-next,
.link-back,
.link-next02,
.link-back02{ clear: both; }

.link-next,
.link-next02{ text-align: right; }

.link-back,
.link-back02{ text-align: left; }

.link-next a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_r.png) 0 5px no-repeat;
}
.link-back a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_l.png) 0 5px no-repeat;
}

.link-next02 a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_r-red.png) 0 5px no-repeat;
}
.link-back02 a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_l-red.png) 0 5px no-repeat;
}

/*●段組み*/

.box-wrap .box-l{
float: left;
width: 48%;
margin: 0 0 1.5em;
border: 1px solid #aaa; /*boxの枠線の指示*/
}

.box-wrap .box-r{
float: right;
width: 48%;
margin: 0 0 1.5em;
border: 1px solid #aaa;
}

#main-contents .box-wrap .title{
margin-bottom: 1.5em;
background-color: #999; /*boxのタイトルの背景色*/
}

#main-contents .box-wrap .title p{
margin: 0 10px;
padding: 5px 0;
color: #fff;
font-weight: bold;
}

/*●ランキング(リストタグ)*/

#main-contents .box-wrap .ranking{
margin: 0 0 15px;
}

#main-contents .ranking li{
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #aaa; /*区切り線の指示*/
background: none;
list-style: none;
}

#main-contents .ranking li.end{
padding-bottom: 0;
border-bottom: none;
}

#main-contents .ranking p{ margin: 0 0 10px; }

/*●ページネーション スタイル01*/

#main-contents .cont-menu01{
position: relative;
overflow: hidden;
width: 100%;
}

#main-contents .cont-menu01 ul{
position: relative;
left: 50%;
float: left;
margin-left: 10px;
}

#main-contents .cont-menu01 li{
position: relative;
left: -50%;
float: left;
margin-right: 10px;
list-style: none;
}

#main-contents .cont-menu01 li:last-child{ margin-right: 0; }

#main-contents .cont-menu01 li.cur{
padding: 3px 10px;
border: 1px solid #ccc;
background-color: #959595;
color: #fff;
font-weight: bold;
}

#main-contents .cont-menu01 li a{
display: block;
padding: 3px 10px;
border: 1px solid #ccc;
}

#main-contents .cont-menu01 li a:link,
#main-contents .cont-menu01 li a:visited{ background-color: transparent; }

#main-contents .cont-menu01 li a:hover,
#main-contents .cont-menu01 li a:active{
background-color: #959595;
color: #fff;
}

#main-contents .text-field{ width: 90%; }

/*●ページネーション スタイル02*/

#main-contents .cont-menu02{
position: relative;
overflow: hidden;
width: 100%;
}

#main-contents .cont-menu02 ul{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}

#main-contents .cont-menu02 li{
max-width: 50%;
list-style: none;
}

* html #main-contents .cont-menu02 li{ white-space: nowrap; } /* IE6 */

#main-contents .cont-menu02 li.prev{ float: left; }

#main-contents .cont-menu02 li.next{ float: right; }

#main-contents .cont-menu02 li a{
display: block;
padding: 3px 10px;
border: 1px solid #ccc;
}

#main-contents .cont-menu02 li a:link,
#main-contents .cont-menu02 li a:visited{ background-color: transparent; }

#main-contents .cont-menu02 li a:hover,
#main-contents .cont-menu02 li a:active{
background-color: #959595;
color: #fff;
}

/*●サイトマップ*/

#main-contents .sitemap li{ list-style: none; }

#main-contents .sitemap li a{
display: block;
padding: 3px 0 3px 20px;
background: url(./images/icon/icon-arrow_r.png) 0 5px no-repeat;
}

#main-contents .sitemap ul{ margin-top: 1em; }

#main-contents .sitemap li li a{
padding: 0 0 0 15px;
border-left: none;
background: url(./images/icon/icon-menu02.png) 0 6px no-repeat;
}

 

/*——————————————————–
サブコンテンツ / サイドバー
——————————————————–*/

 

#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
margin: 0;
padding: 0;
}

* html #sub-contents,
* html #sidebar{ overflow: hidden; }

#sub-contents .sub-contents-btn,
#sidebar .sidebar-btn{ display: none; }

.sub-column{ font-size: 1.2em; }

.sub-column li{ list-style: none; }

/*●コンテンツ*/

.sub-column .contents{
margin-bottom: 1.5em;
padding: 0.5em;
}

.sub-column hr{ clear: both; }

.sub-column h3{
padding: 0.7em;
border: 1px solid #959595; /*サイドバー見出しの枠線*/
border-top: 3px solid #414141; /*見出しの上部の太線*/
color: #454545; /*見出し文字の色*/
font-weight: bold;
}

.sub-column .contents h3{
margin: -0.5em;
margin-bottom: 0.8em;
}

/*●プロフィール*/

.sub-column .profile-img img{
display: block;
margin: auto;
margin-bottom: 10px;
}

.sub-column .profile-txt p{ margin-bottom: 1em; }

.col1 .sub-column .profile-img,
.col2 #sub-contents .profile-img,
.col2r #sub-contents .profile-img{
float: left;
padding-right: 20px;
}

/*●テーブルタグ*/

.sub-column table caption{
font-weight: bold;
text-align: center;
}

.sub-column table{
width: 90%;
margin: auto;
margin-bottom: 1.5em;
padding: 0;
border-top: 1px solid #959595;
border-left: 1px solid #959595;
}

.sub-column table th,
.sub-column table td{
padding: 0.5em 0.2em;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;
}

.sub-column table th{
background: #f0f0f0;
font-weight: bold;
text-align: center;
}

/*●カレンダー*/

.sub-column table#wp-calendar tbody td{ text-align: center; }

.sub-column table#wp-calendar tfoot td{ border-right: none; }

.sub-column table#wp-calendar tfoot td#next{
border-right: 1px solid #959595;
text-align: right;
}

.sub-column table#wp-calendar tbody td a{ display: block; }

/*●検索ボックス*/

.sub-column dl.search-box{
margin: 0 0 16px;
width: 100%;
}

.sub-column dl.search-box dt{
display: block;
float: left;
width: 63%;
margin: 0;
padding: 0;
padding-right: 5px;
}

.sub-column dl.search-box dt input{
width: 95%;
height: 1.4em;
padding: 2px;
border: 1px solid #aaa;
color: #aaa;
line-height: 1.4em;
}

.sub-column dl.search-box dt input.onfocus{ color: #333; }

.sub-column dl.search-box dd{
float: left;
margin: 0;
padding: 0;
}

.sub-column dl.search-box dd input{
height: 2em;
padding: 0.1em 1em;
line-height: 1.4em;
}

/*●お問い合わせ*/

.sub-column .contact .icon-contact{
float: left;
padding: 0 10px 10px 0;
}

.sub-column .contact .text-contact{ overflow: hidden; }

/*●サイドメニュー*/

.sub-column .side-menu{ margin: 0; }

.sub-column .side-menu li{ list-style: none; }

.sub-column .side-menu li a{
display: block;
padding: 12px 10px 12px 20px;
background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}

.sub-column .side-menu li a:active,
.sub-column .side-menu li a:hover{
background-color: #fc6;
color: #fff;
}

.sub-column .side-menu ul{
padding: 0;
margin: 0;
}

.sub-column .side-menu ul ul{ padding: 0; }

.sub-column .side-menu li li{
width: 95%;
margin-bottom: 0;
padding-left: 5%;
border: 0;
}

.sub-column .side-menu li li a:link,
.sub-column .side-menu li li a:visited{
padding: 6px 10px 6px 15px;
border-left: none;
background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

.sub-column .side-menu li li a:active,
.sub-column .side-menu li li a:hover{ background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat #fc6; }

/*●ランキング*/

.ranking{
margin: 0;
padding: 5px 8px;
}

.ranking li{
margin-bottom: 10px;
padding: 0;
border-bottom: 1px dotted #7070ba;
background: none;
font-weight: normal;
}

.ranking li p{ margin-bottom: 10px; }
.ranking li.end{ border-bottom: none; }

.ranking .no01 .item-name,
.ranking .no02 .item-name,
.ranking .no03 .item-name{
color: #fe8528;
font-size: 1.167em;
}

.ranking .no01 .item-name, .ranking .no02 .item-name,
.ranking .no03 .item-name, .ranking .no04 .item-name,
.ranking .no05 .item-name, .ranking .no06 .item-name,
.ranking .no07 .item-name, .ranking .no08 .item-name,
.ranking .no09 .item-name, .ranking .no10 .item-name{
padding: 4px 0 4px 30px;
font-weight: bold;
}

.no01 .item-name{ background: url(./images/icon/icon-rank01-01.png) left top no-repeat; }
.no02 .item-name{ background: url(./images/icon/icon-rank01-02.png) left top no-repeat; }
.no03 .item-name{ background: url(./images/icon/icon-rank01-03.png) left top no-repeat; }
.no04 .item-name{ background: url(./images/icon/icon-rank01-04.png) left top no-repeat; }
.no05 .item-name{ background: url(./images/icon/icon-rank01-05.png) left top no-repeat; }
.no06 .item-name{ background: url(./images/icon/icon-rank01-06.png) left top no-repeat; }
.no07 .item-name{ background: url(./images/icon/icon-rank01-07.png) left top no-repeat; }
.no08 .item-name{ background: url(./images/icon/icon-rank01-08.png) left top no-repeat; }
.no09 .item-name{ background: url(./images/icon/icon-rank01-09.png) left top no-repeat; }
.no10 .item-name{ background: url(./images/icon/icon-rank01-10.png) left top no-repeat; }

.ranking .no01 .item-name{ background: url(./images/icon/icon-rank01-01.png) left top no-repeat; }
.ranking .no02 .item-name{ background: url(./images/icon/icon-rank01-02.png) left top no-repeat; }
.ranking .no03 .item-name{ background: url(./images/icon/icon-rank01-03.png) left top no-repeat; }
.ranking .no04 .item-name{ background: url(./images/icon/icon-rank01-04.png) left top no-repeat; }
.ranking .no05 .item-name{ background: url(./images/icon/icon-rank01-05.png) left top no-repeat; }
.ranking .no06 .item-name{ background: url(./images/icon/icon-rank01-06.png) left top no-repeat; }
.ranking .no07 .item-name{ background: url(./images/icon/icon-rank01-07.png) left top no-repeat; }
.ranking .no08 .item-name{ background: url(./images/icon/icon-rank01-08.png) left top no-repeat; }
.ranking .no09 .item-name{ background: url(./images/icon/icon-rank01-09.png) left top no-repeat; }
.ranking .no10 .item-name{ background: url(./images/icon/icon-rank01-10.png) left top no-repeat; }

.ranking .item-img{ text-align: center; }
.col1 .ranking .item-img,
.col2 #sub-contents .ranking .item-img,
.col2r #sub-contents .ranking .item-img{
float: left;
padding-right: 20px;
}

/*●バナーエリア*/

.sub-column .banner{ margin-bottom: 10px; }

.sub-column .banner li{
margin-bottom: 18px;
list-style: none;
text-align: center;
}

.col1 .sub-column .banner li,
.col2 #sub-contents .banner li,
.col2r #sub-contents .banner li{
display: inline;
margin-right: 8px;
}

/*——————————————————–
フッター
——————————————————–*/

 

#footer{
clear: both;
padding-top: 30px;
padding-bottom: 10px;
background: #959595; /*フッター全体の背景色を指定*/
color: #fff;
font-size: 1.2em;
}

#footer a:link,
#footer a:visited{ color: #fff; }
#footer a:hover,
#footer a:active{ color: #f60; }

#footer h3{
margin-bottom: 1em;
padding: 0.8em;
background-color: #fff;
color: #333;
font-weight: bold;
}

#footer-in li{ list-style: none; }

#footer .area01{
float: left;
width: 39%;
padding-bottom: 20px;
}

#footer .area02{
float: right;
width: 60%;
padding-bottom: 20px;
}

 

/*●アクセス情報*/

#footer .access{ padding: 0 1em; }

#footer .access p{ margin-bottom: 1em; }

p.accessmap{
padding: 0px 0 3px;
padding-left: 25px;
background: url(./images/icon/icon-arrow02.png) left center no-repeat;
}

/*●フッターメニュー*/

#footer .footer-menu{
overflow: hidden;
width: 100%;
padding: 0;
}

#footer .footer-menu ul{
float: left;
width: 42%;
margin-right: 5%;
padding: 1%;
}

#footer .footer-menu ul ul{
float: none;
width: auto;
margin-top: 1em;
margin-right: 0;
}

.footer-menu li{
margin-bottom: 5px;
padding: 0px 0 3px;
padding-left: 25px;
background: url(./images/icon/icon-arrow02.png) left top no-repeat;
}

.footer-menu li li{
padding-left: 15px;
padding-top: 0;
background: url(./images/icon/icon-arrow03.png) left 5px no-repeat;
}

/*●フッターバナー*/

#footer-banner{
clear: both;
padding: 20px 0;
border-top: 1px solid #ccc;
}

#footer-banner li{
display: inline;
list-style: none;
}

/*●コピーライト*/

.copyright{
padding: 15px 0;
background: #eaeaea;
font-size: 1.2em;
text-align: center;
}

/*——————————————————–
ページトップ
——————————————————–*/

 

.page-top{
position: fixed;
right: 0;
bottom: 20px;
z-index: 99;
width: 182px;
color: #fff;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}

* html .page-top{ display: none; }

.page-top a{
display: block;
padding: 10px;
padding-left: 42px;
border: 1px solid #fff;
border-right: 0;
text-decoration: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
}

.page-top a:link,
.page-top a:visited{
background: url(./images/common/bg-pagetop.gif) 14px center no-repeat #999;
color: #fff;
}

.page-top a:hover,
.page-top a:active{
background: url(./images/common/bg-pagetop.gif) 14px center no-repeat #fc6;
color: #f60;
}

/*————————————————————
ソーシャルボタン
————————————————————-*/

 

#main-contents .sb{
width:100%;
margin: 0;
padding: 0;
}

#main-contents .sb li{
display: inline-block;
margin-right: 5px;
vertical-align: top;
list-style: none;
}

* html #main-contents .sb li{
float: left;
width: 130px;
list-style: none;
} /* IE6 */

*+html #main-contents .sb li{
display: inline;
list-style: none;
} /* IE7 */

#main iframe.twitter-share-button{ width: 100px!important; }

/*————————————————————
WordPress用
————————————————————-*/

 

#main-contents h2.post-title{
margin-bottom: 0.5em;
}

#main-contents .contents h3{
margin: 0 -10px 1.5em;
}

.archive-title{
margin-bottom: 2em;
padding: 1em;
background-color: #333;
color: #fff;
font-weight: bold;
}

 

/*●ウィジェットメニュー*/

.sub-column .widget-conts ul{ margin: 0; }

.sub-column .widget-conts ul li{
padding: 3px 10px 3px 20px;
background: url(./images/icon/icon-arrow_r.png) 2px 6px no-repeat;
}

.sub-column .widget-conts ul li li{
padding: 6px 10px 6px 15px;
background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

.sub-column .widget_recent_entries ul li,
.sub-column .widget_recent_entries ul li li,
.sub-column .widget_pages ul li,
.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li,
.sub-column .widget_nav_menu ul li li,
.sub-column .widget-conts .ranking li,
.sub-column .widget-conts .ranking li li,
.sub-column .widget-conts .banner li,
.sub-column .widget-conts .banner li li{
padding: 0;
background: none;
list-style: none;
}

.sub-column .widget_recent_entries ul li a,
.sub-column .widget_pages ul li a,
.sub-column .widget_nav_menu ul li a{
display: block;
padding: 12px 10px 12px 20px;
background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}

.sub-column .widget_recent_entries ul li a:active,
.sub-column .widget_recent_entries ul li a:hover,
.sub-column .widget_pages ul li a:active,
.sub-column .widget_pages ul li a:hover,
.sub-column .widget_nav_menu ul li a:active,
.sub-column .widget_nav_menu ul li a:hover{
background-color: #fc6;
color: #fff;
}

.sub-column .widget_recent_entries ul ul,
.sub-column .widget_pages ul ul,
.sub-column .widget_nav_menu ul ul{
padding: 0;
margin: 0;
}

.sub-column .widget_recent_entries ul ul ul,
.sub-column .widget_pages ul ul ul,
.sub-column .widget_nav_menu ul ul ul{ padding: 0; }

.sub-column .widget_recent_entries ul li li,
.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li li{
width: 95%;
margin-bottom: 0;
padding-left: 5%;
border: 0;
}

.sub-column .widget_recent_entries ul li li a:link,
.sub-column .widget_recent_entries ul li li a:visited,
.sub-column .widget_pages ul li li a:link,
.sub-column .widget_pages ul li li a:visited,
.sub-column .widget_nav_menu ul li li a:link,
.sub-column .widget_nav_menu ul li li a:visited{
padding: 6px 10px 6px 15px;
border-left: none;
background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

.sub-column .widget_recent_entries ul li li a:active,
.sub-column .widget_recent_entries ul li li a:hover,
.sub-column .widget_pages ul li li a:active,
.sub-column .widget_pages ul li li a:hover,
.sub-column .widget_nav_menu ul li li a:active,
.sub-column .widget_nav_menu ul li li a:hover{ background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat #fc6; }

.sub-column .rss-date,
.sub-column cite{
display: block;
margin: 0.5em 0;
}

.sub-column .widget_links li{ overflow: hidden; }

.sub-column .widget_links li img{
display: block;
}

.sub-column .banner{ margin-bottom: 10px; }

.sub-column .banner li{
margin-bottom: 18px;
list-style: none;
text-align: center;
}

.col1 .sub-column .banner li,
.col2 #sub-contents .banner li,
.col2r #sub-contents .banner li{
display: inline;
margin-right: 8px;
}

#main .sub-column ul.banner li a{
display: inline;
padding-left: 0;
background: none;
}

#main .sub-column ul.banner li a:link,
#main .sub-column ul.banner li a:visited{ color: #39f; }
#main .sub-column ul.banner li a:hover,
#main .sub-column ul.banner li a:active{ color: #f60; }

/*●メインコンテンツ内での検索*/

#main-contents dl.search-box{
margin: 0 0 16px;
width: 100%;
}

#main-contents dl.search-box dt{
display: block;
float: left;
width: 63%;
margin: 0;
padding: 0;
padding-right: 5px;
}

#main-contents dl.search-box dt input{
width: 95%;
height: 1.4em;
padding: 2px;
border: 1px solid #aaa;
color: #aaa;
line-height: 1.4em;
}

#main-contents dl.search-box dt input.onfocus{ color: #333; }

#main-contents dl.search-box dd{
float: left;
margin: 0;
padding: 0;
}

#main-contents dl.search-box dd input{
height: 2em;
padding: 0.1em 1em;
line-height: 1.4em;
}

#main-contents .post-tag{
padding: 1em;
background-color: #f3f3f3;
}

#main-contents .post-tag p{
margin-bottom: 0;
}

#main-contents .sb{
text-align: right;
}

/*コメントフォーム*/

#main-contents .trackback-url{ width: 70%; }

#main-contents p textarea{ width: 70%; }

#main-contents #submit{ padding: 0.3em 1em; }

#main-contents #author,
#main-contents #email,
#main-contents #url{
width: 50%;
padding: 0.3em;
}

#main-contents .comment-body em{
font-weight: bold;
}

#main-contents .commentlist,
#main-contents .commentlist ul{
margin-right: 0!important;
margin-left: 0!important;
padding: 0;
}

#main-contents .commentlist{ padding: 10px; }

#main-contents .commentlist li{
margin-bottom: 2.5em;
padding-bottom: 1em;
border-bottom: 1px solid #ccc;
list-style: none;
}

#main-contents .commentlist li li{
margin-top: 10px;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 0;
border-top: 1px solid #ccc;
border-bottom: none;
}

#main-contents .comment-author,
#main-contents .comment-meta{ margin-bottom: 1em; }

#main-contents .reply{ clear: both; }

#main-contents .reply a{
padding-left: 17px;
background: url(./images/icon/icon-arrow_r.png) 0 4px no-repeat;
}

/*画像の回り込み*/

img.alignleft{
float: left;
padding-right: 30px;
}

img.alignright{
float: right;
padding-left: 30px;
}

img.aligncenter{
display: block;
margin: auto;
}

/*PS Auto Sitemap基本デザイン*/

ul#sitemap_list,
ul#sitemap_list ul{ margin: 0; }

#sitemap_list li{
list-style: none;
padding: 3px 10px 3px 20px;
background: url(./images/icon/icon-arrow_r.png) 2px 8px no-repeat;
}

#sitemap_list li ul{
margin-top: 0.5em;
margin-bottom: 0;
}

#sitemap_list li li{
padding: 6px 10px 6px 15px;
border-left: none;
background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

 

/*●ページネーション WP用*/

#main-contents .cont-menu-wp{
position: relative;
overflow: hidden;
width: 100%;
/zoom : 1;
}

#main-contents .cont-menu-wp:after{ content : ”; display : block; clear : both; height:0; }

#main-contents .cont-menu-wp ul{
overflow: hidden;
width: 100%;
margin: 0;
margin-bottom: 1.5em;
padding: 0;
}

#main-contents .cont-menu-wp li{
max-width: 50%;
list-style: none;
}

* html #main-contents .cont-menu-wp li{ white-space: nowrap; } /* IE6 */

#main-contents .cont-menu-wp li.nav-prev{ float: right; }

#main-contents .cont-menu-wp li.nav-next{ float: left; }

#main-contents .cont-menu-wp li.nav-next a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_l.png) left 7px no-repeat;
}

#main-contents .cont-menu-wp li.nav-prev a{
padding: 3px 15px 3px 0;
background: url(./images/icon/icon-arrow_r.png) right 7px no-repeat;
}

/*コメントナビ*/

.navigation .alignright{
float: right;
}
.navigation .alignleft{
float: left;
}

.navigation:after{ content : ”; display : block; clear : both; height:0; }
.navigation{
margin-bottom: 30px;
/zoom : 1;
}

/*————————————————————
floatの回り込みを解除
————————————————————-*/

 

#top-in:after,
#header-in:after,
#global-nav-in #menu:after,
#main-in:after,
#main-and-sub:after,
.contents:after,
#main-contents dl.dl-style01:after,
.box-wrap:after,
dl.search-box:after,
#footer-in:after,
#main-contents .sb:after,
.contact:after,
#main-contents .cont-menu01:after,
#main-contents .cont-menu02:after,
.clearfix:after{ content : ”; display : block; clear : both; height:0; }

#top-in,
#header-in,
#global-nav-in #menu,
#main-in,
#main-and-sub,
.contents,
#main-contents dl.dl-style01,
.box-wrap,
dl.search-box,
#footer-in,
#main-contents .sb,
.contact,
#main-contents .cont-menu01,
#main-contents .cont-menu02,
.clearfix{ /zoom : 1; }

/*————————————————————
template created by web-rider
————————————————————-*/

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ