感想みかん

感想、レビュー、実体験等を書くブログ

はてなブログで記事下の「はてなブログをはじめよう!」を非表示にする方法(暫定)

はてなブログをはじめよう!のPC版の消し方

最近、はてなブログをPCで閲覧したときに、ブログの記事の一番下に「はてなブログをはじめよう!」という、はてなブログへのリンクが貼られていることに気づきました。

他の人のはてなブログでも確認したところ、デザインは違えどほぼ全てのブログで表示されています。なんじゃこりゃ?

この機能は、はてなブログにログインしていると気づきません。ログアウトするか、ブラウザのプライベートウィンドウで自分のブログや他の人のはてなブログをPCかタブレット横持ちで見て表示されるかを確認してください。

2017年9月7日の段階で、この機能はスマホだと表示されず、タブレットのランドスケープモード(横持ち)かPCで閲覧し、はてなにログインしない状態だと表示されました。推測ですが、ブログ幅がある程度以上で、ログインせずにゲストだと勝手に表示されるようです。ちなみにFeedlyとかの内臓ブラウザでみたときも表示されます。

この表示を気にしない人もいるかと思いますが、はてなブログproでお金も払っているし、表示するものは自分でできるだけコントロールしたいと思っているので、非表示にしたいと思いました。

ググってみると、過去の機能でスマホサイトに同じ文言が付くタイプを非表示にする方法については、先輩方のテクニックがいくつか出てくるんですが、それを適応しても非表示にはなりませんでした。

それで、自分でいろいろやってみた結果、下記のコードを非表示にしたところ、うまくいきました。

注意事項
1.はてなブログproにしている人以外はやらない方がいいです。
2.こちらは筆者がこんな感じかなーと思いながら適当に非表示にしたものなので、別の場所で不具合があるかもしれません。やる場合は自己責任でお願いします。

設定→詳細設定→headに要素を追加

改変する場合は、必ずバックアップを取ってください。

ここに、次のコードを追加したところ、非表示になりました。

<style>
/* PC版「はてなブログをはじめよう」を非表示 */
.guest-footer-content{
display:none;
}
</style>

一連のパーツが.guest-footer-contentという名前だったので、それを非表示にしたところ消えました。

こちらを非表示にしても問題ないのかをはてなの運営さんに聞いたところ、proなら問題ないとのこと。proじゃない場合は、知りません。そして、この表示は現在試運転中とのこと。だから出たんですね。今後どうなるかはわかりません。もしもコードが変わったら上記の非表示コードも意味なくなるかも。試運転中ということなので、批判が多ければ消えるかもしれません。ログインしていると気づかない機能というのもちょっとまずい気がします。とりあえず僕はこの機能はない方がいいと思います。

なお、僕はCSSに特に詳しくなく手探りでやっているので、このコードが合ってるのか間違っているのかよくわかりません。なので暫定的にこうしています。そのうちCSSに詳しい人がこの状態に気づいて僕より良い方法を書いてくれることを期待しています。逆に、何かコードが間違っている場合は、突っ込みお願いします。




追記:2017年9月11日

はてなブログをはじめよう!についての公式発表がありました

はてなブログ公式から、不具合の発表がありました。

staff.hatenablog.com

要約すると、「ヘッダー・フッターの表示・非表示機能と連動するはずが、不具合でみんなに表示されてしまいました。今は直っています。」 ということですが、やや腑に落ちません。表示のデカさから言って、どちらかというと、はてなブログの広告に当たるものだと思うので、広告非表示機能に連動させるべきではないのかな?と思いました。僕ははてなブログproだけどヘッダーフッターを表示させたままで使っています。このままだとproでも「はてなブログをはじめよう」が表示されてしまい、やはり別途コードで非表示にする必要が出来てしまいます。

まあ、非表示にできたからいいけど。

非表示にしたいコードの探し方

ついでに僕が非表示にしたいコードを見つけるの使った方法も書いておきます。
僕はメインのブラウザがFirefoxなのでFirefoxを使いました。きっとChromeでもできます。

まず、自分のブログの消したいパーツを表示させます。 Firefoxメニュー → ツール → Web開発 → インスペクター

インスペクターというのはHTML/CSSの分析に使える便利ツール。 今回だと、「はてなブログを始めよう」のパーツ全体が選択されるようにマウスで調整し、コードを見ます。

f:id:mikanumay:20170911174032j:plain

インスペクターによると、この一連のブログパーツが、entry-content.guest-footer-contentというものでありそうなので、この2つ(?)を非表示にしようとしたけどうまくいかないから後半の.guest-footer-contentの表示を非表示にしたらうまくいった感じです(テキトー)。先に書かれていたコードを、後から書いたコードで打ち消した感じです。