【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。

こんにちは。マリ（＠damarino_oheya）です！

このブログははてなブログの無料版です。

先月からカスタマイズにハマってきましたが、ようやくブログデザインが固まってきました！

この記事では、カスタマイズをする理由とはてなブログ無料版でカスタマイズしたことを書いています。

▼前回のカスタマイズ記事はこちら

▼追記＊現在ははてなブログpro（有料版）に移行しています

▼追記の追記＊2019年2月にワードプレスに移転しました

スマホ対応にカスタマイズする理由

このブログは

• 検索サイトからのアクセスが9割
• スマホユーザーさんが7割

検索サイト&スマホからのユーザーさんが多いようなのです。

何かをスマホで検索してブログのめあての記事を読んで帰ることは誰だってよくあること。

このブログの読者さんもそういった方がほとんどです。

アクセス数が少ないので、読者さんとは出会ってすぐにさようならーといった関係性。

しかし、おめあての記事だけでなく、他にもいろんな記事が読みたくなるブログが存在します。

そのようなブログは記事だけではなく、関連記事の紹介やカテゴリーが凝っていて自己紹介ページやSNSなど、もう何もかも作り込まれていることが多いです。

そのブロガーさんが手を尽くされているブログです。

ブログデザインに説得力があると、記事にも説得力がプラスされいつのまにか毎日見てしまいます。

私も1年以上ブログをやってきました。 

このブログも手を尽くしてそんなブログにしたい。（アクセス数増やしたい）（アクセス数ってモチベーションになると思うの）

というわけで、スマホ対応のブログデザインに力を入れてみることにしました。

ブログテーマをMinimalismに変更 

ブログテーマをMinimalismに変更しました。

hitsuzi.hatenablog.com

Minumalismはインストールするだけで成立するし、カスタマイズもしやすいブログテーマです。

私のようなカスタマイズ初心者にぴったりのテーマです。

カテゴリーを整理する

これまで、その場しのぎで作っていたカテゴリーを整理しました。

今回はカテゴリーを階層化し、パンくずリストを生かすということに挑戦しました。

カテゴリー階層化とパンくずリスト

カテゴリー階層化のことはこちらの記事を参考にさせていただきました。

blog.wackwack.net

はてなブログを使っていて、カテゴリーやパンくずリストのことが分からない時はとりあえずこちらの記事を読んでみれば大丈夫です。

以前のカテゴリーはこんな感じ

12個のカテゴリーに分かれていました。

記事を書きながらどのカテゴリーに属する記事を書いているのか自分でも分かりにくかったです。

現在のカテゴリーはこちら

カテゴリーの階層化を行うことで、自分でも、今自分がどのカテゴリーの記事を書いているのかが明確になりました。

カテゴリーの整理は全ての記事を見直す必要があるので時間がかかりましたが、整理して良かったです。

パンくずリストの表示

• 文字サイズを変更
• 背景色を変更

カテゴリー階層化がパンくずリストに反映されるようになったので、パンくずリストの見た目もカスタマイズしました。

参考にさせていただいたのはこちらの記事です。

www.simonsnote.com

記事内のカスタマイズ

前回は見出しや文字サイズなどをカスタマイズしていましたが、今回は少し成長し、他の気になる部分もカスタマイズしました。

記事の日付とカテゴリーの表示

• 日付のアイコンを変更
• 日付表示の変更（ハイフン→年月日へ）
• カテゴリータグのカラー変更  

参考にさせていただいた記事

記事の日付はこちらの記事を参考にしています。

www.foxism.jp

日付の区切りをスラッシュ（/）に変えたり曜日を表示させるCSSなども公開されているのでとても便利です。

カテゴリータグのカラー変更はこちらを参考に。

blog.z0i.net

よく分からないので、まるっとコピペさせていただきました！

シンプルな目次デザイン

リストデザインはつながるーるーさんの記事を参考にさせていただきました。

• リストデザインを変更
• 文字サイズを大きく変更
• もくじ一覧に大見出しのみを表示

もくじの表示項目については毎度のことですが、yukihy lifeさんの記事を参考にさせていただいています。

記事の見出しの変更

見出しをまたまた変更しました。

• フォントサイズを大きく変更
• アイコンフォントを変更

見出しデザインは、今回もサルワカさんを参考にさせていただいています。

saruwakakun.com

