サイト検索
検索
サイトメニュー
Menu
RTB SoftLab ラテベ ソフトラボ (ラテベラボ)
私の知っているソフトの操作を解りやすく、解説していきます。
サイト検索
検索
サイトメニュー
Menu

投稿日:2021年10月11日

更新日:2021年10月5日

ECサイト (通販サイト) Welcart Basicのカスタマイズ(CSS編)について

前回で、カスタマイズの前準備は終わりました。これで、アップデートも怖くありません。
前回までを見ていない方は、下記のリンクにて参照が出来ますので、ご覧下さい。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
(基本設定)・ショップ設定
(メール設定)
(外観 ➡ テーマ)
(外観 ➡ ウィジェット)
子テーマの作成「カスタマイズ準備」
今までで設定を行った機能(メニュー)
ECサイトのおすすめ

さて、いよいよ本格的なカスタマイズに入ります。

実際のカスタマイズは、どのように変更したいか?ということが非常に大事になります。
そのデザインや構想がなければ、非常に時間がかかってしまいますので、構想を必ず持って下さい。

今回は、どのように変更していくかの説明になりますので、構想などはありません。(笑)
(しいて言えば、メニューの色を変える作業を考えています)
あくまで、カスタマイズの勘所をとらえて下さい。

ここからは、少々難易度が上がりますが、なるべく解りやすく説明したいとおもっていますので、どうぞよろしくお願いいたします。

さて、何回も書きますが、必ず、バックアップを必ず取っていただくようにお願いします。

では、さっそくメニューの背景色を変えていきたいのですが、その前にブラウザの使用方法を説明します。
これを使わないと、CSSの変更は、なかなかわかりにくいと思われますので、非常に大事なことになります。

皆様方の参考に出来たら、嬉しく思います♪
もし参考になったら、広告を1回でいいので、クリックして下さい♪

ecショップ( Welcart Basic )をカスタマイズした実例サイトです。

ブラウザの開発ツールとは?

各ブラウザは、開発ツール(正式名は解りません)の機能があります。デベロッパーツールとも呼ばれるそうです。
これによって、どのようにCSS(表現やレイアウトを変える命令)が適用されているかを見ることが出来ます。

今回は特に子テーマとなりますので、親のCSSが何やっているかを把握する必要があります。
なんか難しそうに言っていますが、そんなに難しくないので、大丈夫です。

ブラウザの開発ツール起動前
ブラウザの開発ツール起動前

プラウザの開発ツールの起動は、「F12」キーを一回押すと表示されます。
もう一度、「F12」キーを一回押すと、開発ツールは消えます。

では、さっそく各開発ツールを起動してみます。

Google Chrome

ブラウザの開発ツール起動後(Google Chrome)
ブラウザの開発ツール起動後(Google Chrome)

こちらが開発ツール(デベロッパーツール)になります。
まずは、①の部分をクリックして下さい。

ブラウザの開発ツール起動後(Google Chrome)ツールの表示位置
ブラウザの開発ツール起動後(Google Chrome)ツールの表示位置

①を押すと、開発ツールの表示位置を指定することが出来ます。

  1. 分離表示
  2. 左に表示
  3. 下に表示
  4. 右に表示

今回は、3の下に表示を選んでいます。

②を1回だけ押すと、これからどこのHTMLのタグを表示しますか?という意味になります。

(これは、ON(青字)、OFF(黒字)のボタンになります)

③その後、ナビ(メニュー)の所をクリックします。

すると、自動的に、ナビメニューの位置のHTMLが表示され、選択された状態になります。
その右側に、HTMLのタグに適用されているCSSが表示されています。

CSSは何が適用されているか?

CSSの表示されている部分は、上が優先に処理されています。

例で言いますと!

  • #site-navigation ul
    • padding(余白)が指定されています。
    • 但し、下記にてさらに上書きされています。
  • @media screen and (min-width: 62.5em) #site-navigation ul
  • こちらで、padding(余白)をなし(ゼロ)にしているということになります。

こんな感じで、CSSは、何が適用されているかを調べることが出来ます。
(難しいかなぁ~?!)
(一緒に頑張りましょう~!)

では、その他のブラウザも同様に見てみます。

Microsoft Edge

ブラウザの開発ツール起動後(Microsoft Edge)
ブラウザの開発ツール起動後(Microsoft Edge)

Brave

ブラウザの開発ツール起動後(Brave)
ブラウザの開発ツール起動後(Brave)

ここでのまとめ

見て解ると覆いますが、ほとんどどのブラウザでも多少異なるだけで、大きな違いはありません。
なので、一度覚えていますと、ブラウザが変わっても、混乱する事はなくなりますので、是非使ってみて下さい。

