こんにちは、マイミーです。
この記事では、当ブログ『スプラボ！』のデザインとして使用している、はてなブログのテーマ「UnderShirt」のカスタマイズについてまとめています。
「UnderShirt」使用中の方や、これからブログ運営を考えている方向けの内容となっています。
はてなブログのテーマ「UnderShirt」
当ブログのデザインに「UnderShirt」を採用した決め手は以下の2点。
- シンプルなデザイン
- トップ画面の記事2列表示
シンプルかつブログトップに記事が2列表示されるので、視覚的に情報が入ってきやすいところがお気に入りです。
※「UnderShirt」でトップ画面に記事を2列表示するには、はてなブログproへの加入が必要です。
以下、当ブログで行った「UnderShirt」のカスタマイズのまとめです。
「UnderShirt」カスタマイズまとめ
h2・h3見出しのカスタマイズ
「UnderShirt」のデフォルトの見出しはかなりシンプル。
h2・h3見出しどちらもシンプルな太字となっており、見分けが難しいです。
シンプルでこれはこれで素敵なのですが…
・
以下のようにカスタマイズをしました。
h2見出しには"角がペロッとめくれているデザイン"、h3見出しにはブルーとイエローの2色のボーダーを採用。
見出しのカスタマイズは、サルワカさんのブログを参考にさせていただきました。
目次のカスタマイズ
「UnderShirt」はデフォルトの目次もかなりシンプルです。
シンプルなデザインのまま、より目を引くようなデザインにカスタマイズ。
目次のカスタマイズは、くうかさんのブログを参考にさせていただきました。
グローバルメニューの設置
ブログトップ画面のヘッダーの下に"グローバルメニュー"を設置しました。
以下はPC版のグローバルメニューです。
スマホでは以下の画像のように、画面右上にメニューアイコンが表示され、クリックするとメニューが開きます。
グローバルメニューの設置に必要なコードは、Minimal Greenさんのブログを参考にさせていただきました。
スマホで記事を2列表示にする
「UnderShirt」はブログトップに記事が2列表示されるデザインが特徴的ですが、スマホでは1列表示になってしまいます。
当ブログでは、スマホでも2列表示になるようにカスタマイズを行いました。
スマホで記事2列表示のカスタマイズは、フジグチさんのブログを参考にさせていただきました。
2列表示にした時にできてしまう余白や、カテゴリをタブ風に変えるカスタマイズなど…当ブログのデザイン面でかなりお世話になりました。
サイドバーのプロフィール
サイドバーにプロフィール欄を設置しました。
「プロフィール詳細」のボタンをクリックすると、固定ページで作ったプロフィールの記事に飛ぶようになっています。
プロフィール欄のカスタマイズは、フジグチさんのブログを参考にさせていただきました。
あとがき
今後も当ブログ『スプラボ！』のカスタマイズを行った場合、当記事に追記予定です。
「UnderShirt」の開発者様、カスタマイズの参考にさせていただいたブログ主の皆様、ありがとうございました。
