はてなブログのスマホ向けデザインをコピペで5分で整える【初心者向け】

はてなブログスマホ向けデザインを5分で劇的に整える方法【初心者向け】

f:id:netbus92:20180526212120p:plain

昨日、ブログ開設から10記事投稿を無事に迎え、そろそろブログのデザインを綺麗にしたいと思っていました。

 

お買い物ブログにしたいと思い始めましたが、Twitterや話題のニュースが気になっていまい、殆ど書けていない本末転倒状態です・・・

 

スターを付けて頂いたり、読者になって頂いた方も居られ毎日とても励みになります。

本当にありがとうございます。

 

ブログのデザインについてPC版は概ね満足していたのですが、ブログを見てくださっている方の8割はスマホで見られていることがわかり、なんとかしなくては・・・と思い今日の記事に至っています。

 はてなブログには便利なレスポンシブデザイン機能があるけど

今までははてなブログ標準のレスポンシブデザイン機能を使っていました。

これはPC版のデザインを作成すれば自動的にスマホ用のデザインを適用してくれる便利な機能ですが、画面の大きいPCと小さいスマホではサイドバーのコンテンツの要否であったり、アレンジしたほうが見やすくなると思い、スマホ用デザインを勉強することにしました。

 

ここからは実際にやったことを説明します。本当に5分で出来ます。

実際にカスタマイズしたこと

私が今回行ったカスタマイズを4個ご紹介します。

 1.不要なパーツを削除する

f:id:netbus92:20180527011302p:plain

初期状態だとはてなブログのリンクプロフィール検索窓が設置されています。

プロフィールと検索窓は好みで残しても良いかもしれませんが、私は不要だと思ったので削除しました。

 

以下のコードをデザイン→スマートフォン→ヘッダ→タイトル下の順でクリックしてイトル下にコピペします。

 

<style>

.footer-action-wrapper{display:none;}

/*はてなブログを始めようを非表示にする*/

.touch-item-list{display:none;}

/*はてなブログ開発ブログなどのリンクを非表示にする*/

.hatena-module.profile {display: none;}

/*プロフィールを非表示にする*/

.search-box{display:none;}

/*検索ボックスを非表示にする*/

</style>

 

2.記事の見出しを設定する

f:id:netbus92:20180527010516p:plain

これが一番必要なカスタマイズだと思っています。

スマホ用デザインにすると、初期状態だと見出しを設定してもPC版のような見出しが付きません。

PC版の見出しを既に設定されている方はPC版のデザインCSSの見出し部分をデザイン→スマートフォン→記事→記事上の順でクリックして記事上にコピペします。

 

私は以下のサイトからデザインを参考にさせて頂きました。

saruwakakun.com

紹介されているコードを同じくデザイン→スマートフォン→ヘッダ→タイトル下の順でクリックしてタイトル下にコピペするだけで完成です。

 

見出しについてはブログで様々な良いデザインが紹介されているので自分のブログに合ったものを採用しましょう。

 

3.記事中の文字サイズを大きくする

f:id:netbus92:20180527014038p:plain

スマホデザインにした際、初期設定では記事の文字のサイズが若干小さく設定されています

そのままでももちろん読めますが、もう少し大きいほうが読みやすいと思ったので設定しました。

 

以下のコードをデザイン→スマートフォン→ヘッダ→タイトル下の順でクリックしてイトル下にコピペします。

 

<style type="text/css">
.entry-content {
font-size:16px;
}
</style>

 

私は16ピクセルが一番読みやすいと思い設定しましたが、人によって好みが分かれるので、スマホで確認しながら設定することをおすすめします。

 

4.スマホ用のヘッダ絵を設定する

f:id:netbus92:20180527015307p:plain

PCと同じ画像を設定する事もできますが、画面サイズが違うのでスマホ用の絵を設定しました。

 

デザイン→スマートフォン→ヘッダ→ファイルを選択の順でクリックして任意の画像ファイルをアップロードします。

この際、サイズ設定→画像の高さにあわせるにチェックを入れておくと、画像の上下が切れることが無いので試してみて下さい。

 

おわりに

最終的には色々と試行錯誤をしましたが、部屋の模様替えみたいにワクワクしながら考えられてとても楽しかったです。

余談ですが、ブログのヘッダ絵は友人にお願いして書いて貰いました。「買い物している女の子が楽しそうにしている絵を書いてほしい!」とお願いした通りの素晴らしい絵だと今でも感動しながら眺めています(自分のブログですが・・・)

 

最後までご覧いただきありがとうございました。