【はてなブログ】UnderShirtでカスタマイズしたことをまとめてみた
先日、はてなブログのテーマをMinimalismからUnderShirtに変更しました。
この記事では、UnderShirtに変更した際に、私のブログに取り入れたカスタマイズをまとめておこうと思います。
本当はMinimalismを使っていた時から、自分がカスタマイズしたことについてまとめた記事をアップしようと思ってはいたのですが、勢いで変更することが多くまとめきれないままほったらかしになっていて。
テーマ変更にともない見直したり新たに追加したカスタマイズもあったので、備忘録がてら記事にしておきます。
なお、私はさまざまなサイト(ブログ)で調べたカスタマイズ方法を取り入れる形で編集していて、微調整レベル以外でのHTML・CSS編集の知識はありません。
そのため、ほぼほぼ参考にした記事の紹介となりますので、ご了承下さい。
そして、私ははてなブログPro(有料版)を利用していますので、はてなブログ無料版では出来ないことも紹介しているかもしれません。
それでは、早速ですが本題に入ります。
UnderShirtで使用しているカスタマイズ
トップページ編
ヘッダーのタイトル画像を調整
タイトル画像を貼ると余白が出来まくっていたので、とりあえず上下の余白を無くして、スマホで最適化されるように設定しました。
Minimalismの時はこの方法で上下左右の余白ができなくなったのですが、UnderShirtではパソコン表示の場合に左右の余白ががっつり残ってしまっていて…
何か解決策が見つかれば対処したいです。
なお、スマホ表示についてはUnderShirtでも問題なくキレイに表示されています！
【2021年1月30日追記】
はてなブログ設定のタイトル画像ではなく、はてなフォトライフにアップロードした画像がヘッダーに表示されるように設定したところ、PC&スマホともに余白無しで表示されるようになりました！
こちらの記事を参考に設定しました。
グローバルメニューの設定
グローバルメニュー(ナビゲーションメニュー)は、タイトル画像の下に出ているホーム画面やカテゴリーのメニューを表示できるバーになっているもの(※うちのブログの場合)です。
UnderShirtの前に使っていたテーマである、Minimalism公式で紹介されていた方法で設定したものが、UnderShirtでもそのまま使えたので、とりあえずそのまま置いてあります。
Minimalismデフォルトの状態だとシンプルだったので、↓の記事で紹介されているCSS(ナビゲーションメニューの文字サイズや文字色など~と書かれている項目より)も利用して、背景色を変更して設定しています。
記事はMinimalism用となっていますが、こちらもUnderShirtでも使えています。
【2021年1月30日追記】
スマホではトグルメニューが表示されるタイプのグローバルメニューに変更しました。
ヘッダー下・おすすめ画像を4つ表示
現時点では、シンプルに画像のみ表示されるカスタマイズ方法を利用しています。
スマホは1列表示だと画像が大きすぎるっぽいので、2列表示にしました。
もしかしたら、今後別の方法に変えるかもしれないです。
記事一覧の説明文・はてなスター・ブックマークユーザーを消す
UnderShirtのカード型表示では、記事の本文(説明文)やはてなスター・ブックマークユーザーの表示があると、見た目がごちゃごちゃになり良さが半減する気がしたので、まとめて非表示にしました。
非表示になるのはトップページのみです。
はてなタグも非表示にする
2020年実装の「はてなタグ」。
面白い仕組みなんですが、こちらもトップページのカードに表示されると見栄えがよろしくないので非表示にしています。
マウス(カーソル)がカードに合わさるとふわっと浮くようにする
UnderShirtの背景色が白いと、カードと背景の境界線がわかりづらいので、せめてマウスがカードに合わさった時にふわっと浮くように表示されるように設定しました。
ちょっとおしゃれなサイト感が出る気がしますね。
スマホでもカードを2列表示に
UnderShirtのデフォルトでは、スマホではカードが1列で表示されるので、スマホでも2列表示になるように変更しました。
UnderShirtを作った方の記事で紹介されていますね。
表示のキレイさなら1列、少しでも多くの記事を見せたいなら2列といった感じでしょうか。
どちらがベターなのか悩みます…
記事画面編
目次を開閉可能に・デザイン変更
はてなブログでは編集画面にあるコードを入れるだけで好きな場所に目次を表示させることが可能ですが、長文記事だと目次だけでもずらーっと項目が表示されてしまうことがあります。
そこで、任意で目次を表示・非表示できるように設定しました。
ちょっと作業の手数は多いけど、設定しておくと利便性がアップしますね。
さらに、目次のデザインも変更してみました。
↓の記事ではいくつかテンプレが用意されているのでいい感じですよ！
見出しのデザイン変更
Minimalismの見出しが装飾ゼロだったので、設定しておいたものをUnderShirtでもそのまま利用しています。
↑のサイトはデザインは豊富なので、逆に豊富すぎて迷っちゃいますね笑
記事内の蛍光ペン表示
斜体で編集すると、黄色の蛍光ペン効果+太字で表示されるように設定しています。
さらに、下線に編集したときも水色の蛍光ペン+太字表示に設定しました。
記事にしたかったけど、見たまま編集とマークダウン&はてな記法では状況が異なるっぽいので保留…
トップ・ホームに戻るボタン設置
画面右下に、トップに戻るボタンとホーム画面に戻るボタンが並んで表示されているのがわかるでしょうか。
スマホでもパソコンでも表示されるようになっています。
特に長文記事だと画面上に戻るだけでもひと苦労なので、少しでも離脱率を下げるために戻るボタンを導入しました。
地味ですが、やっぱりあった方がいいですよね。
更新日時を表示させる
はてなブログは、更新日を表示させる設定が見当たらず、昔の記事に追記しても日付が昔のままになってしまうので、表示させるように設定しました。
記事を更新していない場合、投稿日と同一の更新日が表示されてしまうのが残念ポイントですかね。
画像にピンタレストの画像保存ボタンが表示されるようにする
はてなブログのSNSへのシェアボタンには、ピンタレストが存在しないため、せめて画像がピンタレストに保存しやすくなるように画像保存ボタンを設置しました。
スマホでは狙って表示させづらい仕様なのが欠点ですが、ピンタレストへの利便性アップにはつながっているはず。
SNSシェアボタンの設置
はてなブログデフォルトのSNSシェアボタンはデザインが統一されておらず微妙なので、デザインが整っているシェアボタンに変更しました。
こちらの記事で紹介されている「ボタンっぽいシェアボタン(上から2つ目)」を採用したものの、FacebookとPocketのアイコンが表示されず。
「Headに要素を追加」と「記事上・下(表示させる箇所のみでOK)」と「デザインCSS」にコードを表示させるのですが、このうち「記事上・下」に入れるコードを一部変更したところ無事表示されました。
確認したら、FontAwesomeで表示されるアイコンのコードとテンプレに入っているアイコンのコードが違っていたので、アイコンのコードを直しました。
2019～2020年にアップされている、他の方の記事の方法でもシェアボタンのアイコンが表示されなかったので焦りましたが、なんとか解決できました。
記事に記録を残そうかな…？
吹き出しを使えるように
吹き出し、表示できるように設定してみました！
アイコンのイラストを新調し、表情のバリエーションも増えたので吹き出しが表示されるようにしてみました。
思ったよりは大変じゃなかったですね。めっちゃ楽とは言わないけど。
私がUnderShirtで行ったカスタマイズは以上となります。
カスタマイズで、より便利&素敵なブログにしよう！
ここまで、私のブログで現在取り入れている、はてなブログ・UnderShirtのカスタマイズについて紹介しました。
はてなブログに慣れたら、いつか書こうと思っていた記事だったので、なんというか…やっと世に出せた感じですね！
ただの紹介なんですけどw
紹介した中には、現時点では微妙な状態になってしまっているカスタマイズもあったりするのですが、はてなブログでも、そして知識があまりなくても色々なことが変えられるということが伝わったら嬉しいなと思います。
ブログのデザイン変更は手を付け始めると時間があっという間に過ぎてしまう「沼」な作業ではありますが、より便利で素敵なページになるとテンションも上がりますよ！
ぜひ、ブログのカスタマイズにチャレンジしてみて下さいね。
それでは、今回はこのへんで。
