ブログテーマを「Minimalism」に変更しました【カスタマイズ】

ブログテーマを変えました

はてなブログ使ってない人からしたら「何の話？」って感じだと思うのですが、ブログのデザインを変えました。

何で急にそんな面倒なことをしたかというと、2月14日に急にブログが開かなくなったのです。

いや、正確に言うとパソコンからは時間をかければ見れる、スマホからは真っ白な画面になるだけでいつまで経っても開かないという具合です。原因は不明。

私はこういうことがまったくもって得意ではないので、ひたすらGoogleで調べつつ、ブログが重くなりそうなHTMLやCSSは片っ端から削除。いろいろと調べていくうちに私が使用していたブログテーマ「DUDE」は重い、と書いてある記事を見つけ*1、軽いと評判の「Minimalism」に変更しました。

Minimalismを初めて使います

「Minimalism」というと何年か前にすごく流行って、シンプルでスタイリッシュだけれど、皆使いすぎててどのブログを見ても同じデザインだなと思っていた印象があります。

ググったら、このテーマが公開されたのは2017年みたい。
自分も使おうと思って試した形跡はあるものの結局「DUDE」を気に入って愛用していたのですが、久しぶりにはてなの「テーマストア」を見たら、いまだに人気ランキング第１位に君臨し続けていて、調べていたらカスタマイズのアイデアをシェアしている人も多かったので、とりあえずこれにしてみました。

見出しのデザインとかいじらないでおくと、ちょっとnoteっぽい？これはこれで良いかなと思って、今のところはそのままにしています。物足りなくなったら変えるかも笑
　

カスタマイズしたところ

何もいじらなくていいやと思っていたのですが、使っているとやっぱり気になってしまい、結局いろいろとカスタマイズしています。自分の備忘録も兼ねて、参考にしたサイトをリンクしつつ、変更したところを書いておきます。

ブログテーマを変えました
- Minimalismを初めて使います
カスタマイズしたところ
カスタマイズ大変すぎィィ！！

SNSシェアボタン

今までのシェアボタンもいつの間にか見た目が崩れていたのは気づいていた。直し方が分からなかっただけで…。
Minimalismでは、公式で配布してくださっているCSSがあるのでこちらを使用。
　

グローバルメニュー

こちらも公式で配布してくださっているCSSが一番シンプルだったのでそのまま使用。
※スマホ版では一見全部表示されていませんが、スワイプしたら出てきますので、横にｼｭｯｼｭｯと動かしてください=͟͟͞͞ ( ∩’-’⊂ )ｼｭｯ

Font Awesomeは使っていましたが、はてなブログにも無料で使えるアイコン素材があったのですね。知らなかったよ。使わにゃ損やん。

目次デザイン

https://nasumi-note.hatenablog.com/entry/table-of-contentsなすみのメモ帳さんのデザイン。
私が記事の文字サイズを15px→16pxに変更したせいか、やたらと大きな文字で表示されるようになってしまったため、対策としてタイトルの文字サイズを「100%」、各見出しを「80%」に変更しました。

本当は大見出しを「数字」から「」に変更したいんだけど、うまく機能せず断念il||li(つд-｡)il||li
　

記事一覧をカードデザイン化

なすみのメモ帳さんを参考にはてなブログのトップページをカード型にする - フジブロっ！をアレンジして記事一覧を作成。

ただ、なすみさんみたいに「PCはカード型、スマホは横長のデザイン」にしたかったのにメディアクエリが何度やってもうまく反応されず断念。諦めてどちらも横長デザインにしようと試みたのですが、今度はCSSを削除しているにも関わらず謎に本文が非表示になったままになってしまい、そちらも断念(´；д；`)
　

文字の大きさ・フォント・行間を変更

Minimalismの初期設定では「小さくて読みにくい…」と感じてしまったので、16pxにしてみました。あとから調べたらGoogleの推奨サイズも16pxらしい。

本文の顔文字もPCからはうまく表示されなくなってしまった*2ので、フォントも変更。CSSの取得方法がよく分からなかったので、CSS：コピペで完了！即利用OKなおすすめwebフォント4選 – Google Fonts | もなかノートさんから「Noto Sans JP」のCSSをそのままコピペしました。
このフォントにした場合、くうかさんのCSSで設定されている「文字間隔1.0pt」はスマホで見ると広く感じたので削除。

行間は空きすぎてる気がしたので、1.8pxに設定してみました。フォントによっても見え方が変わるかも。

■追記 (2025/3/14)英字が固すぎる気がしたので、「Quicksand」を導入。CSSの書き方はこちらを参考にしました。
　

トップに戻るボタン

これもDUDEのときに設定してたけど、テーマを変更したら機能しなくなったので泣く泣く変更。前のデザイン気に入ってたのだけど😭
　

サイドバーのプロフィール/SNSボタン

フジグチさんのデザインは、おしゃれで見やすいのにコピペだけで使えるなんて有り難い。感謝！
今まで設置していたSNSボタンも見づらかったので、プロフに一緒に表示。
Facebookボタンも適当に作って追加してみました。これは元々のCSSが超見やすく分かりやすく作られていたので、私でも簡単に出来ました。

カテゴリーの階層化

これも以前設定していたのですが、コードが古くなっていたみたい…(そんなことあるのか🙉)
こちらを参考に変更したら機能しました。感謝！
　

カエレバ・ヨメレバ・トマレバのデザイン変更

ブログ開設時はシンプルで見やすいと思って設定していたデザインも、最近は地味だと感じるようになり、久々にデザインを変更しました。やっぱり文字背景に色がついている方が視認しやすいし、押したくなるボタンデザインだと感じます。

カスタマイズ大変すぎィィ！！

色々考えてカスタマイズするのは楽しい反面、CSSをよくわかっていない*3ので「何で反映されない！？」「どうすればいいの！？」の連続で、かなりの時間を費やして一先ずここまで辿り着きました。

私はほぼコピペだけでやってるけど、これを無から生み出してる方々、本当にすごすぎます…。配布してくれて有難うございます…

反省点としては、記事一覧表示がうまく出来なかったのと、シンプルなデザイン過ぎてピアノ感が薄れた*4ので、トップに画像を設置するか（また重くなるかな？）、スマホはレスポンシブ版を解除してモバイル版に変更するか、悩むところです。*5

改善点や見づらい部分、アドバイスなどがございましたら、是非ともご教示いただけますと幸いです…！
今後ともどうぞよろしくお願いいたします*\(^o^)/*

人気ブログランキング

にほんブログ村