アイキャッチ画像の左上にカテゴリを表示させてみました

こんにちは、ゆんつです。

前回僕はSimplicityの「エントリーカード全体をリンク化」を有効化しました。

「エントリーカード全体をリンク化」してみました。

こんにちは、ゆんつです。僕はブログ作りにSimplicityというテーマを使わせていただいてます。このSimplicityで以前から使ってみたい機能がありました。それは「エントリーカード全体をリンク化」するという

これによりインデックスリストが1枚のカードのようになり、それまでは各記事のタイトルや「続きを読む」をクリックしなければ全文が読めなかったものが、

そのカードのどの部分をクリックしてもその記事の全文が読めるようになりました。

「エントリーカード全体をリンク化」すると、インデックスリストにある「カテゴリ」や「続きを読む」は機能しなくなります。

そこで僕はそれらを消してしまいました。

作業前

作業後

これにより見た目はとてもすっきりしたんですが、これでは少し寂しい気がしますし、やはりカテゴリーの表示くらいはあった方が良いような気がします。

元に戻して以前と全く同じ表示方法と言うのもあまりに変化が無いので、カテゴリをアイキャッチ画像の左上につけることにします。

まず前回記述したインデックスリストからカテゴリを消すための

#list .category {
    display: none;
}

というコードを削除してカテゴリが表示される元の状態に戻しておきます。

アイキャッチ画像にカテゴリを付ける
注意
まとめ

アイキャッチ画像にカテゴリを付ける

アイキャッチ画像の左上にカテゴリを表示させます。

Simplicityのホームページの「アイキャッチ画像の上にカテゴリを表示させたい」という質問に解答として寄せられていたコードを参考にさせていただきます。

#list .category .fa {
    display: none;
}
#list .entry {
    position: relative;
}
#list .category {
    position: absolute;
    left: 0;
    top: 3px;
    background: #ffaf00;
    opacity: .9;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 0 4px;
}

更新してブログを確認してみると