YouTube目次ページの改良20161227

「otosan page」の中にある、YouTubeへ投稿した動画の目次ページ（5P）に於いて、項目を横並びさせる機能等で不具合があり、これらを中心に修正作業をした。

このページは2年前からRWDで設計し使用していて、現在もGoogleのMF-Testに合格しているため、上記不具合に気づいていたものの、修正候補としての優先順位が低く手付かず状態だったが、今回全5Pを書き換えMF-TestでもOKが確認できた。

項目を横並びに配列したのに、隙間を生じてしまった等の問題を修正した画面（ページの一部）。

画像はクリックするとLightboxで拡大表示します。

1：詳細説明

「otosan page」の中にYou Tube への投稿動画作品一覧（You Tubeへの投稿動画を集めた目次ページ）があり、このページはほぼ2年前に作成した「フォーマット」を使用し、シリーズ化していて最近でも追加を重ね使用し、今後も使い続けようと思っている。

当初このページは通常の作成手法でスタートしていたが、2015年以降作成のWebページは全てRWD^（※１）へ切り替える方針にしたのに合わせ、RWD用に試行錯誤しながら改造しGoogleのMF-Test^（※２）へ合格させ、それ以降は同じフォーマットを使い現在は5Pになりました。

RWD化としては手法に不慣れな初期に作成したものだったが、最近のRWD手法とは一寸違ったやり方で作られたものでした。

今回、投稿項目の追加作業をしたが、一寸改良した方が良いと思われる点が新たに見付かり、これらはページの少ない内に対策しておかないと、今後増加した時に修正作業が大変であるため、ここで対策することにした。

主な対策点は

しかし、この様な状態であっても、GoogleのMF-Testでは総合的にRWDに設計されたものであると評価されていた為、対策が前述のように延び延びになっていた。

ページ数は全部で5Pあり、今までTwitter Bootstrap法^（※３）で作成してきたが、otosan pageの主流はメディアクリエ法^（※４）を使用している。現在はこれに少し慣れてきて自分に合った手法であると思われ、今後はこの方法を標準にしようとしているため、ソースはほぼ全部書き換えした。図2参照。
ページを表示する枠は、ページ内で上部と下部2ケ所に設置しているため、cssのソースを修正して対策した。図4参照。
上へボタンはページごと記述方法が異なっていた事等により、記述方法の不備が発見できなかったため、外部JS化した方へ統一することにした。図6参照。
最後に全ページをGoogleのMF-Testした結果、全て「合格」が確認できました。図の様な「このページはモバイルフレンドリーです」や「スクリーンショット」の表示が出ます。図8,9参照。

（◆参考：）