こんにちは、ちうぱんです。
サイドバーの記事リストにサムネイル表示が実装されましたが、いまひとつデザインが野暮ったいのでカスタマイズすることにしました。
ちなみに、デフォだとこんな感じ。
記事リストに関係するクラス名など
記事リストのデザインには多数のIDやクラスが設定されていますが、今回いじってあげるのは次の3つです。
- .urllist-date-link
投稿日のID名です - .urllist-title-link
記事タイトルのクラス名です - .urllist-categories
カテゴリーのクラス名です
ちなみに、上記のID名とクラス名は、最新記事、注目記事、関連記事の全てで共通です。
もしも、最新記事だけデザインを変えたい場合は、.urllist-date-linkをrecent-entries-date-linkに変更するなどしてください。（ID名などは画面を右クリックして「ソースを表示」で確認できます）
CSSコードと作業後の画面表示
CSS修正後の画面表示はこんな感じ。
修正内容としては、日付と記事タイトルのアンダーバーを削除し、カテゴリーは白抜きにしてみました。
参考まで、CSSコードは以下のとおり。
/* サイドバー（記事リスト）のデザインを指定 */
.urllist-date-link a {
text-decoration: none; /* 日付のアンダーラインを消す */
.urllist-title-link {
text-decoration: none; /* 記事名のアンダーラインを消す */
.urllist-categories a { /* カテゴリーのスタイルを指定 */
padding: 2px 3px;
text-decoration: none;
color: white;
background: #ffa337;
}CSSの貼り付け場所は、デザイン＞カスタマイズ＞デザインCSSとなります。
以上、備忘までっ！
