スタブロウォッチャー専用スタイル「Comment / Reblog Check」

何でもやって見るもの

アメブロユーザーの千人に一人もこのスタイルには用がないでしょうが、決して非生産的なものではありません。このスタイルは、スタブロのコメント欄とリブログ欄とを効率良く閲覧する事を目的にしたもので、不要なスタブロ本文などは非表示にしています。

これが必要と思ったのは、誰かのリブログの意見を見に行くと、再び他のリブログを見るのにとても手間取るからです。コメント数は多くても、それは案外と困らないのですが。しかし、このアレンジをしていると思った以上の発見がありました。

コメントデータのページへの読込み

コメント欄は「もっと見る」を押すまで最後の3件しか表示しませんが、実はページ内に最新の50件までのデータを読み込んでいます。それ以前の件数がある場合は、コメント欄末尾のボタンで次の50件を読み込む様です。

これはアレンジで50件を最初から表示する事が出来ます。表示コメントを3件にしてもページ表示を速める意味は殆どなく、この仕様はサイドメニューADに関係でもあるのかと疑いたくなります。スタブロの様にコメントが100件を越えるページは普通はなく、一般のユーザーにとっては、最初から全コメントを表示出来た方が便利に決まっています。

リブログデータのページへの読込み

「リブログ一覧を見る」を押すと小ウインドウが暗転して開きますが、リブログのデータについてはこの時に読み込んでいる様に見えます。アレンジして驚いたのは、リブログの1件ずつに記事全文が読み込まれている事です。リスト上は最大3行までを表示しますが、これもアレンジで全文表示出来ます。いちいちリブログ記事を見に行かずに、その場で記事内容を確認出来るのです。

デザインの説明

下は、このスタイルを適用したスタブロのページです。

❶ ページャーが常にヘッダー部にフロート表示されます。沢山のコメントの途中からすぐに左右のページに移動出来ます。

❷ このスタイルは個別記事表示の場合（個別記事タイトルをクリックした状態）にのみ適用されます。「スタッフブログ」を押すと、トップページ通常表示に戻れます。

❸「個別記事タイトル」と末尾の「いいね！」「コメント」「リブログ」のボタン部分のみを表示し、間の記事本文は省略されます。

❹ ページを開いた時から、リブログ1件と記事（末尾最大50件）が表示されます。最下部のボタンで50件ずつ遡ってコメントを表示します。

❺ 右メニューは、目的記事を開くための機能を残しています。

下は「リブログ一覧」のウインドウを開いた状態です。従来よりウインドウ幅と高さを広く採っていますが、更にリスト右側に余白を作っています。これは、この部分にポインターを置いてホイールスクロールをし易くするためです。

リスト上の記事の上にマウスを乗せると、下の様に記事全文が表示されます。文字サイズは14pxの標準サイズに拡大して読み易くしています。

リブログ記事がここで読めるので、内容のある記事を素早くピックアップ出来ます。これは非常に有効です。

〔注記〕全文表示の機能は Chromeのみ有効です。残念ですが Firefoxは「-webkit-line-clamp」に対応出来ないので、行数拡張が出来ません。

ピグライフなどのスタッフブログにも対応

当初、スタブロを対象にアレンジを編纂しましたが、ピグ関連のスタッフブログが多くある事に気付きました。しかしピグ関連の半分は旧タイプスキンなので、新タイプスキンのスタッフブログのみを対象としました。それでも、ページデザインが一律では無く、少し苦労しました。

以下が対応ページです。

〔スタッフブログ〕

　　スタッフブログ

〔ピグ関連のスタッフブログ〕

　　ピグスタッフブログ

　　開発ブログ

　　パズルブログ

　　つりブログ

　　カジノブログ

　　ライフブログ

コードは 3Code構成です。一般的ではないので、このページでのみ公開です。適用先設定が複雑なので、以下は Mozilla Format の形式にしています。スタイルの導入手順は以下です。

◎「Stylus」で「スタイルを作成」→ 新規編集画面で「インポート」を押す。

◎「インポート」ダイアログが開いたら、以下のコードをコピー&ペーストする。

◎「スタイルを上書き」を押し、念のため左メニューの「書式整形」を押します。

