読者です 読者をやめる 読者になる 読者になる

ませろぐ!

札幌在住の医大生の日常・その他もろもろ

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

雑記 雑記-ブログ

ブログを始めてから、

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

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

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

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

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

多分、よっぽど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時間以上でしょうか(笑) でもやってて楽しかったです。

 

ビフォー

f:id:marcelin:20170307163549p:plain

アフター

f:id:marcelin:20170307163651p:plain

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

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

 

さいごに

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

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