主婦のすきま時間の遊び研究サイト(主にゲーム)もやってます

【はてなブログ】UnderShirtトップページカスタマイズ

2020 3/30
【はてなブログ】UnderShirtトップページカスタマイズ

こんにちは、主婦ブロガーくうかです。

はてなブログのテーマ『UnderShirt』で行ったカスタマイズです。

この記事では主にトップページに関するカスタマイズをまとめてあります。

目次

『UnderShirt』トップページカスタマイズまとめ

当ブログはテーマを『Minimalism』から『UnderShirt』へ変更しました。
※現在はワードプレスへ移行しています

Minimalismには約1年弱、お世話になりました。
シンプルでスマートなところが好きでした(*’▽’)

f:id:ku-kahan:20190807220419p:plain

そしてUnderShirtは見た目がガラッと変わり、カード型のデザインです。

f:id:ku-kahan:20190807222550p:plain

このデザインが気になったきっかけはスミカさんのブログ。
見た瞬間、「このブログ素敵!」とビビッときました。

そしてしばらく経ち、またビビッときたブログに出会いました。
ぱぴこさんのブログでした。
洗練されたデザインで、細部までこだわりを感じます。

以上、テーマ変更を行ったいきさつでした。
ここからカスタマイズに入ります!
今回のテーマ変更に伴い、行ったカスタマイズを挙げていきます。

▼記事内カスタマイズまとめはこちらから

カスタマイズは自己責任でお願いします。事前にバックアップを取ることをおすすめします。(私はメモ帳にコピペしています)

ヘッダー画像のカスタマイズ

Minimalismの時と同じく、【1000×200】ピクセルのサイズでCanvaにて作成しました。

デザイン設定>ヘッダ>タイトル画像でその画像をアップロードし、適用する。
タイトル文字も画像に入れていたので、表示設定のオプションは【画像だけ表示】を選択。

デザイン設定>デザインCSSのところに、余白がやたら大きいので小さく設定しました。

/* ヘッダーの余白を小さくする */
#blog-title {
padding: 5px;
}

5pxなのは、固定ナビゲーションメニューが1番上にあるため、このサイズがちょうど良かったからです。
ご自分のブログに合わせて調整してください。

レスポンシブデザインにしていますので、スマホでは画像が切れてしまいます。
これは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;/*1階層目の幅*/
width:160px;/*2階層目の幅*/

カテゴリ名のサイズに合わせてこの幅にしました。
1層目と2層目で幅サイズが違うのは、こうするときれいに揃ってドロップダウンするからです(笑)
同じ幅にするとずれてしまいます。

スマホ版フッターメニュー

スマホ版のフッターメニューも同じサイト様から参照させていただきました。
Minimalismの時にも使わせていただきました^^

フッターメニューもPC版のナビゲーションメニューと同じ項目にしました。

カテゴリ部分は2列にするカスタマイズを追加しています。

CSSで幅を指定している部分を【width: 100%;】から【width: 50%;】に変更すると2列になります。

※2020/03/11追加
後述しているフッターのカスタマイズを入れていると、フッターメニューの分フッターが隠れてしまいます。
それを直すコードです。

/*スマホの時だけ*/
@media(max-width: 767px){
/*ボトムメニュー付けたのでフッタを底上げする*/
#copyright{margin-bottom:48px;} /* footerからcopyrightに変える */
}

カード型デザインに関するカスタマイズ

記事カードの説明文を表示しない

トップページの記事カードに、記事の説明文は表示せず記事タイトルのみを表示します。

