WordPress　固定ページの設計　詳細版　スマホ対応

（１）ページ全体と表示領域

1
2
3
4
5
6
7
8
9
10
11
12

/* ------- body部 ------- */
body {width:100%;
font-size:0.875em;
line-height:1.5em;
background-color: silver;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",
Osaka,"ＭＳＰゴシック","MS PGothic",sans-serif;}
/* ----- container部----- */
#container {margin: 0 auto;
max-width: 980px;
padding: 5px 10px 10px 10px;
background-color: #ffffff; }

行番
説　明

3
フォントの大きさを少し小さめ

4
読みやすく行間を1行半に

9
ページ表示域全体の中央寄せ。

10
１０行目：レスポンシブ・ウェブに必須

（２）ヘッダー領域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* ------- 　ヘッダー　header.phpの部分 ------- */
#site_title {background-color:#ffffff;
margin: 0px; }
.top_line {display:inline-block;}
#header_img {max-width:980px;
margin-bottom:10px;
border:solid 1px #309;}
/* -----グローバルメニュー----- */
#nav {max-width:360px;
margin:0 auto;}
#nav ul {margin-top: 0px; }
#nav li {display: inline;
list-style-type: none;
border-right: solid 1px #000000;
padding-left: 15px;
padding-right: 15px; }
#nav li:first-child{
border-left: solid 1px #000000;}
#nav a {text-decoration: none; }
/* -----ぱんくずリスト----- */
#pan_list {margin:0px 0px 10px 0px;}

行番
説　明

5
レスポンシブ・ウェブに必須

9～19
外観 → メニューで出力された ul li リスト部分。

9,10
メニューの中央配置

12
横並びの指定

（３）フッター表示領域

1
2
3
4
5
6
7
8

/* ------------- 　フッター ----------- */
footer {background-color: #333333;
color: #ffffff;
font-size:1em;
text-align:center;
margin-top:10px; }
footer a:link {text-decoration: none;
color: yellow; }

（４）サイドメニュー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* ---------- 　サイドメニュー -------- */
#side_menu_box {float:left;
width:15%;}
.side_menu_all {border:none;
line-height:1.2em;}
.side_menu_all li:first-child
{font-weight:bold;
margin-bottom:3px;
text-align:center;
background-color: #66ff33;}
.side_menu_shosai
{border-left:solid 5px #0033ff;
border-bottom:solid 1px #0033ff;
margin-bottom:3px;
padding-left:10px;
padding: 2px 5px;}
#sumaho_menu_open, #sumaho_menu_close{
font-weight:bold; font-size:1.3em;
text-align:center;
border:solid 1px #000;
width:90%;
margin:0 auto;
color:#fff;
margin-bottom:5px;
height:18px;}
#sumaho_menu_open{background-color:red;}
#sumaho_menu_close{background-color:blue;}