【賢威カスタマイズ】賢威6と賢威7のフッター設定

賢威テンプレートを導入したら「フッター」を設定しよう

WordPressを導入し、賢威テンプレートをテーマに設定したら、サイト名など基本的な情報を入れていきます。この時必ず設定しておきたいのが「フッター」の設定。デフォルトではサンプルの住所や画像が入っているので、検索結果に表示されないように必ず変更しましょう。

また、賢威6.2ではフッターに「メニュー」を2つ設定することが可能です。サイトやブログにあわせてメニュー設定をしていきましょう。「メニュー」自体の設定は以前にお伝えした以下の記事を参考にしてみてください！

賢威の「メニュー」設定をしよう【グローバルナビ】

今回の記事の目的

賢威6.2では「フッター」を必ず設定しよう
賢威7の「フッター」設定
賢威7で親子関係のある「フッターメニュー」を設定する

賢威テンプレートの基本設定にある「フッター」について今回は説明をしていきたいと思います。説明と言っても管理画面を順番に見ていくのですが、意外とフッターの設定を変えていない方は多いんです・・・！賢威を導入したら必ずフッターを設定して、必要な情報を入力しておきましょう。

また賢威7では「親子関係のあるメニュー」をフッターに設定できないため、親子関係があっても綺麗に並ぶようにCSSカスタマイズを紹介していきます。

管理画面からおさらい

WordPressの左メニューから、「賢威の設定」>「フッター」と進んでいきます。

基本的は順番に項目を埋めていけば問題ありません。実際の表画面は以下のようになっています。

見出し（左側）

フッターの左側にある見出しを設定します。デフォルトでは「アドレス」となっているので、用途にあわせて変更しておきましょう。

フッター画像

アドレスの下部に入っている画像です。店舗やオフィスの写真、ブログの場合は運営している方の写真やアイコンが入ることが多いと思います。サイトロゴが入ってもいいと思います。このエリアがデフォルトだと「管理できていないサイト」という印象を与えるため、必ず変更しておきたい箇所です。

フッター画像ALTテキスト

先ほどの画像に「alt」を設定します。代替テキストの設定ということで、可能な限り設定しておきましょう。

自由記述欄（タグ可）

「HTML」も利用可能な自由エリアです。デフォルトではサンプルの住所が入っているので、設定する内容が考えられない場合は必ず削除しておきましょう。

実際に住所を検索してみると、設定を変えていないサイトがたくさんでてきます・・・。意外と見落としがちなエリアだということがわかるかと思います。必ずデフォルトの文章は入れ替えるか削除しておきましょう！

京都府京都市テスト町11-11」の検索結果

見出し（右側）

フッターの右側にある見出しを設定します。デフォルトでは「メニュー」となっているので、用途にあわせて変更しておきましょう。

フッタメニュー１の選択

フッターの右側には「メニュー」を設定することが可能です。これは以前にお伝えした「賢威の「メニュー」設定をしよう【グローバルナビ】」を参考にしていただければと思いますが、オリジナルメニューを設定しておくことが可能です。

フッタメニュー２の選択

また、フッターメニューは「2つ」設定可能です。「ブログ記事メニュー（カテゴリなど）」と「サイト用の固定ページメニュー」と分けて利用するなど、サイトの構成にあわせて設定していきましょう。

賢威7のフッター設定について

賢威7をご利用の方は、デフォルトで何かを削除する必要はありません。賢威7のフッターは自由エリアのみとなっており、大幅に自由なカスタマイズ領域となっています。

自由エリアもいわゆる「ウィジウィグ」となっていて、HTMLはもちろん「ビジュアル」モードも搭載でHTMLは苦手な方にも便利なエリアです。

賢威7のフッターメニュー

賢威6で設定した「メニュー」は賢威7では、1つだけになっています。設定は「外観」>「メニュー」にて以下の画像のように、テーマの位置を「フッターメニュー」としてチェックした場合に反映されます。

ここでのポイントは「フッターメニューはドロップダウンに対応していない」という点です。親子関係のあるメニューを設定した場合に崩れてしまうので、フッターには親子関係のないメニューのみを設定しましょう。そのため、グローバルナビと分けてメニューを作成することをオススメします。

「CSS」をカスタマイズして、親子関係のメニューをフッターに設定しよう

先ほど紹介したようにデフォルトでは「親子関係のあるメニュー」をフッターに設定できません。そこで今回は「CSS」を調整して、親子関係があっても表示に問題がないようにカスタマイズをしていきましょう。

すべて横並びにカスタマイズ

多くのカスタマイズをしたくない、という場合は、以下のカンタンカスタマイズがオススメです。

●base.css に追記

.site-footer-nav li ul {
	display: inline;
}

自由エリアとメニューを並べる

デザインの部分は人それぞれ好みがあるので難しいですが、自由エリアとメニューを並べるカスタマイズも紹介していきます。この場合「自由エリアに何か記述する」必要がありますが、枠などはCSSで調整できますので、コードを参考にオリジナルにしてみてください。 ※デフォルトとCSSが大きく異なるため、必ずバックアップを取ってから作業をしてください。

●base.css を編集

/*フッターナビ*/
.site-footer .site-footer-conts-area {
	float:left;
	width:65%;
	margin:2em 0;
	border:1px solid #EEE;
	background:#FFF;
	color:#000;
	padding:2em;
}
.site-footer .site-footer-nav {
	padding:1em;
	float:right;
	width:20%;
}
.site-footer .site-footer-nav ul{
	margin:1em 0 1.5em 10px;
}
.site-footer .site-footer-nav ul ul{
	margin:1em 0 1em 10px;
}
.site-footer .site-footer-nav li{
	margin-bottom: 10px;
	padding-left: 10px;
}
.site-footer .site-footer-nav li li{
	padding-left: 10px;
	padding-top: 0;
}
.copyright {
	clear:both;
}

「base.css」の「フッターナビ」のcssをまるごと書き換えます。横幅や装飾はCSSで調整してみてください。

モバイル表示も調整

●rwd.css を編集

/*フッターナビ*/
.site-footer .site-footer-conts-area {
	float:none;
	width:85%;
	margin:2em auto 1em;
	border:1px solid #EEE;
	background:#FFF;
	color:#000;
	padding:1em 1em 0;
}
.site-footer .site-footer-nav {
	padding:1em .5em 0;
	float:none;
	width:90%;
}
.site-footer .site-footer-nav ul{
	margin:1em 0 1.5em 10px;
}
.site-footer .site-footer-nav ul ul{
	margin:1em 0 1em 10px;
}
.site-footer .site-footer-nav li{
	margin-bottom: 10px;
	padding-left: 10px;
}
.site-footer .site-footer-nav li li{
	padding-left: 10px;
	padding-top: 0;
}
.copyright {
	clear:both;
}

「rwd.css」の「フッターナビ」のcssをまるごと書き換えることで、モバイル表示の際の調整もおこないます。こちらも微調整をおこなって、ご自身のサイトに合うように設定してみてください。