はてなブログのスマホ版デザインを初心者が気合入れてカスタマイズしてみた【テーマはほんわか】

先月末に、はてなブログProに登録しました。

はてなブログProにすると、スマホ版のHTMLやCSSをカスタマイズできるとのこと。

無料版の時にレスポンシブデザインのテンプレートを適用しましたが、せっかくなので、PC版とスマホ版で別々にカスタマイズしていこうと思いました。

自分の備忘録も兼ねて、何をやったかをお世話になった記事とともに紹介したいと思います。

ほんわかとしたイメージにしたいなぁと思っていましたが、意外と、ほんわかした物が出来上がったと思います。

配色を決めるときに参考にしたサイト

どれもお洒落すぎて、かなり迷いましたが、トマトっぽい赤、優しい青、淡いグレーの3色をメインにして作成することにしました。

1. ヘッダ画像

 昨日記事でも触れましたが、河津桜まつりに行った時の桜の写真をヘッダ画像に採用しました。四季の巡り変わりに合わせてヘッダも変えていきたいと思います。

2. トグルメニューバーの追加

トグルメニューバーというものを追加して、直帰率を下げようという試みです。参考に記事のお陰でコピペ一発で導入できました。ちょっと色を自分なりにカスタマイズしています。

• メニューバーの背景：#ECEEF1　（薄い灰色）
• MENUの背景色とリストの背景色：#0E7AC4　（やさしい青色）

参考記事

▲配色の参考にしました。色々な例が載ってて見てるだけで面白い。

3. 記事一覧の日付の背景色の変更とサムネイル丸く

Before→After

日付の背景

下記の記事を参考にして、日付に色を付けてみました。殺風景なトップ画面も少し彩りが増えます。日付の背景色は自分好みの#fa8072にしました。

また、コピーした状態では四角の背景で、少し尖った感じがしたので、角に丸みをもたせました。

日付のCSSのところに、border-radius: 0.2em;を追加したら角が丸くなりました。数字を大きくすれば、もっと丸くなります。

.date
{
color: white; /*日付の文字色*/
background: #fa8072;/*日付の背景色*/
border-radius: 0.2em; /*角の丸み*/
padding: 0px 10px;/*日付の文字まわりのスペース*/
}

サムネイルを丸く

丸い形だと優しさ的な印象が強調されるんじゃないかな～と狙ってやってみました。

狙ったとおり、丸みのおかげでほんわかしてると重います。

下記記事のCSSをそのままコピへして、細部は自分好みにちょっぴり変更しています。

• 横幅、縦幅：100px→90px
• サムネイルの枠線の太さ：3px→2px
• 枠線の色：黒→灰色（#BFBFBF）

参考記事

▲日付の背景

▲サムネイルを丸く

4. 見出しのカスタマイズ

デフォルトですと、はてなブログのスマホ版見出しは文字が太く大きくなるだけ。見難い。ということで、h3とh4を下記記事を参考に変更しました。

こちらも、h3の大見出しに関しては、CSSにborder-radius: 0.2em;を追加することで角を少しばかり丸くしています。

参考記事

5. トップ画面でプロフィール、はてなブログを始めよう！を消去

余計なものは消去♪シンプルなトップ画面の実現のために、プロフィール、はてなブログをはじめよう！を消去しました。

参考記事

6. 関連記事の追加

直帰率を下げようキャンペーンの一貫で関連記事を追加。

参考記事

7. フォローボタンのカスタマイズ

色々な方がカスタマイズフォローボタンを作成しているみたいですが、Instagramが最初から用意されてた下記の記事をコピペしてフォローボタン設置。こちらも、CSSに一行、手を加えて角に丸みをもたせています。CSSの.content-inner-follow-buttons a の中にborder-radius: 0.4em;という一行を追加しています。emの前の数字を調整することで丸みの度合いを変えられるよ。

.content-inner-follow-buttons a {
display: inline-block;
letter-spacing: normal;
width:40%;
border-radius: 0.4em; /*角の丸み*/
text-align: center;
text-decoration: none;
padding:6% 0;
margin:1%;
}

参考記事

8. シェアボタンのカスタマイズ

オシャレなシェアボタンに変更♪記事下にだけシェアボタンを配置しています。こちらも、CSSに一行、手を加えて角に丸みをもたせています。CSSの.share-button .inner aの中にborder-radius: 0.4em;という一行を追加しています。emの前の数字を調整することで丸みの度合いを変えられるよ。

.share-buttons .inner a {
position: relative;
display: inline-block;
border-radius: 0.4em; /*角の丸み*/
width: 16%;
height: 45px;
line-height: 25px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
padding:2px;
}

参考記事

とりあえず、完成

うん、いい感じ！完全に自己満足で終わりそうな気がするけど、効果も出るといいな。

今後やること

• 記事下に見やすいカテゴリの追加
• ヘッダ画像したのプロフィール画像削除するかの検討
• PC版のカスタマイズ。配色はスマホ版と同様にする

まとめ

はてなブログは、たくさんの諸先輩方がとっても参考になるおしゃれでかっこよくて綺麗なカスタマイズ例を公開してくださっています。

僕らはそれを参考に少しだけ自分ごのみに変えるところは変えちゃえば、なんかそれっぽいデザインでにできちゃうのが素敵ですよね。

もっと自分の色を出せるように、CSSなど、勉強していきたいです！