もしもドロップシッピングの始め方|初心者が稼ぐ!ブログ講座

在宅で自由な時間にパソコン1台で稼げる「もしもドロップシッピング」の始め方を初心者でも分かりやすく紹介する情報サイト!

*

ショップできすぎくんでCSS・スタイルシートの使い方(カスタマイズ編)

      2015/10/01

このページではショップできすぎくんでCSS(スタイルシート)を使ってショップをカスタマイズする方法をご説明します。CSSとはホームページのデザインを指定するための言語でHTMLと組み合わせて使用します。CSSは、HTMLに直接記述する方法とメモ帳に記述して外部ファイルとして設定する方法がありますが、ショップできすぎくんに反映させる場合は外部ファイルとして設定しましょう。一度記述した外部ファイルは他のショップでも活用できるため大変便利でおすすめです。CSSを使用することで所定の文字の書体やサイズ、色を自分好みのものに指定したり、デザインの一部を非表示にしたりできます。CSSの基本については下記のサイトで分かりやすく解説しています。CSSの書き方 ここではショップできすぎくんで特に気になるサイドバーのデフォルトで表示される「商品一覧」と「カテゴリー」や画像の横に表示されるスクロールバーを非表示にするCSSと、サイドバーの見出しの色とページ全体のテキストのフォントを変更する手順をご説明します。

1.メモ帳を開いてCSSを記述する

  1. パソコンの「すべてのプログラム」から「アクセサリ」の中の「メモ帳」を開く。
  2. 下記のソースをそのままコピー&ペーストします。
  3. 名前を付けて保存します。
  4. ファイル名は半角英数字で拡張子は「.css」とします。例:sample.css

@charset “utf-8”;

/*—————————
画像横のスクロールバーを非表示
—————————*/
div#side-navi p.image {overflow-y: hidden;}

/*—————————
デフォルトのカテゴリーを非表示
—————————*/
.genre-list{
display: none;
}

/*—————————
デフォルトの商品一覧を非表示
—————————*/
.genre-all{
display: none;
}

/*サイドバーの見出しの色を赤に変更*/
h4 {
background: transparent;
background-color: #191970;
color: #ffffff;
}

/*サイドバーのテキストを変更*/
.side-link a {
font-weight:700;
color:#8B4513 !important;
font-size: 14px !important;
}

/*ページ全体のテキストのフォントを変更*/
div#main .txt-box,
div#main ul.item-recommend .txt {
background-color: #ffffff;
color: #000000;
text-align: left;
font-size: 14px !important;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
}

2.メモ帳に記述したCSS外部ファイルをアップロードする

  1. FFFTPでCSS外部ファイルをレンタルサーバーや忍者ツールズのサーバーの「ショップフォルダ」にアップロードします。
  2. ショップできすぎくんの管理画面にログインしてショップ名をクリック。
  3. 「ショップデザイン設定」にある「拡張設定」をクリック。
  4. CSS外部ファイルのURLを「絶対パス」で入力して保存ボタンを押します。
  5. 「公開予約」してページにCSSが反映されているのを確認して完了です。

※絶対パスとは「http://」から始まるURLのことで下記の様に入力します。
http://shop.moshimo.com/sample/sample.css

※もしもサーバーで運営中のショップにCSSを反映させるにはレンタルサーバーを借りる必要があります。

一度公開予約後にCSSの記述を修正した場合は公開予約の必要はありません。FFFTPで再度アップロードするだけ即反映されます。

CSSが反映されているのを確認してみよう。

●サイドバーのデフォルトで表示される「商品一覧」と「カテゴリー」

17●CSSによって「商品一覧」と「カテゴリー」が非表示になり、見出しの色とフォントも変わりました。20●赤枠内の画像の横に表示される不自然なスクロールバー18●CSSによって画像の横に表示されるスクロールバーが非表示になりました。21●デフォルトの読みにくく見栄えの悪い書体19●CSSによってページ全体のテキストのフォントとサイズが見違えるほど変わりました。22
次のページではネットショップの基本的なガイドラインについてご説明します。法律を守って運営しましょう。

 - カスタマイズ編