マニュアル
ビジネス向けシンプルホームページテンプレート No.001 に関する使い方の説明をまとめています。お使いになる時に役立ててください。
基本的な使い方などの説明、アドバイスになりますので、カスタマイズにつきましてはご自身の判断で行ってください。
文字コードについて
当サイトで配布しているホームページテンプレートは全てUTF-8で制作されていますのでご注意ください。
Shift_JISの場合、文字化けしてしまう場合がありますのでご注意ください。
全体的な調整
このテンプレートはstyle.cssに記載されている「color: #1e8ac8;」や「background: #1e8ac8;」を変更することによって全体的なサイトの雰囲気を変えることができます。
レイアウト調整のブレイクポイントは768pxになります。
レイアウト について
デモ画面にあるレイアウトサンプルについてご説明します。
基本のフォントサイズは16pxになります。
pタグは文字などを入れるブロック要素です。
画像やボタンには薄っすらとシャドウが入っています。
メインコンテンツに入れる画像に関しては大きな画像でも横幅最大450pxに調整されパソコンでは中央に表示されます。
見出しタグに関しては通常のテキストサイズよりも若干大きく、太めにしてあります。下線が引いており本文と区切り読みやすいように調整しています。
見出したで文字を区切りながら読みやすく…
画像とテキストを横並びにすることもできます。下のソースコードでは右に画像を置く設定（photo right 部分）されていますが「left」にすることで左に画像を置くことができます。
見出し
テキストタグが入ります。
画像とテキストを横並びにしたい場合は下記のように記述します。スマートフォンでは1列に並びます。ソースコードでは3列並びになるように設定してます。1列から4列まで並べることができます。
例えば4列にしたい場合は「column3」を「column2」に変更し「column2」のDIVタグを1つ削除すると2列になります。4列にしたい場合は「column3」を「column4」に変更し「column4」のDIVタグを1つ増やすと4列になります。
ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。
ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。
ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。ここにサービスの説明が入ります。
リンクに関してはいくつか用意してあります。
通常のリンクは以下になります。リンクホバーすると下線が消えるようになっています。
通常のテキストリンクは青いアンダーラインでリンクホバーすると下線が消えます。
リンクボタンは2種類あります。下記はテキスト数に応じて横に広がるボタン。
次に大きなボタン。短いテキストでも横いっぱいに広がるリンクボタンになります。
リンクをいくつか置きたい場合はリストタグを使ったリンクも設置することができます。
少し他のコンテンツと独立させて注目させたい場合に役立つHTMLも用意しています。背景にうっすらグレーをしき他のコンテンツと完全に区切ることができます。リンクボタンなどを置くこともできます。
基本的なレイアウトの使い方は以上になりますが個別の記事で小技なども追加できるようにしていきます。