このブログは「はてなブログ」のテーマテンプレート「Brooklyn」を使っています
このテンプレートは2017年10月現在で人気No.1！
2位テンプレートに3倍以上もの差をつけてダウンロードされていますね
人気の理由としては、シンプルで見やすいのに機能的で使いやすいこと
またカスタマイズがしやすいことで他の人との区別化が図りやすく
さらにレスポンジブデザインのため初心者でも扱いやすいことでしょうか
僕もこのテンプレートを選んだ理由は「カスタマイズ例が豊富」という点で、
先人たちのカスタマイズを参考にできる！と思って選びました
ブログをカスタマイズするまでに考えたこと
1、まずブログのテーマを考える
このブログのテーマは「seek＝探し求める」から「がるシーク」と称して
僕が日々インプットしたことをアウトプットするという体のいい雑記ブログです
当面の目標は「自由」になること
ブラック企業から離脱してフリーランスになることを目標としています！
テーマがなかなか決まらないという人は雑記ブログから初めて、とにかくまずは何でも書いてみることをオススメします
そのうちに自分の語れるジャンルがわかってきますのでそれを3個～4個テーマとして選ぶのがいいんじゃないでしょうか
かくいう僕もなかなかテーマが決まらず雑記ブログにしたのですが、
書いていくうちに「仕事」「音楽」「ゲーム」などやっと自分の興味のあるジャンルがわかってきたところですね
2、イメージカラーを決める
テーマが決まってある程度記事を書いていくとブログの色がなんとなくわかってきます
僕のブログは「自由」になることを目標としているのと、明るく楽しい感じを出したかったので「水色」をメインにしました
水色（ターコイズ、スカイブルー） | カラーセラピー.com
水色は空や海など開放感があるイメージの色なので、自分の心をオープンにして自由な表現をしたり、コミュニケーションをしたい時に取り入れると効果的です。
色の持つ特徴を知っておくと決めやすいと思いますよ
3、サイトの配色を考える
メインとなる色が決まったところで、バランスのいい配色を探していきます
こちらの記事が非常に参考になるのでオススメです
ちなみに僕のブログは『13. チャーミングな「水色」×「黄」』を参考に配色しています
明るくポップなイメージが印象的で気に入っています
かわいいですよねー
4、CSSカスタマイズで色と調和させていく
先ほど決めたブログのイメージカラーを、ブログデザインをカスタマイズする時に意識して使用していきます
いきなりカスタマイズしてもいいのですが、もともと「Brooklyn」は白と黒のベースなので色が決まるまではシンプルモダンな印象になってしまいます
それがカッコイイんですけど人と同じは嫌だなっていう方には、先にイメージカラーを決めて一緒にカスタマイズしていくことをオススメです
実際に使用したカスタマイズ
ここからは僕が実際に使っているカスタマイズで参考にした記事を紹介していきます
今後変更したり追加することがあったら追記していくので、「あのデザインがいい！」というところがあったら参考にしていただければと思います
見出しでh2タグを使えるようにする
はてなブログは大見出しでもh3タグがデフォルトになってしまうので、
SEO的な意味っていうよりは、なんか気分的にそろってないとイヤだったので変更しました
参考にさせて頂いたのはこちらの記事
他の方のも試させて頂いたのですが目次でリンクが飛ばなかったりいろいろ不具合があったので困っていました
こちらのカスタマイズですべて順調に動くようになりましたのでご紹介させて頂きます
グローバルナビのカスタマイズ
ヘッダー画像下のメニューのカスタマイズです
テーマがいくつか決まってカテゴリーが複数ある場合に必須ですね
またこの他に「投稿年月日」や「サイドバー」の色の変更も書いてあります
シェアボタンのカスタマイズ
既存のデザインだと物足りない方はカスタマイズしてみましょう
いろいろ種類があって選べない方はこちらの記事に一覧がまとめてありました
【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW
ちなみにこのブログはこちらの記事を参考にさせて頂きました
ヘッダー画像の作成
ヘッダー画像は「Inkscape」というソフトを使って自作しました
本当は「illustrator」を使い慣れていたので使用したかったのですが、有料のため断念
こちらのソフトは無料ですが、イラストレーターとほぼ変わらない機能を持っているのでオススメです
バナーは先ほど決めイメージカラーを取り入れて簡単に作りました
画像なんかを取り入れてもいいかもしれませんね！
画像を作成したら[デザイン]→[カスタマイズ]→[ヘッダー]で画像を挿入していきます
このときに背景が色付きの画像の場合、両サイドの余白を消す必要がありますので注意が必要です！
僕はこちらの記事を参考にさせて頂きました
トップページをカード型にする
カード型のトップページにあこがれていたので採用させて頂きました
「Brooklyn」でも問題なく動作しています
やり方はこちらの記事をご参照ください
見出しのカスタマイズ
見出しもデザイン1つでイメージがガラッと変わりますよね！
変更するにはまず既存の見出しをリセットする必要があります
こちらの記事が参考になりますよ
affiliate-couple.hatenablog.com
見出しがリセット出来たら続いてお気に入りの見出しを探して挿入していきます
僕が参考にしたのはこちらの2つの記事です
非常におしゃれでかわいい見出しがいっぱいあって目移りしちゃいますね！
まとめ
デザインはずっといじっていても終わりが無いので、ある程度納得のできるものを最初にビシッと作るといいですね！
モチベーションが上がって継続に繋がると思います
でもやりすぎには注意ですね
こだわりすぎると記事そっちのけでいじってしまうので、毎日のノルマが終わった後に触る程度にしておきましょう！
ではでは
