人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

編集画面をアレンジした理由 / エキサイトブログ

2016年 10月 25日
ブログ編集画面をアレンジした理由やアレンジ導入後の現状について、少しまとめたいと思います。



既成のブログ編集画面は、左のサイドメニューや上方/下方の編集と無関係の表示で、押し込められています。 余計な表示がちらちらする画面で、狭い幅のスペースに書き込むという状態です。

また、編集枠の文字が小さくて「 ゜゛」の区別で困っている人は多いはずです。 文字を大きくしようとブラウザ画面を拡大すると、サイドメニュー等他のパーツもアンバランスに拡大します。 編集枠を縦スクロールしようとしてウインドウ全体がスクロールして苛立つ事はありませんか。 本当に編集に使う部分は狭いのに、ウインドウの縦スクロールバーが常に出て操作の邪魔をします。

昔はOutlookExpressが簡易なエディターとして使い易かったので、何か書く時には重宝していました。 その時を思い出すと「こんな事はなった、これは何か編集しにくくない?」と思い始めたのです。 そこで、自分仕様にアレンジする方法を探すと、ユーザースタイルシートというテクニックに行き着きました。

編集画面の全構成を調べてみると、実際に編集に使うパーツは全体面積の約1/3です。 この無駄を無くして行くに従って、どんどん使い易くなる事が判ってきたのです。

編集画面をアレンジした理由 / エキサイトブログ_b0174191_11395616.png



ユーザースタイルシートとは

下は、ブログの原稿データ(ユーザーが書き込み画像等を追加したHTMLデータ)を、ブラウザで閲覧し、それを再編集する様子です。 ブラウザはHTMLデータをスタイルシートで修飾して表示します。 この図は、特に各場面で適応されるスタイルシートを示しています。

編集画面をアレンジした理由 / エキサイトブログ_b0174191_12185581.png

図中で上側は一般的な形で、閲覧時はスタイルシートとして「ブログスキン」が適応され、編集時は「編集画面スキン」が適応されます。 これらは、エキサイトのシステム側が用意し、原稿データと一緒に送って来ます。

これに対し、下側はユーザースタイルシートを使う場合です。 エキサイトのシステムが行う事は全く同じですが、編集時の「編集画面スキン」を上書きする形で「ユーザースタイルシート」を適応します。 この「ユーザースタイルシート」は、ユーザーがブラウザ側で用意する個人的なフィルターの様なものです。

スタイルシート(CSS)は本来、ブラウザの表示デザインを修飾する機能で、本質的に原稿データやそれを扱うシステム機能に影響を与えません。 TV画面の設定をどう調節しようが、放送データや放送システムに何ら影響がないのと同じで、ユーザースタイルシートは安全で表示デザインのアレンジに有効な機能と言えます。

一般に、ユーザースタイルシートは、ウェブページの文字サイズやフォントの個人的(閲覧側)改善や、過剰なコマーシャルの抑制などに利用されます。 よく利用する特定のページに対しては、ユーザーの好みの表示をかなりのレベルで実現できます。

ユーザースタイルシートを利用する方法はブラウザにより異なります。 ブラウザにChromeを使用している場合は、Stylist等の拡張機能をインストールして設定し、IE11の場合はインターネットオプションから設定します。 他のブラウザはそれぞれStylistと似た拡張機能がある様ですが、Edgeは拡張機能の整備中といった状態で、もう少し時間が必要と思われます。



編集画面のレイアウト仕様

●編集に必要な機能にスイッチを絞り、ユーザーによっては使われない機能はオプションとし、すっきりしたデザインにする。

●編集アイコンは、不要と思えるものを省いた1行タイプ、エキサイト標準のままの2行タイプ、を用意して選択可能とする。

●編集画面全体の高さを抑え、ウインドウの縦スクロールバーを非表示にする。 これにより、縦スクロールを常に編集枠内の移動とし、編集中に編集アイコンや編集枠が移動する事をなくす。

●編集枠や入力枠の文字サイズを、ユーザー環境に適したサイズで選択できるようにする。

●編集枠の背景色(輝度)をコントロールし、眼の疲れを低減する。 また、画面全体の背景を好みに設定可能とする。

●ブログスキンと設定を連動させて、PC表示の画像と文字の高さの並びを、編集時と実表示で精密に調整する。(編集時の画像サイズも実表示と同じに設定し、不完全ながら編集環境をWYSIWYGに近づける事が可能)

●IE環境では特殊に iframe内が修飾可能なので、画像パレットを1列化・サムネイル拡大で改善する。

●Moreを多用する場合を想定して、画像パレットが常にウインドウに表示されるオプションを提供。



私自身の数か月の運用経過では、大きな問題となる様な欠陥はなく、編集画面読み込み時間などにも問題は感じられません。 一度使い始めると手放せない、大変に快適なブログ編集環境だと思っています。

以下に、Chrome と IE11 の2つのブラウザに対応する、完成度の高いバージョンを整理しました。

〔 Chrome版 〕

(11)Chrome版-ブラッシュアップ(1行アイコン)

(18)Chrome版-ブラッシュアップ(通常アイコン)

(14)Chrome版-テンプレート管理画面
    この(14)は(11)(18)のどちらかのStylist登録が前提で、その後に登録します。


〔 IE11版 〕



by Ataron | 2016-10-25 15:52 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。