カスタマイズ方法

html,cssの記述方法についてhtml,cssの記述方法について

htmlのSEOに向けてのマークアップについて

htmlコードのキャプチャ画像

  • このサイトのタイトルです。サイト名に少しSEOを意識キーワードを埋め込みましょう。
    Ex) 無料 ホームページテンプレート デザインなう
  • 検索エンジンで検索した際にヒットするキーワードです。
    キーワードとキーワードの間は半角コンマで区切ってください。
    Ex) 東京 美容室,東京 ヘアースタイル,美容室,ヘアースタイル,新宿 美容室　など
  • 検索エンジンで検索した際にホームページの紹介文が表示されます。
    紹介文にもタイトル同様、キーワードを盛り込みましょう。
    Ex) 東京 新宿でおしゃれなヘアスタイルにしたいなら 美容室 ヘアカットサロン

cssの記述について

デザインなうが配布しているテンプレートでは、事前によく使う要素をクラスとしてご用意しています。
一部は多少の専門的な知識が必要になりますが、少し理解していただくだけで簡単にご利用いただけるものばかりです。
share/css/set/typography.css
.txt01
フォントサイズを標準より小さくします。注釈、備考等の補助文章に。
サンプルテキストです。サンプルテキストです。
.txt02
文字に着色します。目立たせたいポイントなどに。 サンプルテキストです。サンプルテキストです。
.txt03
文字を大きくします。 サンプルテキストです。サンプルテキストです。
.txtS
フォントサイズを小さく表示し、文字のスペースに少しゆとりを持たせます。文章部分などでご利用ください。 サンプルテキストです。サンプルテキストです。
.txtColGold
文字をゴールドに着色します。
サンプルテキストです。サンプルテキストです。
.txtColRed
文字を赤に着色します。
サンプルテキストです。サンプルテキストです。
.txtColGreen
文字を赤に着色します。
サンプルテキストです。サンプルテキストです。
.txtColBlue
文字を赤に着色します。
サンプルテキストです。サンプルテキストです。
.txtColBrown
文字を赤に着色します。
サンプルテキストです。サンプルテキストです。
.lHeight1_65
行間を文字の1.65倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.lHeight1_7
行間を文字の1.7倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.lHeight1_75
行間を文字の1.75倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.lHeight1_8
行間を文字の1.8倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.lHeight1_9
行間を文字の1.9倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.lHeight2
行間を文字の2倍分とります。
サンプルテキストです。
サンプルテキストです。
サンプルテキストです。
.b
文字を太字にします
サンプルテキストです。サンプルテキストです。
.i
文字を斜体にします
サンプルテキストです。サンプルテキストです。
share/css/set/utility.css
.mB0
下にスペース（マージン）を指定している場合値を0にします。
.mB5
下にスペース（マージン）を5px分とります。
.mB10
下にスペース（マージン）を10px分とります。
.mB15
下にスペース（マージン）を15px分とります。
.mB20
下にスペース（マージン）を20px分とります。
.mB30
下にスペース（マージン）を30px分とります。
※同様にmT（上部）、mL（左部）、mR（右部）も用意しています。
share/css/set/utility.css
.pB0
下にスペース（パディング）を指定している場合値を0にします。
.pB5
下にスペース（パディング）を5px分とります。
.pB10
下にスペース（パディング）を10px分とります。
.pB15
下にスペース（パディング）を15px分とります。
.pB20
下にスペース（パディング）を20px分とります。
.pB30
下にスペース（パディング）を30px分とります。
※同様にpT（上部）、pL（左部）、pR（右部）も用意しています。
.clear
フロートしているコンテンツをクリアします。
参考ページ
.imgFrame
イメージなどに使用することで額縁の様な処理が可能です。
.fL
コンテンツを左に寄せて配置します
.fR
コンテンツを右に寄せて配置します
.tL
行揃えの位置を左寄せにします
サンプルテキストです。サンプルテキストです。
.tC
行揃えの位置を中央寄せにします
サンプルテキストです。サンプルテキストです。
.tR
行揃えの位置を右寄せにします
サンプルテキストです。サンプルテキストです。
a.transparent img
aタグに指定することで中に含まれた画像をホバーしたときにエフェクトがかかります。
a.innerBorderWh img
aタグに指定することで中に含まれた画像をホバーしたときに画像の内側に白いボーダーを引きます。
a.innerBorderYellow img
aタグに指定することで中に含まれた画像をホバーしたときに画像の内側に黄色いボーダーを引きます。
a.innerBorder img
aタグに指定することで中に含まれた画像をホバーしたときに画像の内側にグレーのボーダーを引きます。

ページの増やし方についてページの増やし方について

テンプレートフォルダの構成について

readme.txt
ファイルについての諸情報が記述された文章です。
まずこのファイルをお読みになってからご利用ください。
[index]
トップページに関するフォルダです。
中には画像のフォルダ,cssのフォルダが含まれます。
[sample]
サンプルページに関するフォルダです。
中には画像のフォルダ,cssのフォルダが含まれます。
[share]
テンプレート内でページに関係なく使用するファイルのフォルダです。
index.html
トップページのファイルです。 ファイルの名前は変えずご利用ください。
sample.html
サンプルページのファイルです。 ページを増やす時はこのファイルをコピーしてファイルを複製してください。

ページの増やし方

  • 上記のファイルのsample.htmlと[sample]フォルダを複製して、 作成したいページの名前をつけます。ここでは会社概要のページを作成するということで“about”というファイル名を作成します。
  • まず、複製したabout.htmlを開き
    <link href="sample/css/index.css" rel="stylesheet" type="text/css" media="all" />を以下の様に変更します。 <link href="about/css/index.css" rel="stylesheet" type="text/css" media="all" /> に変更します。こうすることで、aboutページ用のcssファイルを読み込む設定を行います。
  • about.cssのファイルの調整です。about用の独自のレイアウトがあればこのファイルに書き込むことで他のファイルに影響することなく記述することが可能です。なお、調整する際は、@charset "utf-8" の部分を消さずにご利用ください。文字化けを起こす可能性があります。
  • ベースとなるsample.htmlにはよく使うであると予測されるレイアウトをすでに記述してあります。
    必要なレイアウトを残して、いらないコードを削除し、適性文章を調整してご利用ください。
    また、ページの下の方には「クラスサンプル」という項目があります。これは見出しの装飾を変えたい場合などに、デザインなうがあらかじめ作ったクラスに変えるためのフォーマットです。数字を連番でクラスファイルを作成しているため、数字を変えると装飾を変えることが可能です。
  • html,cssの記述方法について
  • ページの増やし方

デザインなう ページの先頭へ