はじめに

自分なりの色々なTips等をまとめておくためにブログを作成した．
こういった類のものを作る際はデザインに拘りたいので，今回も使えるものは使いながら色々と設定してみた．

テーマの選定

選定基準

テーマを選定するにあたり重視したことは以下の３つ．

清潔感のあるデザイン
カスタマイズ性
ドキュメントの多さ

１つ目が一番重要で，残りの２つは正直あとから取ってつけた選定基準だ．

DUDEというブログテーマ

調べてみるとDUDEというテーマが人気らしい． f:id:applepine1125:20170207151300j:plain デザインはちょっとCSSでいじればいい感じになりそう．もっと自分好みのテーマがあるかもしれないが，最初から拘りすぎても挫折しかねないし，見た目もよく，カスタマイズすればだいぶ自分好みにできそうなのでDUDEを使うことにした．

テーマのカスタマイズ

はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き）- LITERALLY
コピペで始めるはてなブログテーマDUDEのカスタマイズ集！フォント・色から自分らしく - F Lab
このあたりを参考にしつつCSSに色々記述してカスタマイズを行った．

CSSへの記述

.headimg {
    background-size:cover;
    padding: 60px 0px 0px;
    background-image:url("ヘッダ画像のURL");
}

background-sizeにcoverを指定すると，縦横比を保持しつつ背景領域を完全に覆うように画像を自動で拡大縮小してくれる.
paddingでヘッダ画像内の余白を指定．(参考: [CSS] marginとpaddingの使い分けに本気出してみた。が、borderもちゃんと考える。- Qiita)
background-image にヘッダにしたい画像のURLを指定することで画像を設定することができる．

.headimg h4 {
    font-size:3em;
    font-family: 'Crimson Text', serif;
}

タイトル(図の赤枠)のフォントサイズとフォントの種類の設定．
f:id:applepine1125:20170208113753p:plain
今回は清潔感のあるCrimson TextをGoogleFontsから引っ張ってきた．

.headimg h5 {
    font-size:0.9em;
    font-family: 'Yugothic', 'Crimson Text', serif;
    padding: 10px;
}

タイトル下の一言(?)のフォントサイズとフォントの種類の設定．

.hatena-module-title{
    font-family: 'Crimson Text', 'Yugothic', serif;
    font-size: 2.3em;
}
span[data-user-name="applepine1125"]{
    font-family: 'Crimson Text', 'Yugothic', serif;
}

ここではサイドバーのサブタイトル(AboutとかSearchとか)の設定をしている．
f:id:applepine1125:20170208113825p:plain

GooglFontsの設定

Googleフォントを導入してブログにちょっとした変化を出す方法【はてなブログを例にとって】 - Yukihy Life
ここを参考にしつつ気に入ったフォントを導入．
@import~とフォントの指定だけCSSに記述して，デザインプレビューでは反映されるのに実際のページを開くと反映されてない！！と騒いでいたが，設定画面でheadを追加する欄にも記述しなきゃいけない内容があったのを見落としていた．
むしろcssの設定画面ではなんで@import~だけで反映されていたのか…

おわりに

そんな感じで設定していくと今のようなブログデザインになった．
今後もちょっとずつパーツを増やしていけたらなと思う．

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
次はこれとか？

雑記帳

雑記帳

情報を自分の言葉で蓄積しておく場所

DUDEでブログデザインのカスタマイズをした話