Sample Title
ここに説明を入れます。サンプルテキスト。
会社概要
| 見出し | ここに説明など入れて下さい。サンプルテキスト。 |
|---|---|
| 見出し | ここに説明など入れて下さい。サンプルテキスト。 |
| 見出し | ここに説明など入れて下さい。サンプルテキスト。 |
| 見出し | ここに説明など入れて下さい。サンプルテキスト。 |
| 所在地 | Google Mapで地図を埋め込みたい場合はマニュアルをご覧下さい。
|
2021年10月「以前」にテンプレートを利用した事のあるお客様へ
2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
今後しばらく新作テンプレートの手直しが入るかもしれません。
- モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
- floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。
- 2022年6月でMicrosoftのIEサポートが終了したのに伴い、弊社テンプレートもIE対応(バグ対応など)を終了しました。
当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグ、copyright、metaタグ、他の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>企業・ビジネスサイト向け 無料ホームページテンプレート tp_biz60</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、
<title>SAMPLE COMPANY</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© SAMPLE COMPANY All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="SAMPLE COMPANY"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（Font Awesomeの解説）
imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
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です。
「FAQ」ページで使っている開閉ブロックについて
汎用的な開閉ブロックなので、どこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"
2カラムで使う事もできます
Sample Title
ここに説明を入れます。サンプルテキスト。
Sample Title
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
２カラムを使う際の解説
まず、２カラムにしたいブロックの外枠として、c2ブロックを作ります。
その中に、mainブロックとsubブロックを入れて下さい。
ここのmainブロックというのは、classでつけた名前で、main要素とは異なります。（.mainとmainの違い。）
<div class="c2">
<div class="main"> ※ここにメインコンテンツの内容を入れます。 </div>
<div class="sub"> ※ここにサブコンテンツの内容を入れます。 </div>
</div>
画面幅が800px未満の小さな端末での閲覧時は
サブメニューが上で、メインコンテンツがその下に配置されます。順番を逆にしたい場合（メインコンテンツを上にしたい場合）、cssフォルダのstyle.cssの「.main」と「.sub」にある「order」の数字を入れ替えて下さい。
入れ替えた場合、大きな端末でも順番(左右ブロック)が入れ替わってしまうので、大きな端末だけは今のままがいいなら、style.cssの下の方にある、
@media screen and (min-width:800px) {
の中にある、
「.main」に「order: 2;」を、「.sub」に「order: 1;」を新規で追加して下さい。
小さな端末時にサブブロックなど任意の情報を非表示にして、開閉ブロック内に表示させる方法
現状のままだと、800px未満で見た際にサブメニューが結構場所をとるので、それを非表示にして代わりに開閉ブロック内に表示させる方法の紹介です。
既存のサブメニューをそのまま開閉ブロック内に表示させる事はできないので、手作業で別途用意します。
まず、html側の開閉ブロック内にある、
<div class="sh">
・・・
</div>
の中に、小さな端末時にのみ表示させたいサブブロック情報などをあらかじめ入力しておきます。
次に、小さな端末時で非表示にしたいサブブロック情報などに、
class="pc"
と指定しておきましょう。
既にclassばある場合は半角スペースで区切って追加します。
例：<div class="sub pc">
注意点ですが、sh内に追加する際、<div class="sub">ごと入れてしまうとレイアウトが崩れる可能性があるので、subは含めず中身だけ入れて下さい。
Menu
Menu
背景に色をつけたタイプ
<section>を<section class="bg1">にするとこのブロックのように背景に色がつきます。
Sample Title
ここに説明を入れます。サンプルテキスト。
Sample Title
ここに説明を入れます。サンプルテキスト。
Sample Title
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
トップページの動画について
無料で動画をダウンロードできるサイトのご紹介
高品質な動画が無料でダウンロードできるvideo ACさん。
お手持ちの動画がない場合におすすめです。
動画を入れ替える場合
動画を入れ替える場合、ロゴの配置バランスが崩れると思うので、その場合はcssフォルダのstyle.cssの
.home header #logo {
の中にある、
padding-top
の数値を調整してみて下さい。ブレイクポイントごとに設定がある場合があるのでチェックをお忘れなく。
固定画像に入れ替えたい場合
html側の<video src〜〜>の１行を削除し、代わりにimgタグを入れて下さい。
この場合も画像サイズによってロゴの配置バランスが崩れるかもしれないので、その際は上で解説しているpadding-topを調整して下さい。
地球の動画のaep（After Effects）ファイルも梱包しています
※ここで解説していない部分についてのaepファイルのサポートは行っておりませんのであらかじめご了承下さい。
「_aep」フォルダにaepファイルと地球のpng画像を梱包していますので、After Effectsを使える場合は直接編集してご利用頂く事が可能です。
タイムラインパネルには、以下の３つレイヤーがあります。
- 「bg」…地球を除く背景部分のモヤモヤ映像。
- 「アクセント」…地球が一瞬拡大して現れるアクセント用映像。
- 「地球」…回る地球映像。
それぞれのレイヤーを選択した状態で、「エフェクトコントロールパネル」を開くと、設定している色など含めエフェクトを変更できます。
プロジェクトパネルの「プリコンポジション１」をダブルクリックすると、地球のベースを編集できます。（ドット具合や色の変更。）２枚あるglobe.pngのレイヤーにそれぞれ、ドット(エフェクトで)と枠線(レイヤースタイルで)が設定されています。
地球のないシンプルタイプも梱包しました。
このタイプのトップページサンプルはindex_simple.htmlです。
既存のトップページ（index.html）のファイル名を「mainimg_simple.mp4」に書き換えればOKです。
aepが編集できる場合は、「bg」レイヤーのみでレンダリングしたものがこれになります。エフェクトコントロールパネルで色調整など可能です。