(cache) 【はてなブログ】DUDEを元にブログカスタマイズ完了【初心者】

f:id:life-is-bitter:20160504194521p:plain

ようやくブログのカスタマイズが一段落。
紙媒体のようにIllustrator上で自由にレイアウトできるわけではないので、WEB屋さんではない私にはなかなか至難の業でした。CSSめ…。Chromeの検証機能にはお世話になりました。

ブログテーマは人気の「DUDE」を使用しているのですが、備忘録がてら行ったカスタマイズをまとめておきます。ブログをはじめたばかりの方などは参考になるのではないでしょうか。

1. ロゴ

f:id:life-is-bitter:20160504183017p:plain

まずはロゴから。デフォルトであるブラウザ上のテキストベースだと何だか味気ないので、ロゴを作ってSVG画像で表示させています。コンセプトは「シンプルおしゃれ」。このロゴの前には別のロゴタイプがあったのですが、ふとダセえなと思ってしまったのでなかったことになりました。

ちなみに「LIFE IS BITTER」のロゴタイプの部分のフォントは「Aperçu Bold」で、下のバイラインの部分は「Baskerville 10 Pro Bold」です。Aperçuはかわいくていいフォントですね。DINやHelvetica、Neue Haas Unicaほど堅い印象でなく、Brandon Grotesqueほどふざけていない、けどかわいいというか。大文字組みのときに大活躍。

SVG表示に関してはこちらの記事にまとめてあります。表示解像度の問題があるのでできればSVGの方がぱきっとしたデザインになるかと思います。

また、ろくぜうどんさん(id:rokuzeudon)からのコメントでSVG画像をロゴに設定することができたのですが、以下のコードをCSSに貼り付ければOKです。ろくぜうどんさん、ありがとうございました。

div#blog-title-inner{
background-image: url('SVGのURL') !important;
}

!importantのおかげでこちらのコードを優先しているみたいですね。勉強になります。

2. グローバルナビゲーション

f:id:life-is-bitter:20160504190019p:plain

DUDEのそのままの設定では無いグローバルナビゲーション。直帰率が結構高かったので設置しました。あとレイアウト的にあったほうが締まるし。以下のHTMLとCSSをコピペすればできるかと思います。

HTML

<nav id="global">
 <ul style="
 padding-left: 0px;
">
 <li><a href="http://www.life-is-bitter.com/">TOP</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">DESIGN</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2">INTERIOR</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E5%86%99%E7%9C%9F">PHOTOGRAPHY</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E7%94%9F%E6%B4%BB">LIFESTYLE</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">BLOG</a></li>
 <li><a href="http://www.life-is-bitter.com/archive/category/%E9%9B%91%E8%A8%98">NOTES</a></li>
 <li><a href="https://ssl.form-mailer.jp/fms/4cc29577432484">CONTACT</a></li>
 </ul>
</nav>

CSS

#top-editarea {
 width: 1100px;
 text-shadow: inherit;
 margin:0 auto;
}
#global ul{
 list-style: none;
 width: 100%;
 text-align: center;
 font-family: 'Roboto Condensed', sans-serif;
 letter-spacing: 0.1em;
 background: #000; /* Old browsers */
}
 #global ul li{
 display: inline-block;
 }
 #global ul li a{
 display: inline-block;
 padding: 0.75em 1.2em;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 }
 #global ul li a:hover{
 color: #a8a8a8;
 }