HOME > SEOの基礎知識 > コンテンツSEOのための簡単WEBサイトテンプレート（PHP）

コンテンツSEOのための簡単WEBサイトテンプレート（PHP）

SEOの基礎知識

コンテンツを設計し、コンテンツを制作する上で重要なポイントを押さえたWEBサイトテンプレートを配布しています。
可変のレスポンシブ対応、設定ファイルで管理出来る設計、Jqueryなどを追加しやすいHTML記述などなど、静的に制作すると手間のかかりそうなことを出来る限り簡略化するための仕様にしています。
バージョンは随時アップ致しますので、各種SNSでチェックしてみて下さい。
ご意見やご感想、ご希望などがありましたら遠慮なくご連絡下さい。
SEOとは、「Search Engine Marketing」の略であり、
「検索エンジン最適化」という意味があります。
簡単なような難しいような・・・一つ一つ紐解いていきたいと思います。
初心者でもすぐに理解出来るPHPでつくったWEBサイトテンプレート

コンテンツSEOのための簡単WEBサイトテンプレート（PHP）

簡単WEBサイトテンプレート（PHP）について

当テンプレートは、コンテンツを制作することに注力するために制作したPHPを使ったテンプレートです。
静的なサイトを制作する時には手間を省いた構築と運用を実現致します。
以下のような特徴があります。

  • PHPと言っても動的なプログラムは組み入れてないので、HTMLやCSSが理解出来る方なら十分に触って頂けます。
  • WEBサイトのフレームを構築しているテンプレートですので、コンテンツの構成を設計して頂ければすぐにでもサイトの制作にかかって頂けます。
  • HTML構造においてもSEOに強いとされる構造を意識しています。クローラーのクローリングにおいてマイナス要素を省き重要箇所を際立たせた構造です。
  • 可変式のレスポンシブ対応です。1枚のHTMLファイルにスマートフォン、タブレット、PC用のCSSを読み込ませているので、端末ごとのCSS修正が簡単です。
  • 読み込みファイルを独自で設定して頂くことや、コンテンツの区切りなどなど、簡単に拡張して頂くことが出来ます。

兎に角、手間が掛かりそうなことを省くために考えたPHPベースのWEBサイトテンプレートです。
昨今ではWordpressやMovabley typeなどがあり、WEBサイト構築のテンプレート化は進みましたが、データベースを利用しなければいけないことやテンプレートを制作すると相応の時間やコストがかかることなどがあります。
テスト的なサイトを構築するにも最低限の環境が必要になるため、もっと手軽にテストが出来たり、まずは運用までの時間を短縮することを前提に考えて制作しています。

更新履歴やその他注意点について
更新履歴

2020年11月9日、「 phptemp_180606.zip 」から「 phptemp_201109.zip 」への変更点。

  • jsでのページ内スクロールを廃止、CSSで制御。
    canonicalやnoindexやnofollowタグを追記。
    コンテンツ部分にarticleやsectionタグを利用。

2018年6月6日、「 phptemp_180525.zip 」から「 phptemp_180606.zip 」への変更点。

2018年5月25日、「 phptemp_171030.zip 」から「 phptemp_180525.zip 」への変更点。

2017年10月30日、「 phptemp_160202.zip 」から「 phptemp_171030.zip 」への変更点。

  • 主な変更点は読み込ませるjQueryファイルのバージョンを3のバージョンにしたことです。
    他、トップページのメイン画像部分のhtmlとcssの若干の修正。

2016年2月1日、「 phptemp_151020.zip 」から「 phptemp_160202.zip 」への変更点。

2015年10月21日、一部のファイルを修正

  • 「 phptemp_151013.zip 」の” /cate_04/cate_04_01/index.php ”ページ内のパスを修正。

2015年10月20日、「 phptemp_151013.zip 」から「 phptemp_151020.zip 」への変更点。

  • 全てのページに仮コンテンツを追加。
    装飾例としてご覧下さい。
  • 仮コンテンツ用の画像を img ディレクトリに追加。
  • CSSファイルを追加（ top.css 、 content.css の PC 、スマホ、タブレットの 3 種。 ）
  • CSSファイル” main.css （ 3 種）”と” foot.css （ 3 種）”に新規装飾を追記と、” #cen ”の若干の修正。
過去版について

過去版のファイル一式はそのまま残していますが、本ページに掲載している情報は基本的に最新版だとお考え下さい。
ですので、本ページに記載しているファイル情報などは最新版を記載していますので、何卒ご注意ください。

本テンプレートのバージョンは”版”と呼称しています。そして、ファイル名で版を判別しています。
ファイル名は「 phptemp_151020.zip 」という形で半角英字と半角数字で構成しています。
半角英字は判別要素ではありません。
半角数字を版の判別要素としています。
この場合” 15 ”は” 2015年”の” 15 ”、” 1020 ”は” 10月20日 ”の” 1020 ”です。
これはファイルをアップした日を表していますので、この数字の日付で新旧をご確認下さい。

テンプレートファイルのダウンロードとサンプル
ダウンロード

以下のリンクからダウンロードをお願い致します。

