【はてなブログ】UnderShirtでカスタマイズしたことをまとめてみた

【はてなブログ】UnderShirtでカスタマイズしたことをまとめてみた

2021年7月現在、はてなブログからWordPressに移行したため、現在はてなブログを利用していませんが、過去の記録として記事を公開しています

先日、はてなブログのテーマをMinimalismからUnderShirtに変更しました。

この記事では、UnderShirtに変更した際に、私のブログに取り入れたカスタマイズをまとめておこうと思います。

本当はMinimalismを使っていた時から、自分がカスタマイズしたことについてまとめた記事をアップしようと思ってはいたのですが、勢いで変更することが多くまとめきれないままほったらかしになっていて。

テーマ変更にともない見直したり新たに追加したカスタマイズもあったので、備忘録がてら記事にしておきます。

なお、私はさまざまなサイト(ブログ)で調べたカスタマイズ方法を取り入れる形で編集していて、微調整レベル以外でのHTML・CSS編集の知識はありません。

そのため、ほぼほぼ参考にした記事の紹介となりますので、ご了承下さい。

そして、私ははてなブログPro(有料版)を利用していますので、はてなブログ無料版では出来ないことも紹介しているかもしれません。

はてなブログ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列といった感じでしょうか。
どちらがベターなのか悩みます…

記事画面編

目次を開閉可能に・デザイン変更

はてなブログでは編集画面にあるコードを入れるだけで好きな場所に目次を表示させることが可能ですが、長文記事だと目次だけでもずらーっと項目が表示されてしまうことがあります。

そこで、任意で目次を表示・非表示できるように設定しました。
ちょっと作業の手数は多いけど、設定しておくと利便性がアップしますね。

目次の表示・非常時ボタンの設定方法を紹介!はてなブログ|BLOGのメモ帳
前回はてなブログの目次デザインをカスタマイズしましたが、今回は目次を表示・非常にするボタンの設定方法を紹介します。 ブロ

さらに、目次のデザインも変更してみました。
↓の記事ではいくつかテンプレが用意されているのでいい感じですよ!

見出しのデザイン変更

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

Minimalismの見出しが装飾ゼロだったので、設定しておいたものをUnderShirtでもそのまま利用しています。

↑のサイトはデザインは豊富なので、逆に豊富すぎて迷っちゃいますね笑

記事内の蛍光ペン表示

斜体で編集すると、黄色の蛍光ペン効果+太字で表示されるように設定しています。

さらに下線に編集したときも水色の蛍光ペン+太字表示に設定しました。
記事にしたかったけど、見たまま編集とマークダウン&はてな記法では状況が異なるっぽいので保留…

トップ・ホームに戻るボタン設置

画面右下に、トップに戻るボタンとホーム画面に戻るボタンが並んで表示されているのがわかるでしょうか。
スマホでもパソコンでも表示されるようになっています。

特に長文記事だと画面上に戻るだけでもひと苦労なので、少しでも離脱率を下げるために戻るボタンを導入しました。

地味ですが、やっぱりあった方がいいですよね。

更新日時を表示させる

はてなブログは、更新日を表示させる設定が見当たらず、昔の記事に追記しても日付が昔のままになってしまうので、表示させるように設定しました。

【コピペOK】【はてなブログ】更新日付を自動表示したい!設定方法を解説^^ - tomomore

記事を更新していない場合、投稿日と同一の更新日が表示されてしまうのが残念ポイントですかね。

画像にピンタレストの画像保存ボタンが表示されるようにする

はてなブログのSNSへのシェアボタンには、ピンタレストが存在しないため、せめて画像がピンタレストに保存しやすくなるように画像保存ボタンを設置しました。

スマホでは狙って表示させづらい仕様なのが欠点ですが、ピンタレストへの利便性アップにはつながっているはず。

SNSシェアボタンの設置

はてなブログデフォルトのSNSシェアボタンはデザインが統一されておらず微妙なので、デザインが整っているシェアボタンに変更しました。

コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ
今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが… もし気に入ったデザインがあったら使ってみてください。全部で10種類作りました。作りすぎ?? シェ…

こちらの記事で紹介されている「ボタンっぽいシェアボタン(上から2つ目)」を採用したものの、FacebookとPocketのアイコンが表示されず。

「Headに要素を追加」と「記事上・下(表示させる箇所のみでOK)」と「デザインCSS」にコードを表示させるのですが、このうち「記事上・下」に入れるコードを一部変更したところ無事表示されました。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

確認したら、FontAwesomeで表示されるアイコンのコードとテンプレに入っているアイコンのコードが違っていたので、アイコンのコードを直しました。

2019~2020年にアップされている、他の方の記事の方法でもシェアボタンのアイコンが表示されなかったので焦りましたが、なんとか解決できました。

吹き出しを使えるように

吹き出し、表示できるように設定してみました!

アイコンのイラストを新調し、表情のバリエーションも増えたので吹き出しが表示されるようにしてみました。

思ったよりは大変じゃなかったですね。めっちゃ楽とは言わないけど。

私がUnderShirtで行ったカスタマイズは以上となります。

カスタマイズで、より便利&素敵なブログにしよう!

ここまで、私のブログで現在取り入れている、はてなブログ・UnderShirtのカスタマイズについて紹介しました。

はてなブログに慣れたら、いつか書こうと思っていた記事だったので、なんというか…やっと世に出せた感じですね!
ただの紹介なんですけどw

紹介した中には、現時点では微妙な状態になってしまっているカスタマイズもあったりするのですが、はてなブログでも、そして知識があまりなくても色々なことが変えられるということが伝わったら嬉しいなと思います。

ブログのデザイン変更は手を付け始めると時間があっという間に過ぎてしまう「沼」な作業ではありますが、より便利で素敵なページになるとテンションも上がりますよ!

ぜひ、ブログのカスタマイズにチャレンジしてみて下さいね。

それでは、今回はこのへんで。

コメント

タイトルとURLをコピーしました