◎ 適当な「スタイル名」を付けてスタイルを「保存」します。

「Comment / Reblog Check」のCSSコード（ Mozilla Format ）

@-moz-document url-prefix("https://ameblo.jp/staff/entry"), url-prefix("https://ameblo.jp/piggstaff-inside/entry"), url-prefix("https://ameblo.jp/pigg-staff/entry"), url-prefix("https://ameblo.jp/pigg-puzzlestaff/entry"), url-prefix("https://ameblo.jp/pigg-fishing/entry"), url-prefix("https://ameblo.jp/pigg-casinostaff/entry"), url-prefix("https://ameblo.jp/pigglife-staff/entry") {
/* スタブロ　Comment / Reblog Check *************************/
/* ブログ主要部のフォント指定 ***********************/
#ambHeader,
.skin-blogMainTitle,
.skin-page .skin-blogBody,
.ReactModalPortal {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo; }

/* 修飾表示 *************************************/
/* アメブロヘッダー背景色 */
._1wfBdJLw,
._1J3Yndin {
    background: #cfd8dc; }

._3HsopbV7 {
    display: none; }

._1J3Yndin:before {
    content: "Comment / Reblog Check";
    font: bold 14px/21.5px Meiryo !important;
    position: absolute;
    top: 4px;
    right: 500px;
    padding: 0 12px;
    height: 20px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #fff;
    background: #00838f; }

/* ヘッダー部 ***********************************/
[data-uranus-layout="header"] {
    position: fixed;
    z-index: 4;
    top: 30px;
    left: 720px;
    height: 60px;
    width: 400px;
    background: none; }

@media screen and (min-width: 1137px) {
[data-uranus-layout="header"] {
    left: calc(50% + 160px); } }

[data-uranus-layout="headerInner"] {
    width: 100%; }

[data-uranus-component="headerTitle"] {
    height: 60px;
    box-sizing: border-box;
    padding: 3px 0 0 30px;
    background: #689db7; }

[data-uranus-component="headerTitle"]:hover {
    opacity: 1;
    background: #009688; }

[data-uranus-component="headerMainTitle"] {
    width: 100%;
    font-size: 24px;
    color: #fff; }

.skin-blogSubTitle {
    display: none; }

[data-uranus-layout="headerNav"] {
    position: fixed;
    z-index: 1;
    height: 60px;
    width: 100%;
    border: none;
    background: #679db6; }

[data-uranus-layout="headerNavInner"] {
    display: none; }

/* メインコンテンツ *******************************/
[data-uranus-layout="body"] {
    position: relative;
    background: #fafafa; }

/* ページャー */
[data-uranus-component="paging"] {
    position: fixed;
    z-index: 1;
    top: 30px;
    left: 0;
    background: #679db6;
    width: 720px;
    height: 60px;
    box-sizing: border-box;
    padding: 5px 0 0; }

@media screen and (min-width: 1137px) {
[data-uranus-component="paging"] {
    left: calc(50% - 560px); } }

.skin-btnPaging,
.skin-btnPaging:hover,
.skin-btnPaging:visited {
    border: 1px solid #999; }

/* ページ本文 */
[data-uranus-layout="mainInner"] {
    margin-top: 45px;
    background: none; }

[data-uranus-component="entryThemes"],
[data-uranus-component="blogGenreEntryRankInfo"],
[data-uranus-component="entryBody"] {
    display: none; }

/* ページ本文 表示部デザイン */
[data-uranus-component="entry"] {
    background: #ececec;
    padding: 20px 50px;
    margin-bottom: 20px; }

[data-uranus-component="entry"] {
    max-height: 250px;
    overflow: hidden; }

[data-uranus-component="entryHead"] {
    margin: 0; }

.js-hashtag.hashtag-module-wrapper,
[data-uranus-component="entryShare"],
.snsReaderModule,
[data-uranus-component="entryPaging"] {
    display: none; }

[data-uranus-component="feedbacks"] {
    margin: 0; }

[data-uranus-component="entryFooterDivider"] {
    display: none; }

/* リブログ・コメント部 デザイン *********************/
[data-uranus-component="mainWidget"] {
    margin-bottom: 0;
    padding: 0 50px;
    color: #000; }

/* 画像つき記事 */
[data-uranus-component="mainWidgetHeader"]:not(#reblogHeader):not(#commentsHeader) {
    display: none; }

[data-uranus-component="imageEntries"] {
    display: none; }

[data-uranus-component="mainWidgetFooter"] {
    display: none; }

/* 下部ナビ */
[data-uranus-layout="footerNav"] {
    display: none; }

[data-uranus-layout="footerNav"] .skin-textQuiet,
[data-uranus-layout="footerNavInner"] {
    display: none; }

/* 全てのコメントを表示 ****************************/
[data-uranus-component="commentsList"].is-collapsed > li {
    display: block; }

[data-uranus-component="commentsMore"] {
    display: none; }

[data-uranus-component="pagination"].is-hidden {
    display: block !important; }

/* リブログ モーダルウインドウ ********************* */
._VTWWy72m {
    font-size: 14px;
    width: 820px; }

/* モーダルヘッダー */
._3OVFjjnu {
    background: #cfd8dc; }

._2NO3-cCV {
    color: #000; }

/* リブログ件数 */
._2y13PkI_ {
    color: red; }

._1H3aORVw {
    max-height: 75vh;
    background: #607d8b; }

/* リストの項目 */
._t1jBTIo6 {
    font-size: 14px;
    margin-right: 100px;
    background: #f4f4f4; }

._t1jBTIo6:hover {
    background-color: #fff; }

/* ホバーで 本文の行数制限なし */
._13k_m6Fs {
    color: #000; }

._t1jBTIo6:hover ._13k_m6Fs {
    -webkit-line-clamp: unset; }

/* 項目 タイトル */
._3rXF4N-X {
    font-size: 16px;
    margin-bottom: 2px; }

/* もっと見る */
._Rg5EvdMm {
    font-weight: bold;
    background: #cfd8dc; }

._1Eq2deCX {
    color: #000; }

/* 右サイドバー **********************************/
#profile,
#calendar,
#readers,
#rss {
    display: none; }

/* フッター ************************************ */
footer._3z8Z6GLQ {
    display: none; }
}

@-moz-document url-prefix("https://ameblo.jp/pigg-staff/entry"), url-prefix("https://ameblo.jp/piggstaff-inside/entry"), url-prefix("https://ameblo.jp/pigg-puzzlestaff/entry"), url-prefix("https://ameblo.jp/pigg-fishing/entry"), url-prefix("https://ameblo.jp/pigg-casinostaff/entry"), url-prefix("https://ameblo.jp/pigglife-staff/entry") {
/* ピグ関連ブログ 追加コード ************************/
[data-uranus-component="headerMainTitle"] {
    height: auto;
    text-indent: -32px;
    margin-top: 12px;
    white-space: nowrap; }

[data-uranus-layout="body"] {
    position: static; }

[data-uranus-layout="columnD"] [data-uranus-layout="content"] {
    padding-top: 75px;
    padding-left: 360px;
    padding-right: 250px;
    background: none; }

[data-uranus-layout="columnD"] [data-uranus-layout="main"] {
    width: 600px;
    margin-left: -50px;
    margin-right: -50px; }

[data-uranus-layout="mainInner"] {
    margin-top: -20px; }

/* コメント欄 */
[data-uranus-component="mainWidget"] {
    padding: 0 20px 0 0; }
}

@-moz-document url-prefix("https://ameblo.jp/pigglife-staff/entry") {
/* ピグ関連ブログ 追加コード ***ピグライフのみ**********/
[data-uranus-layout="headerInner"] {
    height: 60px !important;
    background: none !important; }

[data-uranus-layout="headerInner"] > a {
    display: block; }

[data-uranus-component="headerMainTitle"] {
    position: static; }

[data-uranus-component="headerImage"] {
    display: none; }

[data-uranus-layout="columnD"] [data-uranus-layout="content"] {
    padding-left: 340px !important;
    padding-right: 250px; }
}

記事一覧ページへの対応修正版

〔追記〕2019.01.10

以下は、各スタブロページで「記事一覧」を表示させた場合に、フロートヘッダーに乗り越えが生じたり、アレンジが不適用になる事を改善した修正スタイルです。