WordPressテーマ「simplicity2」用に群青系スキンを作ってみました

%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の見出しをカスタマイズしました。

見出し1

見出し2

見出し3

見出し4

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

投稿一覧のカスタマイズ

%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から

Wordpressテーマ「Simplicity(シンプリシティー)」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つの

スポンサーリンク

シェアする

フォローする

スポンサーリンク

『WordPressテーマ「simplicity2」用に群青系スキンを作ってみました』へのコメント

  1. 名前:素人ブロガー 投稿日:2017/01/15(日) 22:24:34 ID:c2404e159 返信

    「simple-ultramarine」は素晴らしいの一言です。
    早速私のブログに使わせて頂きました。
    まさに理想のデザインでめちゃくちゃお気に入りです。
    素晴らしいスキンをありがとうございました!
    また新作が出ればサイトを覗かせて頂きます。

    • けんじ 名前:けんきち 投稿日:2017/01/16(月) 01:13:09 ID:eb883b725 返信

      こんばんは、素人ブロガーさん
      丁重なコメントと、この度は「simple-ultramarine」のダウンロードをして頂き有難うございました。
      今年に入って、Wordpressのオリジナルテーマを作っていますので、最近は記事の更新をサボっていますが
      例えば、こんな色のベースで出来上がったスキンが欲しい等の要望がもし、ございましたら作成してみますので、
      良ければまた、覗いて頂けたら幸いです。