読者です 読者をやめる 読者になる 読者になる

ないとうさんの知恵袋

マンガ・スポーツを中心に役立つ情報をごった煮でまとめています

はてなブログをスマホから見た時に、邪魔なウィジェットを非表示にする方法

ワードプレスと違って自分で色々とカスタマイズしないとなかなかカッコイイデザインにならないのが、はてなブログの悩みでもあるんですが、とりあえず一通りのカスタマイズは終わったと思います。

そのカスタマイズをしていて、特に邪魔だなあと思った『スマホから見た時のウィジェット』。今回はこれらを非表示にする方法をご紹介します。

邪魔なウィジェット一覧

とりあえずこの6つだけは邪魔だったのですべて非表示にすることに。それがこちら。

  • はてなブログ開発ブログ

  • 週刊はてなブログ

  • はてなブログトップ

  • Powered by hatenalog

  • ダッシュボード / PC版 / ブログを報告する

  • はてなブログをはじめよう!

これらを非表示にするには、CSSでのカスタマイズが必要です。上では6つと書きましたが、実際は4つのクラス、またはIDを弄ってあげるだけで大丈夫でした。ちなみに私の場合、デザイン設定画面から『レスポンシブデザイン』を選択していません。

f:id:naito_3:20170106140950j:plain

今回紹介するCSSを記載する場合は、下記タグの中に全てつっこんでください。

<style type="text/css">

ここのstyleタグ内に全て記載する

</style>

はてなブログ公式系

勝手にはてなブログ公式系と名付けているウィジェット群は『はてなブログ開発ブログ』『週刊はてなブログ』『はてなブログトップ』の3つです。

f:id:naito_3:20170106140809p:plain

まずはこれを消しましょう。消すには【デザイン > スマホ > ヘッダ > タイトル下】の『スマートフォン用にHTMLを設定する』をクリックして、次のようにCSSを書きます。

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

これではてなブログ公式系のウィジェット3種が非表示になります。『display:none』についてですが、しばしばSEO対策が~、検索順位が~、などと議論されますが、別にSEOのプロじゃない限りは気にしなくていいです。もっとも効果的なSEO対策は、『良質なコンテンツ』を書くことですからね。こまけぇこたぁいいんだよ!

はてなブログをはじめよう!

次はこのデカくてめちゃくちゃ邪魔なウィジェットを非表示にしましょう。

f:id:naito_3:20170106141829p:plain

.footer-action-wrapper{
  display:none;
}

これで大きいウィジェットは大体非表示にできたので、だいぶスッキリしましたね。

Powered by hatenalog

次はこいつ。小さいので非表示にしなくてもいいかもしれませんが、余計なリンクは張り巡らせたくないので非表示にしちゃいましょう。

f:id:naito_3:20170106141831p:plain

.footer {
  display:none;
}

ダッシュボード系

画面の最下部に表示されている、ダッシュボードへ行く・PC版に切り替える、ブログを報告するも邪魔なので消しちゃいましょう。

#footer-menu {
  display:none;
}

以上4点を日表示するとフッター部分がここまでスッキリします!

f:id:naito_3:20170106142257j:plain

スマホ表示を意識している人はぜひやっておきましょう。

はてなブックマークコメント欄を消すのに四苦八苦したお話

スマホのカスタマイズもすんなり終わったのは良かったのですが、一つだけ全然解決できなかった問題がありました。それが、『はてなブックマークコメント欄』の非表示です。ちなみにこんな感じ↓

f:id:naito_3:20170106142704j:plain

これに1時間以上かかってしまいました。

でも、、、これを非表示するのって実はワンクリックだけで良かったんです。

f:id:naito_3:20170106142759j:plain

こんな所に表示/非表示のチェックボックスがあったのか…。1時間返して! 切り替え場所は【デザイン > カスタマイズ > 記事】のところにあるので、私と同じように消せなくて悩んでいる人はご参考にしてください。多分こんなので悩みまくったのは私だけかと思いますが…。

最後に

以上が、はてなブログをスマホから見た時に、邪魔なウィジェットを非表示にする方法でした。 こういう設定はブログ立ち上げ段階にやっておきたいですね。記事がどんどん追加されていったあとで設定しようとすると、色々ほころびが出るかもしれませんので。

ご参考になりましたら幸いです。