フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

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

どうも!ヘッダーとアイコンを変更して心機一転のフジグチです!

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

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

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

UnderShirt記事一覧のカスタマイズ

記事一覧カスタマイズ

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

f:id:utoutosara:20200426004515j:plain

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

記事説明文を消す

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

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

.page-archive .archive-entry .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;
}

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

カテゴリの位置変更

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

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

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

まとめ

before

カスタム前

after

カスタム後

今回のカスタマイズは以上です!
このほかにも文字サイズや微妙な余白の調整なども行っていますが、大きな枠組みはこんな感じですね。

ブログって一度いじりだしたら沼にはまりますね(笑)
初心者あるあるかもしれませんが色んな部分をカスタマイズしていくと、どんどん統一感がなくなっていきませんかね?デザインって難しいですね。

最後までお読み頂きありがとうございました。

ついでにこの記事も読んでさらにカスタムして個性を出しちゃおう!

www.fuji-blo.com

トップへ戻る