【はてなブログ】テーマをMinimalismからUnderShirtに変えてみた件
昨日、思い立ってブログテーマを変更しました！
これまでは「Minimalism」を使用していましたが、「UnderShirt」にしてみました。
Minimalism・UnderShirtともに、人気のはてなブログテーマですが、UnderShirtはトップページがカード型になるので、かなりアイキャッチ画像の印象が強めになる感じですね。
今回は、MinimalismからUnderShirtにテーマを変えた理由と、実際にUnderShirtに変更してみてのページの雰囲気を説明していきます。
※この記事ではカスタマイズしたことを詳しく説明はしません
早速ですが、本題に入ります。
はてなブログのテーマをMinimalismからUnderShirtに変えた理由
デフォルトでカード型になっているテーマにしたかった
はてなブログでブログを書くようになってから、ずっとMinimalismというシンプルなテーマを使用していました。
Minimalismはシンプルなテーマなので、ある程度カスタマイズして使わないとシンプルすぎる状態なのですが、うまくカスタマイズできればWordPressっぽい雰囲気のページを表現することができます。
ただ、ブログを更新するうちに、トップページをカード型にしたいな…という欲が高まってきました。
WordPress時代はトップページをカード型にカスタマイズしていたこともあり、カード型のデザインには心惹かれてしまうのですよね。
さらに、はてなブログのカスタマイズ記事を見ていたら、ヘッダーの下におすすめ記事を表示する方法があることを知り、これは取り入れたい！と思ったわけです。
早速、Minimalismをカスタマイズする形で、トップページのカード型変更+ヘッダー下のおすすめ記事表示をさせるべく挑戦してみました。
しかし。
私が見つけた方法では、スマホで表示が崩れてしまったり、画像がスマホ仕様にならなかったりで、Minimalismでカード型表示&ヘッダー下におすすめ記事の表示を両立させることが出来ず。
HTMLやCSSの知識があれば解決できるのかもしれませんが、コピペ芸人には限界。
諦めようかと思っていたのですが、テーマがカード型になっているものに変更すれば、なんとかなるんじゃないか！？と思いついてしまったのです。
そこで白羽の矢が立った、はてなブログテーマが「UnderShirt」でした。
人気テーマ&シンプルなテーマだったから
カード型表示が可能なはてなブログテーマは、UnderShirt以外にも色々あります。
あまのじゃく気質な私としては、あまり日の目を見ていないテーマを使うことへの憧れが無いわけではなかったのですが、今回は(今回も)人気のあるテーマから選ぶことにしました。
人気のあるテーマだと、すでにカスタマイズ方法についての記事を書かれている方が多いため、HTMLやCSSの知識があまりなくても調べられるのはやっぱり安心感が大きい。
更に、Minimalismがシンプルなテーマだったので、変えるテーマもシンプルな方がこれまで編集してきたCSSが活かせると考えまして。
カード型で人気テーマ&シンプルなテーマ…という条件に完全に一致したのがUnderShirtだったんですね。
他にも気になっているテーマがあったりはするのですが、とりあえずは今後検討することにしました。
UnderShirtに変えてみた印象
パソコン版の表示
UnderShirtに変更した、現在のブログの状況はこんな感じです。
パソコン表示の場合、Minimalismではキレイに表示されていたタイトル画像が、左右に中途半端な余白が残ってしまっています。
調べてはみたのですが、左右の余白を表示しない方法がよくわからない…
はてなブログの設定ではなく、HTMLで設定して表示させる方法があるようなのですが、素人にはハードルが高すぎた(少し試したけど見事に失敗した)ので挫折。
とりあえずめちゃくちゃバランスが崩れてる…というほどではないので、当面はこのままでいこうかなと思います。
【2021年1月30日追記】
タイトル画像をはてなフォトライフにアップロードして、HTMLコードを「タイトル下(ヘッダー)」に貼り付ける方法で設定したところ、PCでもスマホでも余白無しで表示されるようになりました。よかった…！
↑の記事を参考に設定しましたが、思ったよりは簡単に変えられましたよ！
そして、グローバルメニューはMinimalismで設定した(表示などはカスタマイズ済み)ものがそのまま表示されていたので、とりあえず色だけ変えて残しました。
きっちり表示されていないタイトル画像とバランスが取れてない感は否めないので、おいおい違うものに変更するかもしれないですが。
グローバルメニューの下には、おすすめ記事画像を4つ並べてみました。
↑の記事の方法で設定しましたが、あらかじめはてなフォトライフにアップロードしておけば記事のアイキャッチ画像じゃなくても設定できるので、特定の記事じゃなくてカテゴリーを表示させてしまうのもアリかも…と思いました。
トップページのカード型表示は上のような感じですね。
Minimalismの一覧表示と比べると、アイキャッチ画像がかなり目立つようになった印象。
記事のタイトルとカテゴリー以外は表示しないように設定したので、かなりシンプルな表示になりました。
背景色が白だと、カードと背景の境界線がわかりづらいので、マウスをカードに合わせた時にふわっと浮くように設定してあります。
こちらのサイトを参考に変更しました。
スマホ表示の場合
スマホ表示では、タイトル画像が枠いっぱいに表示されるCSSコード(Minimalismで設定済み)がしっかり仕事してくれているようで、タイトル画像がきれいに収まっています。良かった…。
タイトル画像下のおすすめ記事画像は、スマホでは2列で表示されるように設定しました。
UnderShirtは、基本的にはスマホ表示でカードが1列なのですが、試験的に2列表示になるようにカスタマイズしています。
多くの記事は見つけてもらいやすそうだけれど、デザイン的には1列表示の方が良いかも…という気もしているので、様子を見て1列に戻すかもしれないですね。
このタイミングで見出しのデザインも変えてみましたし、フォントがMinimalismとは違うものになっているようなので、記事の印象も変わったな…と思います。
おそらく見た方には気付かれないレベルだけど…笑
ブログのテーマが変わると気分も変わる
ここまで、はてなブログのテーマをUnderShirtに変更したことについて書いてきました。
本当はカスタマイズしたことも詳しく書こうと思ったんですが、Minimalismで変えたこととUnderShirtで設定したことが混在しているために、まとまりのない記事になってしまいそうなので…別の記事でまとめたいと思います。
本当はMinimalismのカスタマイズだけで終わらせるつもりだったのが、テーマを変更するという大々的な作業になってしまったのですが、WordPressからはてなブログに引っ越した時のことを思えば全然簡単でした。
テーマを変更するとCSSがリセットされるはずなのに、なぜか消えなかったのも大きいのかな？
※テーマを変える際は必ずバックアップを取りましょう！
やっぱりブログをやるなら、デザインも自分の気に入ったものに変えた方がテンションも上がるというもの。
お気に入りのテーマが見つかったら、変更してみるのも楽しいかもですよ？
それでは、今回はこのへんで。
