はてなブログ1年目の初心者が１０日かけて行ったカスタマイズまとめ

カスタマイズの前に

まずはこれは皆さんやっておいた方がいいと思います。
デザインカスタマイズをやるときはテストブログで先に試しましょうという話。
やっさんもテストブログを作ってやったんですがこの方法だといくらデザインをいじくっても本ブログには全く影響しないので思い切っていろんなことを試すことができます！
www.naenote.net

デザインテーマの設定

今回テーマは「Minimal Green」を使用させていただきました。
やっさんのやりたいデザインに合いそうだったこと、作者の方のカスタマイズ記事がわかりやすくそのデザインも可愛かったことで選びました。（ガーリーなデザインにしたい方にはこちらのテーマがすごくおすすめです！）
Minimal Green – テーマ ストア

記事幅、余白設定を決める

記事幅と余白でも見やすさが変わります！

有名サイトの記事幅と余白の平均値はこのようになりました。
記事幅平均……616px
余白平均……35px

これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開
ちなみにやっさんが使用したテーマ「Minimal Green」では

content幅1000px,記事幅（main)624px,サイドバー幅336pxに設定しています。サイドバーに広告も貼りやすい設計です。
スマートフォン（横幅360px～)でも300pxの広告が表示されるようにしました。

ということで記事幅は624px、余白は40pxで平均と近かったので変更は行いませんでした。

フォントサイズを決める

記事幅の次はフォントサイズ。フォントの大きさでも読みやすさや印象が大きく違います。
こちらの記事で詳しく書かれていました。
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう

PC、スマホのフォントサイズの変え方はこちらを参考にしました。
意外と知らない？はてなブログで絶対やるべき4つのカスタマイズ – Appism

やっさんはPC、スマホどちらも16pxにしています。

テーマカラーを決める

いざヘッダーを作ったりカスタマイズをしていく前に自分のカラーを決めておいた方がいいです。
やっさんは下記サイトでイメージをつかみました。
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル

そのほかに参考にしたサイト

• Adobe Color CC
• Color – Style – Material design guidelines
• マテリアルデザインでの「色」の使い方とガイドラインの要点
• 配色初心者でも効果的なカラーデザインが出来るようになる4つの工程
• ウェブ配色ツール Ver2.0

配色の基本についてはこちらのサイトを見ました。
【図解で分かる】色彩センスのいらない配色入門 – Brian'z Imagination

まずはメインカラーを決めます。
やっさんは家をリノベーションした際にセルフで壁に黒板塗料を塗ったんですが、その壁の色を自分のテーマカラーにしたいなと思っておりました。

