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

サイトカラーの変更

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

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

「追加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;
}

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

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

※下記の「〇〇」には、各トップメニューの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;
    }

}