【Amebaブログ】「このブログに関連するおすすめの記事」非表示CSS
普段ほとんど見ないんですが、たまたま気になって見てみたブロガーさんのブログが、「アメーバブログ」で運営されていました。
記事を読むため、ずらーとスクロールしたら、下部に「このブログに関連するおすすめの記事」という僕にとっては、全く不要なセクションがあることに気づきました。
そのブロガーさんが書いた記事とは全く関係ない、別の方が書いた記事がランダムでおすすめされています。僕にとっては、不要なので、CSSを使って消してみます。
「アメーバブログ」標準の設定で消せるのかもしれませんが、僕は消し方が分からないので、外部のCSSパワーで消すことにします。
本記事は、見る側で調整する方法です。ブログを運営している中の方向けではありません。運営者が、この表示をオンオフできるのかは知りません。僕は、アカウントすら一度も作成したことがなく、今後も利用する気は全くありません。
「この方のブログはチェックしたい！だけど、下部のおすすめ記事系は、全く不要！」という方、参考にしてみてください。拡張機能を導入できるPCブラウザ専用ですが、消せます。スマホアプリ版では、全く調べていないので分かりません。自身の環境上で、他人には影響しません。いつでも元に戻せます。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/「このブログに関連するおすすめの記事」を消すCSS
「アメーバブログ」にアクセスします。「https://www.ameba.jp」というURLではなく、記事ページの「https://ameblo.jp」です。
インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*記事下部の「このブログに関連するおすすめの記事」非表示*/
div#_popIn_recommend {
display: none !important;
}本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
下記画像のようになればOKです。「#_popIn_recommend」が「このブログに関連するおすすめの記事」を指していて、それを「display: none」で消すようにしています。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：ameblo.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「アメーバブログ」の「このブログに関連するおすすめの記事」が表示されるページにアクセスします。全ての記事に表示されるか分かりませんが、僕が適当にざざっと見た感じは、全記事共通で表示されている印象です。
CSS導入後は、ページ下部の「このブログに関連するおすすめの記事」セクションが丸々消えています。その下にある「おすすめの記事」やランキングは表示されます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「ameblo.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
「おすすめ記事」、「Ameba人気のブログ」なども削除したい場合
僕にとっては、「おすすめ記事」、「Ameba人気のブログ」などのセクションも丸々いらなかったので、以下のCSSを追加で書き込みました。
/*記事下部の「おすすめ記事」、「Ameba人気のブログ」などごっそり非表示*/
div#_popIn_recommend~section {
display: none !important;
}「このブログに関連するおすすめの記事（#_popIn_recommend）」がある階層と同じ場所にあるコンテンツ（section）を丸々消す（display: none）という意味です。
ランキングやら関連記事などの項目が丸々消えます。記事下部には、ヘッダーがあるのみです。
感想
以上、PCウェブサイト版「アメーバブログ」の記事下部にある「このブログに関連するおすすめの記事」、「おすすめ記事」、「Ameba人気のブログ」などを非表示にするCSSでした。
「note」関連のCSS記事も、なにげにおすすめです。
