ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【48日目】PHPで目次作成3-目次の体裁を整える

Posted:2020.10.17　 Last Update:2020.10.21

サイトを作成し始めて48日。昨日はPHPを使って、記事本文の小見出しにIDをつけ、目次から小見出しにリンクできるようにしました。今日は、目次の体裁を整えていきたいと思います！

ロードマップ

ちなみに、ロードマップで進捗を見ると下記の通りです。

準備 - サイトの全体像を決める
使用するプログラミング言語を決めて環境を整える
サイトの基本構造を作って公開する
収益化に最適なサイトにアップグレードする

コンテンツを充実させる（他の作業と同時進行）
サイトを見てもらえるようにサーチエンジンに登録する
sitemap.xmlとRSSを作成する
コンテンツに合わせてサイトを修正、スマホにも対応する　←今ここ
お問い合わせページを作る
検索ボックスを作る
サイトマップページを作る
個人情報に関するページを作る
SEOとセキュリティについて調べ、対応する

GoogleアドセンスとAmazonアソシエイトの申し込みをする
ローカルで簡単に入力ができるようにフォームを作る
フォローアップ - より収益化に向いたサイト構造に変更する

今日の作業

昨日は、目次をクリックすると、該当の小見出しまで飛ぶように設定を完了しました。今日やりたいことを昨日まとめておいたので、ご紹介。

目次を階層構造にする
目次をおしゃれにする
記事にのみ目次を入れて、日記には入れないようにする

目次を階層構造にする

さっそく、目次を階層構造にする作業を始めたいと思います。目次に引っ張ってくる小見出しは、HTMLタグで言うと、H2とH3です。H3はH2の文章内に含まれる、一つ下の小見出し。しかし、今現在の目次はH2とH3が並んで表示されています。今の画面はこんな感じ。 2020.10.17 階層構造になっていない目次

目標は、H3をH2よりも一つ下げて表示すること。ない頭をひねって考え、HTMLタグのh2とh3から数字を取り出し、前の数字と比較することを思いつきました。前と同じならそのままリストを継続、前の数字より大きければ一つ下のレベルで見出しを作り、前の数字より小さければ一つ下のレベルを閉じてリストを作ります。PHPはこんな感じになりました。「$articlebody」は本文です。

<?php
echo '<div id="code"><p>目次</p>'."\n".'<ul>';
$headingset = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
$lastlevel = 2;
foreach( $matches as $heading ){

$i++;
$id = 'heading-' . $i;
$mylevel = substr( $heading[0] , 2 ,1);
if ($mylevel > $lastlevel ){

$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'<ul>'."\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);

}
elseif ($mylevel < $lastlevel ){

$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'</ul>'."\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);

}
else{

$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);

}
echo $TOC;
$lastlevel = $mylevel;

} echo "\n".'</ul>'."\n".'</div>'; ?>

狙い通りに動きました！意外と簡単にできて自分でもびっくり。今の画面がこんな感じです。
2020.10.17 目次を階層構造にした

目次をおしゃれにする

次の目標は「目次をおしゃれにする」です。しかし、おしゃれな目次って何だろう…？他の人のブログを見て研究してきます。

いろいろ見たけど、けっこうみなさん趣向を凝らしていて傾向的なものは分かりませんでした…。とりあえず、作業してみます。

こんなスタイルシートにしてみました。

#toc{ border: 3px double silver; border-radius: 1em; margin:0em 1em 0em 1em; padding: 0.5em 1em 0em 1em; font-size: 0.95em; line-height: 1.7em; }
#toc h4{ text-align: center; }
#toc ul{ list-style: none; padding: 0 2em 0 2em; }
#toc li{ border-bottom: 1px solid silver; }

完成画面がこんなんです。どうやったらおしゃれになるんだろう…。
2020.10.17 目次をデザインしてみたが、また迷走する…

記事だけに目次を適用する

