Studio TA Subsite の案内とお知らせ

ブログトップの「新しいイイネ」「新しいメッセージ」を拡張表示 / エキサイトブログ

2017年 12月 13日

新着表示「イイネ」「コメント」の仕様


ブログトップ画面で、新着の「イイネ」「コメント」があれば「」マークを表示してユーザーに知らせます。

a0349576_14345397.png

このマークは「イイネ」「コメント」の区別なく表示される仕様で、「ブログ管理」を開いて見ないと新着内容が判断出来ません。 これはいささか不便で、ダイレクトにトップ画面上に表示するアレンジスタイルを作ってみました。


アレンジ可能な環境


このアレンジは「ユーザースタイルシート」というブラウザ機能で実現します。 多くのブラウザではこの機能をコントロールする拡張機能(アドオン)を導入すれば、非常に有効確実にアレンジを実現できます。 Edgeの場合は現在は未開拓でこれが困難です。 IE11は可能ですが拡張機能がなく、アレンジスタイルを1個しか登録出来ず、少し不便です。 このページは Chrome / Firefox でのアレンジと、IE11でのアレンジについて掲載しています。



新着表示「イイネ」「コメント」をメニューの外に表示する


新着があれば下図の様に、ユーザーメニューの上部にその内容が表示される様にしました。(ブロクの持主にしか見えません)

a0349576_14405994.png

上図は両方の新着があった場合ですが、「イイネ」はブルー、「コメント」は赤として、一目で区別できる様にしています。 下図は、どちらか一方が新着の場合です。
  ◎新着の「コメント」はクリックして見に行くと新着サインが消えます。
  ◎新着「イイネ」は、押されて一定時間(1日程度?)後に自動的に消えます。

a0349576_14444739.png
a0349576_14450276.png

また、トップページは下方に一定以上スクロールすると、ユーザーメニューが上部に現れるフロートヘッダーに表示されます。 この場合も、メニューを開かなくても下図の様に新着表示が判る様にしています。

a0349576_15253956.png

それぞれの新着表示は、いずれも「ブログ管理」を開いた時と同様に、クリックすると各管理ページを開くスイッチになっています。「ブログ管理」を開くとこれらの表示は一時的に消え、閉じると再び表示されます。



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


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

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

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


〔手順2〕
「Stylus」が導入されたら、アレンジ用CSS(スタイルと呼びます)をインストールします。 入手先は以下のリンク先です。「userstyles.org」は、この様なスタイルを各種掲載配布するサイトで、リンクは私が登録したこのスタイルのページです。

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

  スタイルの入手先


〔手順3〕
Chrome を使用している場合は、Stylus のこのスタイルの編集画面に入り、下図の様に「コード2」の適応先を「次で始まるURL」から「URL」に切り替え、画面の左メニューの「保存」を押して、変更を保存します。

a0349576_17271197.png

「コード2」は Firefox用で、新着表示ボタン上の文字位置を調節します。 Chrome版でこの変更をしないと文字が少し上寄りになります。(実用上の問題はありません)



アレンジの実装方法 IE11 


IE11には、Stylusの様な拡張機能がありません。 IE11でアレンジを実装するには、以下のページを参考にしてください。
上記の説明は「編集画面のアレンジ」を目的に書いていますが、このページの「新着表示のアレンジ」も全く同様です。

  ◎ユーザースタイルシートのファイル名は適当で良く、説明の様に「Excite.css」などでOKです。
  ◎ファイルの内容になる「基本CSS」は以下で、IE11用スタイルにはオプションはありません。

〔 基本CSS 〕


/* ブログトップの新着表示を拡張表示 IE11版 */

/* 閉じたメニューを非表示メニューにする */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) {
display: block !important;
padding: 0 !important;
border: 0 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::before,
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::after {
content: none !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) > * {
display: none !important; }


/* ヘッダー上のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -120px;
right: 0;
margin: 0 !important;
width: 350px;
border: none !important; }


/* ヘッダー上のデザイン スクロールダウン時 */
body[data-event-category="page-top"] .is-down .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -52px;
right: 180px;
margin: 0 !important;
width: 350px;
border: none !important; }


/* いいね・コメントが無い場合 管理画面トップを表示させない */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) a {
display: none !important; }


/* 新着表示のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="likes"] {
display: block !important;
height: 23px;
line-height: 9px;
border-radius: 4px;
margin-right: 8px !important;
text-decoration: none !important;
color: #fff !important;
background: #03A9F4 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="comments"] {
display: block !important;
height: 23px;
line-height: 9px;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: red !important; }







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


[PR]
# by Ataron | 2017-12-13 19:17 | ブログスキンのアレンジ | Comments(0)