MENU
カテゴリー
アーカイブ
くうかの画像
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

はてなブログUnderShirtのカスタマイズまとめ

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

当ブログははてなブログのテーマを『Minimalism』から『UnderShirt』へ変更しました。

UnderShirtはシンプルでカスタマイズ次第でガラッと印象が変わるテーマです。

くうかのアイコン画像くうか

この記事では、トップページに関するカスタマイズと記事内装飾に関するカスタマイズをまとめています!

※現在はワードプレスへ移行しています

Contents

はてなブログ「UnderShirt」トップページのカスタマイズ

テーマストアからインストールします。
旧テーマのCSSは消えてしまうので、消えると困る方は事前にメモ帳等にバックアップしてくださいね。

Minimalismはシンプルでスマートなところが好きでした

Minimalismの時のトップページ
Minimalism

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

UnderShirtの時のトップページ
UnderShirt

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

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

くうかのアイコン画像くうか

お二方とも『UnderShirt』を使用されていて素敵だったので、私も同じテーマを選ばせていただきました!

では今回のテーマの変更に伴い、行ったカスタマイズを挙げていきます。

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

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

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;
}
}

余白を取るコードを追加しています。

PC版固定ナビゲーションメニュー

PCで画面上部にナビゲーションメニューが固定されて便利です。

自分ではできないので、参考にさせていただきました

メニューの内容は自分の好きなようにカスタマイズできるので、

  • トップ
  • カテゴリ
  • 検索
  • プライバシーポリシー
  • 問い合わせ

にしてみました。

固定ナビゲーションメニュー

検索・プライバシーポリシー・問い合わせは固定ページで作成してあるので、作成済のページとリンクさせるだけです。

固定ナビ:検索

検索は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に変える */
}

ピックアップ記事カスタマイズ

トップページにピックアップ記事のアイキャッチを4つ並べるカスタマイズです。

ピックアップ記事

こちらの記事に詳細をまとめてあります

くうかのアイコン画像くうか

おしゃれになるので気に入っていたカスタマイズです♪

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

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

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

記事カード説明文なし

CSSにこの文を追加します。

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

見た目がすっきりします。

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

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

記事カードカテゴリ名

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

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

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

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

記事カード日付位置

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

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

↑このカスタマイズはさんざん探しても見つけられず、自力でひねり出しました。
コピペ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は書けますが、ウィンドウが小さすぎるんだっ(。-`ω-)

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

フッター

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

フッター

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

はてなブログ「UnderShirt」記事内のカスタマイズ

目次のカスタマイズ

目次のデザインは迷走して、最終的にシンプルな目次に落ち着きました。

目次ビフォーアフター

こちらの記事に詳細を書いています

見出しのカスタマイズ

見出し

h2、h3、h4の見出しをカスタマイズしました。

サイドバーで参考にしたサイトと同じです

記事フォントサイズ変更

『UnderShirt』も、デフォルトではフォントが小さめです。
少々見づらさを感じたので、CSSで17pxに変更しました。

/* 記事のフォントサイズ変更 */
.entry-content {
font-size:17px;
}

あまりに大きすぎるとスマホで1行に文字数があまり入らなくなりそうなので、この位でいいかなと思います。

フォントの種類はそのままです。
デフォルトでもおしゃれなフォントですよね。英語の部分とか特に。
でも顔文字にすると崩れますね。笑

囲み枠カスタマイズ

今のところ2種類の囲み枠を作りました。

囲み枠1
囲み枠2

タブ付きのボックスと、ただのボックス。

サルワカさんのボックスデザインが種類も多く可愛いです

次へ・前へボタンカスタマイズ

デフォルトでは白なので、色を付けただけのカスタマイズです。

次へ前へボタン

CSSに追加。

/* 前へ次へボタン背景色 */
.pager-next a,.pager-prev a{
background: #f0ebc0;
border-radius: 10px;/*角を丸くしたい場合はこの行も入れる*/
}

フォローボタン・シェアボタン

シェアボタンは記事上・記事下に配置。 
フォローボタンは記事下とプロフィールに配置。

シェアボタン

大きめのボタンの方がクリックされるかもしれない…と思い、大きめのボタンに。

参考にさせていただいたサイト様、SSL未対応なのでリンクを貼るのは控えます。
すみません(^^;

最後に

はてなブログテーマ『UnderShirt』行ったカスタマイズを、思いつくまま挙げてみました。

ほぼ参照サイト様からのコピペばかりですが、自分で考えてカスタマイズした部分もあり、苦労した分だけブログに愛着がわきました^^

UnderShirtはカード型のシンプルなテーマで、カスタマイズのしがいがありますね。

くうかのアイコン画像くうか

私のカスタマイズが参考になったら嬉しいです♪

シンプルライフの参考になる記事をもっと読む(ブログ村)

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

この記事が気に入ったら
フォローしてね!

カテゴリー別の人気記事

コメント

コメント一覧 (2件)

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

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

コメントする

CAPTCHA


Contents
閉じる