ショップできすぎくん

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

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

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

    CSSで指定

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

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

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

    style.cssファイルの作成

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

    style.css」の名前で保存。

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

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

    <head>タグ追加

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

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

    挿入した状態です。
    bg15020814

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

    imgフォルダの設置

    imgフォルダの作成

    新規で「img」フォルダを作成します。そして、あらかじめ作成しておいたヘッダー画像「title.jpg」をそのフォルダに入れます。ヘッダー画像はかならず「title.jpg」という名前に変更しておいてください。

    imgフォルダの配置場所

    作成したimgフォルダは他のファイルと同列に置きます。
    bg15020813

    以上、ここまでの手順を終えたのち、FFFTPなどでサーバーにあるショップファイルに上書きします。

    無事、ヘッダー画像は入れ替わりましたか?

    bg15020815

    再度入れ替えるとき

    あらためて画像を入れ替えるときは、「title.jpg」の名前で画像を作成してimgフォルダにある同名ファイルと差し替えればOKです。または、style.cssで指定しているヘッダー画像のファイル名を変更してもOK。

    1 Star 0
    Loading...
    よかったら「いいね」お願いします。

    広告