最新版 : phptemp_201109.zip
phptemp_180606.zip
phptemp_180525.zip
phptemp_171030.zip
phptemp_160202.zip
phptemp_151020.zip
phptemp_151013.zip
jQuery組み込み版

jQuery組み込み版については、当サイト内のコラムで解説しているため、コラムページにリンクしています。
それぞれ、テンプレートのユーザーインターフェイスやユーザーエクスペリエンスの向上を目的にしたjQueryを組み込んでいます。
jQueryを使わないJavaScriptやCSS3を使った小技も含めています。

phptemp_171030.zipにStretchy.jsを設置した版
phptemp_171030.zipにReadmore.jsを設置した版
phptemp_171030.zipにSuperfishを設置した版
phptemp_171030.zipにjquery-tubularを設置した版
phptemp_171030.zipにTabsletを設置した版
phptemp_160202.zipにPointy Sliderを設置した版
phptemp_160202.zipにt.jsを設置した版
phptemp_160202.zipにSlidebarsを設置した版
phptemp_160202.zipにMaterial Design Hierarchical Displayを設置した版
phptemp_160202.zipにjqFloat.jsを設置した版
phptemp_160202.zipにOwl Carouselを設置した版
phptemp_160202.zipにIntro.jsを設置した版
phptemp_160202.zipにAnimsitionを設置した版
phptemp_160202.zipにvTickerを設置した版
phptemp_160202.zipに開閉によってアイコンを切り替える「アコーディオンメニュー」を設置した版
phptemp_160202.zipにChardin.jsを設置した版
phptemp_160202.zipにREMODALを設置した版
phptemp_160202.zipにPhotopile JSを設置した版
phptemp_160202.zipにTooltipsterを設置した版
phptemp_160202.zipにGalleriaを設置した版
phptemp_160202.zipにCreative Gooey Effectsを設置した版
phptemp_160202.zipにtextillate.jsを設置した版
phptemp_160202.zipにSlider Proを設置した版
phptemp_160202.zipにFlexslider2を設置した版
phptemp_160202.zipにLazy Loadを設置した版
phptemp_160202.zipにMasonryを設置した版
phptemp_160202.zipにmatchHeightを設置した版
phptemp_160202.zipにSIDRを設置した版
phptemp_160202.zipにResponsive drop-down navigationを設置した版
phptemp_151020.zipにCSS3 Fullscreen Slideshowを組み込んだ版
phptemp_151020.zipにSlickを組み込んだ版
phptemp_151020.zipにbxSliderを組み込んだ版
phptemp_151020.zipにAnimenuを組み込んだ版
phptemp_151020.zipにFit Sidebarを組み込んだ版
phptemp_151020.zipにSlickNavを組み込んだ版
phptemp_151020.zipにScrollMEを組み込んだ版
phptemp_151020.zipにGlide.jsを組み込んだ版
その他チップスを組み込み版

その他チップスを組み込み版は、jQuery以外でUIやUXが良くなるであろうチップス的な要素を組み入れています。
jQueryほど目立たないことも多く、玄人向けかもしれません。
細部に拘りたい方向けかもしれませんが、知って損はしない内容でお送りしています。

phptemp_171030.zipにAOS（Animate On Scroll Library）を設置した版
phptemp_amp_160308.zipのAMP HTMLを修正したバージョン
phptemp_spmenu_160706.zipにHeadhesive.jsを組み込んだ版
phptemp_160202.zipにリストの並べ方を変えることが出来る「View Mode Switch」を組み込んだ版
phptemp_160202.zipにシェアボタンを簡単設置出来るフレームワーク「RRSSB」を組み込んだ版
phptemp_160202.zipにスマホ表示の時にグローバルメニューを横スクロールにするCSS装飾を組み込んだ版
phptemp_160202.zipにWEBアイコンフォント「Font Awesome」を組み込んだ版
phptemp_160202.zipにAMP HTMLを設置したアップデート版
phptemp_160202.zipにAMP HTMLを設置した版
phptemp_160202.zipにOGPやTwitterを組み込んだ版
phptemp_160202.zipにNoto sans japaneseを組み込んだ版
phptemp_160202.zipにGoogle Fontsを組み込んだ版
サンプルとファイル展開

サンプルページを設置致しました。

※パスを変更しています。
※サンプルページにはメタタグに"noindex"、"nofollow"を挿入しています。

コマンドで解凍するようなファイルでもないので、 ".zip" でファイルをアップしています。
ダウンロードして頂き、ファイルを展開して頂ければファイル一式が展開されます。
以下のようなファイル展開になります。

/_set/
　---　_init.inc : 設定ファイル
　---　analytics.php : 読込ファイル
　---　css.php : 読込ファイル
　---　foot.php : 読込ファイル
　---　head.php : 読込ファイル
　---　index.html : 空ファイル
　---　js.php : 読込ファイル
　---　pagetop.php : 読込ファイル

/cate_01/
　---　index.php : コンテンツ用ファイル
　---　/cate_01_01/
　　　　　---index.php : コンテンツ用ファイル