余談ですが、Braveのブラウザは、聞いたことがないと思います。(笑)
今現在、私の流行りになっています。(笑)
なぜ、このブラウザを使うかは、以下が理由になります。

  • 基本的には広告を表示させない。
    • 他のブラウザは、広告が自動で表示されて、結構ウザイです。そのあたりが解消されます。
  • アルトコイン(ビットコインの一種)が貰える。
    • ここは、不確かな部分がありますが、
      広告を表示させなかった場合は、無条件で微量ではありますが、アルトコインが貰えます。
      条件は、bitFlyer(ビットフライヤー)と契約をして、Braveブラウザと連携している場合だと思います。
      • 不確かではありますが、実際微量ですが、アルトコインが貰えています。

今現在は、お勧めのブラウザになります(笑)。

ナビゲーション の背景色指定タグを探します。

ナビゲーションの上位タグ、又は、下位タグから背景が指定されているタグを探します。

まずは、上位タグを探したいので、マウスを各タグに合わせます。(クリックは必要ありません)

ナビゲーションメニューの上位タグにマウスを合わせていきます。(ナビゲーションの上位タグ)
ナビゲーションメニューの上位タグにマウスを合わせていきます。(ナビゲーションの上位タグ)

さらに上位にマウスを合わせてみます。

ナビゲーションメニューの上位タグにマウスを合わせていきます。(ナビゲーションの違うタグ)
ナビゲーションメニューの上位タグにマウスを合わせていきます。(ナビゲーションの違うタグ)

ここまで行きますと、違うタグになりますので、結論として、
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>タグをクリックします。

  • このタグを見ても、CSS画面を見てみても背景色が指定されていません。
    • どこを見ているかと言いますと、CSSの枠に、■(黒色)があるのかを探しています。
    • さらに下位のタグを見てみます。
      • この時、始めに選択したタグは、
        <ul id=”menu-menu-top”になりますので、下記は除いて構いません。
        • <label
        • <input
      • なので、<div class=”nav-menu-open”>タグを見ます。
        • 右側のCSSに、■#131313がみえますね!
        • このタグで、CSSをで背景色(background-color)を黒っぽい色にしていることが解ります。
ナビゲーションメニューの背景が指定されているタグをCSSの指定
ナビゲーションメニューの背景が指定されているタグをCSSの指定

カスタマイズの最終イメージを先に作る!

CSS部分の色の部分にカーソルを合わします編集します。

ナビゲーションメニューの背景が指定されているタグをCSSの指定
ナビゲーションメニューの背景が指定されているタグをCSSの指定
  1. #131313部分をクリックして、入力できる状態にします。
  2. そのまま、Deleteキーを押して内容を削除します。
  3. 次に、下矢印キーを押して、該当のカラーを選択します。
    1. この時、ナビメニューの背景色が変わっていることが解ると思います。
    2. それを見ながら背景色の色を決めていきます。
  4. とりあえず、「blue」にして青色にしました。

このような感じで、カスタマイズイメージを見ながら、CSSの変更が出来るということです。

「このCSSは、何をどのようにしているか意味はわかりますか?」

はい、直ぐに答えたいのですが、後で、又は、次回で詳しく説明させていただきます。
というのも、意味が解らなくても、カスタマイズが出来ることを知ってほしいからになります。

ブラウザから、該当CSSを選択します。

このまま、ブラウザを放置しておいて出来ないこともありませんが、とりあえず、下記を選択してコピーを取ります。

ナビゲーションメニューに背景色が指定されている所のCSS! コピペ
ナビゲーションメニューに背景色が指定されている所のCSS! コピペ

コピーして、メモ帳などに張り付けておいて下さい。

一点だけ注意して下さい。
ブラウザによっては、実際のコードを省略して表示している場合があります。
実際は、@mediaの最後に{が必要になります。
最終行にも、最後に}が必要になります。
ここだけは編集しておいてください。

コピー後{}を付けたコード

@media screen and (min-width: 62.5em){
header #site-navigation input#panel.on-off + div.nav-menu-open, header #site-navigation input#panel.on-off:checked + div.nav-menu-open, header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    overflow: inherit;
    height: auto;
    background-color: blue;
}
}

イメージが終わったので、実際のカスタマイズを行います。

WordPressの管理画面に入ります。

WordPressの管理画面に入って処理を行います。

まずは、お勧めの方法になります。

  • 外観 ➡ テーマエディタを選択します。
    • ワーニングが出た方は、無視して下さい(笑)。
