大人の発達障害者の挑戦日記

30代後半で成人発達障害者となった私の日記

はてなブログの自作テーマ「groundwork」を公開してみた

こんにちは。エイキチです。

はてなブログでテーマを自作して公開したという話を書きます。

自作テーマを投稿

はてなブログではデザインを変更するためのテーマと呼ばれるものが配布されています。はてな公式のものや他の人が作ったものが「はてなテーマストア」にあります。なんとなくテーマを作ってみたくなり、「groundwork」という名前で投稿しました。このテーマははてなブログ側がテーマ作成用に用意してくれている「boilerplate.css」を基にしています。

http://blog.hatena.ne.jp/-/store/theme/10257846132689532045

テーマを作成した理由は、配布されたテーマだと非表示になっている部分があったため、自作テーマを使おうと思ったからです。はてなユーザー側がCSSを追記できる仕組みになっているので、それを利用すれば良いのかもしれませんが、追記箇所が多くなって、後から良く分からなくなる可能性が出てきたという事もあります。

見た目は地味

このテーマは色を付ける前段階のレイアウトのみを設定したテーマです。なので、カスタマイズしてない状態では地味です。

トップページ
f:id:otona-hattatsushougai-challenge:20181224154524j:plain
記事ページ
f:id:otona-hattatsushougai-challenge:20181224154521j:plain

モバイルではサイドバーは下に表示されます。基にした「boilerplate.css」がレスポンシブデザインになっているからです。

色が全然ないので地味に見えるのだと思いますが、ユーザー側にはデザインCSSという設定項目があり、テーマのCSSに追記するようなことが出来ます。なので、その設定で色を付けるとそれなりの見栄えになります。

カスタマイズ例

自作テーマ「groundwork」は枠線はありますが、色を使っているところがほとんどありません。他の部分の色をユーザー側で付けようという発想のテーマです。はてなブログではユーザー側でCSSを追加できる仕組みがあるので、色付けはそこで行うということです。

テーマのカスタマイズ例を紹介します。

サイトタイトル

まず、サイトのタイトルが寂しいです。私の場合、背景色を付けて白抜きにするというのが好きです。次のようにデザインCSSに追記すると、緑の背景色で文字が白塗りになります。

#blog-title {
    background-color: rgb(70, 150, 80);
}

#title a {
    color: rgb(255, 255, 255);
}

#blog-description {
    color: rgb(255, 255, 255);
}
f:id:otona-hattatsushougai-challenge:20181224154518j:plain

上記のCSSでrgbの値を変えれば色を調節することが出来ます。ネットを色見本のサイトなど参考になると思います。

そんな感じで、追記するCSSはとりあえず以下のようなものが思いつきます。

/* サイトタイトルと説明文 */
#blog-title {
    background-color: rgb(70, 150, 80);
}

#title a {
    color: rgb(255, 255, 255);
}

#blog-description {
    color: rgb(255, 255, 255);
}

/* エントリーヘッダ */
.entry-header {
    border: 2px solid #668ad8;
    padding: 12px;
}

/* 記事内の見出し*/
.entry-content h2 {
    background-color: rgb(70, 150, 80);
    color: white;
    padding: 12px;
}

/* 記事内の定義型リスト */
.entry-content dt {
    display: inline-block;
    background-color: #2d95de;
    font-weight: bold;
    color: #ffffff;
    padding: 4px;
}
.entry-content dd {
    padding: 4px;
}

/* はてなモジュール */
div.hatena-module-title {
    color: white;
    padding: 12px;
    background-color: rgb(85, 110, 175);
}

div.hatena-module-title a {
    color: white;
}


/* 記事内 テーブル 見出しセル */
.entry-content table th {
    background: #f5f5f5;
}

/* 記事内 PRE */
.entry-content pre {
    background: #f5f5f5;
}
f:id:otona-hattatsushougai-challenge:20181224154515j:plain

他にも色々な工夫があると思います。上記のCSSを部分的に変更するなども良いと思います。

最後に一言

CSSは覚えると楽しいです。