Stinger3子テーマCANDY CRAZYでトップページの記事一覧表示をカスタマイズ。

f:id:gadgerepo:20151115034434j:plain

あいかわらずStinger3の子テーマ「CANDY CRAZY」をカスタマイズしている筆者ですが、今回はトップページの記事一覧表示をもう少しスッキリした雰囲気にしたいと思い、ちょっとスタイルシートをいじってみました。

【追記】その後、当ブログは WordPressテーマ「Stinger3」から「Simplicity」に変更、そして「はてなブログ」へと移行しました。

ご了承くださいm(__)m

〜WordPressカスタマイズ備忘録その4〜

f:id:gadgerepo:20151115034522p:plain

投稿年月日の後に表示されるカテゴリー、タグ一覧がゴチャゴチャしているのと、ドロップシャドウや２重ボーダーラインが少しうるさい気がするので、そこを変更します。

カテゴリー、タグ一覧をスッキリと

カテゴリー、タグ一覧の文字を少し小さくし、グレーの囲みのpadding値を小さくしてみました。 style.cssの166行目あたり、

.blog_info.contentsbox a {
  background: none repeat scroll 0 0 #666666;
  color: #FFFFFF;
  font-size: 15px;
  margin: 2px;
  padding: 7px;
  text-decoration: none;
  vertical-align: middle;
}

こちらのfont-sizeを12px、paddingの上下幅を2pxにして

.blog_info.contentsbox a {
  background: none repeat scroll 0 0 #666666;
  color: #FFFFFF;
  font-size: 12px;
  margin: 2px;
  padding: 2px 7px;
  text-decoration: none;
  vertical-align: middle;
}

に変更します。

f:id:gadgerepo:20151115034701p:plain

少し余白ができてスッキリしました。

ドロップシャドウ、ボーダーラインの修正

「続きを見る」ボーダー部分や囲い枠部分のドロップシャドウの値を小さくし、囲い枠のtop（上部）とbottom（下部）にある２重ボーダーラインをbottom（下部）のみの単一ラインにします。

同じくstyle.cssの110行目あたり、“エントリーのカスタマイズ”部分、

/*-----------------------------
エントリーのカスタマイズ
------------------------------*/
.entry {
  background: none repeat scroll 0 0 #FBFBFB;
  border-top: 6px double #ccc;
  margin-bottom: 40px;
  margin-top: 0;
  padding: 20px 10px;
  border-bottom: 6px double #ccc;
  box-shadow: 0 10px 25px -10px #333;
}

こちらを

/*-----------------------------
エントリーのカスタマイズ
------------------------------*/
.entry {
  background: none repeat scroll 0 0 #FBFBFB;
  margin-bottom: 40px;
  margin-top: 0;
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 7px 25px -10px #333;
}

に変更しました。修正後はコチラ

f:id:gadgerepo:20151115034824p:plain