CSSテンプレートの編集方法

商用向けCSSテンプレートpub001をサンプルに、ダウンロードから編集方法まで説明していきます。

実行環境は、
OS:Windows7
ブラウザ:Firefox9.0.1
エディタ:EmEditor
です。

STEP1:CSSテンプレートのダウンロード

商用サイト向けCSSテンプレートのページを開いて、「ダウンロード」のテキストをクリックします。

zip形式に圧縮されたファイルのダウンロード先が聞かれますので、「ファイルを保存する」を選択し、「OK」をクリックします。場合によっては、その次にダウンロード先を選択します。とりあえずはデスクトップなどわかりやすいところに保存しておいたほうが良いでしょう。

STEP2:ダウンロードファイルの解凍

ファイルを解凍します。解凍するにはソフトが必要です。Lhaplusがお勧めです。ダウンロードしたファイルを解凍ソフトにドラッグアンドドロップすると解凍されます。

ちなみに、Windows7であればダブルクリックするだけで解凍されたファイルが生成され、解凍ソフトは不要です。

元の圧縮されたzipファイルは今後不要になりますので、ゴミ箱に入れておいてください。

STEP3:解凍したファイルをブラウザで見てみる

まずは解凍されたファイルのindex.htmlファイルをブラウザで開いてみましょう。解凍されたフォルダを見てみると、

というようになっていますので、「src」のフォルダをクリックします。

というようになっていますので、「index.html」を右クリックして「プログラム」>「Internet Explorer」をクリックします。別にInternet Explorerでなくても構いません。私はFirefoxというブラウザを使用しています。

ちなみに、各フォルダ・ファイルですが、

「psd」フォルダ
Photoshopという画像編集ソフトで編集するためのpsdファイルが入っています。
「src」フォルダ
HTMLファイル(.html)、CSSファイル(.css)、JavaScriptファイル(.js)などホームページを公開するために必要なファイルが入っています。
readme.txt
作成者からの一言です。大したことは書いてないのですが、一応目を通しておいてください。

STEP4:CSSテンプレートの編集

今度はindex.htmlファイルをエディタで開いて編集してみましょう。

お手持ちのHTMLエディタからindex.htmlを開いてください。その際、CSSのテンプレートは「UTF-8」という文字コードで保存されているので、文字化けしてしまう場合は、エディタの文字コードをUTF-8にしてからindex.htmlファイルを開いてください。

1.headタグの編集

まずは、headタグ内を変更していきます。

上記の画像の、赤丸で数字が振ってあるところを編集します。

①はサイトの説明です。検索エンジンでも表示されるところであり、SEOでも重要な部分なので十分に考慮して内容を考えましょう。

②はサイトのキーワードです。サイトに関連するキーワードを入れます。

③はサイトのタイトルです。ブラウザのタブのところに表示されるだけでなく、検索エンジンでも表示されるところですので、サイト名だけでなくサイトのキーワードも絡めておくと効果的です。

編集すると以下のようになります。

2.ヘッダーの編集

次は、本文中のヘッダー部分を修正します。このCSSのテンプレートでは、サイト名とサイトの説明文を記述する箇所があります。

修正すると以下のようになります。

3.メニューの編集

メニューを編集してみます。index.htmlの24行目~33行目がメニュー部分になります。

修正すると以下のようになります。

ここで一旦index.htmlファイルを保存して、ブラウザを見てみると以下のように変更されているのがわかります。

このようにして、テンプレートを編集していってください。

編集をしていて、よくわからなことがありましたら、お問い合わせいただければアドバイスできるかと思います。お問い合わせについては以下のページをご参考ください。

テンプレートに関するお問い合わせについて

今回はここまでですが、時間があるときに公開手順などまでご説明できればと思います。

top

ホームページ作成に役立つコーナー