ダサいはてなブログをちょっとおしゃれにした方法

f:id:yuzuhooo:20161110004000p:plain

こんにちは。

前回書いたブログを10ヶ月ぶりに再開させるにあたって行った大きな5つのことに付随して、上の画像の左の通りちょっとダサいなと思うはてなブログをおしゃれにした方法を、6つの項目にわたって紹介したいと思います。

 配色を気にする

まずデザインを変える前に、配色を気にしました。デザインは配色がかなりキーポイントになることがあります。直感で選んでも大変なので、キーカラーやサブカラー、文字色などを決めました。

私の大好きなブログの「Literally」さんの http://tsukuruiroiro.hatenablog.com/#blue この記事を参考にさせてもらいました。

  • メインカラー ■ #B4DAED
  • サブカラー ■ #EEF9FF
  • キーカラー ■ #FC9D9D
  • ベースカラー ■ #5B5B5B

この記事も参考になります!

www.m-hand.co.jp

ヘッダー画像の作成

配色が決まったら、ヘッダー画像と呼ばれるブログの一番上のタイトルの画像を作りました。最初は下のような画像でしたが、やっぱりタイトルが日本語だとおしゃれに見せるのは難しいということで、ブログタイトルを英語にして、タイトルとサブタイトルのみの簡単なヘッダー画像を作成しました。

f:id:yuzuhooo:20161106032930p:plain

f:id:yuzuhooo:20161022025840p:plain

Photoshopで作りましたが、正直このくらいならWordとかパワポでも作れそうです。

ナビ(上のHOMEやDESIGNなどのメニューのこと)の修正

ナビと呼ばれる、ヘッダーの画像の下にある、記事をカテゴリーでまとめたものをメニューとして表示させるもののデザインをきれいにしました。上がMacの人、下はWindowsの人はこう見えてるんじゃないかという予想です。

f:id:yuzuhooo:20161111001710p:plain

f:id:yuzuhooo:20161111001714p:plain

誰でもできるように簡単にコードを貼っておきます。まず、デザインのヘッダーのタイトル下にこのHTMLコードを入れます。

<nav id="global">
<ul>
<li><a href="http://enginieergirl.hatenablog.com/" title="HOME" >HOME</a></li>
<li><a href="http://enginieergirl.hatenablog.com/archive/category/%E4%BB%95%E4%BA%8B" title="WORK">WORK</a></li>
<li><a href="http://enginieergirl.hatenablog.com/" title="DESIGN">DESIGN</a></li>
<li><a href="http://enginieergirl.hatenablog.com/" title="PROGRAM<ING">PROGRAMMING</a></li>
<li><a href="http://enginieergirl.hatenablog.com/archive/category/%E7%94%9F%E6%B4%BB" title="LIFE">LIFE</a></li>
<li><a href="http://enginieergirl.hatenablog.com/archive/category/BLOG" title="BLOG">BLOG</a></li>
<li><a href="http://enginieergirl.hatenablog.com/archive/category/%E6%80%9D%E8%80%83" title="THINK">THINK</a></li>
<li><a href="http://enginieergirl.hatenablog.com/entry/2016/11/08/033901" title="ABOUT">ABOUT</a></li>
</ul>
</nav>

 

そしてデザインCSSにこれを貼ります。

#top-editarea {
 width: 980px !important; /**記事とサイドバーの幅**/
 margin:0 auto;
}
#global ul{
 list-style: none;
 width: 980px;
 margin: 0 auto;
 text-align: center;
 font-family: 'Futura', 'Arial Black', sans-serif;
 letter-spacing: 0.1em;
 background-color: #535353; 
}
#global ul li{
display: inline-block;
}
 #global ul li a{
 display: inline-block;
 padding: 0.6em 1.2em;
 color: #fff;
 text-decoration: none;
 transition: color .3s ease-out;
 }
#global ul li a:hover{
 color: #fc9d9d; /**触れた時の色**/
 }

 

一番重要なのは、記事とサイドバーを含めた横幅とメニューの横幅を合わせるのがきれいに見えるコツじゃないかなと思います。この記事を参考にさせてもらっています。

ホームページっぽいメニューバーが完成! はてなブログに「ナビゲーション」をつける方法をやってみた。 - pomeyama days

全体レイアウトの修正、記事レイアウト(h1や見出し、リンクタグ)の修正

このような感じで、様々なタグやタイトル、リンクをCSSでカスタマイズしています。

f:id:yuzuhooo:20161111003006p:plain

 あくまで見やすさを重視したり、色も基本的な配色しかほぼ使わずにしています。

フォローボタン、シェアボタンを可愛いデザインに

はてな既存のものは今時のフラットデザインぽくないので、SNSのフォローボタンやシェアボタンもおしゃれにしました。SNSのボタンの方は記事のものと少しデザインを変えています。

f:id:yuzuhooo:20161110005429p:plain

f:id:yuzuhooo:20161110005432p:plain

こちらの記事を参考にフォローボタンの方は少しCSSを変えています。

www.ituore.com

文字の行間や幅に気をつける

CSSが書けるので、主にline-hegihtという文字の行の高さと、letter-spacingという文字の間隔を変えるCSSを修正しています。具体的に言うと、

f:id:yuzuhooo:20161110005925p:plain

 こちらが何もしてない時、

f:id:yuzuhooo:20161110005929p:plain

こちらがCSSで調整している時、これだけでちょっとゆったり印象をもたせたり、読みやすくすることができます。 

広告を非表示にする