はてなブログ ブログカスタマイズ

はてなブログで一部のサイドバーのみを、スマホで非表示にするコードを公開

サイドバーを複数設置している場合、表示項目が多いためにスマホでみると、スクロールが長くなるというデメリットがあります。
どこまで続くの?となりますよね。

このようなことを回避するため、スマホでは不要なサイドメニュー非表示にしてスマホの表示をスッキリさせましょう。

今ご覧のページはワードプレスで作成したものです。
コードを反映させた、はてなブログのデモページはこちらご参照ください。

事前説明 サイドバーの表示位置

はてなブログのレスポンシブ対応デザイン(閲覧者の画面サイズまたはウェブブラウザに応じて適切な状態で閲覧できることを目指したウェブデザインの手法)では、サイドバーに設定した項目は記事の下に表示されます。

パソコンでの表示

はてなブログサイドバーを非表示にする方法

スマホでの表示

はてなブログサイドバーを非表示にする方法

使い方(簡易)

  1. 非表示にしたいサイドバーモジュールのclass名を知る
  2. 対象class名でコードを書き換え【デザインCSS】に貼る

コードを貼る前(変更前)にするべきこと

今回は、「デザインCSS」にコードを貼っていきます。
つきましては、見出しのデザインコードを貼る前に、必ず現段階の「デザインCSS」を保存しておいてください。

もし失敗してブログデザインが崩れてしまったら、元に戻すのに大変な時間を食います。

経験者は語ります。

場所はPCのメモでも、GoogleKeepでも、iOSのメモでも、なんでもよいので、ご自身が使いやすいところに保存ください。

個人的には、保存ボタンを押さなくても記入するだけで保存してくれる、Google,iOSなどのクラウドサービスがおすすめです。

はてなブログのサイドバーモジュールの要素class

スマホで非表示にしたいサイドバーモジュールのclass名が必要となります。

Komeさんの解説ページを参考に、各モジュールclass名をまとめましたので、以下表をご参照ください。

モジュールの種類モジュールの要素名(class名)
検索ボックス.hatena-module-search-box
プロフィール.hatena-module-profile
注目記事.hatena-module-entries-accrss-ranking
最新記事.hatena-module-recent-entries
最近のコメント.hatena-module-recent-comments
リンク.hatena-module-links
カテゴリー.hatena-module-category
アーカイブ.hatena-module-archive
html.hatena-module-html

サイドバースマホ非表示|デザインCSSに貼るコード

スマホで非表示にしたいサイドバーモジュールのがclass名わかりましたら、以下のコードの/class名/の箇所を、自分に合わせたclass名に書き換えてください。

/***サイドバースマホ非表示***/
@media screen and (max-width:767px){
.hatena-module-recent-entries{display:none;}/*class名*/
}

書き換えたコードが準備できましたら、

【ダッシュボード】➡【デザイン】➡【カスタマイズ(=真ん中のスパナマーク)】➡【デザインCSS】に貼り付けます。

はてなブログでCSSを貼るところ

このCSSソースコードは、指定した箇所を非表示にするコードです。

例えば、カテゴリーをスマホでは非表示にしたい場合、..hatena-module-categoryを代入すれば最新記事は非表示になります。

簡単ですね!

コードの解説

max-width : 〇〇〇px

〇〇〇px以下用の設定を意味し、この数値はスマホとタブレット/パソコンで分ける際によく採用されます。
ここの値を細かく指定すればスマホ⇔タブレット⇔パソコンで表示を切り替えることができます。

コードの注意点

スマホ非表示にすることでページがスッキリするのですが、このコードにはデメリットがあります。
それはサイドバーで設定しているHTMLモジュールが2つ以上ある場合、どちらもスマホで非表示になってしまう点です。

例えば、一方のHTMLモジュールでプロフィールカードを設定、もう一方のHTMLモジュールで目次を設定していた場合、例え内容が異なっていてもclass名はどちらも同じ「.hatena-module-html」です。
上記コードでHTMLモジュール.hatena-module-htmlをスマホで非表示にしてと命令すると、すべてのHTMLモジュールがスマホで非表示になってしまいますこと、ご留意ください。

それじゃあ、HTMLモジュール複数設置してたら不便じゃん?と思われた方もおられると想像します。

しかし絶望することなかれです!対策方法はあります!

複数あるHTMLモジュールのうち一任意のものだけを非表示にしたいという場合は、次の章の方法を参照ください。

サイドバー非表示|応用CSS

一番下に設置したモジュールを、スマホで非表示にする

以下のコードは、サイドバーの一番下に設置したモジュールをスマホで非表示にするコードです。

/***目次サイドバースマホ非表示***/
@media screen and (max-width:767px){
#box2-inner .hatena-module:last-child {display: none;}
}

