WEBサイト用のテンプレート「賢威」と言えば、ワードプレス版が非常に有名です。実際にワードプレス版を使用している方が大半だと思います。しかし、HTML版もかなり活用効果が高いのです！
特に、私の様にWEBサービスを開発している人間にとっては、ワードプレスでは実現できないサービスは結構あるなと感じてしまいます。
そんな時は、自分でサイトを作っていかなければなりません。Dreamweaverなどのソフトもありますが、サーバサイドのシステムの作り込みをしようと思うと、ちょっと難しい事もあります。
そんな時は、Bootstrap等のCSSのフレームワークを使ってサイトを設計する事も多いのですが、フレームワークは意外と使いにくい事も多いし、後からのメンテナンスも結構しんどかったりします。。。
でも「賢威」のHTML版の使い方を知っていると、これがなかなか役に立ちます！
コンテンツ
賢威のHTML版について
賢威はHTML版・ワードプレス版の２つのテンプレートが用意されています。冒頭でもお伝えした通り、人気があるのはワードプレス版の方ですが、実はHTML版もかなり使えるのです！
CSSのフレームワークを使うのと同じように使いこなせますので、使い方さえ分かれば便利です。
■賢威のイメージ
※現在は賢威7が最新ですが、8のbeta版も使えます。これからどんどんアップデートされるはずです。
ここからHTML版について少し詳しくご紹介していきます。
賢威HTML版を使うメリット
このページをご覧になっているという事は、賢威を使うメリットは既にご存じかもしれませんが、改めて賢威HTML版を使うメリットを確認しておきましょう。
・CSSフレームワークと同じように使える
・賢威のダウンロードサイトでサンプルHTMLをダウンロードする事ができる
・SEO効果が高い
・レスポンシブレイアウト対応している
・サポートページが充実しているので、後々のメンテが自分でもできる
賢威のHTML版は必要最低限の機能になっていて分かりやすく、メンテナンスもしやすいです。また、メリットにも記載している通り賢威のダウンロードサイトではちょっとしたサンプルサイトまで作ってくれたりするので、結構便利です。（実際に使う時には、かなり内容を削る事になると思いますが^^;）
今回は賢威のHTML版を使う時の流れについてご紹介します。
WEBサイトの設計
賢威を使う前に、まずは基本的な設計を完了させておきましょう。WEBサイトを作成する場合には、サイトの画面設計をしなければなりません。
一般的にはWEBデザイナーの方が設計してくれますが、個人サイトであれば、自分で設計しても問題ありません。というか大抵の方が自分で設計をしていると思います。
個人レベルであっても、設計の時点でしっかりと決めておかなければならないのは、
・CMSを使ってブログ形式のサイトを作るのか
・スタンダードなHTMLを使用したサイトを作るのか
という部分です。
どちらの形式のサイトにするかで、運用方法が全然異なるからです。
PHPやRuby等を使ってWEBサービスを作りたい！という場合には、後者のスタンダードなHTMLを使用するのが一般的です。実はCMS形式だとサービスが実現できない事もあるのです。
しかし、１からサイトをデザインしていくのは結構大変。。。という場合にCSSのフレームワークを使用すると思うのですが、その選択肢の一つとして賢威を検討してみると良いです。
メリットの部分でもお伝えした様に、（サンプルのHTMLを参考にすれば）SEO効果が高く、レスポンシブ対応がされているので、サイト作成・運用の作業効率を一気に高める事ができます。
賢威を使う
では実際に賢威を使う流れを解説していきます。
賢威HTML版をダウンロード
まずは賢威HTML版をダウンロードしましょう。その流れをご紹介します。
賢威のサポートページにログイン
公式のサポートページにログインします。
次にページ中の「賢威（ver）テンプレートをダウンロード」を押します。
■テンプレートのダウンロード画面
賢威のワードプレス版・HTML版がありますので、HTML版を選択します。
■HTML版・ワードプレス版の選択画面
対象テンプレートをダウンロード
現在は５つのテンプレート（スタンダード・ビューティ・クール・プリティ・コーポレート）の中から選択する事ができます。
自分が作成したいサイトのイメージに一番マッチしたものを選択しましょう。細かい部分は後から変更する事ができます。
さらに、テンプレートをダウンロードする場合は、
・自分で編集をしてダウンロード
・参考ソースをダウンロード（既にあるサンプル）
の２つの方法から選択する事ができます。
始めての場合は参考ソースをダウンロードすると、サイトを作るイメージが付きやすいです。
※ちなみに、今回はクール版のテンプレートで参考ソースありのものをダウンロードする事にしました。
サイトにテンプレートを適用してカスタマイズ
テンプレートをダウンロードしたら、サーバにテンプレートをアップロードして実際にテンプレートを適用させていきます。その流れをご紹介します。
FTPを使ってアップロード
FTPツールを使ってサイトのテンプレートをアップロードします。
私の様にPaizaCloudなどのクラウドIDEを使っている場合は、クラウドIDE専用のFTPツールがあると思いますので、ツールを使ってアップロードしましょう。
データがアップロードされている事を確認してみます。
WEBサイトに必要なファイルが一通り揃っている事がよく分かります。
ここまで丁寧にサンプルが準備されているなんて、さすが賢威です！これらのファイルを全て手で作成しようと思ったらかなり大変です。
■アップロードしたファイルのイメージ
※index.phpだけは手動で元々作成していたファイルです。
画面を確認
アップロードしたら、WEBサイトを確認してみましょう。
■賢威のHTMLによるWEBサイト（クール版・参考ソースあり）
サンプルデータがアップロードされてWEBサイトが表示された事が分かります。
カスタマイズ
サンプルデータをアップロードした前提でこの先は話を進めます。
アップロードしたら、自分のサイト用のコンテンツを詰め込んでいきます。
「お問合せ」や「個別ページ」など、サンプルのページが既に入っていますが、これらを独自のコンテンツに全て入れ替えていきます。当然元々用意されているページを流用して編集してもＯＫです。
また、運用開始時点で不要なページは削除してＯＫです。
タグの操作ができる様であれば、HTMLの中身も見てみましょう。既に様々なidやclassが使われていると思います。
例えば、以下の例を見てみて下さい。
■賢威のHTML例（ヘッダー部分）
■賢威のCSS例（ヘッダー部分）
この場合はsite-headerというclassをCSSで定義して、site-headerをHTMLの中でclass属性として使用しています。これらのHTMLとCSSのスタイルは全て紐づいているので、必要な部分から編集する様にしましょう。
自分でヘッダーのHTMLを用意したとしても、site-headerを使えば同じようなスタイリングが可能になるので非常に便利です。まさにCSSフレームワークと同じような使い方ができます。
この様にして、必要な部分だけを自分で編集できる様になるとどんどんWEBページを改良できます。
以下はグローバルナビゲーション部分のHTMLタグを削除（コメントアウト）した場合のWEB画面です。
■賢威のHTMLによるWEBサイト（グローバルナビゲーション部分を削除）
※WEB画面上でもグローバルナビゲーションが削除されている事が分かりますね。
参考ソースは残しておくと便利
参考ソースをそのまま変更してしまうと、元のデータに戻したいと思ったら、またテンプレートをダウンロードしてくる必要があります。サンプルデータは名称を変更して同じディレクトリに残しておいた方が便利です。「index.html」⇒「index_sample.html」などと名称を変更して、残しておくと後から確認をする事ができます。もしくは、不要な部分だけコメントアウトすれば良いと思います。実際にサイトを公開する時には必要なものだけをアップすればＯＫです。
※コメントアウトは「<!–」と「–>」で囲めば良いです。
ちなみに、トップページから呼ばれない様に設定したディレクトリはそのままでも大丈夫です。参照する事がありませんので。
また、CSSファイルだけは削除・名称変更しないように要注意です。このCSSファイルを消してしまうとせっかく綺麗にデザインされた画面が表示されない状態になります。逆にCSSの操作方法をよく理解されている方は、このCSSの中身を編集して、色やレイアウトを変更しても良いと思います。
運用開始後のメンテナンス
運用が開始したら、どんどん内容を編集したり、コンテンツページを詰め込んでいきましょう。
PHPやRubyでサイトを構築する場合は、少し戸惑う部分もあるかもしれませんが、いじっている間に使い方が分かってくるはずです。
どんどんサイトを成長させていきましょう。
まとめ
今回は賢威HTML版の基本的な使い方と、WEBサービスを作る時に使ってみると便利だよ。という事についてお伝えしました。
自分でWEBサービスを作り込むうちに、どんどんHTMLも改変していくかもしれませんが、その時は改めてテンプレートを選択し直しても全然OKです。
賢威はどんどんバージョンＵＰもしていきますので、随時最新のバージョンにアップデートしていっても良いと思います。もちろん、気にいっている場合は無理に変更をする必要はありません。