/cate_02/
　---　index.php : コンテンツ用ファイル
　---　/cate_02_01/
　　　　　---index.php : コンテンツ用ファイル

/cate_03/
　---　index.php : コンテンツ用ファイル
　---　/cate_03_01/
　　　　　---index.php : コンテンツ用ファイル

/cate_04/
　---　index.php : コンテンツ用ファイル
　---　/cate_04_01/
　　　　　---index.php : コンテンツ用ファイル

/css/
　---　default.css : PC用のCSS
　---　main.css : PC用のCSS
　---　top.css : PC用のCSS
　---　content.css : PC用のCSS
　---　default_sp.css : スマホ用のCSS
　---　main_sp.css : スマホ用のCSS
　---　top_sp.css : スマホ用のCSS
　---　content_sp.css : スマホ用のCSS
　---　default_tbl.css : タブレット用のCSS
　---　main_tbl.css : タブレット用のCSS
　---　top_tbl.css : タブレット用のCSS
　---　content_tbl.css : タブレット用のCSS

/img/
　---　mainbg.jpg : TOPページ用の画像
　---　fbnr.gif : フッターに設置するバナー用の画像
　---　flinkicon.gif : フッターに設置するバナー用の画像
　---　test_sub-w.gif : テストコンテンツ用の画像
　---　testimg.gif : テストコンテンツ用の画像
　---　testimg_sub.gif : テストコンテンツ用の画像
　---　test-w.gif : テストコンテンツ用の画像

/js/
　---　html5shiv.min.js : IE8以前のブラウザバグのための読み込みファイル

.htaccess : 404対策用の記述のみ
404.php : ページが見つからない時の対策
index.php : TOPページ
privacy.php : その他コンテンツ用ファイル
sitemap.php : その他コンテンツ用ファイル

上記のファイルの内容と役割だけをご理解頂ければ大丈夫です。

当テンプレートの設計など
動作環境

動作環境は以下の通りです。

  • PHPが動くサーバー。
    PHPのバージョンは問いません。
    昨今の有料レンタルサーバーであればほとんど動作するのではないでしょうか。
  • .htaccessの設置が出来ると尚良し。
    .htaccessが動かないサーバーの場合”.htaccess”と”404.php”は削除して下さい。
各ファイルの簡易的な役割について

”/_set/”のディレクトリにあるファイルは読み込み専用のファイルです。
特に”_init.inc”は設定ファイルです。
細かい設定内容はファイル内に記述しています。
適宜書き換える、若しくは新たに追加して頂いても問題ございません。
読込用ファイルは、配布当初は全ページ共通用のファイルしか置いていません。
”全ページ共通”、”断片コンテンツのみ共通”などのルールを設ける場合は、ファイル名などで分かるようにして下さい。

各コンテンツ用ファイルはそれぞれで書き換えてご利用下さい。
増やして頂いても減らして頂いても問題ございません。

（配布当初は、）サブメニューは全ページ共通にはしていません。
サブメニューは、それぞれのコンテンツの区切りの中だけで持つように考えています。
サブメニューを全ページで共通にする場合は、読込ファイルを増やし、その中にサブメニューのソースをコピペして頂き、それぞれのコンテンツ用ファイルでインクルード（読込）して下さい。
それらの記述方法は、既に別の箇所で別のファイルをインクルードしてる箇所がありますので、真似するような感じで書いてみて下さい。

拡張子はPHPで配布していますが、URLのリライトが分かる方なら拡張子をHTMLにして頂きお使い頂けます。

センターコンテンツとサブメニューの位置を左右入れ替える場合、"/css/main.css"の207行目付近の”#cen”と213行目付近の”#ri”の"float"のrightとleftを入れ替えて下さい。

当テンプレートでは、"float"で横詰めしているコンテンツがある場合のブラウザバグ対策は以下のようにしています。
・親要素にafterをつけてCSSに記述しています。
・共通の"class"は記述していません。
共通の"class"などを持って対応する場合などは、適宜ご対応下さい。

設置手順と運用

凡そ以下の手順でアップして下さい。

  1. ”_init.inc”内に必要なコンテンツ（タイトルやアンカーテキストなどのコンテンツの区切り）を書き出す。
  2. ”_init.inc”に記述したコンテンツファイルを増やしておく。
  3. 増やしたコンテンツファイルのページURLをテンプレート内に記述しておく。
  4. ファイルを全部サーバーにアップする。
  5. ディレクトリなどの修正は適宜行い、フレームが出来上がる。

デザインは最初に制作すると思いますので、コーディング段階に入ってから、夫々のファイルに適宜デザインの断片内容を書き込んで頂けるとその後が楽になります。

ご意見、ご感想、質問、著作権などについて

当テンプレートについてご意見ご感想や質問がある時は、info@oosaka-web.jpに直接メールを頂く、若しくは以下の各種SNSのどこかに書き込んで頂ければれ返信をさせて頂きます。

著作権について、放棄はしていませんが、リンクを貼って頂いたりする必要はありません。
商用でも自由にご利用頂けます。
SNSにご一報を頂けると嬉しく思います。

SEOの基礎知識

SEOの基本

内部施策

外部施策

株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP