SAMPLE COMPANY

会社概要

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。

まず、htmlソースが見れる状態にして、
<title>企業・ビジネス向け シンプル無料ホームページテンプレート tp_biz62</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、
<title>SAMPLE COMPANY</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。

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

metaタグを変更しましょう。

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

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

ロゴを変更しましょう。

ロゴはhtml側に直接テキストで記載されていますので、書き換えて下さい。
ロゴを画像にしたい場合は、
<h1 id="logo"><a href="index.html">SAMPLE COMPANY</a></h1>
を、
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="SAMPLE COMPANY"></a></h1>
のようにすればOKです。

アイコン画像について（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業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

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

「SERVICE」メニューにはドロップダウンメニューが設定されています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

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フォルダのslide.cssにスライドショーのスタイル設定があります。

10:8のアスペクト比率の背景画像をレスポンシブ化しています

サンプルテンプレートでは、10:8の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、表示されない部分が出てきますので、10:8以外の比率の画像を全部表示させたければ以下を調整して下さい。

cssフォルダのslide.cssの、
#mainimg {
の中にある、
padding-top: 80%;
を調整します。80というのは、8÷10=0.8の事です。
もし、2:1の画像を使いたければ、1÷2=0.5
padding-top: 50%;
と書き直せばOKです。

スライドショー上のテキストについて

直接html側にテキストとして入力していますので自由に入れ替えて下さい。

スライドショー画像について

当サイトで用意したものなのでそのままご利用・編集頂いて問題ございません。
写真が配置されているものについては、AI出力によるものです。こちらもそのままご利用頂いても構いません。

画像を入れ替えたい場合

メイン画像がイラスト（1.png、2.png、3.png）か、写真（1.jpg、2.jpg、3.jpg）かによってslide.cssで指定している画像の拡張子が異なります。
ご自身がどちらの画像を使うかによってここを編集して下さい。

画像は容量が軽くなるようにできるだけ圧縮して下さい。写真の場合はjpgを推奨します。
容量が大きいと初動がガタつきます。

固定画像にしたい場合

cssフォルダのslide.cssを開き、冒頭の
/*トップページのスライドショーのキーフレーム設定」
のブロックを全て削除。

次に、index.htmlから使うブロックだけを残してあとは削除すればOKです。

速度や枚数などの調整

cssフォルダのslide.cssで行って下さい。解説も入っています。
スライドショーに関する詳しい使い方はこちら。（「imgタグを使っていないタイプ」をご参照下さい）

テキスト専用のフェードイン効果について

class="fade-in-text"を指定すると、この見出しのようなフェードイン効果になります。
アニメーションの速度などの調整は、cssフォルダのstyle.cssから「.char」でテキスト検索をかけて下さい。説明もコメントで書いています。また、jsフォルダのmain.js内にも設定箇所があります。
お好みで調整して下さい。

2カラムにしたい場合

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

まず２カラムを囲むブロックとして、
<main>
を、
<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_c3.htmlがサンプルなのでそちらでご確認下さい。

<main class="column">

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

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

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

</div>