Migaru-Days

身軽に暮らす、考える。

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

 

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

 

先月からカスタマイズにハマってきましたが、ようやくこれで続けてみようかなーというブログデザインになってきました。

 

カスタマイズした理由と、カスタマイズしたことをまとめておきます。

 

カスタマイズ第2弾

 

 

ブログをスマホ対応に変えた理由

このブログは

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

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

 

 

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

このブログの読者さんもそういった方が多いということでしょう。

 

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

 

しかし私自身、おめあての記事だけでなく、他にもいろんな記事が読みたくなるブログに出会う時があります。

 

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

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

 

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

 

 

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

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

 

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

 

 

 

ブログテーマの変更 

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

 

Minumalismを選んだポイントは

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

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

私のようなカスタマイズ初心者にオススメです。

 

 

 

カテゴリーを階層化しパンくずリストをつくる

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

カテゴリー階層化とパンくずリスト作成では小さな星がほらひとつさんの記事を参考にさせていただきました。

  • 親カテゴリー(6個)を作り、必要に応じて子カテゴリーを作りました。

 

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

カテゴリービフォー

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

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

 

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

カテゴリーアフター1

カテゴリーアフター2

 

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

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

 

 

パンくずリストの表示をカスタマイズ

現在のパンくずリストはこちらです。

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

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

simon's noteさんの記事を参考にさせていただきました。ありがとうございます。

 

 

 

記事内のカスタマイズ6つ

日付とカテゴリータグを変更

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

 アイコンと年月日表示とカテゴリータグを変更

日付のアイコンはFont Awesomeを使用しています。

 

日付の年月日表示は、FOXISMさんの記事を参考にさせていただいています。スラッシュ(/)に変えたり曜日を表示させるCSSなども公開されています。すごいです。

 

カテゴリータグのカラー変更はブログ運営のためのカスタマイズさんの記事から、まるっとコピペさせていただきました。

 

 

目次をシンプルかわいいデザインに変更

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

目次

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

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

 

 

見出しの変更

  • フォントサイズを大きく変更
  • アイコンフォントを変更
  • h4の見出しの下線を消しました

少しだけ変えました。アイコンフォントは日付横のアイコンと同じくFont Awesomeを使用しています。 

以前の見出しはこちらです

見出しビフォー

 

変更後の見出しはこちらです

見出しアフター

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

 

 

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

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

 

コードはこちら

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

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

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

 

 

記事中にマーカーを引く

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

  • 記事作成画面で太字のボタンをクリックするだけと太字&マーカーが引かれます

参考にしたのはカスタマイズ日和さんの記事から。

 

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

 

 

記事中に囲み枠を作る 

 
こんな感じです 囲み枠もサルワカさんの囲み枠を参考にさせていただいています。
  • このように囲み枠を作ることができます。

 

 

 

記事以外のカスタマイズ6つ

メニューを設置

▼こんな感じです。

ブログメニュー

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

 

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

 

 

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

  • ブログタイトルの字幅を広げる
  • フォントサイズの変更
  • フォントの太さを変更
  • タイトル下の文の字幅を広げる
以前のタイトルはこちら

字幅変更ビフォー

 

変更後のタイトルはこちら

字幅変更アフター

フォントを変えずに可愛らしくなったかなと思います。

 

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

 

 

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

▼変更前はこちら

カラー変更

▼現在はこちら

カラー変更

この色を変えることでブログの印象も変わりました。

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

 

 

サイドバーのタイトル横のアイコンをカスタマイズ

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

使っているアイコンはいつものFont Awesomeです。

 

現在のサイドバーはこんな感じです。

プロフィール

カテゴリー一覧

人気記事

新着記事

月別アーカイブ

検索

サイドバーのタイトルに合うようなアイコンにしました。

 

アイコン変更はよーい、どん!アフェリエイトをやってみようさんの記事を参考にさせていただきました。

 

 

サイドバーの記事一覧で表示されるタイトル文字を小さく 

▼変更前はこちら

サイドバーの文字サイズ大きい

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

 

▼現在はこちら

サイドバーの文字サイズちょうどいい

微妙に変わっています。

 

 

プロフィール欄にフォローボタンを設置

フォローボタンに憧れていたので設置してみました。

フォローボタンを簡単に設置

難しいのかと思っていたら、コピペで簡単でした。これもyukihy lifeさんのものを使用させていただいています。

可愛いです。

 

 

 

これからのブログのこと

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

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

 

過去記事をリライトする

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

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

 

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

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

 

 

ブログを毎日更新したい

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

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

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

 

 

 

ブログを育てるということ

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

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

ただ、アクセス数に繋がった実感はありません。そこはもう地道に更新して記事を増やしていくしかなさそう。

 

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