はてな自作テーマ”Summer Summer"を作りました。
またしてもWeddingとは異なる話ですが、最近Webデザインに興味を持ったので、独学で勉強してはてなブログのテーマを作成しました！
現在このブログで使用しているのもそのテーマです。
名前はこれからの季節に使って欲しいと思い、「Summer Summer」にしました。
次回からはちゃんと（？）Wedding記事に戻しますので、この記事までは趣味におつきあいいただけると嬉しいです。
作成したテーマ
これが作成したテーマです。大好きな黄色と青色をメインカラーに。このwedding ブログで使うことを決めていたので、メインカラーはすぐに決まりました。（思いっきり私情）
私のスペック
- 非エンジニア・非デザイナー
- HTML CSSを勉強して３週間
事務職で、いつも誰かをサポートしていた私。
「何か自分でも作っていきたい」という思いがむくむくと大きくなっていました。それで、身近にあるWebデザインの勉強をはじめました。
勉強したからには何か形に残るものを作りたかったので、はてなブログさんはその良いプラットフォームだなと思いましてテーマ作成にチャレンジ。勉強は独学だったけど、今は良い教材がネット上で簡単に手に入るので素晴らしいですね。
To Do List
私が行ったことを順番に箇条書きにしていきます。
- デザインイメージを描いておく。（レイアウトとかカラーとか。）
- 自作テーマ説明用のブログを作成する。
- テーマ名を決定する
- サンプルテーマ「Boilerplate」をGitHubから取得する
- 記事とサイドバーの横縦幅の設定
- 「ブログタイトル」部分のCSSを修正する
- 「ブログの説明」部分のCSSを修正する
- 記事「日付」部分のCSSを修正する
- 記事「カテゴリー」部分のCSSを修正する
- 「サイドバー」部分のCSSを修正する
- 記事リンクボタンの色を変更
- 記事「写真」を浮き出るように変更
- 「続きを読む」ボタンのカスタマイズ
- 「ページャー」「フッター」部分のCSSを修正する（私はしなかった）
- テーマストアに登録する
サンプルテーマ「Boilerplate」をダウンロードしてしまえば、すでにシンプルな良い感じのデザインが出来上がっています。なので、その元々のデザインをいかしつつ、自分の好きなところを色を変えたり動作を変えたりして色付けていく感じです。ページヤーとフッターは特に変更しませんでした。
参考にしたブログ
はてなブログ公式以外にも、こちらのサイトを参考にしました。
作業時間
２回目以降は、２０時間くらいで作れるかと思います。作成時間のうち、１０時間くらいはテーマの洗い出しやら動作確認やらに費やしたので、純粋にCSSとにらめっこしていたのは２０時間もないと思います。
気づき
- 「シンプルに使いやすく」が難しい。（画面の）バランスが取りづらい。
- 鉄は熱いうちに打て。（時間がたつとやる気が下がる性格の人は１週間以内が限度。）
- webデザインは日々進化している。常に勉強が必要だしトレンドも変わる。
- PCで作るからついPC画面をメインにデザインを考えがちだけれど、モバイルユーザーも多いのでモバイルデザインを先に意識してデザインを考えた方が良さそう。（じゃないとコード書き換えが頻発して面倒。）
- はてなブログはCSSのみでデザイン可能。（私が作ったテーマは全てCSSの知識。）でももっと自由に作るならwordpressが良さそう。
- Githubってなんぞや。
- 自分の今の限界がきたら、潔く諦める。（とりあえず完成させる。）
- Webデザインを考えるの楽しい。
センスも自信ないし、経験もないし、今更おそい。。と思っていたけれど、そんなこと全然なかったです。自分が楽しんだ！ていうのが第一歩で。
これから本格的にこちらの勉強をしていこうと思えました。
時間をかけるだけ良いものを作り出せる、自分が納得するまで突き詰めて世に出すのが素晴らしいと思っていたし、今でもその気持ちはあるけれど、とりあえず７０％くらいの完成度でもローンチする。完成させることによって得られる気づきもある。
上には上がいるので、気にしても仕方ない！興味があるなら何歳からでもチャレンジすべし。
もし、もしも使ってもいいよ！という方がいらしたら、インストールしていただけるととても嬉しいです♡
ではでは！
