【簡単メンテでも問題あり？】＜head＞＜／head＞内をincludeする

PHP の include機能 を使うと、<body></body>内のテキストだけでなく、<head></head>内のテキストも include することができます。

でも、それをする場合は若干の注意が必要です。
（大した注意ではないんですが。(；´∀｀)）

<head></head> 内をincludeする場合の注意点

相対パスが使いにくくなる

include機能を使うと、基本的には相対パスが使いにくくなります。
絶対に使えないわけじゃないんです。
使いにくくなるんです。

 <link rel="stylesheet" type="text/css" href="style.css">

では、どう言う時に使いにくくなるんでしょう？
階層がこのような形でバラバラになっている時に使いづらくなります。

読み込むテキストはそのまんま吐き出されますので、CSSファイルまでの相対パスが 『 ./ 』 だったり 『././ 』 だったりします。

それなのに、PHPのincludeで読み込む <head></head> 内のCSSファイルへのパスをを相対パスで書いてしまうと、CSSファイルまでのURLが変わってしまうのです。

相対パスのURLが変わってしまい、ちゃんとCSSファイルが読み込めなかった場合、CSSファイルが表示出来ずにエラーとなります。

 <link rel="stylesheet" type="text/css" href="https://***.***/style.css">

ですので、 <head></head>内でCSSファイルを読み込む場合は、URLで書くと良いです。

ツールでCSSファイルが効かない

<head></head>内に include しているテンプレート用のファイルは、サーバーが include 処理しないと表示されません。

2016年現在、テンプレート用のファイルの中でCSSファイルの指定をしてありますので、私が絶賛使用中のホームページビルダーのバージョン16上では、CSSが効きません。
（逆にそこまでできたら怖いですが。（;´_`;））

CSSが効いていないホームページビルダー

CSSが効いているホームページビルダー

ですので、ページファイルを作成中は常に、CSSなしでページファイルを作成しています。

作業中にCSSが見れなくてもそれなりには作れるんですが、やはり、ホームページビルダーの機能である 『スタイルの設定』 が使えないので、（例えば、URL入りの<p></p>タグにページアイコンを付けるとか）、その点は非常にめんどくさいです。

ホームページ・ビルダーは、要素を選択し右クリックした後、スタイルの設定を選択すれば、簡単にCSS内のスタイルを適用できます。

ちなみに、ホームページ・ビルダーでCSSを何も設定していないと、横幅がビヨーーーンと伸びきってしまいます。

<head></head>内を includeすると、CSSを何も設定していないのと同じことになりますので、CSSを何も設定していないのと同じように、横幅がビヨーーーンと伸びきってしまいます。

ホームページ・ビルダーでは、CSSを何も指定しない場合、デフォルトのCSSが適用されますので、とりあえず作業自体はできるのですが、横幅が広がり過ぎると作業がしにくくて仕方ありません。

このような場合は、以下のようにすると、横幅を好きなサイズに変更することができます。

ホームページビルダーで編集画面の横幅を指定する方法

１．　メニューバーの 『ツール』 をクリックする
２．　『オプション』 をクリックする
３．　『ターゲットブラウザ』 タブを選択する
４．　右ボタンの『追加』 をクリックする
　　　（一番下）
５．　『名称』 と 『横幅』 を指定する

６．　『 OK 』 ボタンをクリックする
７．　先ほど作った設定を選択する

８．　『 OK 』 ボタンをクリックする

詰め込みすぎに注意

<head>部分を外部テキストファイルから読み込むのは良いのですが、外部化されてしまっていると、ついつい<head>内に詰め込んでしまいがちです。

同一ファイル内に全部書かれてあると、このファイル重いなあとか、これは書きすぎているかも？と言うのがわかりやすいのですが、その感覚が薄れがちになるのです。

特に、<head>内にScriptをいくつも入れていると非常に重いサイトになってしまいますので、その点には要注意です。

どうしてもあれやこれやを詰め込みたい場合は、資金的には少しきつくなってしまいますが、上位のコースか性能の良いレンタルサーバーを借りると良いと思います。

<!DOCTYPE html><html lang="ja"><head></head><body>はincludeしない方が良い

完全にテキストファイルでページファイルを作成するのであればよいのですが、何らかのWEBページ作成ツールを使ってページファイルの追加や修正をする場合は、

<!DOCTYPE html> <html lang="ja"> <head></head> <body></body> </html>

この辺りの重要なHTMLタグは include しない方が良いです。
この辺りののHTMLタグまでincludeしてしまうと、WEB作成ツールでエラーが出やすくなります。

次ページ

【静的】 Wordpress とテンプレート化したPHPサイトの違い【動的】

前ページ

【こんなはずでは】PHPやScriptを使ったテンプレートの注意点

このカテゴリの記事

その他のカテゴリを見る

【簡単メンテでも問題あり？】 ＜head＞＜／head＞内をincludeする