どうも、効率的なブロガーぶり、充実したブログ生活。キャリアブロガーの
一昨日に書いた記事がバズって嬉しいです。
乃木坂46を全く知らない家族に画像を見せて推しメンを決めてもらった話。 - BokuSore
まだ読んでない方は読んでみてください。なぜか4000pvくらい見られました（継続中）。それで今日ははてなブログのカスタマイズをおしゃれにしてみたのでそのことについて書いていきま～す。
ヘッダー画像
僕は今このようなヘッダー画像を使用しています。スマホでさっと作ったのですが、我ながらかっこいいとは思っています。山形県はクソダサいですけどね。
ブロガーさんはパソコンで読んでくれる方が多いと思うのでわからないとは思いますが、レスポンシブで運営しております。暇があればスマホで見ていただけるとわかると思います。
なんかレスポンシブのほうがかっこよくはてなブログを見せることができるんですよね。僕はウェブデザインなんてできないし簡単だからレスポンシブにしたんですけど。
僕は基本スマホでブックマークしたりみなさんのブログ読んで読んでいるのですが、６割くらいの人が見にくいです笑 完全に放置されてて可哀想だなと思います。PVとか成果とか関係なしに見やすいほうが、、、とも思います。
それで！！
ご覧のとおり、レスポンシブにしてる方のスマホのヘッダーを見ると、完全に画像がはみ出てるんですよ。僕も前はそうでした。だからレスポンシブは使えないなぁと思ってました。でも安心してください！
@media (max-width: 480px){
#blog-title-inner,#title a{
height:80px!important;
}#blog-title-inner {
background-size: contain;
}
}
こちらのコードをｃｓｓのところに張り付ければ問題は解決します！
ご覧の通りです。これでヘッダーは大丈夫だね！
本文について
次は本文についてです。スマホで見ると字が本当に小さくて読みにくいブログが以外とあるんですよね笑 細かいところかとは重いますが、その小さなところが意外と重要だなと思ってます。
試行錯誤を重ねた結果、このような感じになりました。
.entry-content {
font-size:16px;
line-height:1.8em;
color:#444;
}
文字の大きさは16pxで、行間は1,8、そして個人的に重要だと思っている文字の色は444です。黒でもいいんですが、薄いグレーのほうが読みやすいです。というかご存知の方も多いでしょう。ほとんどのメディアはこの色ですからね笑
想像がつかない方は僕のブログをぜひスマホで見てくださいね！
シェアボタン
いや～シェアボタンはもうこれに決まりですよ。使った時から感動です。
忍者ツールズさんのシェアボタンです！
メールアドレスなどの登録はしないといけませんが、もちろん無料ですし、本当におしゃれなので僕は使ってます。
こんな感じでたくさん種類があります。
僕はこんな感じで下にずっとオーバーレイで出してくれるやつですね。こんな感じのメディアを見たことがあると思います。
カテゴリー
お次はカテゴリーのところですね。最初は枠に囲まれていると思うんですけど、これだとごちゃごちゃしてて見づらいんですよ。そんなときは、てってれ～～～！
つばさ（id:tsubasa123)さんです。つばささんは本当に素晴らしいカスタマイズをいつも記事にしてくれます。本当にありがたいです。
僕の記事が少ないので、親子関係にはまだなっていませんが、すっきりしていておしゃれだなぁと思います。もっと記事書かないと！
画像にアニメーション
これは最高におしゃれです。
それでは試しに下にスクロールしていってみてください。
画像がふわっと上から降りてきますよね？めっちゃおしゃれじゃないですか？！ 僕は感動しました。(軽く乃木坂アピール)
そしてその感動を届けてくれたのが、
「かるみに」のすーく（id:trrun)さんです。ツイッターですーくさんをフォローしてもらえばわかると思うんですけど、最近はずっとすげぇ！っていうカスタマイズばかりしています。
スマホ用のカスタマイズがほとんどなんですけど、本当に感動します。僕はなんにもできないんで笑
終わりに
いかがだったでしょうか？カスタマイズって面白いですよね。コンテンツがすべてなのはわかっていますが、デザインも捨てるべきではないと思います。
見ている人が居心地よく見れるようなブログデザイン（特にスマホ）にしていきましょう！以上！へばなっ！