ブログのデザインを変更!Simplicityの子テーマで追記したCSSを紹介

こんにちは、西松(@output_log)です。

2015年11月11日、当ブログのデザインを変更しました。

Simplicityのデフォルトテーマを使用していましたが、オリジナリティを出したいと思い変更しました。

子テーマのstyle.cssを編集することで、思い通りになりました。

Simplicityを使っていて、デザイン変更してみたいと思う方の参考になれば思い、一部紹介します。

コードも載せるので、コピペでなんとかなるはず・・・です。

※Simplicityのバージョンは 1.9.2 を使用しています

スポンサーリンク
レクタングル(大)広告

全体的なレイアウト

サイトタイトル

1122_9

#site-title a:hover{
  opacity: 0.5;
}

ヘッダーのサイトタイトルです。オンカーソルで半透明にしました。

メニュー

1122_1

#navi ul li a{
  color:#fff;
  transition: 0.2s;
  padding: 8px 24px;
}

#navi ul li a:hover{
  transition: 0.2s;	    
}

メニューそれぞれの間隔を調整。

オンカーソル時の色は徐々に変更するようにしました。

リンク文字

a:hover, #new-entries a:hover, #popular-entries a:hover,
.wpp-list a:hover, .entry-read a:hover, .entry .post-meta a:hover,
.related-entry-read a:hover, .entry a:hover,
.related-entry-title a:hover, .navigation a:hover,
#footer-widget a:hover, .article-list .entry-title a:hover {
  color: #d80067;
  transition: 0.2s;
}

リンク文字のオンカーソル時についてです。

記事一覧のレイアウト

下線の追加とレイアウト調整

1122_5

/* 記事一覧 */
#main .entry {
  padding-bottom: 30px;
}

#main .post, #main .page{
  margin-bottom:35px;
  border-bottom: 1px solid #ccc;
}

間隔を開けたいなって思ったので、下線を挿入しレイアウト調整を行いました。

記事一覧の画像

1122_3

.entry-thumb img{
  border: 2px solid #fff;
  margin: -2px;
  transition: 0.2s;
}

.entry-thumb img:hover{
  border: 2px solid #d80067;
  opacity: 0.7;
  margin: -2px;
  transition: 0.2s;
}

オンカーソル時、枠線が浮かび上がるようにしました。

画像は半透明になります。

続きを読む

1122_2

.entry-read a{
  color:#fff;
  font-size:14px;
  background-color:#d80067;
  border:2px solid #d80067;
  border-radius:2px;
  padding:5px 30px 5px 30px;
  text-decoration:none;
  transition: 0.2s;
 }

.entry-read a:hover{
  color:#fff;
  background-color:#fff;
  border:2px solid #d80067;
}

.entry-read {
  text-align: right;
}

枠線の追加、オンカーソル時の設定。

左端だったものを右端に表示するようにしました。

記事内のレイアウト

見出し H2

1122_6

.article h2{
  border-left:0 none;
  background: #950044; 
  border-color: #950044; 
  margin:0 0 15px 0;
  padding:12px 10px;
  color:#FFF;
  position:relative;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  margin-bottom:28px;
}

.article h2:before{
  content: ' ';
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  left: 14px;
  bottom: -27px;
  background: transparent;
  border-color: #950044 transparent transparent transparent ;
  border-style:solid;
  border-width:15px;
}

シェアメッセージ

.sns-share-msg{
  margin-top:48px;
}

記事の本文と間隔を開けたかったので調整しました。

サイドバー

見出し H4

1122_7

#sidebar h4 {
  font-size:20px;
  border-bottom:3px solid #cccccc;
  padding:10px 0;
}

下線を引きました。

新着記事と人気記事

1122_8

.new-entry-thumb img,
.popular-entrys img
{
  box-shadow: 0 0 0 2px #fff;
  transition: 0.2s;
}

.new-entry-thumb img:hover,
.popular-entrys img:hover
{
  box-shadow: 0 0 0 2px #d80067;
  opacity: 0.7;
  transition: 0.2s;
}

.new-entry,
.popular-entrys li
{
  padding-bottom:24px;
  border-bottom: 1px solid #ccc;
}

記事一覧の画像と同じ設定です。

合わせて下線を挿入しています。

入力フォーム

1122_0

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="search"]:focus,
input[type="url"]:focus, input[type="tel"]:focus,
textarea:focus {
  background-color: #FCEDF5;
  box-shadow: 0 0 3px #d80067;
  border:1px solid #d80067;
  outline: none;
}

文字を入力しているときの色を変更しています。

おわりに

以上になります。

自分のブログに合わせて色を変更するだけでも、使えるものがあるのではないでしょうか。

ぜひ参考にしていただければと思います!

ちなみに、2015年11月22日時点のものになりますので、今後変更する可能性は大いにあります。ご容赦ください。

では、また。

ブログのデザインを変更!Simplicityの子テーマで追記したCSSを紹介
この記事をお届けした
Output Logの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
スポンサーリンク