SAMPLE 株式会社

会社概要

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

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

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• IE10以前は考慮しておりません。Microsoft社のIEサポートが2022年6月で終了する為、IE11の動作チェックも近いうちに終了させて頂きます。

当テンプレートの使い方

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

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

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

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>初心者向けホームページテンプレート tp_beginner7</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE 株式会社」だとすれば、
<title>SAMPLE 株式会社</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

自作の画像ロゴに置き換えたい場合

当テンプレートの上部のサイト名（SAMPLE株式会社）はテキストで直接入力されています。
これを画像に置き換えたい場合、単純にテキスト部分と置き換えてもらえばOKです。

現状
<h1 id="logo"><a href="index.html">SAMPLE 株式会社</a></h1>

置き換え後（※logo.pngという画像をimagesフォルダに入れた場合の例）
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="SAMPLE株式会社"></a></h1>

画像に置き換えた場合の画像幅は、cssフォルダのstyle.cssの、
header #logo img {
の中にあるwidthの値で変更できます。

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

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

slick 公式サイト

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

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

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

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

フォントサイズ（rem）について

cssフォルダのstyle.cssで、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。

１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 14px;
２つ目は下の方にある、画面幅800px以上の端末向けで、以下。
font-size: 18px;

上記以外のフォントサイズは全て「rem」の単位がついていますが、これは、上のpxのサイズに「相対的」に出しているサイズになります。
例えば、800px未満の画面幅の時の基準サイズは「14px」なので、他の要素などで28pxで表示させたい場合は、
28px ÷ 14px = 2rem(28px)
となります。（cssの指定は、font-size: 2rem;　となる。）

10pxにしたい場合も同様です。この場合、
10px ÷ 14 = 0.7142...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。

または計算などせず、「見た目」でremの数値を決めてしまってもいいでしょう。
実際このテンプレートのremは、厳密に割り出したわけじゃなく、雰囲気(何となく適当)で指定しています。

その他、テンプレートのカラーやデザイン変更などは

cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。
cssの解説は、「/*」と「*/」の間にコメントとして入れています。「/*」と「*/」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「/*」と「*/」含めて丸ごと削除して下さい。

うまく編集できない場合は

サポート掲示板からご質問下さい。対応可能な範囲内でサポートしております。