がるシーク

あなたのギモンをシークする雑記ブログ。役立つ記事からくだらない記事まで毎日1記事更新中!暇な時間にぜひどうぞ。

がるシーク

はてなブログテーマ「Brooklyn」のカスタマイズで参考にしたサイト集

f:id:garusi:20171019213659p:plain

 

このブログは「はてなブログ」のテーマテンプレート「Brooklyn」を使っています

 

www.notitle-weblog.com

 

このテンプレートは2017年10月現在で人気No.1!


2位テンプレートに3倍以上もの差をつけてダウンロードされていますね

 

 

 


人気の理由としては、シンプルで見やすいのに機能的で使いやすいこと

またカスタマイズがしやすいことで他の人との区別化が図りやすく

さらにレスポンジブデザインのため初心者でも扱いやすいことでしょうか

 

 

僕もこのテンプレートを選んだ理由は「カスタマイズ例が豊富」という点で、

先人たちのカスタマイズを参考にできる!と思って選びました

 

 

ブログをカスタマイズするまでに考えたこと

1、まずブログのテーマを考える

 

このブログのテーマは「seek=探し求める」から「がるシーク」と称して

僕が日々インプットしたことをアウトプットするという体のいい雑記ブログです

 

 

当面の目標は「自由」になること

ブラック企業から離脱してフリーランスになることを目標としています!

 

 

 

テーマがなかなか決まらないという人は雑記ブログから初めて、とにかくまずは何でも書いてみることをオススメします

 

そのうちに自分の語れるジャンルがわかってきますのでそれを3個~4個テーマとして選ぶのがいいんじゃないでしょうか

 

 

かくいう僕もなかなかテーマが決まらず雑記ブログにしたのですが、

書いていくうちに「仕事」「音楽」「ゲーム」などやっと自分の興味のあるジャンルがわかってきたところですね

 

 

2、イメージカラーを決める

テーマが決まってある程度記事を書いていくとブログの色がなんとなくわかってきます

 

僕のブログは「自由」になることを目標としているのと、明るく楽しい感じを出したかったので「水色」をメインにしました

 

水色(ターコイズ、スカイブルー) | カラーセラピー.com

水色は空や海など開放感があるイメージの色なので、自分の心をオープンにして自由な表現をしたり、コミュニケーションをしたい時に取り入れると効果的です。 

 

色の持つ特徴を知っておくと決めやすいと思いますよ

 

 

3、サイトの配色を考える

メインとなる色が決まったところで、バランスのいい配色を探していきます

 

tsukuruiroiro.hatenablog.com

こちらの記事が非常に参考になるのでオススメです

 

 

ちなみに僕のブログは『13. チャーミングな「水色」×「黄」を参考に配色しています

明るくポップなイメージが印象的で気に入っています

 

かわいいですよねー 

 

4、CSSカスタマイズで色と調和させていく

先ほど決めたブログのイメージカラーを、ブログデザインをカスタマイズする時に意識して使用していきます

 

  

いきなりカスタマイズしてもいいのですが、もともと「Brooklyn」は白と黒のベースなので色が決まるまではシンプルモダンな印象になってしまいます

  

それがカッコイイんですけど人と同じは嫌だなっていう方には、先にイメージカラーを決めて一緒にカスタマイズしていくことをオススメです

 

 

実際に使用したカスタマイズ

ここからは僕が実際に使っているカスタマイズで参考にした記事を紹介していきます

今後変更したり追加することがあったら追記していくので、「あのデザインがいい!」というところがあったら参考にしていただければと思います

 

 

見出しでh2タグを使えるようにする

はてなブログは大見出しでもh3タグがデフォルトになってしまうので、

SEO的な意味っていうよりは、なんか気分的にそろってないとイヤだったので変更しました

 

www.ikemenmusuko.net

参考にさせて頂いたのはこちらの記事

他の方のも試させて頂いたのですが目次でリンクが飛ばなかったりいろいろ不具合があったので困っていました

 

こちらのカスタマイズですべて順調に動くようになりましたのでご紹介させて頂きます

 

 

グローバルナビのカスタマイズ

ヘッダー画像下のメニューのカスタマイズです

テーマがいくつか決まってカテゴリーが複数ある場合に必須ですね

 

www.style-yry.com

またこの他に「投稿年月日」「サイドバー」色の変更も書いてあります

 

 

シェアボタンのカスタマイズ

既存のデザインだと物足りない方はカスタマイズしてみましょう

いろいろ種類があって選べない方はこちらの記事に一覧がまとめてありました

 

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW

 

 

ちなみにこのブログはこちらの記事を参考にさせて頂きました

www.yukihy.com

 

 

ヘッダー画像の作成

ヘッダー画像は「Inkscape」というソフトを使って自作しました

本当は「illustrator」を使い慣れていたので使用したかったのですが、有料のため断念

こちらのソフトは無料ですが、イラストレーターとほぼ変わらない機能を持っているのでオススメです

 

 

バナーは先ほど決めイメージカラーを取り入れて簡単に作りました

画像なんかを取り入れてもいいかもしれませんね!

 

 

画像を作成したら[デザイン]→[カスタマイズ]→[ヘッダー]で画像を挿入していきます

このときに背景が色付きの画像の場合、両サイドの余白を消す必要がありますので注意が必要です!

 

 

僕はこちらの記事を参考にさせて頂きました

mulife.hatenablog.com

 

 

トップページをカード型にする

カード型のトップページにあこがれていたので採用させて頂きました

「Brooklyn」でも問題なく動作しています

 

 

やり方はこちらの記事をご参照ください

design.syofuso.com

 

 

見出しのカスタマイズ

見出しもデザイン1つでイメージがガラッと変わりますよね!

 

変更するにはまず既存の見出しをリセットする必要があります

こちらの記事が参考になりますよ

affiliate-couple.hatenablog.com

 

 

見出しがリセット出来たら続いてお気に入りの見出しを探して挿入していきます

僕が参考にしたのはこちらの2つの記事です

 

saruwakakun.com

www.notitle-weblog.com

非常におしゃれでかわいい見出しがいっぱいあって目移りしちゃいますね!

 

 

まとめ

デザインはずっといじっていても終わりが無いので、ある程度納得のできるものを最初にビシッと作るといいですね!

 

モチベーションが上がって継続に繋がると思います

 

でもやりすぎには注意ですね

こだわりすぎると記事そっちのけでいじってしまうので、毎日のノルマが終わった後に触る程度にしておきましょう!

 

 

ではでは