デザインはまたゆっくり考えるとして、今日の作業を終えてしまいましょう。最後は「記事にのみ目次を入れて、日記には入れないようにする」です。これは簡単だと思う！思いたい！この3日で作った、目次を作成するPHPや、小見出しにIDをふるPHPを、まずは別ファイルに保存。このPHPを、記事を呼び出す場合にのみ読み込むようにしました。日記の方はあったことを時系列に書き留めているだけなので、目次は要らないでしょう！

PHPはこんな感じです。変数だらけで意味が分からないと思いますが…。記事(article)の時は目次入りの記事を作るPHPを呼び出して、日記（blog）の時は記事を直接読み込んでいます。

<?php
if ($urlfolder == "article"){require("$mypath/parts/main/withtoc.txt");}
else{echo '<div id="maincontents">'.$articlebody.'</div>';}
?>

導入文の後に目次を読み込みたい

今、タイトルの真下に目次が来ているのですが、ちょっとどうなんだろう…。目次って普通、カバーレター？序文？の後に来ますよね。タイトル→序文→目次→本文、の順番に表示したいですね。テスト環境から記事を丸ごと移すのが面倒なので、今まで作った所を本番用のファイルに移植することにしました！うまくいくかな。…バックアップを取っておこう。

本番環境に作ったPHPやスタイルなどを移植しました。無事に動きました。良かった。

記事を序文と本文に分けて、順番に呼び出せるようにします。記事はまだ6個しかないので作業も楽です！（喜んでいいのか…）序文は「$articleintro」というPHPの変数に格納しました。それを、目次の前に読み出しました。長いですが、「序文の読みだし」→「目次の作成」→「H2とH3にIDをつけた本文の呼び出し」のPHPがこちら。ちなみに「$articlebody」は記事本文です。

<?php
echo '<div id="maincontents">'.$articleintro.'</div>';
echo '<div id="toc"><h4>この記事の目次</h4>'."\n".'<ul>';
$headingset = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
$lastlevel = 2;
foreach( $matches as $heading ){

$i++;
$id = 'heading-' . $i;
$mylevel = substr( $heading[0] , 2 ,1);
if ($mylevel > $lastlevel ){$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'<ul>'."\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);}
elseif ($mylevel < $lastlevel ){$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'</ul>'."\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);}
else{$TOC = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', "\n".'<li><a href="#' . $id . '">$2</a></li>', $heading[0]);}
echo $TOC;
$lastlevel = $mylevel;

}
echo "\n".'</ul>'."\n".'</div>';
$headingset = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
preg_match_all($headingset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
foreach( $matches as $heading ){

$i++;
$id = 'heading-' . $i;
$chapter = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', '<$1 id ="' . $id . '">$2</$3>', $heading[0]);
$articlebody = preg_replace( $headingset, $chapter, $articlebody, 1);

}
echo '<div id="maincontents">'.$articlebody.'</div>';
?>

完成した画面がこちら。
2020.10.17 目次の前に序文を入れてみた

作業してて気づいたのですが、私、小見出しをつけるの超下手でした…。ゆっくり修正していこう。

目次完成

これで目次は完成です！まだデザインに問題がある気はしますが、…まぁ、おいおい考えます。前に作っていた、ロードマップの「コンテンツに合わせてサイトを修正、スマホにも対応する」でやることのリスト、だいぶ消化できました。残りはあと二つです。明日は「日記の「何日目」を自動で入れられるようにする」に取り組もうと思います。

ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する　←完了
ブログと記事の、それぞれのトップページを作る　←完了
サイトのトップページを作り直す　←完了
ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする　←放置中
日記の「何日目」を自動で入れられるようにする
ファビコンを作る　←完了
記事に目次を入れる　←完了

「PHPでサイト作成:ヘッダやフッタを呼び出す超具体的な手法」という記事を書いたので、そちらもよければ読んでやってください。今日完成した目次もついています！