先月リリースしました「インテリア雑貨」を商材とした 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;
}
}
各トップメニューのアイコン画像は、メディアにアップロードしておいてください。
デモサイトではマウスホバー・カレント用の（色違いの）画像も用意しメディアにアップロードしております。
デモサイトのような表示にしたい方はホバー・カレント用の画像もご用意ください。アイコン画像は背景画像で表示しております。
各トップメニューの上部にアイコン画像を設置するためのマージンを適用させなければいけませんので、「追加CSS」から各メニューに対して下記のスタイルを適用しております。ここではメニューテキストのフォントの太さも調整しています。
※ Welcart Beldad 1.0.5 以降をお使いの場合は、「height: auto;」と「line-height: normal;」を付与する必要があります。
@media screen and (min-width: 62.5em) {
#site-navigation li a {
height: auto;
font-weight: bold;
padding: 50px 40px 5px;
line-height: normal;
}
}
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カラム表示（サイドバーなし）
- トピック・商品カテゴリー ブロックの非表示
- 商品名や記事タイトルのフォントの太さ変更
管理画面 ＞ 外観 ＞ カスタマイズ ＞ テーマオプション
上記、設定ページの「サイドバーを表示する」からトップページの表示・非表示の切り替えがおこなえます。
こちらも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;
}
}
PAGE TOP