HOME > 無料テンプレートの使用方法
無料テンプレートの使用方法
当サイトのテンプレートの使用方法について簡単にご説明させて頂きます。
より詳細な情報につきましては、関連リンクをご参照ください。
トップページと個別ページの違いについて
SEO対策上、トップページでは「サイトタイトル」をh1に、個別ページでは「個別ページのタイトル」をh1に指定することをおすすめします。この場合、個別ページ用とトップページ用のテンプレートを切り分ける必要が出てきますが、当サイトではトップページ用しか作成しておりません。
個別ページ用のテンプレートを作るといっても、サイトタイトルからh1をはずし、個別ページの見出し部分をh2からh1に変更してスタイルシートを調整するだけですので、簡単に作成することができます。
面倒な場合、個別ページでもトップページと同じテンプレートをそのまま使用しても特に問題はありませんが、検索エンジンフレンドリーなサイトを作成する場合、できるだけ個別ページ用とトップページ用のテンプレートを分けることをおすすめします。
関連ページ:
スマートフォンへ対応する方法
当サイトのテンプレートはスマートフォンには対応しておりませんが、レスポンシブウェブデザインを取り入れることにより、スマホに対応することができます。
スマホに対応する場合、一般的な手法としてはレスポンシブウェブデザインでfloatを解除し、ワンカラムのテンプレートにするのが一般的ですが、この場合、htmlソースに書かれている順序で上から表示されていきます。そのため、左サイドバーのテンプレートの場合、スマホで閲覧すると左サイドバーのメニュー部分がコンテンツ部分よりも上に表示されてしまうことがあります。
当サイトのテンプレートは、htmlソース上、コンテンツ部分をサイドバーよりも先に読み込ませるように作成していますので、サイドバーが上部にくることはありません。
このレスポンシブウェブデザインでスマホ対応へカスタマイズするには、以下のページをご参照ください。
関連ページ:
メタタグの記入方法
当サイトのテンプレートでは、デフォルトの状態でメタタグに「ページの説明」や「ページのキーワードA,B,C」などと記入しておりますので、この箇所を書き換えてご使用ください。書き換えずに使用した場合、上記の文字列がそのまま反映されてしまいますのでご注意ください。
特に必要ない場合は削除してしまっても問題ありませんが、空欄にするのではなく、メタタグごと削除するようにしてください。
関連ページ:
ホームページデザインの変更方法
ホームページのデザインを変更する際には、スタイルシートで「#000000」などのカラーコードを変更して指定します。ネット上で「Color Palette」などと検索すれば、調和のある色彩の組み合わせなどが公開されていますので、それらを参考にしてみるとよいでしょう。
また、テンプレートの大きさについては、「width」や「height」で幅や高さを変更することで調整できます。フォントの大きさに合わせ、1行の文字数が適当な範囲内に収まるように設定するとよいでしょう。
関連ページ:
- スタイルシートの作り方と書き方
- 文字のCSSを指定するcolorやfont-size
- 背景の指定をするCSS - background
- 領域の幅と高さを指定する widthとheight
- paddingとmarginの違い
- borderは要素の外枠を指定するCSS
- 行の高さや行間を指定する line-height
- 右サイドバーの幅は300pxが最適
- テンプレートのレイアウト構成について
テンプレート一覧
HOME >