会社概要

2021年10月「以前」にテンプレートを利用した事のあるお客様へ

2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
今後しばらく新作テンプレートの手直しが入るかもしれません。

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。
• 2022年6月でMicrosoftのIEサポートが終了したのに伴い、弊社テンプレートもIE対応(バグ対応など)を終了しました。

当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>道の駅・物産館イメージ 無料ホームページテンプレート tp_bussan2</title>
を編集しましょう。
あなたのホームページ名が「道の駅」だとすれば、
<title>道の駅</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

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

ロゴ画像について

トップページ用（logo_home.png）と、その他ページ用（logo.png）で、ロゴは２種類あります。
トップページ用のlogo_home.pngについては必ず正方形でご用意下さい。長方形にしてしまうと、楕円形で出力されてしまいます。

psdファイル、aiファイルも梱包しています

psdファイル（Photoshopソフト用）、aiファイル（Illustratorソフト用）も一部梱包しています。
使える環境のお客様はご活用下さい。

トップページのスライドショー画像について

トップページのスライドショー写真は、配布元サイト（写真ACさん）の規約により梱包できませんが、配布元サイト(写真AC)さんから無料ダウンロードができます。
ご利用の際はACさんの規約を読んだ上で直接ダウンロードして下さい。

• 1.jpgのダウンロード（※リンク先はACさんです）
• 2.jpgのダウンロード（※リンク先はACさんです）
• 3.jpgのダウンロード（※リンク先はACさんです）

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

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

vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/

上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。

画像を入れ替える場合や、枚数を変更したい場合。
画像サイズは自由で構いませんが、閲覧しているウィンドウサイズにより、スライドショー画像はトリミングされますので、切り抜かれてもおかしくない画像をご用意下さい。
枚数を変更する場合やファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。

vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. htmlのhead内にある「スライドショー」のブロック。
3. html下部にある「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
4. その下の「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。

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

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

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

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

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

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

トップページの「News」ブロックのアイコンについて

「その他」「イベント」「お買い物」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。
アイコン用の文字数が増えすぎるとレイアウトが崩れます。ご注意下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span
や、
#new dt span.icon-bg1
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「#new dt span.icon-bg1」ブロックをコピペし、.icon-bg1部分を.icon-bg2などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg2">〜〜〜</span>
などとすればOKです。

開閉ブロックについて

画面左上のハンバーガーメニュー（３本バーアイコン）をクリックすると開閉ブロックが開きます。
html下部のmenubar内にブロックがありますので必要に応じて編集して下さい。

menubar内のshブロックは、900px未満の小さな端末から見た場合にだけ表示されるブロックです。
これは2カラムページ(index_c2.html)でも解説していますが、例えば画面幅が900px未満になった際に場所をとるsubメニューを消してこちらを表示させる、などに応用できるブロックになります。必要がなければshブロックごと削除してもらってOKです。

２カラムで使う事もできます

index_c2.htmlをご覧下さい。

装飾つきの見出しについて

h2タグにclass="flag"を指定すれば、旗の装飾画像が出ます。

既にclass指定が入っている場合は、半角スペースで区切って入れて下さい。
例：<h2 class="sample flag">
上記はsampleとflagの２つのclassを指定した場合になります。

通常は上記だけでいいのですが、当ブロックのように背景色のついたボックス(bg1)に続く場合に旗が切れてしまうので、そういった場合は、
<h2 class="flag pt50">
として下さい。上にpaddingが50pxできて旗が切れずに表示できます。

画像の変更、サイズの変更などは、cssフォルダの「.flag」で編集して下さい。
画像を入れ替える際は、向かって左側のものを１つだけ用意して頂ければ、あとはcssで右側にも自動的に反転されます。

クラッカーアニメーションについて

h2タグにclass="cracker"を指定すれば、このようなクラッカーアニメーションが自動再生されます。

既にclass指定が入っている場合は、半角スペースで区切って入れて下さい。
例：<h2 class="sample cracker">
上記はsampleとcrackerの２つのclassを指定した場合になります。

h2タグ以外にも使いたい場合。
class="cracker"を指定する要素にposition: relative;のスタイルを追加すれば同じように動作すると思います。

クラッカー画像のサイズを変更したい場合。
cssフォルダのinview.cssの.crackerstyle imgの設定内にある幅を変更して下さい。
端末サイズごとに再指定がある場合があるのでチェックしましょう。

別のgifアニメーション画像に入れ替えたい場合。
向かって左側にあたる画像を用意し、ファイル名をcracker.gifに変更してimagesフォルダに上書きすれば単純に置き換えられます。
ファイル名は変更したくないなら、jsフォルダのjquery.inview_set.jsの、
//crackerスタイルが画面内にきたら、クラッカーアニメーションを実行する
の設定内に「２つ」あるimgタグのファイル名部分をそれぞれ入れ替えて下さい。

APNG(pngアニメーション)を使いたい場合も、このjsファイル内の書き換えでOKです。