しろかい!

アプリ開発や機械学習などの開発Tips.

はてなブログのテーマを作成した時の手順や参考記事のまとめ

先日,はてなブログで運営させて頂いているこのブログ「しろかい!」のテーマをリニューアルした.
その時に行ったテーマの作成手順や参考にした記事などをまとめておきます.非デザイナーの方でも割と簡単にテーマが作れちゃいます!

f:id:shun9167:20150524185806p:plain

はてなブログのテーマ作成の準備

↑は,はてなブログのテーマを作成するにあたって必要な情報がまとめられた公式ドキュメントです.基本的にはこれにそってテーマを作成します.

まずはテーマ作成の準備として,上記で書かれているようにテーマ作成用の非公開ブログを新たに開設し,公式が用意しているサンプルエントリーを数件投稿します.さらに,自身のブログの記事もいくつかコピーして投稿しておきます.

続いて,テーマ作成に便利なサンプルテーマ「Boilerplate」のCSSをDLします.このCSSはシンプルですがテーマ作成に必要なセレクタなどは予めほとんど全て書かれており,その中身をいじっていくことで簡単にテーマを作成できるというものです.ちなみに1カラムor2カラムレイアウトや,レスポンシブにも対応しています.何もいじらずとも十分使えるテーマです. ちなみに僕はlessを使用しました.やっぱり便利ですもん.
DLしたら,このCSSはてなブログの管理画面の デザイン -> デザインCSS のフォーム内にコピペすると,「Boilerplate」が適用されます.
適用されたら,後はいじっていきます.ひたすら.

以下では,テーマ作成時に行ったことと,参考にした記事を紹介していきます.

Webデザインについて

デザインは8の倍数でできている

ボックスサイズや,余白はいくらとればイイ感じになるのかとか,結構難しいですよね.
けど,それらを全て8の倍数にすればいいよ,というのがこの記事です.
実際,しろかい!のテーマも全て8の倍数で構成されています(一部例外あり).

配色について

デザイナーでもない人にとって,配色ってどうすればいいかホント分からないものです.
そんな人におすすめしたいのがこのスライドです.とりあえずこの通りにやっとけば少なくとも無難な配色にはできるはずです.

また,このスライドでも紹介されている Adobe Color CC というツールを使えば,簡単に色を決められます.オススメ!

はてなブログデフォルトのウェブフォントを使う

はてなブログにはデフォルトで読み込まれているウェブフォントがあります.これを使わない手はありません.
上記記事は,その使い方について解説されています.

関連記事の表示

直帰率や離脱率を下げる方法の1つに,記事の本文の後に関連記事を表示しておくというものがあります.これを実現してくれるスクリプトが,この記事で紹介されています.是非導入しておいて間違いないと思います.

横幅いっぱいのdivブロック

カテゴリのページのパンくずリストの部分はこれで実装しています.

Javascript置き場

しろかい!で使っているJapascriptのソースコードGithub上に置き,Github pagesを利用することで読み込んでいます.

Adsenseがはみ出るのを修正

Adsenseを貼っていると,なぜかスマホ版ではみだしてしまうことがあります.その時の対処法について書かれている記事です.

その他意識したこととか

モバイルファースト

まずはスマホ版のデザインを修正してから,PC版のデザインを微調整するという手順を踏みました.

軽さを追求

できるだけ余計な装飾やスクリプトの導入は避け,軽くすることを求めました.

まとめ

僕がはてなブログのテーマを作成した時のことをざっくり説明しました.CSSの知識が少しあれば,デザイナーでもない僕のような人でも比較的簡単にそれなりの(?)テーマを作れるというのはいいですね!
当然,イケてるテーマを作るにはそれなりの知識やデザインセンスが必要になってきますが.

このしろかい!のテーマは丸2日ほどで作りました.一応無難に仕上げたつもりです^^;
今は黒やグレーを基調としていますが,今回lessを使って開発したことで,色を5色ほど選べば一瞬で配色を変更することができるようになっています.季節ごとに色変えたりしたら面白そうですね^^
ちなみに,ないとは思いますが需要がありそうならテーマの配布も考えています.

ではでは,皆さんも是非自分だけのイケてるテーマを作ってみてください^^