2019-09-21こんにちは。マリ(@damarino_oheya)です!このブログははてなブログの無料版で、ブログテーマはMinimalismを使っています。このたび、3度目のカスタマイズを行なったのでまとめておきます。▼追記*現在ははてなブログpro(有料版)に移行していますはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。日付フッターおわりにブログカスタマイズの効果これまで2回のブログカスタマイズをしてきました。【はてなブログ無料版】初めてカスタマイズしたことをまとめておきます。【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。その結果、アクセス数が微妙に増加しました。以前よりブログに人が来るようになり、過去記事を見られると恥ずかしい気持ちから記事のリライトやカテゴリーの集約などもしてきました。そのことがSEO的に正解?だったのか、当ブログは検索からの流入が9割以上になりました。これまでは好みのブログにしたくてカスタマイズをしていましたが、現在は好みプラスユーザーの滞在時間が長いブログにしたいな〜と思っています。そのために行ったカスタマイズをまとめておきます。ヘッダーのカスタマイズ変更した点はグローバルメニューのカラーブログタイトルを画像(ロゴ)へブログタイトルに記事一覧をリンクするナビゲーションバーの背景色この4つ。ブログタイトルを画像(ロゴ)にしたことでだいぶ雰囲気が変わったように思います。グローバルメニューちょこちょこ色を変えているグローバルメニューのカラーですが、#333で落ち着きました。濃い色にすることで、ブログに締まり(?)が出たのかなと。#333;}ブログタイトルを画像(ロゴ)へなんの変哲も無いテキストタイプから、タイトル画像に変更しました。▼Canvaで作りました。ブログやるなら「Canva」を使わないのはもったいないことに気づいたブログタイトルに記事一覧をリンクするはてなブログの無料版では、トップページは最新記事です。今回は裏技?でトップページを記事一覧にしています。どちらも記事一覧になるように変更したかったのですが、ひとひさんのブログカスタマイズ記事を見てできることを知り変更しました。▼有料版ではトップページを簡単に記事一覧にすることができますはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。ナビゲーションバーのカラー変更これまでヘッダーが真っ白だったことに飽きていたので、タイトル画像とナビゲーションバーを同じカラーに変更し、ヘッダーに色をつけました。タイトル画像を作ったCanvaは、HTMLのカラーコードを使えるのでブログのカスタマイズが捗ります。記事内ヘッダーの次は記事内のカスタマイズについてです。大きく分けてこの2つを変更しています。記事のタイトルカテゴリタグこの3つをカスタマイズしています。日付デフォルトのアイコンを消す、日付のフォントや文字の色の変更などを行ないました。#999;/*文字色*/}記事のタイトル文字の大きさがが少し物足りなかったので変更しました。*記事タイトルを大きくすると記事一覧ページのタイトルも大きくなってしまうので、そうならないようにしています。0px;}カテゴリータグこれまでアイコンフォントや派手な色などを使っていましたが、ごちゃごちゃと目障りになってきたのでシンプルにしました。記事下にプロフィールを設置この6つをカスタマイズしました。見出し現在の見出しはこちら(分かりにくいので色をつけています)見出し(h3・h4・h5)はちょこちょこ変更しているのですがひとまず落ち着きました。シンプルを心がけました。リストデザインリストボタンを(●)に、リストの中のリスト(入り子)のボタンをアイコンフォントへ変更しました。リスト(ul)が難しくて難しくて。何日も苦戦しながら入り子を作りました。(が、また弄ってしまって若干崩れている・・・)(*現在は使っていません)カエレバリンクカエレバリンクのボタンカラーやフォントを変更しました。▼カエレバリンクのカスタマイズはこちらの記事を参考にしています。www.ituore.com記事の文字や画像など記事が読みやすいように、記事の始まりの位置、文字サイズや行間、画像を貼り付けた位置などが見やすくなるように変更しました。記事の始まりの位置は、表示される広告にピタッとくっついてしまわないようにしました。#none;}上に戻るボタンの位置これまではてなブログのアプリでは見えにくい位置だったので、位置を変えました。記事下にプロフィールを設置これまでサイドバーに設置していたプロフィールを記事下に移動しました。したいけど今はこれが限界です。>もっと詳しく</a></div></div></div>サイドバーサイドバーでカスタマイズしたところはこちらです。日付タイトル付近こんな感じになっています。テーマデフォルトのアイコンを消す、フォントや文字の大きさ、文字を真ん中に表示にするなどのカスタマイズをしています。画像テーマのままでは丸みがある画像になっていますが、丸みのない真四角の画像に変更しました。記事一覧ページにも同じように反映させています。スマホ版で記事一覧を見ても画像に枠がなく、真四角になりました。記事のタイトルを大きくすると記事一覧の記事タイトルも大きくなってしまっていたので、そうならないようにしました。タイトルが変わりました。日付横にアイコンがありましたがシンプルにしたかったのでアイコンを消しています。!important;/*アイコンを消す*/}アイコン以外にも、フォントを変えたりしています。今回はじめてフッターをカスタマイズしました。フッターを消すフッターもどきを作るコピーライトを作るアバウトページへリンクを貼る▼全面的に、こちらの記事を参考にさせていただきました。blog.minimal-green.comこれまでフッターを気にしたことがなかったのですが、意識して見てみると、一見して素敵なブログはフッターまでデザインされていることが多く勉強になります。おわりに以上、今回行ったカスタマイズのまとめです。CSSはほぼ全てのことをサルワカさんで知りました。あとは「progate」というアプリも勉強になりました。カスタマイズしたい部分があるのでまた少しずつカスタマイズしていきたいです。このような記事もありますブログデザインをリニューアルしました!カスタマイズまとめ。はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。(id:uninohone)様コメントありがとうございます!私の記事がお役に立てたのであればとっても嬉しいです。カスタマイズをすると愛着がわきますよね。失礼ながらブログ記事がとっても好みだったので読者登録させていただきました。コメントをキャンセルメールアドレスが公開されることはありません。幼児のプレゼントにも最適。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。