はてなブログ【Under Shirt カスタマイズ】「カテゴリ」位置をアイキャッチの上にする

2019 5/22

2019年5月22日 2019年5月22日

URLをコピーしました！

この記事ははてなブログのテーマ「Under Shirt」を使ってる方向けです。

「人力検索はてな」で「カテゴリ」の位置を左上に変えたいという質問があり、私に回答リクエストが届きました。
同じように変えたい人がいるかもしれないので、記事にします。

q.hatena.ne.jp

変更の内容

ここで紹介するCSSは、記事タイトルや日付の下にある「カテゴリ」をアイキャッチ画像の上に移動させるものです。

完成イメージ

「カテゴリ」位置を左上にするcss

デザインCSSに以下のCSSをコピペしてください。「Under Shirt」はレスポンシブなので、スマホも同じようになります。
※念のため元のCSSのバックアップ取っておいてください。

CSS

/*（1）カテゴリの位置変更*/
.page-archive .archive-entry .categories {
position: absolute;
top:0px;
left:10px;
}
/*（2）左端にピッタリつける*/
.page-archive .archive-entry .categories {
position: absolute;
top:-8px;
left:0px;
}
/*（3）背景とテキストの色変更する場合*/
.categories a {
background: #454545;
color:#fff;
}

補足説明

（1）はイメージ画像のように、左上（アイキャッチの上）にカテゴリを表示させます。
（2）は余白なしで左の角にピッタリつけたい時
（3）はカテゴリ名の背景と文字色を変更したい場合。上のCSSでは黒に近いグレーにしてますので、自分のブログに合う色に変えてください。
→background:が背景色で、color:が文字色です。

【カラコード参考】：WEB色見本原色大辞典 – HTMLカラーコード

※全部コピペすると（1）が（2）に上書きされるので、どちらか必要な方を選んでコピペしてください。