すみません。どのサイトを参照したかわからなくなってしまいました(;^_^A
CSSにこの文を追加します。

/* ブログ説明文を表示しない */
.archive-entry-body .entry-description {
display: none;
}

自分で考えたわけではないだろうなー絶対(笑)
見た目がすっきりします。

記事カードのカテゴリー・日付の位置変更

▼カテゴリーをアイキャッチ内に乗せるカスタマイズ

これめちゃくちゃカッコ良くなります!
ブロ友のぱぴこさん(勝手に友と言ってますw)の記事が秀逸です。参照させていただきました。

▼カテゴリを2つ以上設定していても1つめのカテゴリのみを表示させる

マリさんのこの記事にもカテゴリ名配置のカスタマイズが載っていますが、なぜか私のブログでは上手くいきませんでした(;^_^A

▼さらに日付の位置を右端にするカスタマイズ

右端だとバランスが良いような気がします。
CSSに追加。

/* 日付の位置変更 */
.page-archive .archive-entry .date{
position: absolute;
bottom: 0px;
right: 0px;
}

↑このカスタマイズはさんざん探しても見つけられず、自力で悪戦苦闘してひねり出しました(;’∀’)←CSS初心者

コピペOKです。

※2020/03/11追加
現在はカテゴリ名の角を丸くしているので、丸ご希望の方は以下のCSSを追加してください。

/* カテゴリー位置 */
.page-archive .archive-entry .categories {
position: absolute;
top:-3px;
left:5px;
}

/* 背景とテキストの色変更・角を丸くする場合 */
.categories a {
background: #e4c1c0;/*背景色*/
color:#fff;/*テキスト色*/
border-radius: 10px;/*角を丸く*/
}

スマホでもカードを2列に表示する

テーマ作者のろくぜうどんさんが出しているカスタマイズです。
※現在はこのカスタマイズは外しています

同じページにある、記事の余白と背景をなくすカスタマイズも入れました。

カードに枠線を付ける(2019/09/18追加)

カードに枠線を付けてみました。

/*カードの枠線をつける*/
.archive-entry {
border: solid 2px #dcdcdc;
}

サイドバーのタイトル装飾

サイドバーのタイトルを装飾しました。
記事内の大見出し(h2)と同じデザインにして統一感を出しました。

元々のサイドバーのタイトルを無効化しないとデザインが崩れるようなので、こちらのサイトを参照させていただきました。

デザインは、シンプルなこちらのサイトの見出しが好きです。

プロフィール

プロフィールの部分ははてなのモジュールを使わず、htmlで作りました。
はてなのプロフィールモジュールにもhtmlは書けますが、ウィンドウが小さすぎるんだっ(。-`ω-)

自作イラストはフォトライフからリンクさせているだけです。

フォローボタンに関しては、次回の記事編のカスタマイズに詳しく書く予定です。

フッター

以前と同じカスタマイズです。

参照させていただきました。

最後に

トップページで行ったカスタマイズを、思いつくまま挙げてみました。
ほぼ参照サイト様からのコピペばかりですが、自分で考えてカスタマイズした部分もあり、苦労した分だけブログに愛着がわきました^^

今後トップページのカスタマイズを追加した場合は、この記事をリライトしていこうと思います。

本日も最後までご覧いただき、ありがとうございました。

応援クリックしていただけると嬉しいです!

ブログランキング・にほんブログ村へ 人気ブログランキング

楽天で買ったものやおすすめを紹介しています

rakutenroom

コメント

コメント一覧 (2件)

  • nya222 より:

    Undershirtを気になりだしたおふたりのブログもとてもステキですね!こUndershirtなんですねー!かなりカスタマイズ性の高いテーマですね。人によって雰囲気がだいぶ変わりますね!
    こうやってカスタマイズのまとめを見るとほんとに細かくカスタマイズされてて凄いなと思いました。と、同時に羨ましくも(〃ω〃)私もやりたーい!くうかさんのページを見た後に自分のブログ見たらもう私のブログのペラペラさ…。
    くうかさんのブログは色の使い方もかわいいなぁと思いました。私はそのへんのセンスもないので脱帽です。ほんと凄い!

  • ku-kahan より:

    なりこさん
    お二人のブログ、素敵ですよね。
    本当に雰囲気が色々感じられて面白いテーマだと思います^^
    カスタマイズは際限ないですよね。。
    やっとこのくらいまでやればいいか、というところまでいけたので表に出せました(笑)
    変えてないところもけっこうあるので、わりとデフォルトからおしゃれなテーマですね。
    色はやっぱり自分の好きな色を使うとテンションが上がると思います!
    なりこさんもぜひ(笑)
    色やヘッダーを変えるだけでも印象が変わりますよー!

コメントする

CAPTCHA


目次
閉じる