Mikotoにお任せ

ブラック会社から独立に向けての日々奮闘中の日記 貯金や節約の方法、通信回線を書いていますそれ以外にはフィッシング詐欺サイトに登録した記事などを書いています今日も一日頑張るぞい

はてなブログの携帯版の上に表示されるHatena Blogのアイコンを消す方法

f:id:mikotomikaka:20191123164619j:plain

   

 

f:id:mikotomikaka:20190920063047j:plain

こんにちはMikotoです

 

今回新しくヘッダの画像とメニューを追加しました。普段はスマートフォンで見る時もPC版サイトで見る設定にしている為、今回携帯版の追加作業をしている時に気づきましたが、、、

 

コチラの

 

f:id:mikotomikaka:20191123170052j:plain

 

携帯版のヘッダ画像上に表示される

 

Hatena Blogのアイコン

 

あれ、こんなの有ったかな?気になってしまうので

ヘッダの上に表示されるHatena Blogのアイコンを消す方法を調べてみました

 

 

携帯版だと表示される

 

f:id:mikotomikaka:20191123173330p:plain

 

 Hatena Blogのヘッダーを表示させない方法ですが有料のPRO版に変更した時に

 

f:id:mikotomikaka:20191123173943p:plain

 

設定→詳細設定

 

ブログのヘッダを表示しない

ブログのフッタを表示しない

 

設定をすると表示されないようになりますがこの設定方法はPC画面で表示される場合のみで携帯版で画面を表示した場合にはこの設定項目では反映されないみたいです。

 

設定方法

 

携帯版で上に表示されるHatena Blogのアイコンを表示させないようにする場合は設定項目が無いのでダッシュボード→デザイン→スマートフォン→ヘッダ→スマートフォン用にHTMLを設定するに下のSCCを貼付けるだけで大丈夫です

 

f:id:mikotomikaka:20191123182825p:plain

 

ヘッダを消す

 

<style type="text/css">
#top-editarea .section {width:100%;}
#header .header-blog-icon {display:none;}
#globalheader-container {display: none;}
#container{ padding-top: 0px;}
</style>

 

このコードを貼付けると

 

このページみたいに上のHatena Blogのアイコンが表示されなくなります

 

下に表示される 

 

記事を書く、記事の管理、はてなブログ開発ブログ、週間はてなブログ、はてなブログフォトこの項目もジャマですよね

 

f:id:mikotomikaka:20191123183623j:plain

 

コチラもジャマなので先程と同じ場所に

 

フッタを消す

 

<style type="text/css">
.footer-action-wrapper{display:none;}
.touch-item-list{display:none;}
</style>

 

コチラを貼付けると表示されなくなります

 

最後に

 

はてなブログPRO版のヘッダとフッタを表示させない設定はパソコンで表示させる場合のみ反映されます。パソコン版だけではなく携帯版も自動で反映されれば便利ですが、デザインのHTML編集項目でコードを入力しないといけないのはチョット面倒ですがジャマだから消したい方はお試しください。(PRO版でないとデザインのHTMLを設定する項目は使用できません) 

 

最後まで読んで頂き有難うございます\(^o^)/

 

#はてなブログ #ブログ運営