2015年8月14日金曜日

1stブログ閲覧ガイド 3

After
Before


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

.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

0 件のコメント:

Related Posts with Thumbnails