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

ミトミネ農場

IT業界の末席から農業の世界に飛び込んでみて日々感じたことや学んだ事を書き連ねます。

はてなブログ(テーマinoccent)のカスタマイズまとめ

f:id:akaringding:20160528161210p:plain

はてなブログを少しカスタマイズしてみました。レスポンシブなテーマに変更し、グローバルナビを入れたり、SNSボタンを入れてみました。備忘録がてら、カスタマイズで参考にさせていただいたサイトをご紹介します。

導入テーマ

はてなブログのテーマストアから「inoccent」というテーマを導入しました。かなり人気のあるテーマで、カスタマイズがしやすくなっています。レスポンシブにも対応してます。

Innocent - テーマ ストア - はてなブログ 

f:id:akaringding:20160528161756p:plain

ヘッダー

ブログ名やブログの概要説明が書かれている部分は、こちらの記事を参考にしました。画像とかは使ってないですが、センタリングしたり微調整してます。

moonnote.hateblo.jp

around60.hatenablog.com

ナビゲーションバー

f:id:akaringding:20160528164547p:plain

トップに、カテゴリ名を並べてるナビゲーションバーを追加しました。レスポンシブに対応してます。

moonnote.hateblo.j

フォント

フォントはこちらのサイトを参考に変更しました。

itkeijyoshilog.hatenablog.com

www.tarappism.com

見出し

見出しは、キーカラーのアクアグリーン(#3498DB)を使ってます。参考にしたのはこちらのサイトです。

www.yukihy.com

shiromatakumi.hatenablog.com

シェアボタン(ソーシャルボタン)

記事末に入れているSNSボタンはこちらの記事を参考にしました。

f:id:akaringding:20160528164638p:plain

webgaku.hateblo.jp

続きを読むボタン

続きを読むボタンは、ちょっと目立つようにキーカラーにしました。hover(カーソル重ねて)で白抜きになるようになってます。

moonnote.hateblo.jp

SNSフォローボタン

サイドバーにおいている、読者になるボタンやFacebookボタンはこちらの記事を参考にしました。

f:id:akaringding:20160528164658p:plain

www.ituore.com

カラーコードの取得

 その他、カラーリングを決めたりするときは、こちらのサイトから色を取りました。

Flat UI Colors

f:id:akaringding:20160528164002p:plain

Material Design Color Palette Generator - Material Palette

f:id:akaringding:20160528164153p:plain

アドセンス

広告は、Googleアドセンスを入れさせてもらってます。

remotosa.com

 

 

すでにいろいろな方が、はてなブログのカスタマイズ方法を解説してくださっているので、非デザイナな私でもささーっとカスタマイズすることができました。ありがとうございました!