人気ブログランキング | 話題のタグを見る
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〕
Firefox を使用している場合は、Stylus のこのスタイルの編集画面に入り、下図の様に「コード2」の適用先を「正規表現に一致するURL」から「次で始まるURL」に切り替え、画面の左メニューの「保存」を押して、変更を保存します。

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

「コード2」は Firefox用の修正コードです。 Firefoxで新着表示ボタン上の文字位置が少し下寄りになるのを修正します。(修正なしでも実用上の問題はありません)


〔追記〕2018.01.04
Chrome / Firefox 版に「コード3」として、「非スクロール時新着表示をヘッダー部に表示するオプション」を追加し、これを標準デザインとしました。 本来の位置に表示させたい場合は、「コード3」の適用先を「正規表現に一致するURL」などに変更して「保存」を押してください。

新オプション追加後は以下の様に、「ヘッダー」あるいは「フロートヘッダー」に新着表示が表示されます。

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


アレンジの実装方法 IE11 


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

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

〔 基本CSS 〕


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

/* 閉じたメニューを非表示メニューにする */
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; */
top: -159px;
/* right: 0; */
right: 180px;
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; }




〔追記〕2018.01.04
Chrome / Firefox版 と同様に、「ヘッダー」あるいは「フロートヘッダー」に新着表示が表示される様に改めました。
上記のコードは改正済みです。


by Ataron2 | 2017-12-13 17:56 | ブログスキンのアレンジ