こんにちは、ゆんつです。
前回僕は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;
}更新してブログを確認してみると
おおっ
できてる。
コードの意味合いを今の自分にわかる範囲内で書いておきます。
説明が無い部分は今の僕にはよく解らない部分なのでご了承ください。
このコードでカテゴリの横にあるフォルダのアイコンが消えます。
そして、もう1つのコードはカテゴリの表示方法を定めるもので、こんな感じの意味合いだと思います。
これらのコードにより無事にアイキャッチの左上にカテゴリを表示することが出来ました。
注意
やたらと長い文字数のカテゴリ名を付けていると、アイキャッチ画像からはみ出しとても不格好になるので、ほどほどの文字数にしておきましょう。
下の画像を見ていただけるとわかるように、カテゴリ名が長すぎてアイキャッチ画像からはみ出してタイトルを隠しています。
数えてみるとアイキャッチ画像に収まる文字数は、文字の大きさにもよるんでしょうが僕の場合は9文字のようです。
ということで、画像に収まるようにカテゴリ名を変更しました。
まとめ
今回はアイキャッチ画像の左上にカテゴリを表示させてみました。
注意することは「あまり長いカテゴリ名だとアイキャッチからはみだす」ということだけで、コードをコピペするだけでできる簡単なカスタマイズでした。
これで素っ気なかったインデックスリストも多少は見栄えが良くなったような気がします。
しばらくこの状態で運営してみたいと思います。
それでは、またですー。
コメント