%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-95

ワードプレステーマは定番のスティンガーやビズベクトル等を使っていたのですが、今は わいひら様のsimplicity2を使わせていただいてます。

非常にシンプルでカスタマイズがしやすく、お気に入りのテーマです。

素人ながらCSSの参考記事を見様見真似で群青色をメインにした 「simple-ultramarine」シンプルで落ち着いた雰囲気で目に優しい配色を重視したカスタマイズを作ってみました。

男女問わず誰でも使っていただける様なスキンになったかなと思います。
良かったら使ってみてください。

 

 カスタマイズしたパーツの紹介

  1. 背景イメージとカラムを半透明化
  2. グローバルナビをカスタマイズ
  3. サイドバーのカテゴリーなどの見出しに背景を付ける
  4. 見出し「H1~H4」のカスタマイズ
  5. 投稿一覧リストに影を付け浮き上がらせ「記事を読む」を右寄せ
  6. メタ情報の上下にラインを付け中央寄せにする
  7. サムネイル画像にマウスが乗った時の動作に変化を加える
  8. 関連記事一覧リストにボーダーラインを付け「記事を読む」を右寄せ
スポンサーリンク

背景イメージとカラムを半透明化

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-96

背景イメージ

薄い群青色をナビ下から段々と濃くしております。

これは単純に作成したイメージ画像を アップロードしたURLを指定して画面いっぱいに設定し、固定しているだけです。

ご自身で設定される場合は、アップした画像などを背景に指定するか、カスタマイザーの色で配色を指定するといい感じになります。

カラムの半透明化

個人的にですが、背景に色を付けた場合 カラムは真っ白よりも気持ち薄っすらと 透かせてあげた方が全体的に綺麗な印象だったので、メインとサイドともに少し透かせてみました。

 

グローバルナビをカスタマイズ

%e7%84%a1%e9%a1%8c

群青色をメインにグローバルメニューをカスタマイズしてみました。

グローバルナビリンク色も黒だと見にくいので白にしてます。

分かりにくいですが、群青単一色だとボケた感じになるので、ナビ上下に灰色のラインを引いて引き締めた感じに仕上げました。

 

サイドバーのカテゴリー等の見出しに背景を付ける

saido

サイドバー各ウィジェットの見出しに背景を付けました。

群青色を見出し背景にして、文字を白にして中央に表示させています。

 

見出しをカスタマイズ

H1~H4の見出しをカスタマイズしました。

群青色ベースなので見出しも少しカッコよくしてみました。

 

投稿一覧のカスタマイズ

%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7

 

投稿リストを見やすくしました

元々は区切りが無かったので、一覧リストを囲い込み影を付けて浮き上がらせた事により、見やすくカッコイイ感じに仕上げました。

記事を読むのカスタマイズ

少し「記事を読む」の部分を 目立たせてあげたかったので、ボタン化にして 左よりも右にあった方が見やすいと思ったので右寄せにしてみました。

 

メタ情報のカスタマイズ

%e3%83%a1%e3%82%bf

投稿本文と一覧リストのメタ情報中央にし、上下にラインを付けました。

 

サムネイル画像に動きを付ける

%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab

画像では分かりにくいですが、サムネイル画像にマウスを置くと少し半透明になって浮いてくる感じです。

 

関連記事一覧リストのカスタマイズ

%e9%96%a2%e9%80%a3%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%83%aa%e3%82%b9%e3%83%88

関連記事一覧に区切りがなかったのでボーダーラインを引きました。

「記事を読む」をボタン化し、右に寄せました。

群青色でまとめたので見やすくなったかなと思います。

 

まとめ

全体的に落ち着いた雰囲気のスキンを探してる方はおすすめです。

スキンの使い方は子テーマのskinsのフォルダに入れてカスタマイザーのスキンから「simple-ultramarine」を選択して使用して下さい。ダウンロードは以下からどうぞ

 

 

分かりにくい場合、もしくはsimplicity2子テーマのダウンロード等は、simplicityから