会社概要

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>オンラインショップ・ショッピングモール向け 無料ホームページテンプレート tp_shop11</title>
を編集しましょう。
あなたのホームページ名が「Sample Online Mall」だとすれば、
<title>Sample Online Mall</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Online Mall All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

h1ロゴのaltタグも変更しましょう。
html側に、
alt="Sample Online Mall"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

アイコン画像について（Font Awesomeの解説）

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

上部メニューについて

画面幅が900px未満で、メインメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの、
if(window.innerWidth < 900)
の、900の数値を変更して下さい。

※当テンプレートのメニュー関連のコードは2024年4月最新版を使っています。
基本的な動作チェックは行いましたが、様々な動作チェックをされた場合に不具合が発生する可能性があるので、発見された際はお手数ですがサポート掲示板からご連絡下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

上部メニューのドロップダウンメニューについて

「食べ物」と「雑貨」メニューにはドロップダウンメニューが設定されており、以下の２タイプになっております。

↓テンプレート名の語尾が「_A」のタイプ
通常のドロップダウン。ドロップダウンのメニュー数少なめサイト向け

↓テンプレート名の語尾が「_B」のタイプ
ドロップダウン数が多いサイト向け。ドロップダウンのサムネイル画像は外してもOK。

ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。
また、親の<a>のリンク先は以下のように空っぽ（""）にしておいて下さい。

OKな例
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>

NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>

文字サイズ「小」「大」について

「小」「大」の文字サイズを変更したい場合
cssフォルダのstyle.cssの上の方にある、
/*文字サイズの設定
の所でそれぞれ指定しています。お好みで変更して頂いて構いません。

「大」をデフォルトにしたい場合
jsフォルダのfontSizeChanger.jsを開き、中のコメントを読んで変更して下さい。

トップページのスライドショー（slick）の解説

トップページのスライドショーには、slickを使用しています。
slick 公式サイト

slickのスタイルは、cssフォルダのstyle.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。

画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに１枚追加したい場合、現状では、
<aside class="mainimg-slick">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
</aside>
ですが、これに１行加えるだけです。
<aside class="mainimg-slick">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</aside>

画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<div><a href="index.html"><img src="images/1.jpg" alt=""></a></div>

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryの読み込み」のタグ。※slick.jsより上の行で読み込んで下さい。
2. その下にある、「スライドショー（slick）」のタグ。
3. jsフォルダ内のslick.jsファイル。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びslick関連のファイルのバージョンを変更して動作するか確認してみて下さい。

スライドショーでなく、固定画像にしたい場合。
1. htmlのスライドショー画像のうち、残したい画像以外を削除。
2. html下部にある、<script src="js/slick.js"></script>の１行を削除。
3. jsフォルダのslick.jsファイルも合わせて削除。

サムネイルスライドショーについて

slickを使ったスラドショーになっています。slick 公式サイト
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

写真の縦横サイズを予め揃えておくと綺麗に並びます。
枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick.jsで調整できます。

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick.js」。

ul、ol要素

1. これはol要素です。サンプルテキスト。
2. これはol要素です。サンプルテキスト。
3. これはol要素です。サンプルテキスト。

• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。

トップページのように2カラムで使う場合

まず２カラムを囲むブロックとして、
<main class="column">
を作り、その中にメインコンテンツ<div class="main-contents">とサブコンテンツ<div class="sub-contents">を作って下さい。

具体的には以下のような形になります。

<main class="column">

<div class="main-contents">
※ここにメインコンテンツの内容を入れます。
</div>

<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>

</div>

sub-contentsを右側にもってきたい場合は、cssフォルダのstyle.cssの、
main.column .main-contents {
と、
main.column .sub-contents {
の中にあるorderの数字を入れ替えて下さい。
orderは数字の小さな順に並びます。

３カラムにもなります

index_3c.htmlがサンプルなのでそちらでご確認下さい。

<main class="column">

<div class="main-contents">
※ここにメインコンテンツの内容を入れます。
</div>

<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>

<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>

</div>