【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。子育て雑記ホームブログはてなブログカスタマイズ【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。2019-09-21こんにちは。マリ(@damarino_oheya)です!このブログははてなブログの無料版です。先月からカスタマイズにハマってきましたが、ようやくブログデザインが固まってきました!この記事では、カスタマイズをする理由とはてなブログ無料版でカスタマイズしたことを書いています。▼前回のカスタマイズ記事はこちら【はてなブログ無料版】初めてカスタマイズしたことをまとめておきます。広告無しでカスタマイズはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。検索サイト&スマホからのユーザーさんが多いようなのです。何かをスマホで検索してブログのめあての記事を読んで帰ることは誰だってよくあること。このブログの読者さんもそういった方がほとんどです。アクセス数が少ないので、読者さんとは出会ってすぐにさようならーといった関係性。おめあての記事だけでなく、他にもいろんな記事が読みたくなるブログが存在します。そのようなブログは記事だけではなく、関連記事の紹介やカテゴリーが凝っていて自己紹介ページやSNSなど、もう何もかも作り込まれていることが多いです。そのブロガーさんが手を尽くされているブログです。ブログデザインに説得力があると、記事にも説得力がプラスされいつのまにか毎日見てしまいます。私も1年以上ブログをやってきました。このブログも手を尽くしてそんなブログにしたい。(アクセス数増やしたい)(アクセス数ってモチベーションになると思うの)というわけで、スマホ対応のブログデザインに力を入れてみることにしました。ブログテーマをMinimalismに変更ブログテーマをMinimalismに変更しました。hitsuzi.hatenablog.comMinumalismを選んだポイントレスポンシブ対応シンプルな設計カスタマイズしやすいカスタマイズのアフターフォローが親切Minumalismはインストールするだけで成立するし、カスタマイズもしやすいブログテーマです。私のようなカスタマイズ初心者にぴったりのテーマです。カテゴリーを整理するこれまで、その場しのぎで作っていたカテゴリーを整理しました。今回はカテゴリーを階層化し、パンくずリストを生かすということに挑戦しました。POINTカテゴリー階層化パンくずリストのデザイン変更カテゴリー階層化とパンくずリストカテゴリー階層化のことはこちらの記事を参考にさせていただきました。blog.wackwack.netはてなブログを使っていて、カテゴリーやパンくずリストのことが分からない時はとりあえずこちらの記事を読んでみれば大丈夫です。以前のカテゴリーはこんな感じ12個のカテゴリーに分かれていました。記事を書きながらどのカテゴリーに属する記事を書いているのか自分でも分かりにくかったです。現在のカテゴリーはこちらカテゴリーの階層化を行うことで、自分でも、今自分がどのカテゴリーの記事を書いているのかが明確になりました。カテゴリーの整理は全ての記事を見直す必要があるので時間がかかりましたが、整理して良かったです。背景色を変更カテゴリー階層化がパンくずリストに反映されるようになったので、パンくずリストの見た目もカスタマイズしました。参考にさせていただいたのはこちらの記事です。www.simonsnote.com記事内のカスタマイズ前回は見出しや文字サイズなどをカスタマイズしていましたが、今回は少し成長し、他の気になる部分もカスタマイズしました。記事の日付はこちらの記事を参考にしています。www.foxism.jp日付の区切りをスラッシュ(/)に変えたり曜日を表示させるCSSなども公開されているのでとても便利です。カテゴリータグのカラー変更はこちらを参考に。blog.z0i.netよく分からないので、まるっとコピペさせていただきました!シンプルな目次デザインリストデザインはつながるーるーさんの記事を参考にさせていただきました。lifeさんの記事を参考にさせていただいています。見出しをまたまた変更しました。見出しデザインは、今回もサルワカさんを参考にさせていただいています。画像を貼り付けたときに上の行に画像がピタッとくっついてしまって見栄えが良くないので少し余白を作りました。10px」の部分が余白です。位置のことはサルワカさんでの説明がとても分かりやすいです。記事中にマーカーを引きたい記事中の強調したい部分にマーカーがあると読みやすいことと、強調を使うことはSEO対策にもなるとのことで取り入れてみました。参考にさせていただいた記事はてなブログの記事編集画面で太字のボタンをクリックするだけで、太字&マーカーが引かれる仕様にしました。HTMLやCSSをいじらなくていいので便利です!darie-daphnia.hatenablog.comマーカーを引くことで、読みやすくなるし、私も記事が書きやすくなりました。(追記*現在はHTMLをいじってマーカーを引く仕様にしています。)記事中に囲み枠(ボックス)を作るこんな感じです囲み枠があると強調されて読みやすいです。このように囲み枠を作ることができます。参考にさせていただいた記事はサルワカさんから。saruwakakun.com30種類の囲み枠が紹介されています!すごい・・・。ヘッダーのカスタマイズブログのタイトル部分のヘッダーも初めてカスタマイズしてみました。POINTメニューを設置ブログタイトルデザイン上部のアレの変更メニューを設置スマホ版では横にスライドしてスクロールします。lifeさんのものを使わせていただいています。いつもありがとうございます。ブログタイトルの表示を変える字幅を広げるフォントサイズフォントの太さフォントを変えずに少しあっさりとした表示になったかなと思います。字幅についてはもちろんサルワカさんのこちらの記事で勉強させていただきました。はてなブログの上部のアレの色を変えるこちらをこんな感じに変更しました。ブログの印象も変わりました。lifeさんに分かりやすい記事があります。サイドバーのカスタマイズサイドバーのカスタマイズも頑張りました・・・長いけどもう少しお付き合いくださいね。POINTタイトル横アイコン記事一覧の文字を小さくフォローボタン設置タイトル横のアイコンブログテーマの元々は全てチェックマークのアイコンだったのを、好みのアイコンにカスタマイズしました。アイコン変更はこちらの記事を参考にさせていただきました。remotosa.comサイドバーのタイトルを変更すると、ブログの印象が変わりますね。▼現在ぱっと見た感じ、文字が大きく違和感があったので少し小さめサイズに変更しました。分かりにくいですが、微妙に変わっています。フォローボタンを設置サイドバーのプロフィール欄にフォローボタンがあるのに憧れていたので設置してみました。こちらの記事のものを使用させていただいています。www.yukihy.com難しいのかと思っていたら、コピペで簡単です!これからのブログのことカスタマイズは難しいけど楽しいです。思いのままにカスタマイズできるようになりたいですね。これからしばらくはカスタマイズはお休みし、ブログの更新を強化するつもりです。▼追記*ちなみに3回目のカスタマイズ記事はこちらです。【はてなブログ無料版】3回目のブログカスタマイズのまとめリライトしたいGoogleアナリティクスのリアルタイムを見たときに、偶然過去記事をめちゃめちゃ遡って見てくださっているユーザーさんを見ることがあります。「アクセス数ふえてほしい♡」と思っているくせに「ひーっ!そんな昔のやつ読むのー?やめてーはずかしー」と気恥ずかしい気持ちになるという矛盾。読まれている記事はリライトしているつもりですが、それ以外の過去記事もリライト、もしくは削除していく必要がありそうです。それとSEO対策にもなるとのことです。毎日更新したい11月は意識してブログ更新をしてきました。それでも毎日は無理だったー。毎日更新って相当難しいですね。できる時が来るのだろうか。ブログを育てるのは難しい記事内は統一感を意識し、記事以外は記事内のデザインに寄せたカスタマイズをしたつもりです。カスタマイズをすることでブログに愛着を持てるようになりました。素人が少しだけブログデザインを変えたところでアクセス数が劇的に増えるなんて無いでしょう。リライトと記事を増やしていくしかないですね。▼はてなブログの無料版に慣れてきたらはてなブログpro(有料版)に移行するブロガーさんが多いです。広告無しでカスタマイズこのような記事もありますはてなブログ3年目の当ブログで行ってきたカスタマイズまとめはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。2017-11-28言及ありがとうございます。2017-11-28simonsnoteさまコメントありがとうございます!こちらこそありがとうございました。CSSっておもしろいですね。コメントをキャンセルメールアドレスが公開されることはありません。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。