ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

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

f:id:gadgerepo:20151115034434j:plain

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

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

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

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

f:id:gadgerepo:20151115034522p:plain

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

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

カテゴリー、タグ一覧の文字を少し小さくし、グレーの囲みの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(下部)にある2重ボーダーラインを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

見やすくなりましたね。

おつかれさまでした。