ゆ~とっとの家事パパ日記

家事が好きな二児のパパのブログです。日々の生活に役立つワザなど、育児・家事系の記事を中心に書いてます。たまに妻も書きます。

【ブログ】はてなブログをスマホで表示させるときに不要なものを消す方法

スポンサーリンク

こんばんわ、ゆーとっと嫁です。

ブログのカスタマイズが少し楽しくなってきたゆーとっと嫁です。
主人はまた最近忙しいらしく、なかなか帰ってきません。

さて今日ははてなブログスマホで表示される内容を変更しようと思います。


f:id:yu-totto:20160712231426j:plain
いろいろ表示されてます。
これを消すのはPro契約していないとこれできないみたいですね。

手順

1.「デザイン設定」を選択
2.「スマートフォン」を選択
3.「ヘッダー」を選択
4.「タイトル下」を選択
   ※html記述できるところに記載すると反映されます

5.消したい項目を決める

①ヘッダ

/*ヘッダの非表示*/
#globalheader-container {
    display:none;
}
/* 余白調整 */
#container {
padding-top:20px;
}

はてなブログをはじめる

 ※記事を書く、記事の管理

/*はてなブログをはじめよう!等の非表示*/
.footer-action-wrapper {
    display: none;
}

はてなブログ開発の非表示

/*はてなブログ開発の非表示*/
.touch-item-list {
     display: none;
}

④Powerd byの非表示

/*Powerd byの非表示*/
.footer {
display: none;

*⑤ダッシュボードの非表示
>|HTML|
/*ダッシュボードの非表示*/
#footer-menu {
      display: none;
}

⑥プロフィールの非表示

画像に入ってませんが、プロフィールも非表示にすることができます。

/*プロフィールの非表示*/
.hatena-module.profile {
    display: none;
}


6.★★★
の部分に追記する

<style type="text/css">
  ★★★
  ★★★
  ★★★
</style>


例えば、ヘッダーを追記するとこんな感じになります。

<style type="text/css">

/*ヘッダの非表示*/
#globalheader-container {
    display:none;
}
/* 余白調整 */
#container {
padding-top:20px;
}

</style>


こちらを参考にさせてもらいました。

www.mataro1.com

moneyreport.hatenablog.com


www.kimanagu.com


staff.hatenablog.com

ここに非常に簡単に書いてありました。ヘッダとフッタのみでかつPCのみ。
設定>詳細設定>ブログにヘッダとフッタを表示しない(PC版のみ)にチェック

スマホではできないので、使えませんでした。

このカスタマイズで、ヘッダ部分を非表示にすると読者になるボタンが消えてしまうので、ヘッダはしばらく表示させたままにすることにしました。
読者になるボタンを別で表示できるようになったら、非表示にしたいと思います。