ねかつちう。

お金や節約に敏感な20代30代のための物欲系雑記ブログ

サイドバーの記事リストをCSSでカスタマイズする方法

[PR]このページにはアフィリエイトプログラムによる商品・サービス等の広告を掲載しています

こんにちは、ちうぱんです。

サイドバーの記事リストにサムネイル表示が実装されましたが、いまひとつデザインが野暮ったいのでカスタマイズすることにしました。

ちなみに、デフォだとこんな感じ。

f:id:nekatsu:20170628094642p:plain

記事リストに関係するクラス名など

記事リストのデザインには多数のIDやクラスが設定されていますが、今回いじってあげるのは次の3つです。

  • .urllist-date-link
    投稿日のID名です
  • .urllist-title-link
    記事タイトルのクラス名です
  • .urllist-categories
    カテゴリーのクラス名です

ちなみに、上記のID名とクラス名は、最新記事、注目記事、関連記事の全てで共通です。

もしも、最新記事だけデザインを変えたい場合は、.urllist-date-linkをrecent-entries-date-linkに変更するなどしてください。(ID名などは画面を右クリックして「ソースを表示」で確認できます)

CSSコードと作業後の画面表示

CSS修正後の画面表示はこんな感じ。

f:id:nekatsu:20170628101447p:plain

修正内容としては、日付と記事タイトルのアンダーバーを削除し、カテゴリーは白抜きにしてみました。

参考まで、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となります。

以上、備忘までっ!