子テーマのCSSの編集画面
子テーマのCSSの編集画面

これって、今までのブログを順番で見た頂いた方は、見たことありませんか?
もし解った方は、きちんと見て頂いている方になります♪
(ありがとうございます♪)
そうです、子テーマを作成する時にちょっとだけ出てきました!
(子テーマの作成を見ていない方は、こちらから見ることが出来ます)
子テーマを作成する時に作成したCSSになります。(style.css)

コピーしたものは、下記になります。

@media screen and (min-width: 62.5em){
header #site-navigation input#panel.on-off + div.nav-menu-open, header #site-navigation input#panel.on-off:checked + div.nav-menu-open, header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    overflow: inherit;
    height: auto;
    background-color: blue;
}
}

(min-width: 62.5em) に注目すると!
style.css の41行目に同じ命令が出てきますので、
そこを入れ替えれば、OKということになります。

こちらが、実際に行ったカスタマイズになります。

子テーマのCSSの編集画面の編集後
子テーマのCSSの編集画面の編集後

/**
 * 16.4 Desktop Small 1000px
 */
@media screen and (min-width: 62.5em){

header #site-navigation input#panel.on-off + div.nav-menu-open, header #site-navigation input#panel.on-off:checked + div.nav-menu-open, header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    overflow: inherit;
    height: auto;
    background-color: blue;
}

}

私のお勧めではありませんか、こちらでも出来ます。

  • 外観 ➡ カスタマイズを選択します。
  • その中の追加CSSを選択します。
  • そこに、カスタマイズしたCSSを張り付けます。

色は変えていますが、こちらになります。

テーマからCSSを追加した方法
テーマからCSSを追加した方法

それぞれの違いは、下記になります。

  • 私のお勧めな方法
    • ファイルに保存されます。(style.css)
      • よって、後でファイルを変更してアップする事も出来ます。
  • 私のお勧めではない方法
    • リアルで確認できるのは、凄くいいです。
    • この情報は、データベースに保存されます。
      • 個人的には、使いまわしが難しいので、こちらはお勧めしておりません。

このような感じで、CSSを変更してカスタマイズしていきます。

最後にフロント画面を確認します。

最終確認は、絶対に必要になります。
ただ、ブラウザにて始めにテストしていますので、コピペだけなので失敗はする事はないとは思います♪

フロント画面にて最終確認を行った後
フロント画面にて最終確認を行った後

でも、最終確認は必要になります(笑)。

後、最終確認をする時に、カスタマイズ内容が変更されない現象があります。
これは、ブラウザのキャッシュになります。
ブラウザのキャッシュを削除して、再表示(リロード(F5))をして下さい。

まとめ

これで、始めて本格的?にカスタマイズを行ってみました。
これを繰り返しながらカスタマイズしていくと、又、違ったイメージのECサイトになってくると思います。

特に、背景色などは、サイトのイメージをガラッと変えた印象になったりしますので、色々試して見て下さい。

必ず、バックバックを取りながら行っていただくようにお願いします。

今まで行った設定は、以下になると思います。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
( 基本設定・ショップ設定
(メール設定)
(外観 ➡ テーマ)
(外観 ➡ ウィジェット)
子テーマの作成「カスタマイズ準備」
始めてのカスタマイズ
今までで設定を行った機能(メニュー)

ブラウザの開発モードを使うことによって、CSSの意味が解らなくても、ある程度カスタマイズが出来たのが解ると思います。

でも、ちょっと、難しかったかもしれません^^;
なるべく、解りやすく明記していきたいと思っていますが、解りにくく思われた方は、ご了承願います。
又、あくまで私的なことも多くなってくるかと思われますので、そちらもご了承願います。
さらに、間違っていることもありますので、修正等は、申し訳ございませんが、自己責任でお願い申し上げます。

あっ!
最後に、ナビメニューの「ホーム」について、背景色がそのままとなっていると思います。
これは、次回にCSSの説明を兼ねて説明出来ればと思っています。
(宿題ですね♪)

もし先に挑戦して見たい方は、挑戦して見て下さい。
出来れば、CSSの変更を把握していることになります♪
(ヒント)ですが、本日選択したタグの配下に必ずあると思います。(色は、#565656のはずです)

頑張って、これからも書いていきたいと思っていますので、どうぞよろしくお願いいたします。

最後までお読みくださいまして、ありがとうございます。
もし参考になったら、広告を1回でいいので、クリックして下さいね♪

RTB カレンダー

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

リンク

通販サイト(ECサイト)デモへ
ラテベラボブログへ
ナノシスへ

RTBアーカイブ

RTB 本日のランキング

google検索