クールでかっこいいWordpressテーマVer.7のカスタマイズ
「クールでかっこいいWordpressテーマVer.7」のカスタマイズ方法について解説します。
■メニューの設定
・入力欄[メニューの名前]に「topmenu」と入力。
・[外観]→[メニュー]。[「topmenu」で設定します。]にチェックを入れる。
■ターゲットとするブラウザの種類を3種類から4種類に変更する
「クールでかっこいいWordpressテーマVer.7」は、デフォルトでは、PC、iPad、iPhoneの３種類にのみ対応しており、今後増えてくることが予想されるNexus7などのタブレット端末には対応していません。
従って、タブレット端末でもキレイに見えるようにする設定を行います。
/* ------ ～ 767px ------ */
@media screen and (max-width: 767px) {
↓編集
/* ------ ～ 767px ------ nexus7縦(640px) */
@media screen and (max-width: 767px) {
#gnav nav ul li a {padding: 8px 6px;}
}
/* ------ ～ 599px ------ nexus7縦(600px) */
@media screen and (max-width: 599px) {
■メニューの幅と高さを変える。
１．PC向け(幅980px以上)
#gnav nav ul {float: left;}
#gnav nav ul li {float: left;}
#gnav nav ul li a {display: block;padding: 8px 35px 6px;border-right: solid 1px #CCCCCC;font-size: 93%;}
↓編集
#gnav nav ul {list-style-type: none;}
#gnav nav ul li {width: 20%; float: left; margin: 0;text-align: center;}
#gnav nav ul li a {display: block;padding: 10px 25px 8px;border-right: 1px solid #CCCCCC;font-size: 110%;}
#gnav nav ul li:last-child a{border-right: 0px;}
２．iPad向け(幅768～979px)
/* ------ ～ 979px ------ */
@media screen and (max-width: 979px) {
#gnav nav ul li a {padding: 8px 20px 6px;}
↓編集
/* ------ ～ 979px ------ iPad縦(768px) */
@media screen and (max-width: 979px) {
#gnav nav {width: 100%;}
#gnav nav ul li a {padding: 10px 0px 8px;}
なお、上記の、
#gnav nav {width: 100%;}
の記述は重要です。この一行の記述により、メニューの幅がブラウザの幅に合わせてフレキシブルに変わるようになります。■メニューの個数に応じて、メニューの幅を自動で調節する。
↓この行の「width: 20%」のところを「width: 25%」(メニュー４つ)などに変更。
#gnav nav ul li {width: 20%; float: left; margin: 0;text-align: center;}
■ipad、nexus7でのサイドバーウィジットの幅を変える。(幅48％→100%)
#sidebar1 {float: left ; width: 48%;}
#sidebar2 {float: right; width: 48%;}
↓編集
#sidebar1 {float: left ; width: 100%;}
#sidebar2 {float: right; width: 100%;}
■サイトのイメージ色を変える。
1.下記２つの画像ファイルを加工。
menu_bg_orig.png
topmenu_bg_orig.png
2.[外観]→「テーマ編集」。
◆スタイルシートstyle.css(３箇所)
・「#ptitle」の行： #4E7AC7 → #3c3c9a
・「#gnav」の行： #4E7AC7 → #3c3c9a
・「footer」の行： #4E7AC7 → #3c3c9a
・「#gnav nav ul li a」の「background: linear-gradient」の行：
グラデーション上 #7FB2F0 → #5f5fe2
グラデーション下 #334488 → #3434a2
・iPhone向けのメニューボタンも同様に変更(一括置換)。
グラデーション上 #7FB2F0 → #5e5ef2
グラデーション下 #334488 → #3535a3
グラデーション上 #8bbaf3 → #5e5ef2
グラデーション下 #4258af → #3535a3
■スマートフォンでピンチ(二本の指でサイトを拡大表示)できるようにする。
↓編集
■Youtube動画のサイズをレスポンシブにする。
・スタイルシートstyle.cssの末尾に下記を追記。
// Youtube動画のサイズを可変にする。
.video-wrapper {
width: 600px;
max-width: 100%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
・Youtube動画タグを、
で囲む。
■ファビコンの追加。
・ヘッダーheader.phpに下記を追記。
■フッター部分にあるメニューの文字サイズを大きくする。
・フッターfooter.phpの下記の部分を編集。
(つまり「font-size:」について、「79%」となっているのを「120%」などに書き換える。)
footer ul li {display: inline-block;*display: inline;*margin-bottom: 12px;padding: 0 10px 0 15px;line-height: 100%;font-size: 79%; color: #FFFFFF;border-left: solid 1px #CCCCCC;*zoom: 1;}
↓編集
footer ul li {display: inline-block;*display: inline;*margin-bottom: 12px;padding: 0 10px 0 15px;line-height: 100%;font-size: 120%; color: #FFFFFF;border-left: solid 1px #CCCCCC;*zoom: 1;}
■「スマホにおいてだけ改行をしたい」という箇所でそれを実現する。
1.まず、改行したい位置に下記を追記。
2.次に、
/* ------ ～ 979px ------ iPad縦(768px) */
@media screen and (max-width: 979px) {
の直前に
.br-sp {display:none;}
を追記。
3.最後に、
/* ------ ～479px ------ ガラケー */
@media screen and (max-width: 479px) {
の直下に
.br-sp {display:inline; line-height:12pt;}
を追記。
■カテゴリーの階層表示をより分かりやすくする。
1.小カテゴリーのインデントを大きくする。
↓この行の「text-indent:」の値を「10px」から「30px」などに変更。
#sidebar section ul.children li{border-top: solid 1px #D5D5D5; text-indent: 10px;}
2.ウィジットについて、階層表示するように設定する。
[外観]→[ウィジット]→[サイドバー上S]→[カテゴリー]
と進み、「階層を表示」にチェックを入れて保存。
■特定の固定ページだけ、１カラムにする。
1.「page.php」(固定ページテンプレート)を複製して「page2.php」を作成する。
中身をカスタマイズするか、あるいは↓これをそのままコピーする。