HOME > コラム > SEMラボラトリー関連 > 簡単WEBサイトテンプレート(PHP)のアップデート ver.160202

簡単WEBサイトテンプレート(PHP)のアップデート ver.160202

コラム

今回は当サイト内で配布している「簡単WEBサイトテンプレート(PHP)」の簡単なアップデートを行いましたので、その報告です。
2016年2月2日にアップデートを配布しましたので「 ver.160202 」としたいと思います。
コンテンツの編集領域をちょっとだけ増やしました。
全ページ共通のコンテンツ部分が多いよりも、共通しない箇所が多いほうがいいよね的な、そんな感じで編集箇所を増やした感じです。
ということで、今回はその解説編という感じです。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

SEMラボラトリー関連に投稿したコラム記事

簡単WEBサイトテンプレート(PHP)のアップデート ver.160202

簡単WEBサイトテンプレート(PHP) ver.160202 イメージ
配布テンプレートについて

以下のページで配布しているテンプレートです。
以下のページからダウンロードしてお使い下さい。

編集したコンテンツ箇所
まずは画像を見て下さい。

簡単WEBサイトテンプレート編集箇所

上記の画像をクリックすると、別ウィンドウで画像が開きます。
変更した箇所を緑色の枠で括っています。
ver.151020からver.160202への変更点は以下の通りです。

  • ロゴテキスト部分の直下「そのページで最も重要なキャッチ」と記載している箇所。
  • フッター領域の直上部分に「TOP」と書かれている箇所。これはフッターのパンくずです。
  • コピーライト部分直下の「フッターにページのサブキャッチ的な・・・。全ページ共通していません。」と記載している箇所。

以上の3点を変更しました。
これにて、各ページ共通部分が減り、ページ毎に異なるコンテンツ部分が増えました。

変更した内容
ロゴテキスト直下の「そのページで最も重要なキャッチ」の変更内容

表示させるPHPファイルに以下の記述を、メタタグの内容を記載している箇所(4行目〜5行目付近)に追記しました。

$pagedisc = 'そのページで最も重要なキャッチ';

また、それらに伴い、「 /_set/head.php 」内にある記述を以下の通りに修正します。

<?php echo "$sitedisc"; ?>
<?php echo "$pagedisc"; ?>

また、これに伴い、 h1 タグの場所もこの” $pagedisc ”に充てるようにしました。
これまでは、ロゴテキスト部分に h1 タグを充てていましたが、今回で変更しています。

この時、「 /_set/_init.inc 」内に記載している” $sitedisc ”は削除して頂いても問題ございません。
配布ファイル内では、念のために残していますが、削除しても何の問題もございません。
配布ファイル内に記述を残している理由は特にありません。
強いて、サイトのキャッチコピーを忘れないように・・・というところでしょうか。

h1 タグの位置を変更したので、それに伴ったCSSの編集が必要です。
「 main.css 」、「 sp_main.css 」、「 tbl_main.css 」内にある「ヘッダー」内の h1 に関わる内容を修正しました。
細かい内容は配布しているCSSの内容をご確認下さい。
もともとそこまで装飾していなかったことと、各種 defalt.css で h1 をリセットしてるので、そこまで編集しなくても大丈夫でした。

フッターパンくずの変更

フッターパンくずを追加した件については、修正というより、記述を追加するという感じです。
また、PHPファイルに以下の記述を追記します。

<div id="foot_pan">
<div id="foot_pan_link">
<ul>
<li><?php echo "$pankuzu_top"; ?></li>
</ul>
</div>
</div>
<div id="foot_pan">
<div id="foot_pan_link">
<ul>
<li><a href="/"><?php echo "$pankuzu_top"; ?></a></li>
<li><?php echo "$oth_page_02_linkname"; ?></li>
</ul>
</div>
</div>

それぞれのコンテンツページの場合のパンくずですが、奥のページ名の箇所はリンクで囲っていません。
リンクを入れると矢印が出るようにしています。
これはCSSで調整しています。

次にCSSの追記です。
これも各種 main.css に追記しています。
追記している内容は以下の通りです。

#foot_pan {
	width: 100%;
	background-color: #efefef;
	padding-top: 3px;
	padding-bottom: 3px;
}

#foot_pan_link {
	width: 1000px;
	margin: 0 auto;
}

#foot_pan_link:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#foot_pan_link ul {
}

#foot_pan_link ul li {
	float: left;
	text-align: left;
}

#foot_pan_link ul li a {
	margin-right: 10px;
	position: relative;
	padding-right: 8px;
	display: block;
}

#foot_pan_link ul li a:after {
	content:">";
	font-size:100%;
	line-height: 1em;
	font-family:"MS Pゴシック",sans-serif;
	color:#999;
	position:absolute;
	right:-5px;
	top: 3px;
	display: block;
}

main.css 内の「パンくず」の箇所に追記しています。
どこに追記して頂いても問題ありません。
リンクを張った時に矢印が出るのは、「 #foot_pan_link ul li a:after 」で制御しています。

フッターの全ページ共通しないキャッチの設定

フッターはもともと全ページに共通していたのですが、今回、共通させないようにしました。
基本的にはヘッダー部分と同じような感じです。

表示させるPHPファイルの変更点は、ヘッダー同様にそのページのみでキャッチを設定する箇所を設定部分に記述します。

$footdisc = 'フッターにページのサブキャッチ的な・・・。
全ページ共通していません。';

また、それに伴い、「 /_set/foot.php 」の直書きで全ページ共通させていたテキスト部分に以下の内容を書き入れます。

<?php echo "$footdisc"; ?>

また、この部分においては、 h4 タグを設置しました。
CSSの調整はなくても大丈夫です。
「 /_set/foot.php 」の記述は以下の通りです。

<div id="footdisc">フッターにサイトのサブキャッチ的な・・・。<br />全ページ共通してます。</div>
<div id="footdisc"><h4><?php echo "$footdisc"; ?></h4></div>
全てのファイルをアップ

ということで、今回のアップデートが完了です。
全ページに手を入れなければいけないのが難点かもしれませんが、それくらいはまぁ”致し方なし”ということでお願い致します。
この作業が”最早、面倒・・・・”ということでしたら、WordPressをお使い頂くことをオススメ致します。笑

テンプレート的な機能とデータ的な機能の部分については、別途画面を用意しようかな・・・と思ったんですが、それだとWordPressと変わらないので、もう考えないことにしました。
初心者に優しく、ちょっとした知識を得られるような、それでいてSEOの強さを感じる構造を体感出来て、WordPressだとインターフェイスを触るのが怖い方でもインターフェイスを触る訓練が出来て、それでいて実用的なテンプレートを目指していますので、システマチックな発展は目指すところではありません。

この先、デザインパターンを増やしたり、html5版をつくることを考えてたり、出来ることはあるのでそんな感じで発展しようと考えています。

締めくくり

そんな感じでアップデートの概要は以上です。

今回のアップデートがSEO的にどれほどの役割を果たすのか・・・ということについてはあまり考えていません。
ただ、悪いことではなく、確実にポジティブな感じになると考えています。

なら、最初からやっておけよ・・・と言われてしまいますと、身も蓋もないんですが、まぁ徐々にアップデートする醍醐味を楽しみましょうということで、ご容赦頂けますと幸いです。

執筆 : 清水 隼斗

Facebookコメント

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