はてなブログProの独自ドメイン設定とテーマBlankのCSSカスタマイズメモ

とりあえず、はてなブログProを始めて記事を書き始めるまでの簡単な流れを書いておく。

f:id:shigo45:20151216001654p:plain

はてなブログProを独自ドメインで始める。
テーマは超定番のBlankを選択

はてなブログProを独自ドメインで始める。

はてなブログを始めるにあたっては、

はてなブログ（無料）にまず登録。
ダッシュボードのはてなブログProのリンクからProに登録
2-1. はてなポイントを購入（俺はクレカで購入）
2-2. はてなポイントで支払い（俺は2年分14,400円を支払い）
独自ドメインの設定
3-1. ドメインの取得（俺はshigo45.com お名前.comで）
3-2. 使用するサブドメインの決定（俺はwww.shigo45.comに）
　　※ はてなブログProではサブドメインでの利用が必須。
3-3. ドメイン取得先でCNAMEレコードの設定
　（お名前.comでは、DNS関連機能の設定
　　 →DNSレコード設定を利用）
3-4. はてなブログProのダッシュボード→詳細設定画面
　　 →独自ドメインで上のサブドメインを設定。

というのが大体の流れ。

こちらの記事を参考にさせて頂いた。

www.kototoka.com

はじめての時はどこで独自ドメインを取るか考えてしまうこともあると思うが、お名前.comのシェアは飛びぬけて多く、ユーザーによるドメイン管理のUIもわかりやすいので、お名前.comで問題ないだろうと思う。

テーマは超定番のBlankを選択

何はなくともとりあえずテーマの選択。

条件は、シンプルでレスポンシブで、２カラム、右サイドバーであることぐらい。

もちろん、文字の見やすさや色合いなども気になるけれど、それは後でちょびちょびCSS編集すればどうとでもなるだろう。

で、テーマストアを一通り見たけれど、一番人気のBlankが気に入った。レスポンシブだし、まさにシンプル。今後カスタマイズしていく土台にするもよし、まんま使うもよし。人気があるのも頷ける。

目的は「書くこと」だから、そのまま使ってもよさそうなBlankに決定。人気のあるテーマだから、カスタマイズしたくなっても情報は転がってるだろう。

作者さんに感謝。

背景画像

背景画像の設定は少してこずった。それは画像アップロードの箇所に推奨サイズが書かれていないから。ビンゴな大きさになるまで修正しなければならなかったからだ。てか、面倒くさかったので、ビンゴとまではならなかったのだけど。

そのうち修正していくとしよう。

ブログタイトルとブログの説明

ブログタイトルとブログの説明をセンターに

#blog-title{
    text-align:center;
}

これを、ダッシュボード→デザイン→カスタマイズ→デザインCSSに追記する。以下同じ。

ブログタイトルの文字サイズを大きくし影をつける

#title{
    font-size: 45PX;
     text-shadow:
0 0 25px #edf8ff,
0 0 20px #edf8ff,
0 0 0.40px #edf8ff;
}

ブログの説明の文字色を白に

#blog-description{
    color:#ffffff;
}

文字の大きさ

文字（全体）の大きさをちょっとだけ小さく。

body {
    font-size: 15px;
}

見出しまわり

あとは、見出しを見やすくするぐらい。自分としては、大見出し（h3）、大見出し（h4）、小見出し（h4）の設定だけすれば足りる。

h3、h4、h5を太字に

h3, h4, h5 {
    font-weight: 700; 
}

h3、h4、h5の背景、ボーダーなどの装飾

見出し大（h3）は背景色とボーダー

.entry-content h3 {
    background-color: #f4f4f4;
    padding: 0.4em 1em;
    border-left: 3px solid #696969;
}

見出し中（h4）はボーダー

h4 {
border-bottom:2px dotted #696969;
padding:4px 6px;
}

見出し小（h5）はマークとボーダー

h5 {
    position: relative;
    padding: 0 .5em .5em 2em;
    border-bottom: 1px solid #ccc;
}
h5::before,
h5::after {
    position: absolute;
    content: '';
    border-radius: 100%
}
h5::before {
    top: .2em;
    left: .2em;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: rgba(150, 150, 150, .5);
}
h5::after {
    top: .7em;
    left: .7em;
    width: 13px;
    height: 13px;
    background: rgba(210, 210, 210, .5);
}

こちらの記事を参考にさせて頂いた。すごいなブックマーク数。

www.nxworld.net

margin

見出しのmarginを最初に自分好みに設定しておけば、記事を書く際に余白等を考える必要がないので最初に設定。こうしておけば、見出しタグを入れて改行すれば良い。

大見出し（h3）のマージンは大きめ

h3 {
    font-weight: 700; 
    margin-top: 80px;
    margin-bottom: 30px;
}

中見出し（h4）、小見出し（h5）のマージンはほどほど

h4, h5 {
    margin-top: 50px;
    margin-bottom: 30px;
}

サイドバー幅変更

Blankはレクタングル中（300px）に合わせてサイドバーの幅が設定されているが、これをレクタングル大（336px）を載せれるように変更。

@media screen and (min-width: 960px) {
    #wrapper {
        width: 100%;
        margin-right: -384px;
        padding-right: 384px;
        box-sizing: border-box;
        float: left;
    }
    #box2 {
        width: 336px;
        float: right;
    }
}

参照：Blank開発者の方が解説してくれています。

moonnote.hateblo.jp

とりあえずはこんな感じ。また徐々にやっていこう。

This is a post from 45 For Trash