こんにちは、主婦ブロガーくうかです。
現在はワードプレスへ移行していますが、以前ははてなブログで運営していました。
デザインテーマ『Minimalism』を長期間利用しており、その際私が行ってきたMinimalismのカスタマイズをまとめておきたいと思います。
はてなブログのテーマ『Minimalism』で行ったカスタマイズ総まとめ
『Minimalism』のスマホ版で太字が表示されない問題を解決
Minimalismをお使いの方で、スマホで太字が表示されていないことにお悩みの方はぜひ参考にしてもらえたら嬉しいです！
ほんの３行で直ります。
Minimalismのみの現象であると思いますが、ブログの閲覧ユーザーはほとんどモバイル端末からなので直しておいた方が良いです！
太字のない文章は、単調になり読みづらい気がします。
『Minimalism』のフォントの大きさと種類をカスタマイズ
はてなブログはフォントが小さい！
ということで、フォントを大きくするカスタマイズと、Minimalismをお使いの方向けのフォント種類を合わせるカスタマイズ。
さらに強調したい部分に黄色マーカーを引くカスタマイズを行いました。
Canvaを使って素敵なブログヘッダーを作成＆目次・見出しのカスタマイズ
CanvaというWebツールを使い、素敵なブログヘッダーを作成しました。
さらに見た目のカスタマイズとして、目次・見出しをカスタマイズしました。
Canvaではアイキャッチ画像や、ブログのアイコンまでお世話になっています。
ヘッダー画像の余白を取り、スマホ表示も美しく対応したカスタマイズ
ヘッダー画像を作成したら、画像の周りに余白ができてしまう問題が発生！
その対応をしました。
スマホでの画像がずれる問題も解決しています。
Minimalism以外のテーマでも使えるカスタマイズです。
ブログの表示速度を改善するカスタマイズ
訪問者様のために少しでもブログを軽くしよう！と思い、速度改善を始めました。
画像圧縮とはてなフォトライフを使った速度改善をご紹介しています。
フッターにコピーライトを表示する
フッターのコピーライトってあまり気にしてなかったのですが、あったほうが見た目もいいし…と思い、シンプルなものを付けました。
上記赤枠の部分です。
背景白で本当にシンプルです(笑)
参考にさせて頂きました
スマホの固定フッターメニュー（レスポンシブ対応）
使ってらっしゃる方が多いフッターメニューは、レスポンシブ対応でなかったため、こちらのサイトを参考にさせていただきました。
レスポンシブ対応、いいですね。
ＰＣとスマホで別々のカスタマイズをするのは面倒なので(;´∀｀)
設置には少々苦労しましたが、スマホユーザーの方が多いのでスマホファーストなサイト作りはしておいて損はないと思います。
↑このような表示が出ます。
メニューの内容はカスタマイズしています。
固定メニューにカテゴリを追加
何があれば使いやすいのかなぁ？と考え、私はカテゴリを見たいと思うことが多いのでカテゴリを入れました。
それに伴いカテゴリも10こに絞って整理しました。
↑カテゴリは２列表示になるようにしました。
幅を指定している部分を【width: 100%;】から【width: 50%;】に変更すると２列になります。
本当はカテゴリは細かく分けたい派なんですけどね…(; ･`д･´)
固定メニューに検索ボックスを追加
カテゴリの他に、検索もできると便利かな？と思い、検索ボックスを固定ページにて追加し、検索ボタンからいけるようにしました。
検索ボックスの作り方はこちらを参考にさせていただきました！
検索ボックスってあまり使わないかもしれないけど、使いたい時にすぐ使えると便利ですよね( *´艸｀)
さらにおすすめの記事もちゃっかり載せてます。
これは私の備忘録で、自分が時々見たいがためのショートカットだったりします(笑)
最後に
今までカスタマイズはバラバラに記事にしていたので、こういったまとめがあったほうが良いかな、と思いまとめてみました。
カスタマイズは自分でできたら一番いいのだろうけど、私は一から作る技術は持ち合わせていないので、求めている内容に合った記事を探し出し、そこから自分流に少しアレンジを加えたりしてきました。
カスタマイズ記事は同じブロガーにとってはとても貴重な記事になったりもするので、残しておくことは大事だなと感じています。
コメント