はてなブログ【UnderShirt】記事一覧のカスタマイズ

どうも！フジグチです！

当ブログのテーマはUnderShirtを使用しています。

カードタイプで記事一覧が見やすいのと【UnderShirt】という「この上にドンドン着飾ってオシャレしてくださいね！」という心意気を感じる（※フジグチ解釈です）ネーミングセンスに惹かれて使用しています。

ということで、当ブログで行った記事一覧のカスタマイズをご紹介します。
使いたい部分があればコピペでご自由にお使い頂いてかまいません。

はてなブログ UnderShirt記事一覧のカスタマイズ

記事一覧カスタマイズ
日付の位置変更
カテゴリの位置変更
まとめ

記事一覧カスタマイズ

せっかくのカード型でも記事説明やスターが表示されていると、縦に間延びしてしまいオシャレさがなくなるのと、次の記事へのスクロールが長くなるのでこれを消しました。

f:id:utoutosara:20200426004515j:plain

はてブやスターを残したい方は以下を参考にしてください。

記事説明文を消す

.archive-entry-body .entry-description {
    display: none;
}

記事一覧のスターを消す（記事ページ内は消えません）

.page-archive .archive-entry .hatena-star-container {
    display: none;
}

ブックマークユーザーを消す

.page-archive .bookmark-widget-counter {
    display: none;
}

全部まとめて消す(これだけで上3つすべて消えます）

.page-archive .archive-entry .archive-entry-body {
    display: none;
}

記事説明文を消した状態

これだけで、かなりすっきりしましたね！
ここからさらにカスタマイズしていきます。

日付の位置変更

日付は最後のほうがしっくり来たので右端に配置する。

日付を右下端にした状態

.archive-entry-header .date {
    position: absolute;
    bottom: 0;
    right: 5px; /*余白の調整*/
    margin-bottom: 0;
}

bottomとrightをtopやleftに変えれば位置を好きに変えられます。
ブログデザインに合わせて調整してください。

カテゴリの位置変更

最近アイキャッチを作り始めたので、あまり隠れないように画像からはみ出す感じにしました。

フジブロっ！のカテゴリタグのカスタマイズ

.page-archive .archive-entry {
    margin-bottom: 30px; /*記事間の余白調整*/
}
.page-archive .archive-entry .categories {
    position: absolute;
    top: -12px;
    left: 8px;
}
.page-archive .archive-entry .categories a {
    background: #fcfc71; /*タグ背景色*/
    color: #888; /*文字色*/
    font-weight: bold; /*タグを太字に*/
    border: #65644e solid 1px; /*枠線*/
    border-radius: 12px; /*角丸*/
}

タグの位置は悩んで没案もあったので載せておきます。

カテゴリを左端に配置

カテゴリタグを左上に配置

.page-archive .archive-entry .categories {
   position: absolute;
   top: -8px;
   left: 0px;
}

これはよく見ますね。

カードの外側に配置してタブ風に

カテゴリタグを付箋風に

/*タブ風カテゴリタグ*/
.page-archive .archive-entry {
    margin-bottom: 35px; /*記事間の余白調整*/
    border: solid 1px #333; 
}
.page-archive .archive-entry .categories {
    position: absolute;
    bottom: 100%;
    left: -1px;
}
.page-archive .categories a {
    margin: 0;
    background: #faff28; /*カテゴリの背景色*/
    border-radius: 6px 6px 0 0;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    border-left: solid 1px #333;
}

テープで止めたようなガーリーな感じに

カテゴリタグをガーリー風に

/*ガーリーなカテゴリタグ*/
.page-archive .archive-entry {
    margin-bottom: 30px; /*記事間の余白調整*/
}
.page-archive .archive-entry .categories {
    position: absolute;
    top: -20px;
    left: 10px;
}
.page-archive .archive-entry .categories a {
    background: #ffc8bfeb;
    color: #fff;
    border-radius: 0;
    border-top: dashed 1px #fff;
    border-bottom: dashed 1px #fff;
    box-shadow: 0 0 0px 2px #ffc8bfeb;
    transform: rotate(-3deg);
}