仮想サーファーの波乗り

仮想化エンジニアの日常

プログラミング・ブロックチェーン・VR/AR・作業効率化・中国事情などに関してよく書きます。

はてなブログのスマホ画面ではてなブログ情報を非表示にする方法(コピペでOK)


スマホ画面ではてなブログのリンクへの誘導が自動で挿入される問題!別に困りはしないけど、自分のサイトに不必要な情報はなるべく排除したいですよね。ということで非表示にする方法をまとめました!


スマホ画面ではてなブログ情報を非表示にする方法


デザインCSSにコードを追加&調整

次に、デザイン→スマートフォン→フッタ→ページャ下のHTMLを記載できる箇所に以下のコードを貼り付けます。
*ちなみにこちらは、2018年3月11日段階では、はてなブログPRO会員のみ使える機能になっているようです。「課金しないなら、はてなブログの広告は載せさせてもらうよ!」ということですかね。

<style type="text/css">
#footer-menu {
  display:none;
}
.touch-item-list{
  display:none;
}
.hatena-module.profile {
  display: none;
}
.footer-action-wrapper{
  display:none;
}
.pagetop{
  display:none;
}
</style>

これで、あとは「変更を保存する」ボタンを押すことで、スマホのフッター部分からはてなの情報が非表示になっていることを確認できるはずです。


f:id:virtual-surfer:20180311092057p:plain

↑ 不要な情報は非表示にされていますね!


はてな情報表示HTMLのコード解説

ここからは、上記のコードを軽く解説しておきます。困ったらここを見てコードの該当箇所をチューニングしてください。


HTMLの中でCSSを適用する

<style type="text/css">
/ * ...ここにCSSを書く */
</style>

以上のようにstyleタグで囲むことで、HTMLの中でCSSを書くことができるようになります。


はてな各種リンクの非表示

.touch-item-list{
  display:none;
}

以上の箇所で、はてなの各種リンクは「touch-item-list」というclassタグで管理されているので、それを指定して「display:none;」で非表示にしてしまいます。他の箇所も要領は同じです。

・#footer-menu ... フッターメニュー
・.hatena-module.profile ... はてなプロフィール
・.footer-action-wrapper ... フッターの管理ボタン
・.pagetop ... ページトップへのリンク

をそれぞれ非表示にしているので、非表示にしたくないものはCSSに書かないようにすれば、元のまま表示されます。


以上、これだけでスマートフォンサイトの不要な情報を削減できます!


まとめ

CSSで要素指定して「display: none;」すれば非表示にできるので、不要だなあと思う箇所はどんどんカスタマイズしていきたいですね!
はてなブログだとCSSを適用するファイルが1箇所に集約されてるから、要素を探すことさえできれば「どのファイルに書けばいいのか?」とかイチイチ考えなくていいのが良いですね。普通のサービス開発の時のプログラミングよりも楽。


では!