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

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ

2018年 04月 12日

管理画面のユーザースタイルシートによるアレンジ


エキサイトのブログ管理画面は、良く整理されて判り易いものです。 雑然としたインターフェイスでは、多機能のブログシステムをユーザーが充分に使いこなせなくなります。 ブログ管理画面を見れば、そのシステムの素性が判るというものです。

さて、以前に管理画面の「記事一覧」を扱い易くしようと、簡単なアレンジをしていました。 これは未公開ですが、早い話が「記事一覧」のテーブルは画面幅を必要とするので、左側の管理メニューなどテーブル以外の表示は全て非表示にしたものです。

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ_a0349576_11033599.png

「ブログ編集画面」以外で、私がブログ管理画面で日常的に利用するのは「アクセスレポート」「下書き一覧」「コメント一覧」などです。 その比重はユーザーによって異なるでしょうが、ユーザースタイルシートの機能を使えば、全メニューで、各ユーザーのニーズに合わせたカスタマイズが可能になります。

とは言っても、実際のところは良く纏まったレスポンシブル設計のエキサイト管理画面で、「手を加えなければ我慢出来ない」といった部分は殆ど見当たりません。 しかし、今後の良いアイデアのためにも、アレンジのベースを作っておく事にしました。



管理画面のアレンジは適用先指定が重要


管理画面をアレンジする場合、「適用先」の指定をいいかげんにしていると、後で必ず困った事になります。 というのは、各メニューは共通したセレクタを使用している部分が多く、あるメニューでのアレンジが、予想外のメニューのデザインを変えてしまう(誤適用)ことが生じ得るからです。

特に「ブログ編集画面」も「管理画面」の一部として組み込まれているので、「編集画面」も「管理メニュー」もアレンジしようというなら、他の管理メニューとの区別は必須です。

という事で、最初にエキサイトのブログシステムの「URL」を、可能な範囲で整理しました。 以下の表示は次を基準としています。

◎ブログ編集画面として開く画面「■」
◎検索機能で開く画面「■」

◎管理メニューの選択ボタン「
◎管理メニュー内にタブ選択があり、タブ毎に異なるURLを持つ場合は「▸」で表示

◎URLが「userconf.exblog.jp」以外のドメインのもの「★」
◎URLが非SSLのもの「ⓘ」



ブログ編集画面


■新期投稿
https://userconf.exblog.jp/entry/

■再編集
https://userconf.exblog.jp/entry/?

■フリーページ作成
https://userconf.exblog.jp/entry/fp/

■テンプレート作成
https://userconf.exblog.jp/entry/template/

■このテーマで記事を書く
https://userconf.exblog.jp/entry/bookmarklet/

■〔トラックバック会員専用〕★ ⓘ
http://www.exblog.jp/myblog/entry/bookmarklet/



管理メニュー


マイページTOP
https://userconf.exblog.jp/

記事一覧
▸記事一覧
https://userconf.exblog.jp/posts/

下書き一覧
▸https://userconf.exblog.jp/drafts/

フリーページ作成
https://userconf.exblog.jp/entry/fp/

フリーページ一覧
https://userconf.exblog.jp/fps/

画像管理
https://userconf.exblog.jp/image/

テンプレート作成
https://userconf.exblog.jp/entry/template/

アクセスレポート
▸ブログアクセス
https://userconf.exblog.jp/access/blog/

▸記事別アクセス
https://userconf.exblog.jp/access/post/

▸タグ別アクセス
https://userconf.exblog.jp/access/tag/

▸リンク元URL
https://userconf.exblog.jp/access/referer/

▸検索キーワード
https://userconf.exblog.jp/access/keyword/

ブログイイネ
▸新着イイネ一覧
https://userconf.exblog.jp/likes/

▸イイネレポート
https://userconf.exblog.jp/likes/report/

コメント・トラバ一覧
▸コメント一覧
https://userconf.exblog.jp/comments/

▸トラックバック一覧
https://userconf.exblog.jp/trackbacks/

コメント・トラバ設定
▸コメント・トラックバック設定
https://userconf.exblog.jp/config/comment/option/

▸ID・URL拒否設定
https://userconf.exblog.jp/config/comment/url/

▸IP拒否設定
https://userconf.exblog.jp/config/comment/ip/

▸キーワード拒否設定
https://userconf.exblog.jp/config/comment/keyword/

ファン管理
▸ファン申請管理
https://userconf.exblog.jp/config/fan/message/

▸ファンブログ一覧
https://userconf.exblog.jp/config/fan/list/

基本設定
▸基本設定
https://userconf.exblog.jp/config/basic/

▸メニュー設定
https://userconf.exblog.jp/config/menu/option/

▸メニュー並べ替え
https://userconf.exblog.jp/config/menu/sort/

プロフィール設定
https://userconf.exblog.jp/config/profile/

ジャンル設定
https://userconf.exblog.jp/config/genre/

デザイン設定
▸PCデザイン設定
https://userconf.exblog.jp/config/design/pc/

▸スマホデサイン設定
https://userconf.exblog.jp/config/design/sm/

