Migaru-Days

身軽に暮らす、考える。

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

スポンサーリンク

 

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

 

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

 

前回のカスタマイズ記事はこちらです。

www.oheya-migaru.com

 

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

 

 

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

f:id:damarin:20180611104815j:plain

このブログは

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

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

 

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

 

 

 

ブログテーマの変更 

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

hitsuzi.hatenablog.com

 

Minumalismを選んだポイントは

  • レスポンシブ対応
  • シンプルな設計
  • カスタマイズしやすい
  • カスタマイズのアフターフォローが親切

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

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

  

 

カテゴリーを整理する

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

カテゴリーを階層化し、パンくずリストを生かすということです。

 

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

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

blog.wackwack.net

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

 

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

カテゴリービフォー

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

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

 

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

カテゴリーアフター1

カテゴリーアフター2

 

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

 

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

 

 

パンくずリストの表示

パンくずリストはシンプルに

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

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

 

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

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

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

 

 

これからのブログのこと

カスタマイズは難しいけど楽しいです。思いのままにカスタマイズできるようになりたいなー。

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

 

リライト

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

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

 

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

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

 

 

毎日更新したい

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

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

 

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

 

 

 

ブログを育てる

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

 

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

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

 

 

次のカスタマイズ記事はこちら
キーワードで探す