ショップできすぎくんの使い方｜CSSファイルの追加とヘッダー画像の入替

2015年2月9日2016年2月2日

ここでは、ショップできすぎくんを自身のレンタルサーバーで運用するときの手順を説明します。

ショップできすぎくんの編集画面ではかんたんに設定できるのですが、いったん自分のところにダウンロードしたファイルに編集を行うのは手間が必要です。

CSSで指定

ヘッダー画像を指定しているところ

ショップできすぎくんのヘッダー画像を指定している箇所は、もしもサーバー上にあるCSSファイルにあります。

div#header div.title {
  background: url('/static/publish/sd/img/templates/orange/title.jpg') no-repeat 0 0;
}

ヘッダーの中のタイトル部分の背景画像として指定しています。元のCSSファイルは直接編集できないので、新しくCSSファイルを追加して上書きさせる方法をとります。

style.cssファイルの作成

新規で「style.css」ファイルを作成します。TeraPad（テラパッド）などのテキストエディターソフトを起動して、下記タグを記述します。

@charset "utf-8";

div#header div.title {
  background: url('img/title.jpg') no-repeat 0 0;
}

「style.css」の名前で保存。

style.cssファイルの設置場所

作成したstyle.cssファイルは、他のファイルと同列に置きます。

<head>タグ追加

作成したstyle.cssファイルをHTMLファイルから読み込んでもらうため、各HTMLファイルに1行追加します。index.htmlをテキストエディターで開きます。そして、15行目あたりにある

<style type="text/css">

というタグを探します。そして、そのすぐ上に1行空けて、下記タグを挿入します。

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

挿入した状態です。

そして、これと同じことをすべてのHTMLファイルに行います。ただ、ファイルをひとつずつやると大変なので便利ツール「TextSS.net」を使います。複数ファイルに一気に編集できるものです。
使い方については別記事で解説しています。
TextSS.netの使い方｜複数ファイルに文字列を追加する