画像を貼り付けた時の位置を調整

画像を貼り付けたときに上の行に画像がピタッとくっついてしまって見栄えが良くないので少し余白を作りました。

 .entry-content img {
background: #fff;
padding-left: 0px;
margin-top: 10px
}

「margin-top: 10px」の部分が余白です。

位置のことはサルワカさんでの説明がとても分かりやすいです。

記事中にマーカーを引きたい

記事中の強調したい部分にマーカーがあると読みやすいことと、強調を使うことはSEO対策にもなるとのことで取り入れてみました。

参考にさせていただいた記事

はてなブログの記事編集画面で太字のボタンをクリックするだけで、太字＆マーカーが引かれる仕様にしました。

HTMLやCSSをいじらなくていいので便利です！

darie-daphnia.hatenablog.com

マーカーを引くことで、読みやすくなるし、私も記事が書きやすくなりました。

（追記＊現在はHTMLをいじってマーカーを引く仕様にしています。） 

記事中に囲み枠（ボックス）を作る  

参考にさせていただいた記事はサルワカさんから。

saruwakakun.com

30種類の囲み枠が紹介されています！すごい・・・。

ヘッダーのカスタマイズ

ブログのタイトル部分のヘッダーも初めてカスタマイズしてみました。

メニューを設置

スマホ版では横にスライドしてスクロールします。

yukihy lifeさんのものを使わせていただいています。いつもありがとうございます。

ブログタイトルの表示を変える

• 字幅を広げる
• フォントサイズ
• フォントの太さ

フォントを変えずに少しあっさりとした表示になったかなと思います。

字幅についてはもちろんサルワカさんのこちらの記事で勉強させていただきました。

はてなブログの上部のアレの色を変える

こちらを

こんな感じに変更しました。

ブログの印象も変わりました。

ブログ構成図はいつものyukihy lifeさんに分かりやすい記事があります。

サイドバーのカスタマイズ

サイドバーのカスタマイズも頑張りました・・・長いけどもう少しお付き合いくださいね。

タイトル横のアイコン

ブログテーマの元々は全てチェックマークのアイコンだったのを、好みのアイコンにカスタマイズしました。

アイコン変更はこちらの記事を参考にさせていただきました。

remotosa.com

サイドバーのタイトルを変更すると、ブログの印象が変わりますね。

記事一覧のタイトル文字を小さく 

▼変更前

▼現在

ぱっと見た感じ、文字が大きく違和感があったので少し小さめサイズに変更しました。

分かりにくいですが、微妙に変わっています。

フォローボタンを設置

サイドバーのプロフィール欄にフォローボタンがあるのに憧れていたので設置してみました。

こちらの記事のものを使用させていただいています。

www.yukihy.com

難しいのかと思っていたら、コピペで簡単です！ 

これからのブログのこと

カスタマイズは難しいけど楽しいです。

思いのままにカスタマイズできるようになりたいですね。

でも、これからしばらくはカスタマイズはお休みし、ブログの更新を強化するつもりです。

▼追記＊ちなみに3回目のカスタマイズ記事はこちらです。

リライトしたい

Googleアナリティクスのリアルタイムを見たときに、偶然過去記事をめちゃめちゃ遡って見てくださっているユーザーさんを見ることがあります。

「アクセス数ふえてほしい♡」と思っているくせに「ひーっ！そんな昔のやつ読むのー？やめてーはずかしー」と気恥ずかしい気持ちになるという矛盾。

よく読まれている記事はリライトしているつもりですが、それ以外の過去記事もリライト、もしくは削除していく必要がありそうです。恥ずかしいので。

それとSEO対策にもなるとのことです。

毎日更新したい

11月は意識してブログ更新をしてきました。

それでも毎日は無理だったー。

毎日更新って相当難しいですね。できる時が来るのだろうか。がんばります。

ブログを育てるのは難しい

記事内は統一感を意識し、記事以外は記事内のデザインに寄せたカスタマイズをしたつもりです。

カスタマイズをすることでブログに愛着を持てるようになりました。

ただ、素人が少しだけブログデザインを変えたところでアクセス数が劇的に増えるなんて無いでしょう。。リライトと記事を増やしていくしかないですね。

▼はてなブログの無料版に慣れてきたらはてなブログpro（有料版）に移行するブロガーさんが多いです。

このような記事もあります

はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。