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

投稿日：2017-07-13 更新日：2017-08-01

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

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

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

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

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

適用できる前提条件

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%;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

/*------------------------------------------------------------

テンプレート変数設定

-------------------------------------------------------------*/

: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>',
));

//---------------------------------------------------------------------------

// フッター用ウィジェット

//---------------------------------------------------------------------------

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>

</div>

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

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

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

Point

フッター領域にウィジェットを3列追加
フッター領域のウィジェット部の色とかを簡単変更
フッター領域の簡単色変更

カスタマイズ手順

【賢威7スタンダード版専用】との違いはbase.cssが違うくらいであとは同じです。手順も同じですが、一通り載せておきます。もし、すでに何かしらの変更を行っている場合は、適宜修正をお願いします。

style.cssの変更

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

base.cssの変更

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

/*------------------------------------------------------------
テンプレート変数設定
-------------------------------------------------------------*/
:root {
	/*---色の指定---------------------------------------------*/
	--footer-color: 		#0eb87d;			/*フッター色*/
	--footerfont-color:		#ffffff;			/*フッターフォント色*/
	--footerlink-color:		#ffffff;			/*フッターリンク色*/
	--footerlinkhv-color:	#ed930b;			/*フッターリンク色*/
	--footwtitle-color:		#ffffff;			/*フッターウィジェットタイトル色*/
	--footwtitleb-color:	#ffffff;			/*フッターウィジェットタイトル枠*/
	--footwtitlef-color:	#000000;			/*フッターウィジェットタイトルフォント*/

	/*---サイズ指定--------------------------------------------*/
	--footmenu-radius:		5px;				/*フッターメニューに丸みをつける*/
}
/*--------------------------------------------------------
フッターの設定
--------------------------------------------------------*/
/*---フッターの設定---*/
.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;
}
/*--------------------------------------------------------
スマホ用の設定
--------------------------------------------------------*/
@media
only screen and (max-width : 740px){
	/*---フッターウィジェットの設定---*/
	#footer-widget{
		width: 100%;
	}
}

/*------------------------------------------------------------

テンプレート変数設定

-------------------------------------------------------------*/

:root {

/*---色の指定---------------------------------------------*/

--footer-color: #0eb87d; /*フッター色*/

--footerfont-color: #ffffff; /*フッターフォント色*/

--footerlink-color: #ffffff; /*フッターリンク色*/

--footerlinkhv-color: #ed930b; /*フッターリンク色*/

--footwtitle-color: #ffffff; /*フッターウィジェットタイトル色*/

--footwtitleb-color: #ffffff; /*フッターウィジェットタイトル枠*/

--footwtitlef-color: #000000; /*フッターウィジェットタイトルフォント*/

/*---サイズ指定--------------------------------------------*/

--footmenu-radius: 5px; /*フッターメニューに丸みをつける*/

}

/*--------------------------------------------------------

フッターの設定

--------------------------------------------------------*/

/*---フッターの設定---*/

.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;

}

/*--------------------------------------------------------

スマホ用の設定

--------------------------------------------------------*/

@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>',
));

//---------------------------------------------------------------------------

// フッター用ウィジェット

//---------------------------------------------------------------------------

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の編集

<!--フッターウィジェット-->
<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>

</div>

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

まとめ

基本は貼り付けて、好みの色コードに変更するだけなんですが、万が一には備えて作業をお願いします。これまでカスタマイズしたことない場合は、これをきっかけにカスタマイズの楽しさを味わってもらえればと思います。

-ブログ運営

PREV: ここであえての【画像で説明】FC2ブログで無料ID登録とブログ開設
NEXT: ブログの表示改善に行った2つのこと

関連記事はこちら

2017/5/24

流行りの「ブログで吹き出し」をやってみたい！これで解決WPプラグイン「Speech Bubble」

なんかこれいやだなぁ。ちゃんとした吹き出しで話したいよ。でもHTMLとかCSSとか変えないといけないんだよねぇ。わたしそのへん苦手だし簡単に吹き出しで話せる方法ないかな～え？え～～～っ！？遊び心というかブログを書いているとマンネリ化してモチベーションが↓↓ってことありますよね。（まだ2記事目でそれをいうか（笑））やっぱり、楽しく読んでもらうには楽しく書かなきゃって思うんです。それで導入したいと思ったのが吹き出し。最近の有料テンプレートだと標準で吹き出し機能があるんですが、超有名なワードプレス専 ...

2017/8/23

画像挿入に重宝する【Pixabay Images】に異変？！元に戻す方法は？

ブログに無料の画像素材を挿入したいとき無料画像素材を探す画像をダウンロード必要に応じて画像の縮小画像をサーバーへアップロード画像を記事に挿入なんて、まどろっこしいことをしないといけなかったんですが、「Pixabay Images」というプラグインを使えば、110万枚以上の無料画像素材を提供してくれているPixabayからWordPress経由で画像サイズを選択してダウンロード、そのまま記事に挿入できちゃうという作業時間を短縮しつつ、気分的なまどろっこしさからも解放されるという僕にとっては神プラ ...

