こんにちは、くうかです！
はてなブログのテーマ『Undershirt』で行ったカスタマイズをまとめてみました。
この記事では主にトップページに関するカスタマイズをまとめてあります。
『UnderShirt』トップページカスタマイズまとめ
先日当ブログはテーマを『Minimalism』から『Undershirt』へ変更しました。
Minimalismには約１年弱、お世話になりました。
シンプルでスマートなところが好きでした(*'▽')
そしてUndershirtは見た目からガラッと変わり、カード型のデザインです。
このデザインが気になったきっかけはスミカ（id:sumica_oxo）さんのブログ。
見た瞬間、「このブログ素敵！」とビビッときました。
しかしスミカさんは元グラフィックデザイナーでプロの方。
だから素敵なデザインなんだな、と納得。
そしてしばらく経ち、またビビッときたブログに出会いました。
ぱぴこ（id:papico405）さんのブログでした。
洗練されたデザインで、細部までこだわりを感じます。
ぱぴこさんのブログも『Undershirt』ということで、憧れから気になってしょうがないテーマになり、とうとうお二方と同じテーマを選んでしまいました( *´艸｀)
以上、テーマ変更を行ったいきさつでした。
ここからカスタマイズに入ります！
今回のテーマ変更に伴い、行ったカスタマイズを挙げていきます。
▼記事内のカスタマイズまとめはこちらから
※カスタマイズは自己責任でお願いします。事前にバックアップを取ることをおすすめします。（私はメモ帳にコピペしています）
背景色のカスタマイズ
デザイン設定＞背景色で好きな色を選びます。
ベースは白にしようと思っていたので白を選びました。
デフォルトでは薄いグレーですね。
ヘッダー画像のカスタマイズ
Minimalismの時と同じく、【1000×200】ピクセルのサイズでCanvaにて作成しました。
デザイン設定＞ヘッダ＞タイトル画像でその画像をアップロードし、適用とする。
タイトル文字も画像に入れていたので、表示設定のオプションは【画像だけ表示】を選択。
デザイン設定＞デザインCSSのところには、
余白がやたら大きいので小さく設定しました。
/* ヘッダーの余白を小さくする */
#blog-title {
padding: 5px;
}
5pxなのは、固定ナビゲーションメニューが１番上にあるため、このサイズがちょうど良かったからです。
ご自分のブログに合わせて調整してください。
レスポンシブデザインにしていますので、スマホでは画像が切れてしまいます。
これはMinimalismで使わせてもらったCSSと同じもので、きれいに表示されました。
/* ヘッダースマホ対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
margin: 0 auto;
padding: 0;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}
私なりに赤文字のコードを追加しています。（余白を取る）
固定ナビゲーションメニュー
画面上部にナビゲーションメニューが固定されて便利です。
自分ではできないので、参照させていただきました。
メニューの内容は自分の好きなようにカスタマイズできるので、
- トップ
- カテゴリ
- 検索
- プライバシーポリシー
- 問い合わせ
にしてみました。
検索・プライバシーポリシー・問い合わせは固定ページで作成してあるので、作成済のページとリンクさせるだけです。
検索はMinimalismのカスタマイズまとめ記事にも記載しましたが、サイドバー以外にも検索できると便利かなと思い固定ページで設置しました。
検索ボックスのhtml文です。（CSSではありません）
<div class="hatena-module hatena-module-search-box">
<div class="hatena-module-body"><form class="search-form" role="search" action="https://www.kurasitotonoe.com/search" method="get"><input class="search-module-input" name="q" required="" type="text" value="" placeholder="記事を検索" /> <input class="search-module-button" type="submit" value="検索" /></form></div>
赤字URLの部分は自分のサイトURLに変更します。
PCは大丈夫なのですが、スマホではちょっと表示が崩れています(;´Д｀)
サイドバーのhtmlからコピペしてきただけなのですが…。
原因がわかったら修正します。
カテゴリはリストを使って設定できるようになっています。
参照サイトの通りにやればできると思います。
CSSで私が変えたところは各箇所の幅のサイズの部分ですね。
width: 170px;/*１階層目の幅*/
width:160px;/*２階層目の幅*/
カテゴリ名のサイズに合わせてこの幅にしました。
１層目と２層目で幅サイズが違うのは、こうするときれいに揃ってドロップダウンするからです(笑)
同じ幅にするとずれてしまいます。
スマホ版フッターメニュー
スマホ版のフッターメニューも同じサイト様から参照させていただきました。
Minimalismの時にも使わせていただきました＾＾
フッターメニューもPC版のナビゲーションメニューと同じ項目にしました。
カテゴリ部分は２列にするカスタマイズを追加しています。
CSSで幅を指定している部分を【width: 100%;】から【width: 50%;】に変更すると２列になります。
カード型デザインに関するカスタマイズ
記事カードの説明文を表示しない
トップページの記事カードに、記事の説明文は表示せず記事タイトルのみを表示します。
すみません。どのサイトを参照したかわからなくなってしまいました(;^_^A
CSSにこの文を追加します。
/* ブログ説明文を表示しない */
.archive-entry-body .entry-description {
display: none;
}
自分で考えたわけではないだろうなー絶対(笑)
見た目がすっきりします。
記事カードのカテゴリー・日付の位置変更
▼カテゴリーをアイキャッチ内に乗せるカスタマイズ
これめちゃくちゃカッコ良くなります！
ブロ友のぱぴこさん（勝手に友と言ってますｗ）の記事が秀逸です。参照させていただきました。
▼カテゴリを２つ以上設定していても１つめのカテゴリのみを表示させる
マリさんのこの記事にもカテゴリ名配置のカスタマイズが載っていますが、なぜか私のブログでは上手くいきませんでした(;^_^A
▼さらに日付の位置を右端にするカスタマイズ
右端だとバランスが良いような気がします。
CSSに追加。
/* 日付の位置変更 */
.page-archive .archive-entry .date{
position: absolute;
bottom: 0px;
right: 0px;
}
↑このカスタマイズはさんざん探しても見つけられず、自分で悪戦苦闘してひねり出しました(;'∀')←CSS初心者
コピペOKです。
スマホでもカードを２列に表示する
テーマ作者のろくぜうどんさんが出しているカスタマイズです。
同じページにある、記事の余白と背景をなくすカスタマイズも入れました。
トップページの画像をサムネイルではなくオリジナルで表示する（19/08/16追加）
トップページの記事一覧表示の画像は、サムネイルを使用していて、カード型デザインだと見切れてしまい、きれいに表示されません。
こちらの記事のスクリプトを入れさせていだたきました。
アーカイブのページも同じにしたい場合はこちらの記事です。
Javaスクリプトを入れるのは少々抵抗ありますが、とてもきれいに表示されるようになったと思います(*'▽')
カードに枠線を付ける（19/09/18追加）
カードに枠線を付けてみました。
/*カードの枠線をつける*/
.archive-entry {
border: solid 2px #dcdcdc;
}
サイドバーのタイトル装飾
サイドバーのタイトルを装飾しました。
記事内の大見出し（h2）と同じデザインにして統一感を出しました。
元々のサイドバーのタイトルを無効化しないとデザインが崩れるようなので、こちらのサイトを参照させていただきました。
デザインは、シンプルなこちらのサイトの見出しが好きです。
プロフィール
プロフィールの部分ははてなのモジュールを使わず、htmlで作りました。
はてなのプロフィールモジュールにもhtmlは書けますが、ウィンドウが小さすぎるんだっ(。-`ω-)
この自作イラストはフォトライフからリンクさせているだけです。
フォローボタンに関しては、次回の記事編のカスタマイズに詳しく書く予定です。
フッター
以前と同じカスタマイズです。
参照させていただきました。
最後に
トップページで行ったカスタマイズを、思いつくまま挙げてみました。
ほぼ参照サイト様からのコピペばかりですが、自分で考えてカスタマイズした部分もあり、苦労した分だけブログに愛着がわきました＾＾
今後トップページのカスタマイズを追加した場合は、この記事をリライトしていこうと思います。
本日も最後までご覧いただき、ありがとうございました。
こんな記事もあります