俺的はてなブログのオススメテーマと最初にやるべきカスタマイズ、7連発！

f:id:kenixi:20170315020112p:plain

新しくブログを作ったはいいものの、流石にデフォルトデザインのまま書き続けるのもあれなので、ブログを始めると同時に最低限やるべきカスタマイズをさっさとやっておきます。最低限やればあとは運用しながらでOKなので。

何を隠そう、僕は何度もはてなブログに出戻りしているので、とりあえず何をやればいいかくらいは把握しているのです。ふはははは！

使用テーマ

Innocentが一番よさそうだったので、これを採用。

理由としては、以下。

シンプル
レスポンシブ対応
カスタマイズベースとして扱いが楽
最悪そのままでも恥ずかしくない

どうせカスタマイズしていくので、極力シンプルで扱いが楽なものを選んでおくと間違いないです。かつ、自力でレスポンシブ組もうと思うと結構大変なので、そこはテーマ側で対応しているのが絶対条件。中にはコッテコテのデザイン入れてるテーマもありますが、そういうのに後から自分でデザイン当てていくのは、結構難儀です。

シンプルだと飽きがこないので！ね！

公式カスタマイズ

以下のものは、Innocent公式のカスタマイズなので、とりあえず対応しておくべき。作者のid:waitingmoonさん、ありがとうございます！

ナビゲーションバー
おすすめ記事リスト
続きを読むボタン

各カスタマイズのやり方は公式をご覧あれ。

カテゴリのデザイン変更

はてなはカテゴリの階層構造も設定できないし、もはやタグのような扱いをしても差し支えないというのが僕の考えなので、まさにタグっぽいデザインに書き換えています。

/*
カテゴリをタグライクに変更
*/
.categories a, .hatena-module-category .hatena-urllist li a {
  border-radius: 10px;
  border-color: #F26964;
  background-color: #F26964;
  color: #FFF
}

.categories a:before, .hatena-module-category .hatena-urllist li a:before {
  content: "#";
}

.categories a:hover, .hatena-module-category .hatena-urllist li a:hover {
  background-color: #FFF;
  color: #666;
}

はてな界隈ではカテゴリ設定で階層を持たせるようにするカスタマイズが結構人気みたいだけど、個人的にあういう設定方法は書くのがつらそうなので、導入していません。SEOバリ気にする人は階層化させた方がいいかも。

見出しのデザイン変更

安定の株式会社LIGをパク…もとい、参考にさせていただきます。いい感じのデザインの提供ありがとうございます！

/*
h3見出し
*/
.entry-content h3 {
  font-size: 28px;
  background-color: #F3F3F3;
  border-radius: 10px;
  padding: 21px 18px 20px;
}

/*
h4見出し
*/
.entry-content h4 {
  font-size: 24px;
  padding: 18px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

/*
見出し共通設定
*/
.entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  font-weight: bold;
  line-height: 1.6;
  color: #000;
  margin: 60px 0 22px;
}

リストのデザイン変更

僕が別ブログでも使ってる系のデザインです。どっからか拾ってきたんだけど、、すいません、出典忘れました。

番号なしリストはチェックスタイル、番号付きリストは丸番号です。

/*
番号なしリスト
*/
.entry-content ul li {
  padding:0px;
  margin:0px;
}

.entry-content ul li {
  list-style-type:none !important;
  list-style-image:none !important;
  margin: 5px 0px 5px 0px !important;
}

.entry-content ul li {
  position:relative;
  padding-left:20px;
  line-height: 1.5;
}

.entry-content ul li:after, .entry-content ul li:before{
  content:'';
  display:block;
  position:absolute;
  top:4px;
  left:8px;
  height:11px;
  width:4px;
  background:#e64946;
  border-radius:10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}

.entry-content ul li:before{
  top:8px;
  left:3px;
  height:8px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}

/*
番号付きリスト
*/
.entry-content ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}

.entry-content ol li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
  line-height: 1.5;
}

.entry-content ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #e64946;
  color: #ffffff;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}