このblogの右側メニューの下の方にあるShop Link部分なんだけど、今までは
<div style="overflow: auto; height: 200px;"></div>
と言うようなタグで囲って表示部分が縦に伸びないようにしていたのだけれども、実はshop部分のHTMLは物凄く量が多いのである。で、他の部分にhtmlとか書き込んでいたら何故か、このblogのソースの一番下にあたる
</body>
</html>
が消えてしまうって言う現象が起こった。なんだろう？と色々探った結果ソースの空欄部分を削除してHTML全文の長さを短くしたところ更新後も表示されるようになった。・・・どうやらここのロリポップブログにはhtmlの長さに制限があるようだ。あんまり長いと制限オーバー分は勝手に削除されてしまう感じですね。
しかしこれはまずい。今の状態よりサイドバー部分のコンテンツが増えた場合ソースの下の方が勝手に切られてしまう。そうするとhtmlとしてタグが閉じられない。うーん。
あ！インラインフレームにすりゃいいんじゃん。って事でそのshopList部分にインラインフレームを使うことにした。こんな感じのタグを挿入した。
<iframe src="http://planting-field.com/shop_link/shoplist.html" width="180px" height="200px"></iframe>
width="180px" height="200pxの部分で横と縦のサイズを指定し
別に作ったshopList部分だけの単独ページを読み込むように変更した。こうすることにより、blog自体のHTML全長が短くできる。もちろん他の部分と文字サイズ等のデザインが異なると見てくれが悪いのでCSSもちゃんと記述した。とりあえずちゃんとなっていますね。
しっかしインラインフレームなんての久しぶりに使ったな。サイト作り始めた頃に使ってみたくらいだから何年ぶりかしら。ま、せっかくあるタグなんだから使いましょ！
コメント