1stブログ閲覧ガイド 3

After

Before

1stブログ閲覧ガイド 2 続き。懸案事項回避編。
以下の引用は同投稿からの抜粋。 #art #painting #Blogger

修正前

2014-05-23付けの投稿 ”動的ビューテンプレート”とモバイル版について で取り上げた、投稿とは別の独立した”ページ”が表示されない問題は、2014-08-01付けの投稿 Dessinリスト再編 にてガジェット”リンクリスト”を代替にすることで一応の解決を見た。
しかし、そこでは新たな問題ースクロールバーの上にガジェットドックが重なる現象ーが懸案事項として残されていた。

この現象を確認してから、約一年が経過した。その間、同現象が起こる度、スクロールバーが使えず、円滑な閲覧の障害になっていた。その上、その再現に必ずしも一貫性がないことが、原因の究明を阻んでいた。
今回漸くこの現象の発生を回避する手立てを講じた。唯、HTMLをほとんど読解できておらず、原因の把握も曖昧で、本質的な解決策ではない。CSSに手を加え、表面上糊塗したにすぎない。変更はCSSのみに行い、テンプレート自体には手を着けていない。
以下にその変更箇所と回避策をまとめた。
尚、CSS分析にはGoogle Chromeの右クリックコンテキストメニューの一つ"要素を検証"を使用した。

変更箇所

CSS分析の結果、メニューの各閲覧モードは、表面的には7種類あるが、内部的なCSS上のid、classセレクタ(投稿記事の表示方法)においては、3種類に集約されることが解った。下記表参照。
さらにメニューとは直接的な関係が無い表示方法があり、CSS上は

.viewitem-panel

というclass名。

表示のリクエストがあった時点で、その投稿のバッファリングが無い場合、緊急避難的にそのclassの表示方法が採用される（らしい）。
バッファリングは、プログラミングとは別に、動作環境や状況（パソコンの性能、投稿の数、サイズの多少等）に影響を受ける部分も大きい（と思う。たぶん）。そう考えれば再現に一貫性がないのも、ある程度納得できる。

Menu	id、class
Classic	ol.items
Flipcard,Magazine,Snapshot,Timeslide	#overview, #lightbox
Mosaic,Sidebar	.article

回避策

そのclassセレクタにおいて、表示エリアの z-indexをガジェットドックより上にし、表示幅を広げ、一見通常の表示のように体裁を整えた。下記コード参照（抜粋）。
よってガジェットドックは覆い隠され、操作の手が及ばないことになった。通常の表示ではない事を明瞭にする為、カーソルをファビコンの猫印にし、画面左肩に斜に水色のリボンを掛けた。上記修正後画像参照。
因みにこの表示モードは、元々投稿を編集する際のプレビュー画面と同様のモードだが、違いは、ヘッダーバーの×カーソルをクリックすると、表示を終了し、親のモードに戻る。（従来通り、タイトルのクリックは初期表示）
ブラウザの戻る・進むボタンで閲覧の時系列の連続性は一応確保できる。但し表示中も親モード上で無理やり表示させている、離れ小島のような状況なので、戻る・進むボタンの履歴は正確ではない。この理由はよく解らない。

Music × Picture

Symphony No. 29

Mozart


.viewitem-panel {
z-index: 3001;
cursor: url(http://elpoeptacgallery.blogspot.jp/favicon.ico),auto;
}
.viewitem-panel {
bottom: 0;
border-top: solid 1px transparent;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
left: 0;
margin-top: 0;
position: fixed;
right: 0;
top: 100px;
-moz-transition: margin-top 1s ease-in-out, bottom 1s ease-in-out;
-ms-transition: margin-top 1s ease-in-out, bottom 1s ease-in-out;
-o-transition: margin-top 1s ease-in-out, bottom 1s ease-in-out;
-webkit-transition: margin-top 1s ease-in-out, bottom 1s ease-in-out;
transition: margin-top 1s ease-in-out, bottom 1s ease-in-out;
z-index: 999;


また今回のCSS分析の副産物として、ガジェットドック、記事部分の表示幅、オペレーションの閉じる×印、広告の位置、文字装飾、アイコンの導入等、少々調子に乗りすぎと思われる程、見た目の体裁を随分変えた。
この結果、今回の改善にも拘らず、本ブログのパフォーマンス、ユーザーの利便性は、総体的には随分低下した。
しかし本ブログは、主に画像のインパクトが勝負の皮相的なブログであるから、将来的なパソコン、通信環境の性能向上を期待して、敢えてこのままで行こうと思う。
勿論、CSSにおけるミスやブラウザごとの対応は、随時行うつもり。Google Chrome以外で表示に不体裁がある場合は、同ブラウザの使用を推奨。

Dessin icon

Information icon