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

「ブログイイネ」画面(管理画面)をアレンジする

2018年 11月 09日

新しい「ブログイイネ」画面をアレンジしました


2018年11月から、管理画面の「ブログイイネ」の画面が新しくなりました。「イイネ」はコミニュケーションツールとして有効なもので、エキサイトも改善・向上をこころがけている様ですが、今回の画面は少し間延びしていると感じました。
(サムネイルとブログ名は暈しを入れています)

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_11002711.png

私は以前から「管理画面」の左メニューをスライドアウトさせ、少々幅の狭いモニターでも管理画面をフルに使えるデザインを工夫して来ました。 下はその例で「記事一覧」「下書き一覧」の画面で、左メニューに画面を取られないので、一覧表が広く、見易くなっています。

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_11033599.png

同様の発想で、今回の「ブログイイネ」の画面も、アレンジしてみました。
下はアレンジした画面で、イイネのリストをコンパクトにし、また2列表示にする事で、1ページ分20件のリストがスクロール無しで一覧出来ます。

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_11054759.png

左メニューはマウスを画面の左端に近付けると表示されます。

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_11055403.png


〔追記〕
この記事を書いた後で、新たに「コメントイイネ」機能が追加される告知がありました。 上記のデザインはスペースの関係で「にイイネをしました」を省略していますが、ここが2種の「イイネ」を区別する表示になりそうです。 そこでレイアウトを下図の様に改め、表示を省略しない様にしました。 また、実際に「コメントイイネ」の運用が始まって問題があれば、修復の更新をします。

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_19363480.png



Excite Blog Config Style の更新


「Excite Blog Config Style (Chrome / Firefox)」というアレンジスタイルは、エキサイトのブログ管理画面をアレンジするものです。 今回の新しい「ブログイイネ」の画面のアレンジもこれに追加しました。

また、従来は別扱いだった「Excite NoticeMessage(新着表示)」のアレンジスタイルも、これと統合しました。 このアレンジは、エキサイトTOP画面のメニューに表示される「イイネ」と「コメント」の新着表示を、ヘッダー側に表示するものです。 新着があればヘッダー部に表示され、どちらの新着かが判り、下のブログ管理メニューを開く必要がありません。

「ブログイイネ」画面(管理画面)をアレンジする_a0349576_11211906.png

このアレンジは、「ブログイイネ」の画面と直結するので、統合しました。



Excite Blog Config Style を利用するには


「Excite Blog Config Style (Chrome / Firefox)」は、ブラウザ Chrome および Firefox で利用出来ます。 更新バージョンは、コードの最初に日付で示されます。

このスタイルを有効にするには、CHrome または Firefox に拡張機能「Stylus」を導入している必要があります。「Stylus」は、このページで紹介したアレンジ用CSSを管理してブラウザに適用する拡張機能です。 他のブラウザでも同様のユーザースタイルシート拡張機能が使えるなら、このスタイルが利用できる可能性があります。(CSSの多くの部分はブラウザ共通ですから)


〔手順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-11-09 13:18 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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