2017/6/14

無料ブログでも吹き出しトークなんて怖くない！

以前WordPressで吹き出し可能なプラグインを紹介しましたが、無料ブログでも「吹き出し」やりたいですよね。見てたら楽しそうですもんね。でもCSSとかHTMLとかよくわからない。どうにかネット上で探してきたCSSを貼ってみたものの、吹き出しの色とか画像のサイズとか変えたくてもどこをどう変えればいいのかわからないということが多いかと思います。じゃあ、できるだけ簡単に変更できちゃうようにしてみようということでFC2ブログをベースに考えてみました。僕もCSSできるのかって聞かれると「いや～わかんないっ ...

2017/5/27

記事作成のときのタグ打ちに時間がかかるときには「AddQuicktag」で大幅時間短縮！

記事を書くときにぶつかる壁の一つに文字の装飾やリンク、その他にもオリジナルで何かしら表したいものがあるときに、どうしても必要なタグ打ちがありますよね。使っているテンプレートによっては、簡単にタグを呼び出せるように投稿画面の上部に装飾ボタンがありますが、どうしても使いたい装飾が標準ではなかったり、オリジナルで装飾を作成している場合は、毎回タグを打ち込まなければならなかったり、同じタグを使っている別記事からコピーしてきたりと無駄に時間がかかってしまうんですよね。ただでさえ、記事書きに時間がかかってしまうの ...

2017/8/2

サイトやブログの見た目をカスタマイズする意義

サイトやブログを公開しているということは、多くの人に見てもらいたい。なにかを伝えたい。と考えているから。だって、多くの人に見てもらえたり、賛同してもらえたら嬉しいし、アフィリエイトの観点から言えば収入が増えるかもしれないですよね。それを実現しようと思ったら、とにかく良い記事を書けってのが、どこのブログでも言われていることで、カスタマイズするよりも記事を書くことを優先すべきことだというのはわかる。どんなに必至こいて綺麗なサイトをつくっても、見る人がいないと意味がないわけで… そんなことはわかっているん ...

2017/7/19

ブログの表示改善に行った2つのこと

ある日の午後の出来事。「あれ？こんなにブログの表示遅かったっけ？そんなに記事数もないのに…」いままで、そんなに気にしてなかったんですが、試しにPageSpeed Insightsをやってみた結果、がっかりな結果が… Poorって…今の仕事を始めたばかりの頃に、考え方がPoorだとか設計がPoorだとか言われたのを思い出しました。苦い思い出です。まぁ、心の中では、日本語と英語を混ぜてんじゃねーよ！とか思ってましたが(笑) 他にもアジェンダとかプライオリティとか、なにそれ？議題とか優先度とかりっぱな日本 ...

2017/7/20

賢威の吹き出しを使わない3つの理由。そして改善へ

※テンプレートを賢威7から変更したため上記吹き出しは画像になっています。目次1 賢威7に実装されている吹き出しの問題点2 賢威7の吹き出し改善方法2.1 賢威7子テーマbase.cssでの修正2.2 賢威7子テーマrwd.cssでの修正3 このカスタマイズでの問題点4 まとめ賢威7に実装されている吹き出しの問題点 Caution 余白が多い短い文章でも吹き出しが横いっぱいに広がるため、余白部分が多くなりスカスカな印象を受ける。吹き出しの位置が合わない吹き出しのしっぽの部分が必ず中央にくるようにな ...

2017/7/30

賢威7からAFFINGER4へテンプレートを変更してみた

©アフィリエイトのAFFINGER 突然ですが、テンプレートを賢威7からAFFINGER4へ変更することにしました。なんでかっていうと、ただ単に見た目です。なんか賢威7ってすべてが大きくないですか？変に余白があったり、トップページの新着記事も場所とるっていうか… たぶん、トップページの記事一覧でもカテゴリー別の記事一覧でもざっと流し見しながら「おっこれ気になるな」って個別記事にはいると思うんですよね。さらに記事一覧を見ようと思ったら「次ページ」クリックしてって流れになると思うんですが、結構「次ページ ...

2017/5/30

【エックスサーバー】サブドメインでブログをはじめよう。

独自ドメインをつくったんだけど、独自ドメインひとつだとWebサイトってひとつしかつくれないんだよね？独自ドメインひとつでも複数のサイトをつくることは可能です。同一のドメインで複数のサイトを運営する場合、サブドメイン型とサブディレクトリ型があるのですが、今回はサブドメインの作り方について説明していきますネ。目次1 サブドメインの作り方（エックスサーバー編）2 独自SSLの設定（エックスサーバー編）3 ワードプレスのインストール（エックスサーバー編）4 サイトURLをhttps://～に変更する5 まとめ ...