ホーム > テクニカルノート > テーマ > BELDAD 「インテリア雑貨」デモサイトのカスタマイズ方法
WelcartPayキャンペーン
テーマ

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

記事公開日： 最終更新日：
LINEで送る
このエントリーをはてなブックマークに追加

先月リリースしました「インテリア雑貨」を商材とした Welcart Beldadのデモページはご覧いただけましたでしょうか。追加CSSやテーマカスタマイザー機能を利用し、美容・コスメのデモページとは全く異なるデザインに仕上げました。

今回のデモサイト作成でおこなったカスタマイズ内容のご説明をさせていただきます。


カスタマイズ内容

サイトカラーの変更



デモサイトのイメージカラーを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;
	}
}

各トップメニューにアイコン画像を設置する

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

1. アイコン画像を設置するためのマージン適用

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

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

2. 各メニューのIDを調べる

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


3. 調べたIDをもとに「追加CSS」に下記のスタイルを追加
@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を記入ください。


4. 「2・3」の方法で各メニューごとにスタイルを適用

※下記の「〇〇」には、各トップメニューの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カラム表示（サイドバーなし）
  • トピック・商品カテゴリー ブロックの非表示
  • 商品名や記事タイトルのフォントの太さ変更

となります。


1. トップページ 1カラム表示（サイドバーなし）

管理画面　＞　外観　＞　カスタマイズ　＞　テーマオプション

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


2. トピック・商品カテゴリー ブロックの非表示

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


3. 商品名や記事タイトルのフォントの太さ変更

こちらは「追加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;
	}

}
LINEで送る
このエントリーをはてなブックマークに追加

PAGE TOP