ショップできすぎくんに自分で作ったCSSを反映させる方法

こんばんは。しばらくぶりの投稿になってしまいました(汗)。

今回は、ショップできすぎくんに自分で作ったオリジナルCSSを反映させる方法についての手順について。

最近ちょこちょこ質問が来るので、まとめてみました。

ショップできすぎくんを、より自分好みにカスタマイズしたい場合、自分でオリジナルのCSSを作るとより幅の広いカスタマイズができます。

ただ、ショップできすぎくんにもともと組み込まれているCSSファイルに、直接コードを書き込むことはできません。

ですので、自分で別途CSSファイルを作り、それを読み込ませることになります。

ただ、この場合CSSファイルをアップロードするサーバーが必要になります。
ですので今回は、ショップできすぎくんを独自ドメインで運用している方向けの記事になります。

今回は、実際にオリジナルCSSを使って、画像の上にマウスを当てたときに画像が少しだけ透明になるようにしてみましょう。

スポンサーリンク

1. メモ帳でCSSファイルを作る

メモ帳を新規に立ち上げ、下記のように入力します。

@charset "utf-8";

a:hover img{
    opacity:0.6;
    -moz-opacity:0.6;
    filter:alpha(opacity = 60);
}

「リンクが貼られた画像の上にマウスを当てたら、その画像が少し透明になる」

みたいなことが記述されています。

ファイル名:「layout.css」
ファイルの種類:「すべてのファイル」
文字コード:「UTF-8」

とし、保存します。

(ファイル名は好きな名前をつけても大丈夫です。)

2. CSSファイルをサーバーにアップする

FFFTPなどのソフトを使って、作成した「layout.css」をサーバーにアップします。

上の図は、トップページと同じ場所にアップした場合の例です。(エックスサーバー)

この場合、cssファイルのURLは

https://〇〇〇.com/layout.css」 となります。

このURLが、次の3.で必要になります。

3. できすぎくんにCSSを読み込ませる

ショップできすぎくんの管理画面で、

「ショップデザイン設定」>「拡張設定」とすすみます。

「オリジナルCSS URL」の入力欄に、上記2.で取得したcssのURLを入力し、「保存」ボタンをクリック。

こうすることで、ショップできすぎくんに、自分で作った「layout.css」を読みこませられるようになります。

4. ショップを更新する

最後にショップを更新して完了です!

独自ドメインで運用している場合は、保存したできすぎくんのHTMLをダウンロードし、サーバーにアップロードして上書きします。

※もしうまく反映されない場合は、cssファイルのURLが正しいか、確認してみてください。

ブラウザのアドレスバーに、3.で取得したcssファイルのURLを入力したとき、メモ帳で作った内容が画面に表示されればOKです。

こんな感じです。

以上!

最後に

CSSを使いこなすには、HTMLとCSSの関連性の理解も必要です。

1から勉強してみたいと思った方に特にオススメのサイトは、「サルワカ」。とても分かりやすく説明が記載されています。興味がある方はトライしてみてくださいね。

また「対面で話を聞きたい」という方は「HTML&CSSセミナー(基本編)」もCOMゼミナールで開催しています。

ただ、売り上げを上げるためには、まずは集客を優先することが大事です!

CSSなどの勉強をするのは、集客ができるようになってからでも遅くはないですよ(^^)

(参考) ドロップシッピングでHTMLやCSSの知識はどこまで必要か

スポンサーリンク