ボクステ公式ブログ
phpで<head>を共通化して<title>だけページ別にする方法
当ブログは、元々すべてhtmlで作成していましたが、先日phpに変更しました。
それによりページの共通パーツ（ヘッダー等）が一括変更できるようになりましたが、ページタイトルがすべて 「ボクステ株式会社 | 公式ブログ」に統一されてしまいました。
そこで、「ボクステブログ |【個別の記事タイトル】」と異なるものになるよう変更しました。
phpファイルの作成方法、ブラウザでphpを開く方法については、こちらの記事もどうぞ。
ヘッダーの共通化
ボクステ公式ブログのページ構成
現在のページ構成は以下の通りです。
blog-entry-50.php 記事ページ全体
|_header.php htmlの<head>部と上部メニュー
|_blogmenu.php 記事年月やカテゴリ、バナー
|_entry50.php ブログ記事部分
一つの記事ページに共通ヘッダーを記述したphpファイルを丸ごと読み込んでいます。
「header.php」の中には、htmlの<head>~</head>部分をすべて含んでいます。
この「header.php」を各ブログ記事のphpファイルで引用する方法は以下の通りです。
このphp形式での記述は、ブログ記事ファイル「blog-entry-50.php」の一番上、先頭に書いてあります。
その後は何の宣言もなしでhtml用の記述<div class="blog_entry">を続けています。
上記二つのコード例を解説します。
includeについて
「blog-entry-50.php」の中で include ('header.php'); と記述することで、「header.php」の内容をすべてページ内に引用しています。
$page_titleについて
「blog-entry-50.php」の中に
$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";
と記入したものが、「header.php」内の
<title>ボクステブログ<?php if (!empty($page_title)) {echo<"｜" .$page_title ; } ?></title>
部分に引用されます。
「if (!empty($page_title))」は、「$page_titleがempty(空)ではない時に」という意味の条件式です。
その後に続く「{echo<"｜" .$page_title; } ?> は、 「ボクステブログ」という必須パーツの後に ｜ という区切り用の縦線を入れてから $page_titleの中身を入れ、 ページタイトルを作りなさい、という命令です。
つまり、$page_title が空ではなかったため、
「ボクステブログ|phpで<head>を共通化して<title>だけページ別にする方法」
というタイトルが<head>内の<title>要素となったのです。
もしも$page_titleが空だった場合、「ボクステブログ」だけがタイトルとして表示されます。ブログのトップページなどはそれで足りるので個別の$page_titleはつけていません。
ページタイトルを付けると何が良いの？
ページタイトルは、ブラウザの上部タブやブックマークのタイトル、Google等の検索結果として表示されます。
ブラウザのタブに表示されるタイトル
ブラウザでは長いと全て表示しきれませんが、検索の際には優先的に取得される文字情報であるため入れておいた方がよさそうです。
また外部からリンクする際にもタイトルとして取得・表示されることがあります。
今回の修正前に、全てのブログ記事でタイトルが共通だったのは、header.phpの記述が
<title>ボクステ株式会社|公式ブログ</title>と静的であったため、動的に変更できなかったからです。
なお、固定部が長すぎるため、省略して「ボクステブログ」としました。
blogmenu.phpの解説は省略
可変ページタイトルには直接関わらないため省略しましたが、「header.php」同様、includeで丸ごと読み込んでいます。
以前は、月が替わる度全てのページにそのカテゴリー 例えば 「2025年 5月」を手動でコピペするという恐ろしく原始的なサイト作りをしていました。
また、上部の自社ゲームバナーを、体験版や製品版、プラットフォームの変更ごとに差し替えたい時も、全ページ手動コピペをしておりました。
それが現在は「blogmenu.php」内の一か所を変更するだけで50ページ超を一括更新できるのでブログの更新がとても気楽になりました。
【関連記事】
ボクステブログ | ブラウザにおけるphpファイルの開き方
カテゴリ Web開発
それによりページの共通パーツ（ヘッダー等）が一括変更できるようになりましたが、ページタイトルがすべて 「ボクステ株式会社 | 公式ブログ」に統一されてしまいました。
そこで、「ボクステブログ |【個別の記事タイトル】」と異なるものになるよう変更しました。
phpファイルの作成方法、ブラウザでphpを開く方法については、こちらの記事もどうぞ。
ヘッダーの共通化
現在のページ構成は以下の通りです。
blog-entry-50.php 記事ページ全体
|_header.php htmlの<head>部と上部メニュー
|_blogmenu.php 記事年月やカテゴリ、バナー
|_entry50.php ブログ記事部分
一つの記事ページに共通ヘッダーを記述したphpファイルを丸ごと読み込んでいます。
header.php
<!DOCTYPE html>
<html lang="ja" >
<head >
<meta charaset =" UTF-8 ">
<title>ボクステブログ<?php if (!empty($page_title )) { echo"｜" .$page_title ; } ?></title>
</head >
<html lang="ja" >
<head >
<meta charaset =" UTF-8 ">
<title>ボクステブログ<?php if (!empty($page_title )) { echo"｜" .$page_title ; } ?></title>
</head >
「header.php」の中には、htmlの<head>~</head>部分をすべて含んでいます。
この「header.php」を各ブログ記事のphpファイルで引用する方法は以下の通りです。
blog-entry-50.php
<?php
$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";
include ( 'header.php' );
?>
$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";
include ( 'header.php' );
?>
このphp形式での記述は、ブログ記事ファイル「blog-entry-50.php」の一番上、先頭に書いてあります。
その後は何の宣言もなしでhtml用の記述<div class="blog_entry">を続けています。
上記二つのコード例を解説します。
includeについて
「blog-entry-50.php」の中で include ('header.php'); と記述することで、「header.php」の内容をすべてページ内に引用しています。
$page_titleについて
「blog-entry-50.php」の中に
$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";
と記入したものが、「header.php」内の
<title>ボクステブログ<?php if (!empty($page_title)) {echo<"｜" .$page_title ; } ?></title>
部分に引用されます。
「if (!empty($page_title))」は、「$page_titleがempty(空)ではない時に」という意味の条件式です。
その後に続く「{echo<"｜" .$page_title; } ?> は、 「ボクステブログ」という必須パーツの後に ｜ という区切り用の縦線を入れてから $page_titleの中身を入れ、 ページタイトルを作りなさい、という命令です。
つまり、$page_title が空ではなかったため、
「ボクステブログ|phpで<head>を共通化して<title>だけページ別にする方法」
というタイトルが<head>内の<title>要素となったのです。
もしも$page_titleが空だった場合、「ボクステブログ」だけがタイトルとして表示されます。ブログのトップページなどはそれで足りるので個別の$page_titleはつけていません。
ページタイトルを付けると何が良いの？
ページタイトルは、ブラウザの上部タブやブックマークのタイトル、Google等の検索結果として表示されます。
ブラウザでは長いと全て表示しきれませんが、検索の際には優先的に取得される文字情報であるため入れておいた方がよさそうです。
また外部からリンクする際にもタイトルとして取得・表示されることがあります。
今回の修正前に、全てのブログ記事でタイトルが共通だったのは、header.phpの記述が
<title>ボクステ株式会社|公式ブログ</title>と静的であったため、動的に変更できなかったからです。
なお、固定部が長すぎるため、省略して「ボクステブログ」としました。
blogmenu.phpの解説は省略
可変ページタイトルには直接関わらないため省略しましたが、「header.php」同様、includeで丸ごと読み込んでいます。
以前は、月が替わる度全てのページにそのカテゴリー 例えば 「2025年 5月」を手動でコピペするという恐ろしく原始的なサイト作りをしていました。
また、上部の自社ゲームバナーを、体験版や製品版、プラットフォームの変更ごとに差し替えたい時も、全ページ手動コピペをしておりました。
それが現在は「blogmenu.php」内の一か所を変更するだけで50ページ超を一括更新できるのでブログの更新がとても気楽になりました。
【関連記事】
ボクステブログ | ブラウザにおけるphpファイルの開き方
カテゴリ Web開発
ブラウザにおけるphpファイルの開き方
phpファイルはダブルクリックしてもブラウザで開かないため、閲覧するにはローカルホストを立ち上げる必要があります。
前提環境
当社PCでは、「XAMPP」というphp統合開発環境（無料）を使用しています。
phpファイル「blog-entry-49.php」を以下のフォルダ（ディレクトリ）に作成するものとして説明します。
C: > xampp > htdocs > blog-entry-49.php
htdocs が「公開ルートフォルダ」です。
phpファイルを初めて作る時は、フォルダ内で右クリックして 新規作成＞テキストドキュメント で作成したファイル名「新規テキストドキュメント.txt」の最後を「.php」という拡張子に変えればphpファイルになります。
「拡張子を変えるとファイルが使えなくなる可能性があります。変更しますか？」というメッセージが出てもそのまま実行してください。
今回の例だと「blog-entry-49.php」と書いて保存すればよいです。
phpファイルをChromeなどのブラウザで開く方法
XAMPPコントロールパネル
1. C: > xampp > xampp_control.exe をダブルクリック（デスクトップにショートカットアイコンがあればそれでもOK）
2. XAMPPコントロールパネルが開くのでApache（アパッチ）を「Start」
3. 通常ネットを閲覧する時のようにブラウザを開き、上部アドレスバーに「http://localhost/blog-entry-49.php」と打ち込んでEnterキーを押す
4. そのphpページにHTMLコードが含まれていればWebページとして閲覧できる
当社の借りているXサーバー上では、独自ドメイン「bocste.com」が、「localhost」部分に相当するためオンラインURLとしては「https://bocse.com/blog-entry-49.php」になります
Xサーバー上のファイルマネージャでは、公開ルートフォルダが「htdocs」ではなく「public_html」であるため、「bocste.com > public_html > blog-entry-49.php の形になるようphpファイルをアップロードしています。（公開ルートフォルダ直置き）
「bocste.com」や「blog-entry-49.php」の部分は、可変・任意の部分なのでお使いのレンタルサーバーやドメイン名や好きなファイル名（ページ名）を用いてください。
一方、「htdocs」や「http://localhost/」は、xampp環境では固定かつ共通です。また、少なくともXサーバーでは公開ルートフォルダ名が「public_html」で固定です。
サブフォルダ（ディレクトリ）のアドレス
これまで、公開ルートフォルダ「htdocs」=「public_html」の関係性に混乱のないようC: > xampp > htdocs > にphpファイルを直置きする構成で説明してきましたが、実際には他の管理サイトも同じhtdocs下で作成・ローカルテストしているため、混ざらないよう C: > xampp > htdocs > bocste > blog-entry-49.php とサブフォルダに分けています。
この場合のローカルテスト時アドレスは
http://localhost/bocste/blog-entry-49.phpです。
別のダミーアドレスでサブフォルダを説明します。
ローカルにおけるフォルダ構成が
例 C: > xampp > htdocs > adshoot > charactors.php
である時に、Xサーバ/ファイルマネージャでサブフォルダを作成すると
例 bocste.com > public_html > adshoot > charactors.php
になります。そして、ブラウザで閲覧する際のURLはスラッシュ/区切り形式/でアドレスが作成されます。
https://bocste.com/adshoot/charactors.php
*実在しないアドレスです
Apache（ローカルホスト）の停止方法
1. C: > xampp > xampp_control.exe をダブルクリック（デスクトップにショートカットアイコンがあればそれでもOK）
2. XAMPPコントロールパネルが開くのでApache（アパッチ）を「Stop」
3. XAMPPコントロールパネル右側の「Quit」でパネルを終了
【関連記事】
ボクステブログ | phpで<head>を共通化して<title>だけページ別にする方法
カテゴリ Web開発
前提環境
当社PCでは、「XAMPP」というphp統合開発環境（無料）を使用しています。
phpファイル「blog-entry-49.php」を以下のフォルダ（ディレクトリ）に作成するものとして説明します。
C: > xampp > htdocs > blog-entry-49.php
htdocs が「公開ルートフォルダ」です。
phpファイルを初めて作る時は、フォルダ内で右クリックして 新規作成＞テキストドキュメント で作成したファイル名「新規テキストドキュメント.txt」の最後を「.php」という拡張子に変えればphpファイルになります。
「拡張子を変えるとファイルが使えなくなる可能性があります。変更しますか？」というメッセージが出てもそのまま実行してください。
今回の例だと「blog-entry-49.php」と書いて保存すればよいです。
phpファイルをChromeなどのブラウザで開く方法
1. C: > xampp > xampp_control.exe をダブルクリック（デスクトップにショートカットアイコンがあればそれでもOK）
2. XAMPPコントロールパネルが開くのでApache（アパッチ）を「Start」
3. 通常ネットを閲覧する時のようにブラウザを開き、上部アドレスバーに「http://localhost/blog-entry-49.php」と打ち込んでEnterキーを押す
4. そのphpページにHTMLコードが含まれていればWebページとして閲覧できる
当社の借りているXサーバー上では、独自ドメイン「bocste.com」が、「localhost」部分に相当するためオンラインURLとしては「https://bocse.com/blog-entry-49.php」になります
Xサーバー上のファイルマネージャでは、公開ルートフォルダが「htdocs」ではなく「public_html」であるため、「bocste.com > public_html > blog-entry-49.php の形になるようphpファイルをアップロードしています。（公開ルートフォルダ直置き）
「bocste.com」や「blog-entry-49.php」の部分は、可変・任意の部分なのでお使いのレンタルサーバーやドメイン名や好きなファイル名（ページ名）を用いてください。
一方、「htdocs」や「http://localhost/」は、xampp環境では固定かつ共通です。また、少なくともXサーバーでは公開ルートフォルダ名が「public_html」で固定です。
サブフォルダ（ディレクトリ）のアドレス
これまで、公開ルートフォルダ「htdocs」=「public_html」の関係性に混乱のないようC: > xampp > htdocs > にphpファイルを直置きする構成で説明してきましたが、実際には他の管理サイトも同じhtdocs下で作成・ローカルテストしているため、混ざらないよう C: > xampp > htdocs > bocste > blog-entry-49.php とサブフォルダに分けています。
この場合のローカルテスト時アドレスは
http://localhost/bocste/blog-entry-49.phpです。
別のダミーアドレスでサブフォルダを説明します。
ローカルにおけるフォルダ構成が
例 C: > xampp > htdocs > adshoot > charactors.php
である時に、Xサーバ/ファイルマネージャでサブフォルダを作成すると
例 bocste.com > public_html > adshoot > charactors.php
になります。そして、ブラウザで閲覧する際のURLはスラッシュ/区切り形式/でアドレスが作成されます。
https://bocste.com/adshoot/charactors.php
*実在しないアドレスです
Apache（ローカルホスト）の停止方法
1. C: > xampp > xampp_control.exe をダブルクリック（デスクトップにショートカットアイコンがあればそれでもOK）
2. XAMPPコントロールパネルが開くのでApache（アパッチ）を「Stop」
3. XAMPPコントロールパネル右側の「Quit」でパネルを終了
【関連記事】
ボクステブログ | phpで<head>を共通化して<title>だけページ別にする方法
カテゴリ Web開発
当社リリースを複数のメディアに取り上げていただきました
5月1日発売の Nintendo Switch版「市立カクレザ図書館」
について、複数のメディアが当社のプレスリリースを記事にしてくださいました。
当ブログでの告知だけではリーチ不可能な幅広い層の読者様にまで情報を届けてくださり、誠にありがとうございます！
記事一覧（順不同）
カテゴリ 広報
当ブログでの告知だけではリーチ不可能な幅広い層の読者様にまで情報を届けてくださり、誠にありがとうございます！
記事一覧（順不同）
日経COMPASS様 5/8追記
【携帯ゲーム機】25年4月5週の注目記事5選
https://www.nikkei.com/compass/theme/37652/pickup/20250505
App Match様 5/8追記
「市立カクレザ図書館」：4月30日は図書館記念日◆翌5月1日発売のNintendo Switch版で司書体験しませんか?
https://appmatch.jp/news-9234/
Gamers Zone様
「市立カクレザ図書館」Switch版登場！見習い司書として試用期間を無事終えよう
https://gamerszone.jp/post/26319
全国企業データベース様
司書体験ゲーム「市立カクレザ図書館」Nintendo Switch版が5月1日発売！－図書館記念日を祝して、司書の仕事を体験しよう－
https://companydata.tsujigawa.com/press-20250430-003/
【非公式】Nintendo Switchブログ様
Switch用ソフト『市立カクレザ図書館』が2025年5月1日から配信開始！
https://ninten-switch.com/shiritsu-kakureza-for-nintendo-switch-2025-0501-released
サードニュース様
Nintendo Switch版「市立カクレザ図書館」で司書体験を楽しもう！
https://news.3rd-in.co.jp/article/94139ffe-251b-11f0-b653-9ca3ba083d71#gsc.tab=0
ベストカレンダー様
5月1日発売！Nintendo Switch版「市立カクレザ図書館」で司書体験を楽しもう
https://bestcalendar.jp/articles/press/47627
げーまと様
Nintendo Switch版『市立カクレザ図書館』が5月1日に登場！司書体験を楽しもう！
https://news.game.matomame.jp/article/69d411b4-251c-11f0-9c36-9ca3ba08d54b
スマホゲームNavi様
市立カクレザ図書館：4月30日は図書館記念日◆翌5月1日発売のNintendo Switch版で司書体験しませんか？
https://games.appmatch.jp/news-9945/
GamePress AI様
Switch版「市立カクレザ図書館」5/1発売！司書体験アドベンチャー700円
https://gamepress.jp/archives/152681
Web東奥日報様(from PR TIMES様)
4月30日は図書館記念日◆翌5月1日発売のNintendo Switch版「市立カクレザ図書館」で司書体験しませんか？
https://www.toonippo.co.jp/articles/-/2010291
岩手日報様(from PR TIMES様)
4月30日は図書館記念日◆翌5月1日発売のNintendo Switch版「市立カクレザ図書館」で司書体験しませんか？
https://www.iwate-np.co.jp/pr/prtimes/4758
exciteニュース様(from PR TIMES様)
4月30日は図書館記念日◆翌5月1日発売のNintendo Switch版「市立カクレザ図書館」で司書体験しませんか？
https://www.excite.co.jp/news/article/Prtimes_2025-04-30-137856-6/
VOIX edu様（以前の記事と重複）
市立カクレザ図書館が5月1日にNintendo Switchで登場！司書体験で新たな発見を楽しもう
https://voix.jp/edu/news/49161/
カテゴリ 広報
Nintendo Switch版「市立カクレザ図書館」本日発売！
プレイヤーが見習い司書として図書館のカウンターで働く場面固定型ADV
「市立カクレザ図書館」がNintendo Switchに登場！
ダウンロード専用 700円（税込）
ダウンロード配信ページはこちら➡️マイニンテンドーストア
本日5月1日の午前0時からダウンロード購入可能になりました！
*DL専用商品です。パッケージ版はございません。
マイニンテンドーストア は、5月1日現在Nintendo Switch2の予約や抽選の影響で繋がりにくい、または、メンテナンス中のことがございます。
その場合は、時間をおいてからもう一度お試しください。
Nintendo Switch本体メニューの ニンテンドーeショップ からも購入が可能です。 現在は「NEW」（新作）のカテゴリにございますがいずれ移動しますので、
🔎検索 ＞ キーワードからさがす ＞「カクレザ」がおすすめです。
🔎検索 ＞ ジャンル：「アドベンチャー」または「シミュレーション」＞
すべて見る＞配信日：新しい順 にしても出ますが、人気作品の激戦区であるため見つけにくいです。
画面中央領域のみGIFアニメ（右クリックDL・転載可）
■使用コントローラー
Joy-Con(L)(R) / Nintendo Pro コントローラー
■操作方法（Nintendo Switch編）
・[指カーソルの移動]：方向ボタンまたはLスティック
・[決定]：Aボタン
・[ロード/マニュアルを閉じる]：Bボタン
・[ゲーム終了]:ホームボタン
■カクレザ図書館職員の基本業務
・利用者カードに指カーソルを合わせてでAボタン
・カウンター上全ての資料でAボタン
・レファンレンス（利用者の問い合わせに答える業務）では蔵書検索機が自動で開くため、もっとも適切と思われる資料を探して[貸し出す]
・数人の利用者に対応すれば１日が終了しオートセーブされる
以上の繰り返しとなります。難易度は低く時間制限もありません。
📚図書館の静かな雰囲気に浸りながらリラックスして遊びましょう。
カテゴリ ゲーム開発 広報
「市立カクレザ図書館」がNintendo Switchに登場！
ダウンロード専用 700円（税込）
ダウンロード配信ページはこちら➡️マイニンテンドーストア
本日5月1日の午前0時からダウンロード購入可能になりました！
*DL専用商品です。パッケージ版はございません。
マイニンテンドーストア は、5月1日現在Nintendo Switch2の予約や抽選の影響で繋がりにくい、または、メンテナンス中のことがございます。
その場合は、時間をおいてからもう一度お試しください。
Nintendo Switch本体メニューの ニンテンドーeショップ からも購入が可能です。 現在は「NEW」（新作）のカテゴリにございますがいずれ移動しますので、
🔎検索 ＞ キーワードからさがす ＞「カクレザ」がおすすめです。
🔎検索 ＞ ジャンル：「アドベンチャー」または「シミュレーション」＞
すべて見る＞配信日：新しい順 にしても出ますが、人気作品の激戦区であるため見つけにくいです。
■使用コントローラー
Joy-Con(L)(R) / Nintendo Pro コントローラー
■操作方法（Nintendo Switch編）
・[指カーソルの移動]：方向ボタンまたはLスティック
・[決定]：Aボタン
・[ロード/マニュアルを閉じる]：Bボタン
・[ゲーム終了]:ホームボタン
■カクレザ図書館職員の基本業務
・利用者カードに指カーソルを合わせてでAボタン
・カウンター上全ての資料でAボタン
・レファンレンス（利用者の問い合わせに答える業務）では蔵書検索機が自動で開くため、もっとも適切と思われる資料を探して[貸し出す]
・数人の利用者に対応すれば１日が終了しオートセーブされる
以上の繰り返しとなります。難易度は低く時間制限もありません。
📚図書館の静かな雰囲気に浸りながらリラックスして遊びましょう。
カテゴリ ゲーム開発 広報