スマートフォンで表示される、はてなブログのブログアイコンを非表示にしたい。
はてなブログの機能では表示／非表示を選べないため、ブログアイコンを消したい時はCSSにコードを書くことになります。
※以下、開発者向け設定なので自己責任でお願いします。
コードを書きたくない人は、PCとスマホのヘッダ設定をうまく組み合わせると、ブログアイコンを非表示にできるパターンもあります。
コードを記載する場所
通常、はてなブログのCSSカスタマイズは
［デザイン］→［カスタマイズ］の「デザインCSS」に記載するのですが
なぜかブログアイコンの設定はここに記載しても効果がありません。
!importantを記載しても効きません。
headerに記載します
「設定」→「詳細設定」で設定します。
記載するコード
「<head>要素にメタデータを追加」にコードを記載します。
ブログアイコンは”header-blog-icon”で定義されています。
<style>
.header-blog-icon{display:none;} /* ブログアイコン */
</style>
これでブログアイコンが非表示になります。
タイトルの左寄せを修正する
タイトルが↓左に寄ってしまっているのを修正します。
ブログ名はgridになっているので、
<header>に下記を記載します。
<style>
.header-blog-icon{display:none;} /* ブログアイコン */
.header-content{grid-template-columns: none!important;}
</style>
これでブログアイコンを非表示、タイトルだけをきれいに表示できます。
タイトルを非表示にする
テキストのブログ名タイトルは、「.header-title」で制御できます。
タイトルも非表示にするには、同じく<header>にコードを記載すればOK。
<style>
.header-blog-icon{display:none;} /* ブログアイコン */
.header-title{display:none;} /* タイトル文字 */
</style>
ブログアイコンとタイトルが非表示になります。
