どうも。ヒビ（@hiibii256）です。
既にお気づきの方もいらっしゃるかもしれません。
本日、当ブログのデザインを一新しました！！やっほおお！！
カスタマイズ？いえ、テーマから変えちゃいました！
それも自作テーマ！！
ということで、テーマの作り方を紹介します。
- なぜ、つくった？
- オリジナルテーマ開発の流れ
- 準備
- 配色を決める
- カラム数を決める
- 幅、大きさを決める
- 色やアイコン、枠をデザインする
- アーカイブ版・カテゴリーページをデザインする
- 機能性のカスタマイズ
- おわりに
なぜ、つくった？
僕がオリジナルテーマを作ろうと思ったきっかけは、CSSの実力を図るためです。
以前にCSSの勉強を始めたという記事を書きました。
実際には、Progateというサービスの初級編だけをやってみました。
初級は無料なので、「CSS勉強しようかなー」と迷っている方は是非、初級だけでもやってみることをオススメします。
初級編をやってみて、僕はあることを思いました。
テーマ作れそうやん。
機能を追加するようなカスタマイズは無理。でも、テーマは見た目。これなら、サクッと作れそう。
要するに、CSS初心者が完全に舐めきった考えから、オリジナルテーマの開発をすることになったわけです。
オリジナルテーマ開発の流れ
僕が実際に行った開発の流れを紹介します。
プロはどのような流れで開発するのでしょうか？気になりますねー。
- 準備
- 配色を決める
- カラム数を決める
- 幅、大きさを決める
- 色やアイコン、枠をデザインする
- アーカイブ版・カテゴリーページをデザインする
- 機能性のカスタマイズ
1つずつ、僕の失敗談を入れながら説明していきたいと思います。
準備
何事もまずは準備から。
テーマ作成するには
help.hatenablog.com 公式の手引きを頼りに開発します。
公式が提供している「bolierplate.css」をダウンロードorコピペ。それをいじることでテーマが簡単に作ることができるわけです。
Hatena-Blog-Themes/boilerplate.css at master · hatena/Hatena-Blog-Themes · GitHub
また、テスト用のHTML（記事）も用意されています。有効に活用しましょう。
便利ツール
テーマ作成にはあれやこれや便利なツールがたくさんある「らしい」
けれども、僕は使い方がわからないかったり、使いづらかったりしたので、どれも使いませんでした(; ^ω^)
ただ、1つ。これだけは用意すべきというものが。
それは、「Chrome」です。
インストールはこちらから。
パソコン版 Chrome
このChromeの[表示]->[開発/管理]->[デベロッパーツール]が必須！！
左下にあるボタンを押すことでカーソルの重なった要素を調べることができます。
スマホでの表示も確認できますよ！
デベロッパーツールで確認しながら開発を有利に進めましょう。
また、テーマの開発は非公開に設定したサブブログで行いましょう。
配色を決める
最初にやることでありながら、影響度がハンパないです。正直、色1つ違うだけで全然、別ものですからね。入念に考えましょう。
後からとすることや作りながら考えるのはやめましょう。悲惨なことになります(ｰｰ;)
CSSは、プログラムのように値に変数を使うことができません。同じ色のところは変数Aを使い、後から変数Aの値を変えて…なんてことが出来ないんです。
また、色は白＋2色をオススメします。やっぱり、ブログは記事を読んでもらう必要がありますし、その背景は白がベスト。
２色には、メインとなる濃いめの色とちょっと薄い色を選んでおくといいと思います。
どんな色があるのかな？あの色はCSSだと何色？この色の補色は？という疑問は色見本さんで解決しました。
カラム数を決める
レイアウトを細かく考える前にざっくりとしたところから。
2カラム？1カラム？はたまた、3カラム？
ここも後から変更することは面倒なので前もって決めておきましょう。
ブログの基本は2カラムですね。本文を左に、サイドバーを右にといったところ。
僕も最初は2カラムにする予定でした。ただ、スマホのことを考え、現在の1カラムにしました。
レスポンシブデザインにするのか、しないのかも重要です。
レスポンシブデザインの場合は注意が必要ですし、しない場合は別途、スマホのデザインを考える必要があります。
僕はレスポンシブデザインにしました。難しいかな？と思いましたが、そうでもなかったです。
その理由は1カラムだったからです。
1カラムの場合は表示を〇〇pxとせず、〇〇%とするだけで随分、楽になります。
幅、大きさを決める
ここが一番苦労しました…。
ボックスモデル、ムズカシー！！
全体のidやクラス名はこちらの記事を参考にさせていただきました。
助かりました。おかげで、Chromeのデベロッパーツールを使い倒すことになりました(白目)
ボックスモデルは大変ですね。わかってたことだけど。
width決めても、paddingないと気持ち悪いなとか、marginを設定したはずなのに…とか。
それから、サイドバーが鬼。1カラムにしてからはそこまで辛くはありませんでしたが、2カラムとなると、大変！
画面サイズ狭めていったら、サイドバーが狂った！どっかいった！だとか、色付けがうまくいかない！だとか。
馬鹿なことはいいません。設計図を描くことをオススメします。作りながらは最悪です。時間がもっていかれます
色やアイコン、枠をデザインする
あらかじめ、決めておいた色をつけていきましょう。メインとなる色が映えるように、読みにくくならないようにしましょう。
見出しや日付、続きを読むボタンなどのパーツのデザインも同様に行いましょう。
カスタマイズでやることとなんら変わりありません。ただ、テーマとして作っておきましょう。テーマの全体像が見えてきていいと思います。
それに加え、サイドバーも色やアイコンをつけておきましょう。このタイトル部分だけを色付けるデザインはお気に入り。
アイコン選びに迷ったら
どの項目とどのアイコンが合うのか、定石みたいのはないのかなあ。と思って調べてみるとこんな記事を見つけました。
アイコンの導入方法はもちろん、コピペ用CSSもあります。サイドバーのアイコンはこれで一瞬。本当に助かりました！！
アーカイブ版・カテゴリーページをデザインする
あまり、いじる要素はないと思います。でも、paddingなどの設定をしておかないと若干キモかったのでいじました。
アーカイブページの確認は「カスタマイズ設定」からではできませんのでご注意を。
カテゴリーページは特有の「#top-box .breadcrumb」がありますので、忘れずに。
そのほかにも、ページャーやフッターなどデザインできるところは存在します。
ただ、それほど重要ではなかったり、特別な措置をとる必要がなかったりします。
ご自分のデザインする領域を把握しておきましょう。
機能性のカスタマイズ
サイドバーのモジュールであったり、グローバルナビであったり機能面を充実させるカスタマイズも忘れずにしておきましょう。既にブログを運営していた方であれば、ちょっと色を変えるだけでよかったりもします。
この辺はテーマのCSSに直接、書き込んでも、カスタマイズ用のデザインCSSに書いてもどちらでもいいと思います。
公開する場合はなるべく、シンプルに、カスタマイズの含まないものが良いかもしれません。
おわりに
いかがだったでしょうか？
正直、思っていたほど難しくはないというのが本音です。（僕のハードルが高すぎたのかもしれない）
ただ、僕はプロではないので、見落としているだけで、実はうまくいっていないのかもしれません。
タブレットの表示とか確認できていないですし、IE5,6については無視です。
でも、個人的には大満足。個性ある感じがして好きです。
ぜひとも！オリジナルテーマつくってみてはいかがでしょうか？