そろそろブログのデザインを見直したほうがいいかなと思い、
「Undershirt」をダウンロードしていろいろとカスタマイズしてみました。
私はHTMLの外行とフォントの色を変更、サイズ変更くらいなら見ながらならできますが、CSSは本当に全くといっていいほど分かっていないので、コピペで何とかなるサイト様達のお世話になってカスタマイズしました。
今回はそんな感じの私でもできた「Undershirt」のカスタマイズをご紹介したいと思います。
※カスタマイズは自己責任でお願いします。事前にバックアップを取って置くことをおすすめします。
「Undershirt」した理由
- レスポンシブ対応
- 装飾が少なくてカスタマイズしやすい
- トップ画面に記事が2列で並ぶ（スマホは一列）
- 使っている人が多い
使っている人が多いということはいろんなカスタマイズができるということだと思ったので、「Undershirt」にしました。
インストールはこちらです↓
カスタマイズした箇所
プロフィール
サイドバーははてなブログの機能の「プロフィール」ではなく、「HTML」で作っています。
イラストの色をイメージカラーピッカーというサイトで色のカラーコードを調べて、枠線をその色にしてみました。
プロフィールの枠の部分はこちらのサイト様の「シンプルな囲み枠」からコピペさせていただきました。ありがとうございました。
トップページの記事の部分
- はてなスターの削除（記事内には残す）
- 日付を右に寄せ
- カテゴリーを左上寄せ
上の3つはこちらのサイト様からコピペさせていただきました。
ありがとうございました。
これだけでもとてもシンプルになって好みになってきました。
目次を変更
何もしていない状態だと目次の横が数字だったので、●に変更してみました。
こちらのサイト様のものをコピペでさせていただきました。説明もわかりやすくて簡単にできました。ありがとうございました。
太字ボタンの機能を変更
太字の機能を使うと蛍光ペンを引いたようになるようにしました。
前々から蛍光ペンに憧れていて、難しそうで諦めていたのですが、コピペしてheadのところに貼るだけでとても簡単だったのでよかったです。
ありがとうございました。
用意されている色以外の色を使用したい場合は
こちらのサイトでRGBA値をコピーして指定の場所に貼り付けましょう。
見出しを変更
記事内の見出しを変更しました。
こちらのサイト様のものをコピペでさせていただきました。シンプルなものからかわいいものまでどれも本当にかわいいです。ありがとうございました。
トップ画面に記事を4つ表示する
すごいブログあるあるだと思うのですが、沢山読まれている記事やおすすめの記事をトップに固定しておくというのがありますよね。
あれやってみたい！ということでやってみました。
こちらのサイト様のものをコピペでさせていただきました。
これもわかりやすくて簡単にできました。ありがとうございました。
ブログ全体のフォントを変更
最初に設定されていたフォントは少し物足りない感じがしたので、フォントも変更してみました。
参考にさせていただきましたサイト様。ありがとうございました。
フォントで結構印象が変わって楽しい。
おわりに
今回は「Undershirt」のカスタマイズのご紹介でした。
本当は昨日上げるつもりだったのに、素敵なCSSばかりでとても迷ってしまってすごい時間がかかってしまいました。
今回お世話になったサイト様方本当にありがとうございました。
ブログのデザインってこり始めるとなかなか終わらないとネットに書かれていましたが、本当にその通りだなと思いました。
もしカスタマイズするという方がいらっしゃいましたら時間に余裕がある時がおすすめです。
