[ ショップサーブ ]デフォルトのテーマをすべて自分でカスタマイズする第一回 サイト全体を中央寄せにする

:: スポンサーリンク ::


ショップサーブにはかなり多くのテーマが提供されていますし
商材によってはそのままでも使えます。

さらに、お金を出せば、Eストアーさんと提携されている会社に依頼すれば
プロのお仕事でオリジナルに変更できます。

ですが、私のように資金に乏しく、自分で何とかするしかない場合は、
自分でやるしかありません。・・・当然ですけど 笑

そこで、これからやってみようという人に、少しだけでも参考になればと思い、
私のサイトで、どこうをどうやっているのか少しずつ記事にしていきます。

基本的にはどのテーマを使っても大きく変わらないと思うので、
何かの参考になりましたら幸いです。

ちなみに私のサイトは そば富泉 です。

まずは、どういうふうに変わっているかザックリと・・・

私が使っているデフォルトテーマ 桜

桜デフォルト

そしてこれがデフォルトテーマ 桜 を使用してカスタムした現在のサイト

テーマ桜カスタム

さてさて、見た目はまったく違いますが、中身もかなり違います 笑

画像からはちょっとわかりませんが、まずは最初の一歩として
サイト全体を中央寄せにしてみます。

実はこのへんはショップサーブのマニュアルでも説明されていますが、
探しにくいので一応説明します。

サイト全体を中央寄せにする

基本ですが、サイトを自分でカスタマイズするには最低限のCSS(スタイルシート)の知識は必要です。
便利なので、ここは必ずブクマしておきましょう ^^;

ショップサーブでCSSをカスタマイズするには、
管理画面 → デザイン設定 → テーマのカスタマイズ です。

※ここでもうひとつ必ずやっておくべき作業としてカスタマイズする前に、
デフォルトのCSSをコピペでテキストエディタなどに保存しておくことをオススメします。
もし表示がおかしくなった場合に直ぐに元に戻せますので。

さて、カスタマイズの一歩としてテーマのカスタマイズ画面に
利用中のテーマから作成というボタンがありますので、そこをクリック。
そうすると使っているテーマのCSSが出てきます。

出てきたら、body という場所を探します。(コレは一番上)
または、パソコンのキーボード CtrlキーとFキーを同時に押して検索窓を開き、
「 body 」 と入力して下さい。

そうすると、この部分が出てくると思います。

上記に

を加えます。するとこうなります ↓

さらにもう一箇所。
今度は #container という場所を探します。
先ほど書きましたようにパソコンのキーボード CtrlキーとFキーを同時に押して検索窓を開き、
「 #container 」 と入力して検索すると直ぐに見つかりますよ。

この部分です↓

上記に

を加えます。するとこうなります ↓

ここまで編集したら、保存して適用ボタンをクリックします。(適当な名前で保存して下さい)
すると、
カスタムボタンの設定を引き継ぎます。
よろしいですか。
というアラートがでますので、OK をクリックします。

その後、お店ページを更新すれば、左側にピタリと張り付いていたサイトが
見事に中央寄せになっているはずです。

そうするとテーマのカスタマイズのところに
先ほど保存したテーマが新規テーマ1のところでできているはずです。
今後はそこを編集しますのでお忘れなきよう ^^;

まずは、これが最初の第一歩です。
先ほどの文字検索のやり方は覚えておいたほうが作業が早くなりますぞ~

※サイトをカスタマイズする際は、必ずバックアップを!
※ご自身でやられる以上は、もちろん自己責任でお願いします。当方では一切の責任は負いません!

posted by そば富泉

:: スポンサーリンク ::

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)