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

SORE, OINTOYADE.

You love money? I love money.

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

f:id:kenixi:20170315020112p:plain

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

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

使用テーマ

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

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%;
}

目次を自動的に追加

考えることは皆同じ。Qiitaにほぼ丸パクリできる記事が投稿されています。

はてなブログで自動的に目次を作成するjs - Qiita

あとは好みに応じてデザインを整えてあげればいいだけ。簡単ですね。

ヨメレバ、カエレバの導入

ブロガー御用達のツール、商品紹介ブログパーツ カエレバ書籍紹介ブログパーツ ヨメレバ。僕も使わせていただいています。作者はわかったブログのかん吉(@kankichi)さん。ありがとうございます!

使い方は公式サイトの方を見ていただくとして、デザインは自分で整えた方がいいでしょう。

僕は、id:ftmacchoさん作のヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Lifeをちょっと改造して使っています。コードの提供ありがとうございます!

記事上部、下部、サイドバーの見直し

人気ブログを見てみると、それぞれのエリアに何を配置すればいいかが自然と見えてきます。ただこれには正解ってのがないので、ある程度成果のありそうな配置を取り入れて、あとは見た目の好みとかで決めちゃっても良い気がする。

特にモバイルファーストな現代、サイドバーって最悪目に触れない場所に配置される恐れもあるので、まぁ、いい感じにすればいいと思う!正解言えなくてすまん。

とりあえず記事下のエリアってのは結構重要らしい。

ブログで稼ぎましょう!

いわずもがな、ここまでデザイン整えて何をしたいかというと、当然稼ぎたいわけです。稼ぐためにブログを選んだのです!(文章力を鍛えるっていう表向きの理由もありますよ、一応)

まず今年中に数万円稼ぐくらいにはなりたい。きっと数万円稼ぐヒントはこの本の中に詰まっているはず。

おわりに

ひとまず、読んでもらう為に最低限必要なデザインはこれで出来たので、あとは記事を量産していくだけです!あ、ドメインは独自ドメインに切り替えないとね。。

そいぎんた!