本日のブログ改造記
2025/11/15
ブログタイトルのMP4動画をPCとスマホで切り替え表示
画面幅に応じて表示するMP4動画を切り替えるため、PC用とスマホ用の<video>タグを別途用意し、 CSS・JavaScriptを使用してデバイスに応じて表示を切り替えるようにしました。
MP4動画のループ再生時につなぎ目の違和感を解消しようと試行錯誤しましたが、最終的には一度再生で停止する仕様に落ち着きました。
PC用 940*100
スマホ用 940*180
※ スマホの方が画像が大きいのは、 スマホは画面の横幅が狭いため、PCと同じアスペクト比で画像を表示すると、非常に小さくなってしまうから。
ヘッダーとフッターのモジュール化
ブログの保守性と効率を高めるため、すでに分離済みのサイドメニューと同じく、ヘッダー（header.html）とフッター（footer.html）もメインのHTMLから分離し、 JavaScriptで動的に読み込む方式を採用しました。これにより構造が整理され、管理がしやすくなりました。
menuは分離済み→→→ |
header, footerも分離 |
リストとメニュー機能の改善
リスト項目のインデント調整と、開閉マーク（▼・▲）の動的切り替えを JavaScript で実装しました。 また、スクロールバーの出現・消失によるレイアウト幅の変動で生じていたズレも修正しました。
 |
▼ を押すとメニューが開き、
|
ファイルの文字化け問題の解消
WebサーバーがJavaScriptやCSSファイルをUTF-8として認識していませんでした。 （ディレクトリ名がcssやjsの場合は文字化けしない）
.htaccess ファイルに
AddType text/css;charset=UTF-8 .css
AddType application/javascript;charset=UTF-8 .js
コードの一部、リスト項目の開閉はJavaScriptで操作されていますが、 JavaScriptを使わないアコーディオンも他のページで使用しています。
デモ
タイトルをクリックすると開閉ができます
ここにコンテンツが入ります
- リスト：1
- リスト：2
- リスト：3
このアコーディオンは、上のアコーディオンとは独立して開閉します。
JavaScriptを使わずに実現しています。
