papico's note

通信大学生で主婦。日常を楽しく過ごす方法を探していきます。

はてなブログ【Under Shirt】トップページの「カテゴリ」位置をアイキャッチの上に変える(コピペですぐできる)

スポンサーリンク


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

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

q.hatena.ne.jp

f:id:papico405:20190522140108j:plain

変更の内容

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

f:id:papico405:20190522115731j:plain

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

デザインCSSに以下のCSSをコピペしてください。「Under Shirt」はレスポンシブなので、スマホも同じようになります。
※念のため元の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では黒に近いグレーにしてますので、自分のブログに合う色に変えてください。

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

おわりに

はてなブログの「Under Shirt」使用者向けのカスタマイズでした。
カテゴリが1個だときれいに収まると思います。複数ある場合はデフォルトのままにしておいた方が良いかもしれません。

blog.rokuzeudon.com

「Under Shirt」作者さんのページでも色々紹介してくれてますので、このテーマ使用者はチェックしておくと良いかも? 私は気に入ってるので、しばらくこのテーマを使わせてもらうつもりです。

よく読まれてる記事