SNS設定
▸SNS連携
https://userconf.exblog.jp/config/sns/list/

▸SNSボタン設定
https://userconf.exblog.jp/config/sns/display/

メール投稿・通知設定
https://userconf.exblog.jp/config/mobile/

ブログパーツ
https://userconf.exblog.jp/config/blogparts/

エキプロへ引越し
https://userconf.exblog.jp/config/import/basic/

ブログ削除
https://userconf.exblog.jp/config/delete/

ブログを本にする
https://userconf.exblog.jp/config/mybooks/

ライフログ
https://userconf.exblog.jp/config/amazon/

ヘルプ ★
https://www.exblog.jp/bloghelp/blog/

ご利用コースの確認
https://userconf.exblog.jp/status



検索


■エキサイトヘッダー検索 ★
https://search.exblog.jp/

■ブログ内検索 ★ ⓘ
http://www.exblog.jp/search/?



適用先指定で注意すべき部分


◎「マイページTOP」が「https://userconf.exblog.jp/」でサブディレクトリ(.jp/以降)を持ちません。
適用先を「次で始まるURL」=「https://userconf.exblog.jp/」と指定すると、他の管理メニューや編集画面などに誤適応が生じ得ます。 この場合は、適用先「URL」=「https://userconf.exblog.jp/」と指定すると、他のサブディレクトリを持つ画面への適用を避けることができます。「マイページTOP」だけ適用先指定が別扱いになります。

◎他の画面は、「次で始まるURL」=「サブディレクトリまで指定」で、完全に適用先の区別が出来ます。

◎従来、編集画面のアレンジでは「https://userconf.exblog.jp/ent」を「適用先」の基本的な文字列として、編集画面の種類で個別アレンジをする場合は、個別サブディレクトリまで指定して区別して来ました。 これは、そのままで変更する必要がありません。

◎「ヘルプ」メニューだけは、特別なドメインに送られ、これは管理画面とは全く別のアレンジになります。

以上が、管理画面をアレンジする際の適用先指定の注意点です。



実際のアレンジした様子


以下は、今回作ったスタイル「Excite Blog Config Style」を拡張機能「Stylus」に登録して、アレンジを適用した状態です。

◎左メニューのスライドアウト、スクロールメニュー化で、ウインドウの最小幅を780px程度にコンパクト化。
◎不要の表示を省略して、管理機能の操作に限った表示としています。

管理画面の「左メニュー」は常に画面の左側に隠れていて、マウスポインタを画面の左端に近付けると出て来ます。

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ_a0349576_01095970.png

「マイページTOP」は、「アンケート枠」「お知らせリスト」等の通知内容を省略せず、これを開くボタンをメニュー列から独立させています。(赤枠) それ以外の「左メニュー」はスクロールで表示されます。 Chromeではwebkit利用で細いスクロールバーとしましたが、Firefoxでは普通のスクロールバーになります。

「左メニュー」からマウスが退くと、ページの全体表示となり、ウインドウ幅は最小で780px程度です。 管理画面のページは本来レスポンシブデザインです。 デスクトッブの状況に合せ、必要なら右方向に大きくウインドウを拡げる事も可能です。

下は「基本設定」の画面の上部です。 余計な表示がなく、あっさりとした印象です。

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ_a0349576_22501324.png

ヘルプは、全く構成の異なるページですが、管理画面から開く事が多いので、ウインドウの最小幅が同じとなる様にアレンジしました。 やはり「左メニュー」を左側に待避させています。

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ_a0349576_22560298.png

マウスポインタを左側に寄せると、メニューが現れてヘルプ項目の選択が可能になります。

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ_a0349576_22574400.png



アレンジの実装方法 Chrome / Firefox 


〔手順1〕
Chrome / Firefox でアレンジを実現するには、そのベース環境として各ブラウザ専用の拡張機能「Stylus」が必要で、その導入は簡単です。(拡張機能「Stylish」でも可) 拡張機能の入手先はブラウザにより異なります。 導入手順は、使用しているブラウザに合った以下のリンクを参照ください。

  Chrome版「Stylus」の入手と設定手順

  Firefox版「Stylus」の入手と設定手順


〔手順2〕
「Stylus」が導入されたら、「Excite Blog Config Style」をインストールします。 入手先の「userstyles.org」は、ユーザーの作ったスタイルを配布するサイトで、下のリンク先に私が登録したこのスタイルがあります。

  ◎スタイル名は「Excite Blog Config Style (chrome / Firefox)」です。
  ◎アレンジ結果を示すメイン画像の右下の Install Style を押します。
  ◎スタイルのインストールは一瞬で完了し、同時に働き始めます。
  ◎紛らわしい「DownLoad」などのボタンを、間違って押さない様に注意!!
  ◎アレンジを停止するには「Stylus」の管理画面でこのスタイルを「無効」にします。

  スタイルの入手先


〔注釈〕
各メニューのページ内容については、気の付いた部分を修正した程度です。 管理画面カスタマイズのベースとして利用していただければと思っています。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2018-04-12 01:19 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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