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

やっさんたっさんの子育て隊

2016年5月出産予定。30代夫婦の第一子出産準備の模様と日々の記録をまったり書いていきます。

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

ブログ-ブログ運営 ブログ

f:id:yacco_alfalfa:20170415233712j:plain

やっさんです。


今日ははてなブログ向けの記事になります!!


先日ブログのデザインを一新致しました!
前のブログデザインはヘッダー画像にまだ妊婦のイラスト使ってたし↓
f:id:yacco_alfalfa:20160407121309p:plain
スマホはヘッダー画像が拡大されて切れちゃってるし、
ずっとなんとかしないとなーと思ってそのまま放置しておりました。


この度はてなproにしたタイミングでもう一度初心に帰ろう!ということでデザインも思いっきり変えることにしました。


カスタマイズ初心者なのでなかなかやりたいことがうまくいかず、かなり四苦八苦して形になるまでに10日もかかってしまいました。
なんとか見れるデザインになったので一気にデザイン変えしました。
実はまだクリアできていない大きな問題があるのです。←スマホの方なんですが。
(原因がわからなくてどうしても直らない泣)


今回のカスタマイズを行うに当たって本当にたくさんの方々のサイトを参考にさせて頂きました。
皆様の記事がなければ完成させることはできませんでした。
本当にありがとうございます!!


ここでやっさんが行ったカスタマイズの内容と参考サイトをまとめたいと思います。
正直、試行錯誤で初心者が作ったものなのでコードの間違いなどたくさんあるのではないかと思いますが、同じように初心者でこれからカスタマイズをしたいという方、なかなかうまくいかなくて悩んでいる方の参考になれば幸いです。



カスタマイズの前に

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

デザインテーマの設定

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

あとこんなサイトも参考にしました。

  • こんなサイトにしたいなぁの参考

www.dosuika.com

  • 他にも参考サイトが見れるよ

bm.s5-style.com

※上記はこちらのサイトで見させていただきました。


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

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

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

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

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

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


フォントサイズを決める

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


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


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


テーマカラーを決める

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


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

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

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

それがこの色。#00CED1

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


そして決めたカラーが

この色です。#82c0cd


次にベースカラー。

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

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

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


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

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

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


やっさんはこちらの色にしました。#FDFF5E


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


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

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

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

文字の色はこちらの色にしました。#FDFF5E

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

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

リンクカーソルを合わせた時の色はこちらの色にしました。#9BE3F2

  • リンク訪問済みの色

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

リンク訪問済みの色はこちらの色にしました。 #647f84


トップ画像

トップのヘッダー画像も新しいものに書き直しました。
やっさんが使用しているお絵かきソフトはこれです。
フリー ペイントツール (Mac/Win 両対応) FireAlpaca [ ファイア アルパカ ]
このような画面です。
ちなみにこの記事のアイキャッチ画像もこちらのソフトで作りました。
f:id:yacco_alfalfa:20170418203554p:plain
レイヤーも複数作れるし、文字も入れられるし、やっさんが使用するには申し分ないくらいの機能がついています。


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

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


PC用に作った画像がこちら。
f:id:yacco_alfalfa:20170415214214p:plain
調べたがり、まとめたがり、作りたがりというのはまんまやっさんの性格です。ハイ。


サイドバータイトル

ガーリーなデザインの見出しの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;
}


こんな感じになります。

SIDE BAR TITLE


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

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

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

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

1px

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

3px

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


上記コードを入れる場所はここですよ~
f:id:yacco_alfalfa:20170418214609p:plain


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

プロフィール

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


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

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


こんな感じになりました。
f:id:yacco_alfalfa:20170418220159p:plain


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

日付のデザイン変更

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

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

記事中見出し

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


見出しタイプ2をh3に


見出しタイプ3をh4に

記事中リスト

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

  • list
  • list
  • list

記事中強調太字

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

こんな感じになります。


記事下シェアボタン

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

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

f:id:yacco_alfalfa:20170419213632p:plain

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

記事下フォローボタン

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


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


やっさんは記事下に下記のフォローボタンを入れたかったのですが、、、
f:id:yacco_alfalfa:20170419214222p:plain


記事の通りにコピペしてみたら、、、こんな感じに;
f:id:yacco_alfalfa:20170419215351p:plain


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

そこでかなーーーり時間をかけていろいろ調べたりしてやっと原因がわかりました。
サイドバーと記事下、2つのフォローボタンの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の方の名前も忘れないようにすべて変更します。
するとうまくいきました!

f:id:yacco_alfalfa:20170419222255p:plain

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

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

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


パンくずリスト

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


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


今後の課題とまとめ

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


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

  • 関連記事

記事下に関連記事を入れたいと思っているのですが、やり方がいろいろあってどの方法にしようか迷っているところで止まっています(´・ω・`)
回遊率を高めるためにも必須かと思うので早めに入れたいと思います。

  • アドセンス

今は前のブログのデザインでとりあえず入れたものを残しているだけになっているので、きちんと設置しなおしたいと思っています。
希望としては記事下にレクタングル広告を2つ並べたい!

  • カエレバのリンクのボタン化

カエレバのAmazonや楽天へのリンクをクリックしやすいようにボタンにしようと思っています。
カエレバのデザインを「Amazlet風-2」にしないといけないようで、これまでのカエレバも貼りなおさなければならないので躊躇しております。
だって、この前全部貼りなおしたところだったんだよ、、、(-.-)


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


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