BELDAD 「インテリア雑貨」デモサイトのカスタマイズ方法

サイトカラーの変更

デモサイトのイメージカラーをWordPress のビルトインセクションの「色」を利用し変更しました。

今回は、サイト全体の「メイン色・サブ色」のみを変更しましたが、その他の部分のカラー変更をおこなう事も可能です。

サイトロゴの画像変更・位置変更

ヘッダーロゴの位置変更・フッターのタイトルテキストを画像に変更しました。

「追加CSS」を利用し、PCでの表示のみロゴ画像の位置変更をおこなっております。

設定ページ：　管理画面　＞　外観　＞　カスタマイズ　＞　追加CSS

@media screen and (min-width: 62.5em) {
	h1.site-title,
	div.site-title {
		position: absolute;
		top: auto;
		left: 50%;
		float: none;
		text-align: center;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
}

フッターに表示させるロゴ画像をメディアにアップロードし、「追加CSS」から下記のスタイルを適用し背景画像で表示させております。

設定ページ：　管理画面　＞　外観　＞　カスタマイズ　＞　追加CSS

.f-logo {
	background-image: url("絶対パスURL");
	background-size: contain;
	background-repeat: no-repeat;
	width: 140px;
	height: 45px;
	text-indent: -9999px;
}

「background-image」で指定する絶対パスのURLは、メディアにアップロードしたロゴ画像の編集画面から「ファイルのURL」に記載されているURLを記入ください。

グローバルナビゲーションのデザイン変更

PCでの表示の際、グローバルナビゲーションメニューの中央寄せ・ナビゲーションの各トップメニューにアイコン画像を設置しました。

「追加CSS」を利用し、PCでの表示のみナビゲーションメニューを中央寄せにしております。ここでは「フォントの大きさ」も調整しています。

@media screen and (min-width: 62.5em) {
	#site-navigation {
		display: flex;
		font-size: 14px;
		justify-content: center;
	}
}

各トップメニューのアイコン画像は、メディアにアップロードしておいてください。
デモサイトではマウスホバー・カレント用の（色違いの）画像も用意しメディアにアップロードしております。
デモサイトのような表示にしたい方はホバー・カレント用の画像もご用意ください。アイコン画像は背景画像で表示しております。

各トップメニューの上部にアイコン画像を設置するためのマージンを適用させなければいけませんので、「追加CSS」から各メニューに対して下記のスタイルを適用しております。ここではメニューテキストのフォントの太さも調整しています。

@media screen and (min-width: 62.5em) {
	#site-navigation li a {
		font-weight: bold;
		padding: 50px 40px 5px;
	}
}

Firefox、Chromeなどに付属されている「要素検証」を利用し各メニューに適用されているIDをお調べください。

@media screen and (min-width: 62.5em) {
	#site-navigation li#menu-item-2159 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-2159.current-menu-item a,
	#site-navigation li#menu-item-2159 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-2159.current-menu-item a:before {
		top: 0;
	}
}

「background-image」で指定する絶対パスのURLは、メディアにアップロードしたアイコン画像の編集画面から「ファイルのURL」に記載されているURLを記入ください。

※下記の「〇〇」には、各トップメニューのIDが入ります。

@media screen and (min-width: 62.5em) {
	#site-navigation li#menu-item-〇〇 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current_page_item a,
	#site-navigation li#menu-item-〇〇 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current_page_item a:before {
		top: 0;
	}
	#site-navigation li#menu-item-〇〇 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a,
	#site-navigation li#menu-item-〇〇 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a:before {
		top: 0;
	}
	#site-navigation li#menu-item-〇〇 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a,
	#site-navigation li#menu-item-〇〇 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a:before {
		top: 0;
	}
}

トップページ　コンテンツ内容

上記、設定ページの「サイドバーを表示する」からトップページの表示・非表示の切り替えがおこなえます。

こちらも1.と同様「テーマオプション」から表示・非表示の切り替えが可能です。

こちらは「追加CSS」を利用し下記のスタイルを適用させております。

	.pickup-area .title {
		font-weight: bold;
	}
	.home-widget .widget_basic_item_list .itemname,
	.product-list .title {
		font-weight: bold;
	}

まとめ

今回のデモサイト作成にあたり「追加CSS」に記述したスタイルは下記の通りです。

/* ---- footer style ---- */
.f-logo {
	background-image: url("フッターロゴ画像の絶対パスURL");
	background-size: contain;
	background-repeat: no-repeat;
	width: 140px;
	height: 45px;
	text-indent: -9999px;
}

/* ---- front-page style ---- */
.pickup-area .title {
	font-size: inherit;
	font-weight: bold;
}
.home-widget .widget_basic_item_list .itemname,
.product-list .title {
	font-weight: bold;
}

@media screen and (min-width: 62.5em) {

	/* ---- header style ---- */
	header .bottom {
		padding-top: 30px;
	}
	.h-column .menus.list {
		padding-top: 30px;
	}
	h1.site-title,
	div.site-title {
		position: absolute;
		top: auto;
		left: 50%;
		float: none;
		text-align: center;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
	/* -- #site-navigation -- */
	#site-navigation {
		display: flex;
		justify-content: center;
		font-size: 14px;
	}
	#site-navigation li a {
		font-weight: bold;
		padding: 50px 40px 5px;
	}
	#site-navigation li#menu-item-〇〇 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current_page_item a,
	#site-navigation li#menu-item-〇〇 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current_page_item a:before {
		top: 0;
	}
	#site-navigation li#menu-item-〇〇 a {
		background: url("アイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a,
	#site-navigation li#menu-item-〇〇 a:hover {
		background: url("ホバー・カレント用用のアイコン画像の絶対パスURL") no-repeat center 12px;		
	}
	#site-navigation li#menu-item-〇〇.current-menu-item a:before {
		top: 0;
	}

}