o2BUSINESS(株)様による、フリーテーマ「free_theme015」
のダウウンロードが必要です。
style.cssの修正
便宜上、テキストエディタにより、行数を指定しながらの説明となるので、TeraPad等のテキストエディタをご用意下さい。
また、改行の関係により、行数の指定が若干ずれていますので、ご注意下さい。
●横幅を240pxにする(行数はデフォルト状態)
58・79・104・216・234・283・291・333行目を、それぞれ240pxに修正
●titleを修正する(ヘッダー画像用のスペース)
57行目
#title {
width: 240px;
height: 100px;
float: left;
padding: 3px 5px 0 0;
}
●不要な部分を削除する
78～96行目
#header p.tel {
width: 240px;
height: 20px;
color: #6e6e6e;
font-size: 12px;
text-align: right;
float: right;
padding: 30px 5px 0 0;
}
100～109行目
#header p.tel span.jp {
color: #6e6e6e;
}
#header p.tel span.num {
color: #fe4100;
font-size: 10px;
vertical-align: middle;
margin: 0 0 0 1px;
font-weight: bold;
}
●フォントサイズを携帯用に小さくする
84・125・132・261・277・306行目 ← 行数はあてにならないので注意
font-size: 9px;
９pxで小さい場合は10pxにする
●リストマークについて
携帯サイトの場合、通常はトップページに各ページへのリンクを、リストマーク付で表示するのが一般的だ。
リストマークは固定ページ・投稿を問わず、表示できる。
若干修正が複雑だが、page.phpとsingle.phpに直接リンクを表示させるコードを記述するのが一番簡単だ。
style.css側の修正箇所1
229～262行目
/*************
/* サイドバー
*************/
この部分の
#sidebar li{
list-style: yes;
}
リストマークを非表示にしたい場合は、「yes」を「none」にする。
style.css側の修正箇所2
224～226行目
/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 15px;}
#main li, #footer li{margin-bottom: 0px;}
page.php側の修正(やり方は同じなので、single.phpは割愛)
page.phpに直接リストマーク付のリンクを出力するコードを挿入する。
<div id=”sidebar”>
<ul>
<?php // ページ
$pageslist = wp_list_pages(‘title_li=&echo=0′);
if ($pageslist) : ?>
</ul>
<ul>
<?php echo $pageslist; ?>
</ul>
<br>
<?php endif; ?>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</div>
●全体と異なるフォントサイズ・フォントカラー
固定ページや投稿の本文部分は個別にサイズや色を指定できるが、page.php等のテンプレートで制御している部分については、style.cssで指定する比喩用がある。
例えば、各ページへのリンクの見出しとして、「Menu」や、「最近の投稿」等、フォントサイズを大きくしたり、色を変えたい場合などである。
この場合、style.cssで定義し、page.phpやsingle.php等で指定する必要がある。
例
style.css側に次を記述する。
/*************
/* Menu2
*************/
#menu2{
font-size: 12px;
color: #ff0000;
}
続いてpage.phpやsingle.phpで、フォントサイズを強調したい部分に次のように記述する。
<div id=”menu2″>
Menu
</div>
●投稿ページの見出しの余白を調整する。
デフォルトでは次のようになっている。
赤文字の部分が見出し(タイトル)の左からの余白を指定するコードだが、このままだと若干右に寄ってしまっているので、少し左側に詰めたいので、3px位にすると良いだろう。
下のコードはデフォルトなので、携帯表示にする場合は他にも修正箇所がたくさんある。「完成形」を参照して頂きたい。
/*************
メイン（右側）コンテンツ
*************/
#main {
float: right;
width: 630px;
padding: 20px 0 40px;
display: inline;
}
#main h2{
padding: 2px 10px 0px 18px;
line-height: 40px;
font-size: 14px;
font-weight: normal;
color: #ffffff;
background: #fe4100;
}
#main h3 {
font-size: 14px;
line-height: 30px;
background: #f0f0f0;
padding-left: 12px;
padding-top: 3px;
margin-top: 20px;
letter-spacing: 0.2em;
color: #333333;
font-weight: normal;
}
@charset “utf-8”;
/*
Theme Name: free_sample015
Theme URI: http://theme.o2gp.com/
Description: free_sample015
Version: 1.0
Author: o2 Group
Author URI: http://theme.o2gp.com/
Tags: simple
o2 Group v1.0
http://theme.o2gp.com/
This theme was designed and built by o2 Group,
whose blog you will find at http://theme.o2gp.com/
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/
*{margin:0;padding:0;}
body{
font: 10px/1 “メイリオ”,”Meiryo”,arial,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,Osaka,”ＭＳ Ｐゴシック”,”MS PGothic”,Sans-Serif;
color:#000000;
background-color: #f0f0f0;
}
a{color:#fe4100;text-decoration:none;}
a:hover{color:#ff7d50;}
a:active, a:focus {outline: 0;}
img{border:0;}
.clear{clear:both;}
/*************
全体
*************/
#wrapper{
margin: 0 auto;
padding: 0 0px;
width: 240px;
background: #ffffff;
border-top: 0px solid #fe4100;
}
/*************
/* ヘッダー
*************/
#header{
height: 80px;
padding-bottom: 15px;
}
#title {
width: 240px;
height: 100px;
float: left;
padding: 3px 5px 0 0;
}
#header h1 {
padding: 0px 0 10px;
font-size: 12px;
font-weight: bold;
color: #fe4100;
}
#header h2 {
padding: 0px 0 0px;
font-size: 9px;
font-weight: normal;
color: #6e6e6e;
}
/*************
メイン（右側）コンテンツ
*************/
#main {
float: right;
width: 240px;
padding: 2px 0 2px;
display: inline;
}
#main h2{
padding: 2px 2px 0px 3px;
line-height: 10px;
font-size: 10px;
font-weight: normal;
color: #fe4100;
background: #ffffff;
}
#main h3 {
font-size: 10px;
line-height: 10px;
background: #ffffff;
padding-left: 2px;
padding-top: 2px;
margin-top: 5px;
letter-spacing: 0.2em;
color: #333333;
font-weight: normal;
}
#main p {
padding: 2px 2px 2px 2px;
}
#mainlist {
padding: 2px 2px 2px 2px;
}
/* 画像を右に回りこみ */
#date {
text-align: right;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
font-weight:bold;
color:#fe4100;
}
#next {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
img.aligncenter {
padding: 3px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
img.alignright {
padding: 3px;
margin: 0 0 2px 7px;
display: inline;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
img.alignleft {
padding: 2px;
margin: 0 2px 2px 0;
display: inline;
padding: 3px;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
#main ul{
margin-left: 5px;
margin-top: 5px;
}
#main li{
margin: 0px 2px 2px 0px;
list-style: yes;
}
#main li a{
display: block;
padding-left:0px;
padding-top:3px;
}
/* フッター共通 */
.box{
float: left;
width: 240px;
margin: 0px 0px 0px 0;
line-height: 1.2;
}
.last{margin-right:0;}
/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 15px;}
#main li, #footer li{margin-bottom: 0px;}
/*************
/* サイドバー
*************/
#sidebar{
font-size: 9px;
color: #000000;
}
/*************
/* Menu2
*************/
#menu2{
font-size: 12px;
color: #ff0000;
}
/*************
/* フッター
*************/
#footer{
clear:both;
padding: 2px 0 2px;
border-top: 1px solid #cccccc;
}
#footer .inner{
overflow: hidden;
}
* html #footer .inner{height:1%;}
#footer #logo{
float:left;
padding: 0px 0 0px;
width: 240px;
font-size: 9px;
font-weight: bold;
color: #fe4100;
}
.footerbox{
float: left;
width: 240px;
margin: 2px 2px 2px 0;
line-height: 1.2;
}
ul#naviF {
line-height: 1;
overflow: hidden;
padding: 0px 0;
font-size: 9px;
text-align: center;
zoom: 1;
}
ul#naviF li { /* inline-block */
padding: 0 0px 0px;
display: -moz-inline-box;
display: inline-block;
/display: inline;
/margin-right: 3px;
/zoom: 1;
}
ul#naviF li.begin {
padding: 0 0px 0px 0;
background-image: none;
}
ul#naviF a {
display: block;
color: #000;
}
ul#naviF a:hover {
color: #666;
}
address{
margin: 0 auto;
padding: 1px 0 1px;
text-align: center;
font-style:normal;
font-size: 9px;
clear:both;
display:block;
background: #cccccc;
width: 240px;
}
スマートフォン用完成例
@charset “utf-8”;
/*
Theme Name: free_sample015
Theme URI: http://theme.o2gp.com/
Description: free_sample015
Version: 1.0
Author: o2 Group
Author URI: http://theme.o2gp.com/
Tags: simple
o2 Group v1.0
http://theme.o2gp.com/
This theme was designed and built by o2 Group,
whose blog you will find at http://theme.o2gp.com/
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/
*{margin:0;padding:0;}
body{
font: 14px/1.4 “メイリオ”,”Meiryo”,arial,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,Osaka,”ＭＳ Ｐゴシック”,”MS PGothic”,Sans-Serif;
color:#000000;
background-color: #f0f0f0;
}
a{color:#fe4100;text-decoration:none;}
a:hover{color:#ff7d50;}
a:active, a:focus {outline: 0;}
img{border:0;}
.clear{clear:both;}
/*************
全体
*************/
#wrapper{
margin: 0 auto;
padding: 0 0px;
width: 95%;
background: #ffffff;
border-top: 0px solid #fe4100;
}
/*************
/* ヘッダー
*************/
#header{
height: 100%;
padding-bottom: 5px;
}
#title{
width: 100%;
height: 45px;
float: left;
padding: 0px 5px 0 0;
}
#header h1 {
padding: 0px 0 10px;
font-size: 14px;
font-weight: bold;
color: #fe4100;
}
#header h2 {
padding: 5px 0 0px;
font-size: 12px;
font-weight: normal;
color: #6e6e6e;
}
/*************
メイン（右側）コンテンツ
*************/
#main {
float: right;
width: 100%;
padding: 3px 0 3px;
display: inline;
}
#main h2{
padding: 0px 0px 0px 0px;
line-height: 40px;
font-size: 12px;
font-weight: normal;
color: #ffffff;
background: #fe4100;
}
#main h3 {
font-size: 12px;
line-height: 30px;
background: #ffffff;
padding-left: 5px;
padding-top: 5px;
margin-top: 3px;
letter-spacing: 0.2em;
color: #333333;
font-weight: normal;
}
#main p {
padding: 0px 0px 0px 0px;
}
#mainlist {
padding: 0px 0px 0px 0px;
}
/* 画像を右に回りこみ */
#date {
text-align: right;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
font-weight:bold;
color:#fe4100;
}
#next {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
img.aligncenter {
padding: 3px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
img.alignright {
padding: 3px;
margin: 0 0 2px 7px;
display: inline;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
padding: 3px;
background-color: #ffffff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* フッター共通 */
.box{
float: left;
width: 195px;
margin: 8px 5px 3px 0;
line-height: 1.2;
}
.last{margin-right:0;}
/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 30px;}
#main li, #footer li{margin-bottom: 5px;}
/*************
サイド（左側）コンテンツ
*************/
#sidebar ul{
padding-bottom: 0px;
}
#sidebar li{
list-style: yes;
}
/*************
/* フッター
*************/
#footer{
clear:both;
padding: 0px 0 0px;
border-top: 1px solid #cccccc;
}
#footer .inner{
overflow: hidden;
}
* html #footer .inner{height:1%;}
#footer #logo{
float:left;
padding: 0px 0 5px;
width: 100%;
font-size: 12px;
font-weight: bold;
color: #fe4100;
}
.footerbox{
float: left;
width: 100%;
margin: 0px 5px 5px 0;
line-height: 1.2;
}
ul#naviF {
line-height: 1;
overflow: hidden;
padding: 5px 0;
font-size: 12px;
text-align: center;
zoom: 1;
}
ul#naviF li { /* inline-block */
padding: 0 0px 0px;
display: -moz-inline-box;
display: inline-block;
/display: inline;
/margin-right: 3px;
/zoom: 1;
}
ul#naviF li.begin {
padding: 0 0px 0px 0;
background-image: none;
}
ul#naviF a {
display: block;
color: #000;
}
ul#naviF a:hover {
color: #666;
}
address{
margin: 0 auto;
padding: 3px 0 3px;
text-align: center;
font-style:normal;
font-size: 12px;
clear:both;
display:block;
background: #cccccc;
width: 95%;
}
コメントを残す