今回はPHPで作成したWEBサイトに賢威のテンプレートを使用してみます。

PHPでWEBサービスを作成した際、自分でレイアウトのデザインまで行うのは最初はかなり厳しいものがあります。でもPHPで作るサービス内容によってはCMSなどを使う事ができない。そんな時にCSSフレームワークを使って、綺麗なサイトを作ってしまう。なんて事は結構あるはずです。

賢威はHTML+CSSがセットになったテンプレートなのですが、CSSフレームワークと同じ様に活用する事ができます。その上、SEO効果が高く、レスポンシブ対応されているという利点もあります。

馴染みが無いとちょっと難しく感じるかもしれませんが、実際は結構簡単にできてしまいますので、今回はPHPと賢威を組み合わせる方法についてご紹介します。

賢威HTML版を使って、普通のサイトを作成する時の例はこちらをご参照ください。

賢威HTML版はWEBサイト・サービスに非常に活用できるテンプレート

（始めに）注意しなければならない事

PHPと賢威を組み合わせる時に注意をしなければならないポイントがあります。賢威はSEO対策された良質なテンプレート（HTML+CSS）になります。CSS部分だけを使う事もできますが、SEO対策されたHTMLファイルもなるべく上手に活用した方が良いです。その方がSEO効果が損なわれませんので。

とはいえ、全てを理解しようとすると手が止まってしまうので、徐々にできる範囲で作り込んでいくスタイルでOKだと思います。本記事でも、手動で作ったPHPファイルに、賢威のCSSを適用させていく形で話を進めます。

準備

まずは以下の準備が必要です。

・PHPファイル（以下でサンプルを紹介します）

・賢威のテンプレート

・PHPの実行環境サーバ

これらの準備が整ったらいざPHPファイルに賢威を適用させてみましょう。

ちなみにPHPファイルは以下の様な簡単なものでOKです。

■PHPファイル

※ヒアドキュメントを使用してhello Worldを出しているだけです。

■ブラウザ実行結果（まだ賢威は適用していません）

PHPと賢威を組み合わせる！

HTMLファイルと賢威を組み合わせる方法については、本記事の冒頭でご紹介しておりますので、そちらを参照して下さい。

基本的には、それと全く同じ様な内容になります。

①サーバにPHPファイルをアップロード（ファイル名はindex.phpなどでＯＫです。）する。

①サーバに賢威テンプレートをアップロードする。

さて、PHPファイルを編集して、賢威のCSSを参照する様にしましょう。

【PHPファイルの編集①】基本設定

まずはPHPファイルを編集して、賢威のCSSを読み込みます。これでCSSを参照できる様になりました。次にbodyタグとheaderタグにの属性を賢威のサンプルHTMLに記載されている内容と同じ様に修正してみました。

以下がPHPファイルと実行結果です。

■PHPファイル

■ブラウザ実行結果

どうでしょうか？

かなり単純ですが、賢威のCSSが適用されている事が分かるかと思います。

本来、賢威のCSSを使うためには、他にも編集しなければならない箇所がありますが、まずはイメージだけでも掴んで下さい。

ただ、これだけだとつまらないので、もう少し手を加えてみましょう。

【PHPファイルの編集②】カレンダー

次はPHPファイルでカレンダーを作成してみましょう。

そのカレンダーに賢威のCSSを適用させてみたいと思います。

この辺から、実際にWEBサービスが作られるイメージが湧いてくると思います。

■PHPコードの参考

こちらのサイトのコードを参考にさせていただきました。

phpで簡単なカレンダーを作成する方法

※PHPでカレンダーを作った事がある方であれば一度は見た事があるとも言われる「raining」さんのサイトです^^

このコードを元にPHPのカレンダーを作成しました。

私の方で追加・編集した点として、PHPファイルの先頭部分でカレンダーの生成ロジックを記載しています。その他にHTML部分をarticleタグで囲み、news-itemクラスを付与しています。※news-itemクラスは賢威のbase.cssファイルにて定義されています。

■ブラウザ実行結果

カレンダーが表示されましたね。

ヘッダー部分は#fff（白背景）、カレンダータイトルにはH2タグを付けています。賢威のテンプレートを使って、PHPによるWEBサービスを作っていくイメージが何となく掴めたでしょうか。

【PHPファイルの編集③】2カラムにする

さらに、賢威のテンプレートを使って2カラムにする方法もご紹介しておきます。

今回は上記のカレンダーサイトをさらに編集して、mainコンテンツエリア（左）とサブコンテンツエリア（右）をの２カラムを作成してみます。mainコンテンツエリアには今まで通りカレンダーを表示して、サブコンテンツエリアでは月を羅列してみたいと思います。

賢威のテンプレートには既に2カラム用のCSSが用意されています。サンプルサイトが既に2カラムになっていますよね。なので2カラムの画面を作るのは非常に簡単です。

■PHPファイルの編集

まずはHTMLタグにclass=col2という属性を付けてあげます。※サンプルにも付いています。ちなみに、賢威の場合このHTMLタグでサイトのカラム数を設定するので、非常に重要な設定箇所です。

・HTMLタグの属性

そして、mainコンテンツエリアとサブコンテンツエリアの属性をそれぞれ以下の様にします。

・mainコンテンツエリア

・サブコンテンツエリア

※サブコンテンツエリアには月を羅列しておきます。

■ブラウザ実行結果

２カラムのサイトになりましたね。

この様に改良を重ねて、どんどんPHPによるサービスを作り込んでいく事ができます。

まとめ

今回はPHPと賢威とを組み合わせる方法についてご紹介しました。

文中でお伝えした通り、本来であればHTML部分は賢威のサンプルHTMLを基礎にして作成していった方がSEO効果が高くなります。レイアウトもずれるリスクが減ります。

なので、サンプルHTMLを参考にしながら、上手に使いこなせる様になりましょう。