WordPressテーマ「simplicity2」用にクリアなスキン「木漏れ日」を作成してみました

私の大好きなWordPressで超人気のテーマ、Simplicity2のスキンを作成しました。

木漏れ日ってことで、たいしたことはしてないんですが、優しい日が差したクリアな美容系っぽいスキンに仕上げました。使って頂けたら幸いです。

 

目次 ▼

スポンサーリンク

カスタマイズ箇所の紹介

一覧ページ

あまり変更はしてないんですが、まず背景の画像が綺麗だったので、カバーしています。

メイン部分を薄いピンクを半透明化、同じくサイドバーの見出しにも半透明の薄いピンクをかけております。メタボックスの背景にも黒い透かしをて入れているのが分かると思います。

モアリンク「記事を読む」部分のボタン化して右寄せ、ぐらいですかね、、

投稿ページ

一覧ページとデザイン自体に変わりはないです。

あんまりゴチャゴチャしない方がスッキリして綺麗かなと思います。

見出しの変更

見出しを全体に合うように少し変えております。

変更したのはh2~h4の部分です以下の画像のようになるはずです。

その他

その他っていうほどのこともないんですが、トップへ戻るボタンの色の変更とフッターを黒のカラーを透かせております。

デザイン全部が気に入って頂けたらいいのですが、一応変更箇所のソースコードを載せておきますので、お好みに色を変えてみたりして下さい。

/*背景部分 imagesフォルダの画像を使ってます*/
body{
 background-image: url(./images/body.jpg) ;
 background-size: cover;
 background-attachment: fixed;
}
/*ナビ部分*/
#navi, #navi ul {
 background-color: rgba(255, 238, 238, 0.35);
}
#navi ul.sub-menu {
 background: #f7f7f7;
}

#navi ul li a:hover {
 background-color: rgba(0, 195, 0, 0.13);
}
/*メインカラム部分*/
#main {
 background-color: rgba(255, 238, 238, 0.7);
}
/*メタ部分*/
.post-meta {
 background-color: rgba(17, 17, 17, 0.09);
}
/*モアリンク部分*/
.entry-read {
 text-align: right;
}
.entry-read a {
 border: solid 1px #ddd;
 background: rgba(135, 189, 51, 0.34);
 text-decoration: none;
 padding: 2px 20px;
 border-radius: 6px
}
/*見出し部分*/
.article h2 {
 background: rgba(0, 195, 0, 0.29);
 color: teal;
}
.article h3 {
 margin-left: -30px;
 padding: 10px 25px;
 border-left: 5px solid rgb(166, 226, 156);
 border-bottom: none;
}
.article h4 {
 border-bottom: 5px dashed #99e1a1;
}
/*サイドバー見出し部分*/
#sidebar h3 {
 color: #444;
 padding: 3px 0;
 border-left: 3px solid #87bd33;
 text-align: center;
 background: rgba(255, 238, 238, 0.57);
}
/*トップへ戻るボタン*/
#page-top a {
 background: rgba(135, 189, 51, 0.71);
}
/*フッター*/
#footer {
 background-color: rgba(17, 17, 17, 0.55);
}

 

ダウンロード

ダウンロードはこちらからどうぞ。

木漏れ日のダウンロード

優しい日が差したクリアな美容系っぽいスキンに仕上げました。

良かったら使ってみてください。

 

スキンのアップ方法

  1. 木漏れ日をダウンロードして解凍してください。
  2. アップ先は/wp-content/themes/simplicity2/skins/ の中にフォルダごとアップロードして下さい。
    子テーマでの使用は /wp-content/themes/simplicity2-child/skins/ になりますのでご注意ください。
  3. ダッシュボード > 外観 > カスタマイズ > スキンの項目に木漏れ日が表示されていればOKです。

わからない場合などはコメント頂けましたら直ぐに対応致します。

Simplicityのテーマや子テーマはSimplicityから

 

The following two tabs change content below.

けんじ

どうも、運営者のけんじです。 Wordpressが好きで、テーマをちょこちょこ弄ってます。 気になった事をリサーチして書くことが多いので、主に雑記ブログだと思ってください。 こんなブログですがどうぞ、よろしくお願いします。

スポンサーリンク

スポンサーリンク

フォローして最新情報を受け取る

コメントはこちらからどうぞ

メールアドレスが公開されることはありません。

お手数ですが* が付いている欄は必須項目になります。

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)