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

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

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

邪魔なウィジェット一覧

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

  • はてなブログ開発ブログ
  • 週刊はてなブログ
  • はてなブログトップ
  • Powered by hatenalog
  • ダッシュボード / PC版 / ブログを報告する
  • はてなブログをはじめよう!

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

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

<style type="text/css">
ここのstyleタグ内に全て記載する
</style>

はてなブログ公式系

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

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

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

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

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

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

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

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

Powered by hatenalog

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

.footer {
display:none;
}

ダッシュボード系

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

#footer-menu {
display:none;
}

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

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

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

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

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

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

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

最後に

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

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

メディア運営

はてなブログで画像に枠線を自動的につける超簡単な方法
こんばんは、内藤です。 カスタマイズはあらかた終了したかなと思ってブログを書いていて気付いたのですが、すげー画像が見にくいと言うことに。どこら辺が見にくいかと言いますと、『記事コンテンツ部分の背景が白+画像の余白』が思った以上に見にくかった。 こういう時にワードプレスならどうしてたかというと、新しいクラス書いて、画像1個1個にスタイルを適用させていったのですが、はてなブログではMarkdownで記事を書いているので、htmlの調整が効かないのでどうしようかと。 とりあえず応急処置的な形で、はてなブログでは画像に枠線を自動的につけることにしました。せっかくなのでブログ上で公開もしておきます。今回のやり方はコピペで一発で出来るので、画像に枠線をつけてみたーいという人は試してみて下さい。 基本のソースコード /* 画像の枠線 */ img.hatena-fotolife { border:2px #000 solid; } これをカスタマイズ画面にて挿入していきます。 ソースコードの挿入場所 CSSは管理画面から、【デザイン > カスタマ

続きを読む

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

「はてなカスタマイズ」記事をもっと見る