Q&A
それだけのためにphpは勿体無すぎますね。(今頃.htmlで.php有効にとかほとんど廃れてるのでは)
起こった問題
主にHTMLとCSSでホームページを作っています。
ヘッダーが全ページ共通だったのでPHPでインクルードしたら、そのヘッダーファイルが参照していたCSS、Javascript、画像が表示されなくなりました。ヘッダーファイル単体だと表示されます。
実現したいこと
インクルードした時にそのHTMLが参照していたファイル、画像が消えない方法を教えていただきたいです。
フォルダ構成
/
L css - header.css
L img - common - logo.png
L js - header.js
L include - header.html(インクルード先ファイル)
L index.html(インクルード元ファイル)
L .htaccess
インクルードしたやり方
①インクルード元のファイルの記述：index.htmlに以下を追加
<body><?php include(dirname(__FILE__).'/include/header.html'); ?></body>
②index.htmlと同じ階層に以下の内容を記述した.htaccessファイルを作成
AddType application/x-httpd-php .php .html AddHandler application/x-httpd-php .php .html
インクルード先ファイル(header.html)で反映されなくなった部分
・参照したCSSファイル
<head><link rel="stylesheet" type="text/css" href="../css/header.css"></head>
・参照したjsファイル
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head> <body><script src="../js/header.js"></script></body>
・HTML上で使っていた画像
<body><img src="../img/common/logo.png" class="●●●" width="166" alt="●●●"></body>
補足情報
使用PCはWindowsです。
環境は、Vagrantを使ったローカル環境でやっています。
予想
パスの指定方法が間違っているのかなと思うのですが、いかがでしょうか？
宜しくお願い致します。
コメントしていただき、ありがとうございます。HTMLとCSS以外の知識がほとんどない者です。ヘッダーやフッターを共通化したいだけなので、方法は何でも構いません。もしPHP以外におすすめの方法がありましたらぜひ教えていただきたいです。
phpでするなら、共通部分をインクルードではなくコンテンツ部分だけechoで出力させた方が良いですね。
それ以外だと、iframeでも良いのではと。SEO丸無視ですけど。
ご返信ありがとうございます。両方とも調べてみます。
回答1件
0
ベストアンサー
.htaccessの記述で、.htmlのままでも.phpと同様に処理するように書いてあるようですが、
その設定が生きているかどうかですよね。
まず、error_logを点検して、
他の記述ミスが起きていないかを確認します。
Vagrantで起動しているOSの方でapacheのerror_logを探します。
例えば /var/log/httpd/error_log だとしたら、
コンソール上で「tail /var/log/httpd/error_log」などとコマンドを打つことで
エラーログを確認できます。
投稿2019/04/01 06:57
編集2019/04/01 07:10退会済みユーザー
総合スコア0
迅速かつ初心者でも分かりやすい丁寧なご回答ありがとうございます。
エラーログを確認しましたら、
「 [error] [client 192.168.33.1] File does not exist: /var/www/html/vagrant/css, referer: http://192.168.33.10/vagrant/●●/index.html」のようなエラーが複数ありました。
「css」の部分が「img」「js」に置き換わった文章も複数ありました。
その後、「/var/www/html/vagrant」の中に作成したcss,js,imgフォルダなどをコピーしてみたら、きちんと上記のファイルや画像が表示されるようになりました。
なぜできたのかきちんと理解できていないので、vagrantについてもっと勉強しようかと思います。
これからは問題が起きた時にエラーをチェックするように致します。
解決していただきましてありがとうございます。
あなたの回答
tips
プレビュー
