ガジェットと写真とランニングのblog

管理人が日々の生活で感じたことやガジェットのレビューをつらつらと

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

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

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

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

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

ヘッダの変更

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

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

www.webproduct-lab.com

ロゴはまだ作成できていないので、まずはシンプルにタイトルと説明文だけにしました。
追加したのは以下の記述。
ポイントは元のスタイルシートと重複するのを避けるためにもともとのヘッダーは非表示にして、新たに新しい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-->

変更後は以下のようになりました。シンプル!!

さいごに

これでシンプルな表示となりました。
はてなブログっぽい表現からは脱却できたと思います。
次はロゴの作成を行って徐々に独自色を出していこうとも思います。

PCのデザイン変更は以下で記事にしてます。

www.foto2strada.com

www.foto2strada.com

www.foto2strada.com

www.foto2strada.com