ビジネス向けシンプルホームページテンプレート No.001 ご利用マニュアル

ビジネス向けシンプルホームページテンプレート No.001 に関する使い方の説明をまとめています。お使いになる時に役立ててください。

基本的な使い方などの説明、アドバイスになりますので、カスタマイズにつきましてはご自身の判断で行ってください。

【デモ】 ビジネス向けシンプルホームページテンプレート No.001

文字コードについて

当サイトで配布しているホームページテンプレートは全てUTF-8で制作されていますのでご注意ください。

Shift_JISの場合、文字化けしてしまう場合がありますのでご注意ください。

全体的な調整

このテンプレートはstyle.cssに記載されている「color: #1e8ac8;」や「background: #1e8ac8;」を変更することによって全体的なサイトの雰囲気を変えることができます。

レイアウト調整のブレイクポイントは768pxになります。

レイアウト について

デモ画面にあるレイアウトサンプルについてご説明します。

基本のフォントサイズは16pxになります。

画像やボタンには薄っすらとシャドウが入っています。

メインコンテンツに入れる画像に関しては大きな画像でも横幅最大450pxに調整されパソコンでは中央に表示されます。

見出しタグに関しては通常のテキストサイズよりも若干大きく、太めにしてあります。下線が引いており本文と区切り読みやすいように調整しています。

画像とテキストを横並びにすることもできます。下のソースコードでは右に画像を置く設定(photo right 部分)されていますが「left」にすることで左に画像を置くことができます。

画像とテキストを横並びにしたい場合は下記のように記述します。スマートフォンでは1列に並びます。ソースコードでは3列並びになるように設定してます。1列から4列まで並べることができます。

例えば4列にしたい場合は「column3」を「column2」に変更し「column2」のDIVタグを1つ削除すると2列になります。4列にしたい場合は「column3」を「column4」に変更し「column4」のDIVタグを1つ増やすと4列になります。

リンクに関してはいくつか用意してあります。

通常のリンクは以下になります。リンクホバーすると下線が消えるようになっています。

リンクボタンは2種類あります。下記はテキスト数に応じて横に広がるボタン。

次に大きなボタン。短いテキストでも横いっぱいに広がるリンクボタンになります。

リンクをいくつか置きたい場合はリストタグを使ったリンクも設置することができます。

少し他のコンテンツと独立させて注目させたい場合に役立つHTMLも用意しています。背景にうっすらグレーをしき他のコンテンツと完全に区切ることができます。リンクボタンなどを置くこともできます。

基本的なレイアウトの使い方は以上になりますが個別の記事で小技なども追加できるようにしていきます。

注意事項

ココカラで配布しているテンプレートは制作会社でも使用できる商用利用可能な無料ホームページテンプレートです。利用報告なども特に必要ありません。当サイトで配布するホームページテンプレートは全て利用規約に基づきます。必ず利用規約に同意の上ご利用ください。

テンプレート内にある当サイトへのリンクは外さないようにお願い致します。リンクを外したい場合は「著作権表記削除サービス」をご確認ください。