#box2-inner(サイドバーの領域)の .hatena-module:last-child(一番最後のモジュール)はスマホで非表示にするように指定します。

メモ

idの前には「#」、classの前には「.」をつけます。

参考|はてなブログでカスタマイズが捗る構成図をつくってみました - Yukihy Life

こちらのコードを使えば、複数HTMLモジュールを設置した場合でも、非表示にしたいHTMLモジュールをサイドバーの一番下に設置することで、任意のものだけを非表示にすることが可能です。

一番下の設置でなくても、途中においたモジュールを非表示にすることもできます。次のコードお使いください。

下から〇番目に設置したモジュールを、スマホで非表示にする

以下のコードは、サイドバーの下から数えて何番目に設置したモジュールを、スマホで非表示にすると指定するコードです。

/***目次サイドバースマホ非表示***/
@media screen and (max-width:767px){
#box2-inner .hatena-module:nth-last-child(4) {display: none;}
}

:nth-last-child(4)
最後から数えて 4番目の要素を表します。

しかしながら、:nth-last-child(4)をはてなブログで設定しますと、なぜか下から数えて3番目のモジュールが非表示になります。

すみませんが、原因はわかりません。この結果はテーマにもよるのでしょうか?

:nth-last-child()に数値を代入してみて、調整してください。

参考|:nth-last-child() - CSS: カスケーディングスタイルシート | MDN

サイドバー全部を、スマホで非表示にする

以下のコードを使うと、サイドバー全てが非表示となります。

/***目次サイドバースマホ非表示***/
@media screen and (max-width:768px){
#box2 {display: none;}
}

サイドバーをすべて非表示にすると、逆に使い勝手が悪くなりそうですが、備忘録とアウトプットを兼ねて掲載します。

まとめ

少しスマホ表示をスッキリさせたく、いろいろいじってみました。

同様なことを考えているかたの、参考になりましたら、幸いです。

現在ははてなブログではなく、ワードプレスでブログ活動を行っております。はてなブログProを選択しなかった理由をまとめましたので、はてなブログProを検討中の方、ブログ収益化を検討中の方はぜひご参照ください。

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

このサイトはWING(アフィンガー6)を使用しています

はてなブログカスタマイズ 関連記事

はてなブログProを契約しなかった理由

2022/8/20

はてなブログProに契約しなかった理由|本気でブログをするならワードプレス一択

この記事では、はてなブログ無料版から、有料版に移行しなかった理由をお伝えします。 本気でブログ収益化を目指そうと思い、はてなブログ無料から有料版「はてなブログPro」への移動を考えましたが、様々な方面から比較検討した結果、レンタルサーバー(スターサーバー)を契約、ワードプレステーマのAFFINGER6を採用しブログを作ることに決めました。結果、後悔はありません。 はてなブログ無料版をお使いの方で、収益化を目指す方の参考になるようにまとめました。 ContentsはてなブログProはコスパがあまり良くない独 ...

ReadMore

画像リンク変更Search Regex

2022/8/20

はてなブログ画像リンクを一括変更する|Search Regexの使い方徹底解説

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。 この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。 今回使用するのはSearch Regexというプラグイン このブログは「AFFINGER」を使用しています Contents画像移動の手順(簡易) Search Regexで画像リンクを変更Search Regexの使い方検索に入力する文字列 置換に入力する文字列 正規表現にチェックを入れる 検索をする 置換する S ...

ReadMore

はてなキーワードを削除

2022/8/20

はてなキーワードのリンクを、ワードプレスで消す方法を徹底解説|失敗談あり

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードページへのリンクが勝手につけられます。なんと20万語以上の言葉が登録されていそうです。 外部リンクが大量に付くことからSEO評価が落ちブログーから疎まれているのはもちろん、読者も誤タップで別リンクに飛ばされてしまうという煩わしさがある、はてなブログのはてなキーワードリンク。 はてなブログ無料版からワードスレスへ ...

ReadMore

表スクロール

2022/8/20

はてなブログで表をスクロールさせる|コピペで簡単に表が見やすくなるコード

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。 スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。 Contents使い方(簡易)コードを貼る前(変更前)にするべきこと表をスクロールさせる設定CSSコードを「デザイン」に貼り付けるCSSコード解説HTMLコードを記事に設定するHTMLコード解説横スクロールの反映確認方法表をはてなブログの編集モードで変更できる?まとめ 使い方(簡易) CSSコードを「デザイン」に貼 ...

ReadMore

はてなブログサイドバーを非表示にする方法

2022/8/20

はてなブログで一部のサイドバーのみを、スマホで非表示にするコードを公開

スマホでは不要なサイドメニュー非表示にして、スマホの表示をスッキリさせましょう。

ReadMore

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-はてなブログ, ブログカスタマイズ
-, , ,