クールでかっこいい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」を作成する。



　　中身をカスタマイズするか、あるいは↓これをそのままコピーする。







    

        
        

    
    

/* ------ コンテンツ ------ */
(省略)
article section a.post-column:hover{background-color: #EFEFEF; text-decoration: none;display: block;}

/* ------ コンテンツ２(１カラム固定ページテンプレート) ------ */
#contents2 {width: 900px;padding-bottom: 20px;}
.main-title {margin: 0; padding: 0;font-size: 143%;font-weight: bold;line-height: 158%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
.contents-title{padding: 20px 0 10px 0;font-size: 143%;font-weight: bold;line-height: 143%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
.posts-title{padding: 0 0 5px;font-size: 129%;font-weight: bold;line-height: 143%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
article section {padding: 10px 5px;border-top: solid 1px #CCC;}
article section:first-child {border-top: none;}
article section h1{padding: 10px 0; font-size: 129%; font-weight: bold; color: #333333;}
article section h2{padding: 10px 0; font-size: 115%; font-weight: bold; color: #333333;}
article section h3{padding: 10px 0; font-size: 115%; font-weight: bold; color: #333333;}
article section.info {margin: 0;padding: 0 5px;border-top: none;clear: both;}
article section.top {margin: 0;padding: 0 5px 20px;border-top: none;clear: both;}
article section p{line-height: 150%;}
article section .doc{padding: 10px 0 10px 10px;line-height: 150%;}
article section p.list{line-height: 150%;font-size: 86%;}
article section .img-set{float: left; padding-right: 10px;}
article section a.post-column {text-decoration: none;display: block;padding: 5px 36px 5px 5px;color: #333333; background: url("img/arrow_01.png") no-repeat center right;}
article section a.post-column:hover{background-color: #EFEFEF; text-decoration: none;display: block;}

#contents {float: none;width: 94%;margin: 0 auto;padding-bottom: 0;}

#contents2 {float: none;width: 94%;margin: 0 auto;padding-bottom: 0;}

echo '';