悠々自適な日々を目指す

波音に抱かれながら眠りにつくような生活を夢見るブログ

【PC版】ブログテーマをDUDEへ変更&ほんの少しカスタマイズ -- その2

前回の記事の続きです。今度はサイドバー編です。

いきなり完成形から

   /*プロフィールの説明文 -- (1)*/
   .profile-description p {font-size: 15px;}
   /*サイドバーのエントリータイトルとカテゴリー -- (2)*/
   .urllist-title-link {font-weight: bold;}
   .urllist-category-link {
      background-color: #afd0ef;
      color: #fff;
      font-weight: bold;
      padding: 3px;
    }

1)説明文全体のフォントサイズを少し上げる

ブログについての説明をまとめたリンクを貼っていたり、今後「プチお知らせ」的な情報を掲載したりするのに使用するかも? という考えがあるため、ちらっとでも目に入りやすいようにしました。

「profile-description」クラスに設定だけでは反映されなかったので、入れ子になっているpタグに対して設定しました。

2)エントリータイトルを太字に、カテゴリー表記をわかりやすく

当ブログは

  • 「POPULAR(注目記事)」エントリータイトルの下
    →本文の内容をチラ見せ
  • 「NEW ENTRY(新着記事)」エントリータイトルの下
    →カテゴリーを表示

という表示の仕方をさせていますが、どちらの場合もタイトルとの見分けがしにくいと感じました。

エントリータイトルとカテゴリーのタグに記載されているclass属性を注目記事エリア、新着記事エリアそれぞれで確認し、両方に含まれていたクラスに対して設定しています。
「urllist-title-link」がエントリータイトル、「urllist-category-link」がカテゴリーです。

カテゴリーの方では一体何を設定しているのか? というと(上から順に説明)、

  1. 文字の背景色(薄いブルー)
  2. 文字の色(白)
  3. 文字を太字に
  4. 文字からの余白(上下左右)

こんな内容になっています。

ひとまずはカスタマイズ完了! ……ですかね。
しかし、ここまで来るとスマホ版も見やすくしたくなります。でもProにしないと駄目なんですよねぇ。。