手作りで静的サイトを構築する（３）iframeを活用しよう

ここはphpも動かないGitHubページです。 だからここは、いわゆる静的サイトです。 ワードプレスなんてありません。 サイドバーだってなんだって、その都度です。 まあ、自由といえば自由なんですが・・・ でも、せっかくですからサイドバーに新着記事くらいは表示したいですよね。できれば記事一覧も表示させたい。でも、新しい記事を書くたびに、すべての記事のサイドバーを更新するのは勘弁してください。ですねw 世に言う「静的サイトジェネレータ」を使えばできますけれど、結局すべてのファイルを書き直すことには変わりありません。それに、そんなもの使うくらいなら、すなおにワードプレスを使いますよ！ ということで、サイドバーくらいは別ファイルにしてその都度表示させることにしました。

新着記事を別ファイルにしてその都度読み込む

いかがですか？。 いい感じですね（←自己満足^^;）。

PHPが使えれば、別ファイルを読み込んで貼り付ければいいから簡単です。記事一覧のページを読み込んで一覧部分だけ切り出してもいいですね。
でもここはGitHubです。PHPは使えません。

最初はiframeで読み込むファイル名を「sidebar.txt」にしていたのですが、それだと本当にテキストファイルとして読んでくれます。 htmlタグも無視されて、そのまま表示されてしまいます。

それではあまりにあんまりなので、ファイル名を「sidebar.html」にしてみました。

そうしたら、ちゃんとhtmlと解釈して表示してくれるじゃないですか！
タイトルだってもちろん、リンクも貼れます。
う～ん、ブラウザさんって優秀ですね。

Chromeだけじゃないとは思いましたが、Edgeでも大丈夫です。

他のブラウザは・・・面倒くさいから、まあいいかw

サイドバーの内容は、これから考えます

iframeの内容って、たぶんロボットさんには見えないから、検索には引っかからないはず。ということは、内容は考えなきゃいけませんね。

さて、どうしましょうか。

### iframeに、スタイルシートが反映されない！ 考えてみれば、当たり前ですねw iframeって、結局別のファイルというか、サイトを読み込みます。メインページのスタイルシート（style.css）が反映されるはずがありません。 ということは・・・、作った「sidebar.html」にスタイルを書き込めばいいのですね！ ### このままでは、iframeにリンク先が表示されてしまいます^^; これも、考えなくても当たり前でした。そういうものですからね。これはこれでなかなか趣がありますが、このままではメニューになりません。何とかしましょう。 これも答えは簡単です。<a href="（リンク先URL）" target="_top">と書けばOKです。この「target="_top"」は、フレームをすべて解除してリンクします。 これでバッチリですねw