最初はこれでヘッダー画像など作ったりしていたんですが、いざボタンやバーなどをこの色にしていったらなんかチカチカして目がしんどかったんです(´・ω・`)
新たにもっと優しいカラーにしてヘッダーも作り直しました。

そして決めたカラーが

次にベースカラー。

白・グレーなどの「明度の高い無彩色・濁色」を選ぶか、「メインカラーの明度を上げてパステル調にする」のがオススメ。

【図解で分かる】色彩センスのいらない配色入門 – Brian'z Imagination

ということでやっさんはベースカラーには白を選びました。

最後にアクセントカラーです。

アクセントカラーはメインカラーとできるだけ離れた色相を選ぶのがベストだ。補色を採用することもしょっちゅうある。

【図解で分かる】色彩センスのいらない配色入門 – Brian'z Imagination

子育てブログなのでとっつきやすいイメージにしたいなぁと思っていたのですが、こちらの配色なら優しくてポップな色合いになったのではないかと思います。

メインカラー、ベースカラー、アクセントカラーの他に少しだけ色をたしています。
あまり違う色を使うとページ全体の印象がバラバラしてしまうので、メインカラーやアクセントカラーを薄くしたり濃くしたりして似た色を使っています。

• 日付、サイドバータイトル文字

ボタンの色をメインカラーにした際、文字の色が白だと少し見にくいような気がしたので、より目に優しく見やすくなるように下記の色にしてみました。

• リンク文字のカーソルを合わせた時の色

リンクにカーソルを合わせた時の色はメインカラーの少し薄い色にしました。
人はリンクは青色だと押しやすいそうです。

• リンク訪問済みの色

カテゴリなどたくさんリンクがあるので、訪問した人がすでに見たリンク、まだ見ていないリンクがどれかわかりやすいようにリンクを1度クリックすると下記の色に変わるようにしました。

トップ画像

トップのヘッダー画像も新しいものに書き直しました。
やっさんが使用しているお絵かきソフトはこれです。
フリー ペイントツール (Mac/Win 両対応) FireAlpaca [ ファイア アルパカ ]
このような画面です。
ちなみにこの記事のアイキャッチ画像もこちらのソフトで作りました。

レイヤーも複数作れるし、文字も入れられるし、やっさんが使用するには申し分ないくらいの機能がついています。

一度作ってアップロードしてみたのですが、なぜか画像がボケるボケる。。。
原因を調べていたらこちらのブログで詳しく書かれていたのでその通りにやってみたらうまくいきました！

はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ – たわしの帖

PC用に作った画像がこちら。

調べたがり、まとめたがり、作りたがりというのはまんまやっさんの性格です。ハイ。

サイドバータイトル

ガーリーなデザインの見出しのCSS はてなブログへコピペで使えます。 – Minimal Green
サイドバーのタイトルはやっさんの使用したテーマの作者のMinimal-Green(id:syofuso)さんが紹介してくださっているカスタマイズから選びました。
上記の記事の中の上下ステッチのデザインにしました。
こちらの記事は見出しのカスタマイズとなっていますがサイドバーにも問題なく使えましたよ！

ただ、一度設定してみたところ前のデザインの反映が消えませんでした。

テーマのCSSと被ってうまく上書きできないときは、リセット用CSSを先に記述し、その後から各見出しのデザインのCSSを追記してください。

ガーリーなデザインの見出しのCSS　はてなブログへコピペで使えます。 – Minimal Green

とあったので、書かれているコードの「.entry-content h3」を「.hatena-module-title」に変えてリセット用CSSとして先に記述するとうまくいきました。
コードは以下の通りです。

/* 見出しのリセット */
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
background: none;
border: none;
border-radius: 0;
}

また、上下ステッチデザインのコードもサイドバー用に少し記述を変えました。

• フォントを’Concert One’に変更

超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 – F Lab.
こちらを参考にしました。

• フォントサイズを16ptに変更
• 文字のカラーを#F5F4EAに
• 背景色を#82c0cdに
• ステッチ部分の太さを2pxにして少し太く。

できたコードが以下です。

 .hatena-module-title {font-family: 'Concert One', cursive;
font-size: 16pt;
text-align: center;
color: #F5F4EA;
position: relative;
padding: 0.2em 0.5em;
background-color: #82c0cd;
box-shadow: 0px 0px 0px 5px #82c0cd;
border-top: 2px dashed #F5F4EA;
border-bottom: 2px dashed #F5F4EA;
}
.hatena-module-title a {
color: #F5F4EA;
text-decoration: none;
}
/* urllist module
    リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます
*/
.hatena-urllist li a {
color: #82c0cd;
}
.hatena-urllist li a:hover {
text-decoration: underline;
color: #9BE3F2;
}

こんな感じになります。

ちなみにステッチの太さですが上記コードの下2行の

border-top: 2px dashed #F5F4EA;
border-bottom: 2px dashed #F5F4EA

2pxの数字を変えればいいですよ～

1pxだったらこんな感じ。

3pxだったらこんな感じになります。

ここを変えるだけでも随分雰囲気が変わります。
お試しください！

上記コードを入れる場所はここですよ～

コピペでちゃんと反映されるかどうかは、、、正直わかりません(´・ω・`)
ごめんなさい！！！でも試してみて(;´･ω･)

プロフィール

サイドバーのプロフィール欄では写真を大きくし、詳細プロフィールを先日書いた自己紹介記事にリンクで飛べるようにしました。
ちなみに自己紹介記事はこちらです。

こちらのカスタマイズ下記のブログを参考にさせて頂きました。

• 【はてブロカスタマイズ】プロフィールを見やすくカスタマイズしてみた – 明日こそ、定時
• プロフィールをちょっとお洒落にカスタマイズ – 経理ん部
• はてなブログカスタマイズ！プロフィールを目立たせてアピール！ – One step at a time

上記2つのブログではプロフィール欄下部にフォローボタンを設置されているのですが、やっさんは別に「FOLLOW」項目を作成し、そこにボタンを置きました。

こんな感じになりました。

詳しいやり方は上記ブログを見てみてくださいね！

日付のデザイン変更

サイドバーと同じくMinimal-Green(id:syofuso)さんのカスタマイズを参考にさせて頂きました。
はてなブログ日付のデザインカスタマイズ カスタマイズ用CSSコード – Minimal Green

ここでは色、ステッチの太さ、フォントの変更の他、
「border-radius: 1px;」を15pxに変更して枠に丸みを出しました。

　　↓

記事中見出し

コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ – NO TITLE
記事中の見出しは上記記事を参考にしました。
h3にはこの記事の中の見出しタイプ２、h4には見出しタイプ３にしました。
色の変更と、見出しタイプ３のラインの太さを2pxから1pxに変更しています。

記事中リスト

コピペでOK！CSSのみでリストをおしゃれにする6つの方法【はてなブログカスタマイズ】 – North-Geek
リストは上記記事を参考にカスタマイズしました。
色はメインカラーの#82c0cdにしています。
こんな感じになります。

記事中強調太字

記事の中で太字にしたときに蛍光マーカーを引いたようにできるカスタマイズを入れました。
コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 – North-Geek
こちらの記事を参考に。
色はアクセントカラーの#FDFF5Eにしました。

記事下シェアボタン

こちらもMinimal-Green(id:syofuso)さんのカスタマイズ。
ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます – Minimal Green
このシェアボタンが！
めっちゃ可愛い！！！！

実はサイドバーのステッチデザインもこのシェアボタンと合わせたいなと思って選びました。

ほんとにコピペするだけ。おすすめ！

記事下フォローボタン

サイドバーに加え、記事下にもフォローボタンを設置しました。
記事下はゆきひーさんの記事からコピペさせていただきました。
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ – Yukihy Life

しかし！
ここで問題が発生し、やっさんが一番なやんだところであります(;´･ω･)

やっさんは記事下に下記のフォローボタンを入れたかったのですが、、、

記事の通りにコピペしてみたら、、、こんな感じに；

すでに入れているサイドバーのフォローボタンのデザインが干渉してしまっていたようです。

そこでかなーーーり時間をかけていろいろ調べたりしてやっと原因がわかりました。
サイドバーと記事下、２つのフォローボタンのdiv classに同じ名前が使われていたんです。

もう少し詳しく書くと、

• サイドバーのhtml

<!--フォローボタン-->
<div class= "follow-btn" >
<span style="font-size:80%">フォローする</span><br>
～～～【中略】～～～
<span class="text-small">Feedly</span></a>
</div>

• 記事下のhtml

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
～～～【中略】～～～
<span class="text-small">Feedly</span></a>
</div>

コード2行目の
div class=のあとの名前が“follow-btn”と全く同じになっています。（他の記述もほとんど同じですが；）

そこで名前を片方はfollow-buttonに変更。
CSSの方の名前も忘れないようにすべて変更します。
するとうまくいきました！

グローバルメニューの設置

こちらもMinimal-Green(id:syofuso)さんの記事を参考に。
グローバルメニューの設置と色変更 – Minimal Green

色などは変更してます。
また、そのままだとメニューが端に寄ってしまっていたので、メニューの横幅を均等幅にしました。
こちらの記事を参考にしました。
http://www.yukihy.com/entry/dropdown-toggle-menu#グローバルメニューの横幅を均等幅にする

パンくずリスト

パンくずリストはSEO的にも設置しておいた方がよさそうだったので、カテゴリをいろいろと修正するのは面倒でしたが頑張って設置しました。
こちらの記事を参考にさせて頂きました。
はてなブログでGoogleにパンくずリストを認識させるカスタマイズ – 太陽がまぶしかったから

記事下にパンくずリストが表示されるようにしてます。

グーグルアドセンス

• アドセンス広告の貼り方【はてなブログ編】 – アフィニート|AffiNeet
• クリック率を劇的に上げるアドセンス広告の配置【ＰＣ/スマホ】
• Google AdSenseの広告ユニット配置換えで収益が2倍以上になった話 | 【節約投資のススメ〆】
• はてなブログでアドセンスを見出し前やシェアボタン前の記事直下に自動で挿入する方法 – MUTANT
• 【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ

実はアドセンスはとりあえず設置しただけになってます(´･_･`)

上記サイトをもう一度確認して設置し直す予定。

今後の課題とまとめ

ここまで長かったーーーー！
カスタマイズ自体もかなり時間がかかったのですが、この記事を書くのにもかなり時間がかかってしまいました。
今までのカスタマイズはできるところだけとりあえず、、という感じだったので今回初めてしっかり腰を据えて取り組みました。
初めてにしては私頑張ったんじゃないかなと思います。。。(´ー｀*)ｳﾝｳﾝ

実はまだできていないところ、ちょっと問題なところがあるので今後の課題としたいと思います。

そしてお次はスマホのカスタマイズ記事も書きます、、、！
また時間かかりそうですがーー|дﾟ)
スマホはPC以上に悩んだのでそのへん書いていけたらと思います。

もしこの記事が気に入りましたらシェア＆フォローお願いします♪