はてなブログスマホ用デザインのタイトルを変えてみる

ブログのデザインを変えてみたく、はてなブログのスマートフォン用のデザインを変更してみました。
今回変更したのはヘッダ部分の表示となります。

スマホのデザインを変更するには

まずはてなブログのスマホのデザインを変更するには、有料会員(PRO)になっていることが条件です。
有料会員になっているとタイトル下とフッタに設定をすることが出来ます。

ヘッダの記述部分に<style>タグで囲むとスタイルシートが記述できるようになります。

ヘッダの変更

デフォルトのままだとはてなブログっぽい表示とタイトルで結構な場所を占めるので、シンプルにしてみようと思います。

変更は以下の記事を参考にさせていただきました。

ロゴはまだ作成できていないので、まずはシンプルにタイトルと説明文だけにしました。
追加したのは以下の記述。
ポイントは元のスタイルシートと重複するのを避けるためにもともとのヘッダーは非表示にして、新たに新しいIDでヘッダーを定義しているところですかね。

<!--header css-->
<style>
#header {display:none;}/*現状のヘッダーを非表示*/
#header_new {padding:10px; background:#fff;}
#header_new .logo_wrap {margin:0 auto; display:table;}
#header_new .header_blog_icon {display:table-cell;}
#header_new h1.header_title {margin:0; padding:0 0 0 10px; font-size:20px; display:table-cell; vertical-align:middle; text-align:left; position:relative; top:-4px;}/*タイトルの位置を微調整した場合はtopの数値を変更してみてください*/
#header_new h1.header_title a:link {color:#3498db;}
#header_new h1.header_title a:visited {color:#3498db;}
#header_new h2.header_description {margin:0; font-size:12px; color:#333; font-weight:normal; text-align:center;}/*説明文の装飾*/
</style>
<!--header html-->
<header data-brand="hatenablog" id="header_new">
<div class="logo_wrap">
<h1 class="header_title">
<a class="blog-title" href="/">ガジェットと写真とランニングのblog</a></h1>
</div>
<h2 class="header_description">管理人が日々の生活で感じたことやガジェットのレビューをつらつらと書き連ねます</h2>
</header>
<!--header html-->