一からはてなブログテーマデザイン自作してみたけど思いのほか簡単にできて満足いった！

ブログを始めてから、

「何か自分の思い描くブログと違うなあ」

と悩む毎日でした。一般公開されているどのデザインも自分に合いませんでした。そうして悩み続けた結果、ある結論にたどり着きました。

自分で作ればいいじゃん！

というわけで、一から作り始めました（笑)

テーマを自作するメリット

多分、よっぽどWebサイトの制作経験が無い限り、一般公開された既存のテーマをカスタマイズをしていく人が大半ではないでしょうか。たしかに、SEO対策もしてあり、デザインも見やすくなっています。少しカスタマイズすれば自分の思い通りになるでしょう。

しかし、このカスタマイズが結構難点がありまして、はてなブログではCSSの編集を採用しているのですが、自分が選んだテーマを直接編集できず

「既存のコード」+「カスタマイズのために追加したコード」

とコードを加えていく形式を取っているため、カスタマイズするたびにソースコードが長くなってしまいます。CSSでは後にくるコードが優先されるため、追加したものが表示されるので、「同じ部分について複数回記述する」と回りくどくなってしまうのです。

スッキリしたソースコードにできる！

気になるところをカスタマイズしようとしていくと、どんどんソースコードが長くなり、どこに何が書いてあるか分からなくなります。そうなるくらいなら、一からテーマを作ってみようとなるわけです。

自分の思い通りのデザインにできる！

そもそもあれやこれと細々と調整していくつもりなら、最初から自分だけのテーマを自作していくべきなのです！

テーマ自作はそれほど難しくない

ネット上には色々な情報が転がっています、当然カスタマイズの仕方も。

さらに、はてなブログではCSSを使ったテーマデザインを採用しています。HTMLをあまり弄れない分、自由度は減りますが、ある程度形が決まっているので、ちょっとスパイスを加えてみようという感覚でテーマを作ることが出来ます！

テーマデザイン

はてなブログのテーマは公式でベースとなるCSSが配布されています。詳しくは以下のサイトから。

help.hatenablog.com

上記サイトでは下に挙げたところを編集していきましょう。

• ブログタイトル
• ブログの説明
• 記事
  • 日付
  • カテゴリー
  • 「編集」リンク
  • キーワードリンク
  • 記事下の広告
  • コメント欄
• サイドバーモジュール
  • プロフィール、最新記事などの各モジュール
• ページャー
• フッターリンク
• Aboutページ
• Archiveページ
  • カテゴリーのパンくずリスト

私はそもそもCSSって何？という状況だったので次のサイトで勉強しました。

www.shoshinsha.com

今回テーマデザインするにあたって、もっぱら次のサイトを参考にさせていただきました。

shiromatakumi.hatenablog.com

CSSを記述するときに、はてなブログ用のクラスとidを参照する必要があります。いちいち調べるのも面倒でしたが、非常にまとまっていて見やすい記事があったので紹介します。

kyabana.hatenablog.jp

自作テーマ完成！

というわけで、自分だけのテーマが完成しました。1週間、暇があれば作業してました。合計して10時間以上でしょうか(笑)　でもやってて楽しかったです。

ビフォー

アフター

かなり見やすくなったでしょう？

まだ完璧とは言えないんですが、私の思い通りのデザインになっているので非常に満足しています(#^.^#)

さいごに

今回の制作を通してCSSについても色々学べたと思います。そして、実際作ってみると自分のサイトの構造が掴め、自分のブログに愛着がもっと湧きました(笑)

またちょくちょくデザイン変えていこうかと思います！