【貼るだけ簡単！】賢威7のテンプレカスタマイズ【無料（タダ）公開！】

先日、アフィリエイト関係の記事で「賢威7」を紹介したんですが、たくさん購入してもらえたらなぁと思い、購入特典を考えていました。それで、購入特典としてカスタマイズ用のコードをお披露目しようと思ってたんですが、購入特典用のページ作ってロックかけたりとか、特典用のバナーに貼りなおしたりとか、なんかもうめんどくさいわぁ。ってことで、普通に公開することにしました。

それって、もったいなくない？

本人がいいと言ってるのでいいのでは？非効率的というかなんというか、もったいないのは間違いないですが。

いいんですっ！その方が、たくさんの人に見てもらえるし、「もっとこうした方がいいよ」なんてアドバイスももらえるかもしれないので。もちろん、すでに賢威を持ってる人でもどんどん使ってください。

適用できる前提条件
【賢威7スタンダード版専用】着せ替え&ウィジェット追加カスタマイズ
1. カスタマイズ概要
2. カスタマイズ手順
【賢威7どれでも使えるマルチ版】ウィジェット追加カスタマイズ
1. カスタマイズ手順
まとめ

適用できる前提条件

Caution

賢威7ワードプレス版であること
編集を行う際は必ず子テーマを使うこと（子テーマの導入は賢威サポートページをご確認ください）
編集前に必ずバックアップをとっておくこと（特にfunctions.php元のデータを手元に持っておいた方が良いです）
自己責任で行うこと（もし、下記説明でわからない場合は、無理におこなわないこと）
可能であればローカル環境で一度試してみてください

【賢威7スタンダード版専用】着せ替え&ウィジェット追加カスタマイズ

ごめんなさい。これは賢威7wpのスタンダード版専用です。軽く確認したところ「ビューティー版」以外は使えそうなんですけど、きちんと確認できていないので、「スタンダード版」に限定させていただきました。

カスタマイズ概要

Point

ヘッダー領域の簡単色変更
背景領域の簡単色変更
グローバルメニューの簡単色変更
見出しの簡単色変更
見出しフォントの簡単色変更（一部）
パンくずリストフォントの簡単色変更
メインコンテンツの簡単色変更
サブコンテンツの簡単色変更
カラムの横幅簡単変更
フッター領域にウィジェットを3列追加
フッター領域のウィジェット部の色とかを簡単変更
フッター領域の簡単色変更

カスタマイズ手順

テーマ編集から賢威7子テーマ内の各ファイルの変更を行っていきます。もし、すでに何かしらの変更を行っている場合は、適宜修正をお願いします。

style.cssの変更

賢威7子テーマのスタイルシートに親テーマのファイル名を入れます。

base.cssの変更

base.cssの最下部にコードを貼り付けます。貼り付けるコードはコチラ

