ブログデザイン備忘録～はてなブログテーマの自作2

1. Boilerplateを用いたデザイン作成
2. Boilerplateからレイアウト変更例
3. まとめ

　前回ははてなブログテーマの自作として、テンプレートとしてBoilerplateの入手、設定、Node.jsによる実行について紹介した。今回は、Boilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介する。

atatat.hatenablog.com

1. Boilerplateを用いたデザイン作成

　Node.jsを立ち上げてnpm startとしてファイルを監視している状態で基本的にはHatena-Blog-Theme-Boilerplate内のscss/libにある_core.scssと必要に応じてvariable.scssの中身をテキストエディタで開いて書き換えることでscssファイルが変更のたびにコンパイルされて新しいcssファイルが作成される。変更後のデザインを確認するには、webページ上で再読み込みを行う。(httpsでなかったときはBrowser-syncにより自動で同期していたが、現在はサポート外になっている。→条件次第でできるかもしれない）

_core.scssにはBoilerplateのレイアウトがscssで記述されている。(HTMLは変更できないので、あくまでデフォルトのHTMLに対するレイアウトをブログテーマとして提供する）この項目やセレクタを参考にして、SCSS/CSSコードによりオリジナルのレイアウトを作成していく。また$textや $link$ はカラー名に関する変数で_variable.scss内に定義を記述しておく。また変数はカラー名以外にメディアクエリにも使われており、$mq-smは(min-width: 768px)となっている。以下_core.scssの中身の一部を示す。

html,
body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
    color: $text;
    background-color: $background;`
    line-height: 1.6;
}
a {
    color: $link;
    &:hover {
        color: $hover;
    }
    &.keyword {
        text-decoration: none;
        border-bottom: 1px dotted $border;
        color: $text;
    }
}
h1,h2,h3,h4,h5,h6 {
    color: $text-header;
    line-height: 1.3;
    a {
        color: $text-header;
        text-decoration: none;
        &:hover {
            color: $hover;
        }
    }
}

#globalheader-container {
    background-color: $text;
    color: $background;
}

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
    @media #{$mq-sm} {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
    @media #{$mq-md} {
        width: 940px;
    }
}

同様に_variable.scssも示す。

// Variables

// Background color
$background: #fff;
$bg-light: #f5f5f5;

// text color
$text: #454545;
$text-light: #999;
$text-header: #333;

// link
$link: #1487bd;
$hover: darken($link, 10%);

// border
$border: #ddd;

// button
$btn: #fff;
$btn-hover: #f5f5f5;

// Media Queries
$mq-xs: "(max-width: 480px)";
$mq-sm: "(min-width: 768px)";
$mq-md: "(min-width: 992px)";
$mq-lg: "(min-width: 1200px)";

2. Boilerplateからレイアウト変更例

　実際のBoilerplateのレイアウト変更例について示す。(コード詳細は別の機会で）_core.scssファイルを書き換え、追記を行うとNode.jsのプロンプト上で変更を検知(File event [change])し、cssファイルが生成されるとRendering complete, saving .css file…というメッセージが表示される。(以下参照)変数を変更または追加する場合は_variable.scssを

cssファイルが生成されるまで少なくとも数秒程度以上かかるので、その後でwebページの表示を更新する。cssファイルが生成される前に更新しても表示は変わらないことに注意。

以下ブログタイトル、目次、段落(h2)に関してBoilerplateの変更前後を示す。

また_core.scssの変更前の一部コードを以下に示す。

#blog-title {
    margin: 2em 0;
    text-align: center;
    @media #{$mq-sm} {
        margin: 3em 0;
        text-align: left;
    }
}

またタイトルのバックグラウンドの色を変更した_core.scssを以下に示す。タイトル文字は#title { a{…}}で変更しているが今回は省略。

#blog-title {
    background:darkslategray;
    background-position:center;
    text-align: left;
    padding:2rem;
    height:200%;
    @media #{$mq-sm} {
        margin: 3em 0;
        text-align: left;
    }
}