/*------------------------------------------------------------
テンプレート変数設定
-------------------------------------------------------------*/
:root {
	/*---色の指定---------------------------------------------*/
	--header-color:			#ffffff;			/*ヘッダー色*/
	--background-color: 	#e7f0e1;			/*背景色*/
	--menu-color: 			#0eb87d;			/*グローバールメニュー色*/
	--menuhv-color:			#0b9666;			/*グローバールメニュー色（カーソル時）*/
	--menufont-color:		#ffffff;			/*グローバールメニューフォント色*/
	--menufonthv-color:		#ffffff;			/*グローバールメニューフォント色（カーソル時）*/
	--footer-color: 		#0eb87d;			/*フッター色*/
	--footerfont-color:		#ffffff;			/*フッターフォント色*/
	--footerlink-color:		#ffffff;			/*フッターリンク色*/
	--footerlinkhv-color:	#ed930b;			/*フッターリンク色*/
	--footwtitle-color:		#ffffff;			/*フッターウィジェットタイトル色*/
	--footwtitleb-color:	#ffffff;			/*フッターウィジェットタイトル枠*/
	--footwtitlef-color:	#000000;			/*フッターウィジェットタイトルフォント*/
	--heading-color: 		#0eb87d;			/*見出し色*/
	--headingf-color: 		#ffffff;			/*見出しフォント色*/
	--headingf2-color: 		#000000;			/*見出しフォント色*/
	--pankuzu-color: 		#625b5c;			/*パンくずリストフォント色*/
	--mainback-color: 		#ffffff;			/*メインコンテンツの背景色*/
	--subback-color: 		#ffffff;			/*サブコンテンツの背景色*/
	--mainbackb-color: 		#ffffff;			/*メインコンテンツ線色*/
	--subbackb-color: 		#ffffff;			/*サブコンテンツ線色*/

	/*---サイズ指定--------------------------------------------*/
	/*---カラムの割合指定---*/
	--mainmenu-size:		65%;				/*メインメニューの割合*/
	--submenu-size:			30%;				/*サブメニューの割合※メインメニューと合わせて100%以内*/

	/*---その他---*/
	--mainmenub-size:		1px;				/*メインメニューのボーダーサイズ*/
	--submenub-size:		1px;				/*サブメニューのボーダーサイズ*/
	--mainmenu-radius:		5px;		 		/*メインメニューに丸みをつける*/
	--submenu-radius:		5px;				/*サブメニューに丸みをつける*/
	--footmenu-radius:		5px;				/*フッターメニューに丸みをつける*/
	/*var(変数名)で指定;*/
}
/*------------------------------------------------------------
テンプレートレイアウト
------------------------------------------------------------*/
/*2カラムレイアウト*/
.col2 .main-conts{
	float: left;
	width: var(--mainmenu-size);
}
.col2 .sub-conts{
	float: right;
	width: var(--submenu-size);
}
/*2カラムレイアウト（リバース）*/
.col2r .main-conts{
	float: right;
	width: var(--mainmenu-size);
}
.col2r .sub-conts{
	float: left;
	width: var(--submenu-size);
}
/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
/*ヘッダーの背景色変更*/
.site-header {
	background-color: var(--header-color);
	/*背景画像にしたい場合は画像パスを設定してコメントアウトを解除*/
/*	background-image: url("画像パス");	*/
}
/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/
.global-nav{
	padding: 0;
	background: var(--menu-color);
}
.global-nav-in li a{
	background-color: var(--menu-color);
	color: var(--menufont-color);
}
.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
	background-color: var(--menuhv-color);
	color: var(--menufonthv-color);
}
/*--------------------------------------------------------
パンくずリスト
--------------------------------------------------------*/
.breadcrumbs-in{
	color: var(--pankuzu-color);
}
.breadcrumbs-in a{
	color: var(--pankuzu-color);
}
/*--------------------------------------------------------
メインコンテンツ
--------------------------------------------------------*/
/*---全体の背景色---*/
body{
	background: var(--background-color);
	/*背景画像にしたい場合は画像パスを設定してコメントアウトを解除*/
/*	background-image: url("画像パス");	*/
}
/*---メインコンテンツの色設定---*/
.section-wrap{
	background: var(--mainback-color);
	border: var(--mainmenub-size) solid var(--mainbackb-color);
	border-radius: var(--mainmenu-radius);
/*	box-shadow: rgba(0,0,0,0.4) 3px 3px 6px;		*/
}
/*--------------------------------------------------------
サブコンテンツ
--------------------------------------------------------*/
/*---サブコンテンツの色設定---*/
.sub-conts .section-wrap{
	margin-bottom: 16px;
	background: var(--subback-color);
	border: var(--submenub-size) solid var(--subbackb-color);
	border-radius: var(--submenu-radius);
/*	box-shadow: rgba(0,0,0,0.4) 3px 3px 6px;		*/
}
/*--------------------------------------------------------
見出し
--------------------------------------------------------*/
.main-body h1{
	background: var(--heading-color);
	color: var(--headingf-color);
}
.main-body h2{
	background: var(--heading-color);
	color: var(--headingf-color);
}
.main-body h3{
	border-bottom: 1px solid var(--heading-color);
	color: var(--headingf2-color);
}
.main-body h4{
	border-bottom: 1px dashed var(--heading-color);
	color: var(--headingf2-color);
}
.main-body h5{
	border-left: 6px solid var(--heading-color);
	color: var(--headingf2-color);
}
.main-body h6{
	color: var(--headingf2-color);
}
/*--------------------------------------------------------
フッターの設定
--------------------------------------------------------*/
/*---フッターの設定---*/
.site-footer{
    background: var(--footer-color) !important;
    color: var(--footerfont-color) !important;
}
.site-footer a:link{
	color: var(--footerlink-color);
}
.site-footer a:hover{
	color: var(--footerlinkhv-color);
}
/*---フッターウィジェットの設定---*/
footer h3{
    border: 1px solid var(--footwtitleb-color);
    border-radius: var(--footmenu-radius);
    background: var(--footwtitle-color);
    color: var(--footwtitlef-color);
    margin: 30px 20px 20px 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#footer-widget{
	text-align: center;
	width: 33%;
	float: left;
	margin-bottom: 10px;
}
#footer-widget li{
	padding-right: 15%;
	text-align: left;
	list-style-type: none;
}
#footer-widget a{
	text-decoration: none;
/*	display: block;	*/
}
/*--------------------------------------------------------
スマホ用の設定
--------------------------------------------------------*/
@media
only screen and (max-width : 740px){
	/*---フッターウィジェットの設定---*/
	#footer-widget{
		width: 100%;
	}
}

functions.phpの変更

下記の図の通り、「};」と「?>」の間にコードを貼り付けます。貼り付けるコードはコチラ

//---------------------------------------------------------------------------
//	フッター用ウィジェット
//---------------------------------------------------------------------------
register_sidebar(array(
'name' => 'フッター左側',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'フッター中央',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'フッター右側',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

footer.phpの編集

footer.phpは子テーマに含まれていないので、親テーマからコピーしてきます。 FileZillaなどのソフトがあれば簡単ですが、ない場合はエックスサーバーの「ファイルマネージャー」からもできます。ファイルの場所：「/ドメイン名/public_html/wp-content/themes/賢威親テーマ/」からダウンロードします。アップロード先：「/ドメイン名/public_html/wp-content/themes/keni70_child/」へアップロードします。アップロードした（する前でもいいです）footer.phpに下記図のようにコードを貼り付けます。貼り付けるコードはコチラ

<!--フッターウィジェット-->
<div id="footer-widget"><?php dynamic_sidebar('フッター左側'); ?></div>
<div id="footer-widget"><?php dynamic_sidebar('フッター中央'); ?></div>
<div id="footer-widget"><?php dynamic_sidebar('フッター右側'); ?></div>
<!--フッターウィジェット-->

フッターの編集

最後に賢威のフッターの編集をします。貼り付けるコードはコチラ

<div class="site-footer clearfix">
<div class="#footer-widget">
</div>
</div>

これでだいたい完了です。あとはbase.cssを変更してあなた好みに色などに変更してください。説明はコード内に書いています。 SEOに強い戦略的テンプレート「賢威7」。レスポンシブWebデザインにも対応！パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属！

【賢威7どれでも使えるマルチ版】ウィジェット追加カスタマイズ

賢威7wpならどのテンプレートでも使用可能です。 ※もし上のスタンダード版を適用させた場合、こちらは不要です。では、カスタマイズの概要です。というか、上のカスタマイズの中で全てに適用できる部分に限定しただけなんですが、