簡単にコピペ！！わたしがSimplicityで行ったCSSカスタマイズ10選をご紹介

ブログのデザインについても早く記事を書きたいと思っていたのですが、なかなか時間がなく放置してしまっていました。すみません。

今回は私が使っているWordPressのテーマ（デザイン）「Simplicity」で行ったCSSカスタマイズをご紹介します。

簡単にコピペできるようにしていますので、気になる方は使ってみてください。

※2017年8月時点でのカスタマイズなので変更していく可能性がありますのでご了承下さい。
※2020年5月にcocoonにテーマを変更しました。

この記事の目次

1 まず初めに
2 見出し
3 サイドバーのフォントサイズ
4 グローバルナビを中央揃え
5 トップページの記事の間に線を入れる
6 メインとサイドバーの枠線を消す
7 メタ情報の変更
8 「記事を読む」の編集
9 サムネイル画像にエフェクトをかける
10 タグクラウドのデザイン変更
11 フォントの変更
12 カスタマイズのやりすぎも注意

まず初めに

WordPress初期設定の記事でも紹介しましたが、Simplicityのテーマをダウンロードするときに子テーマのダウンロードを推奨しました。

今回はこの子テーマに全てCSSを記述しますので、お間違いのないように。
子テーマの必要性は下記のページで確認ください。

Simplicity2の子テーマ

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

見出し

見出しとはこのことです。

記事を書く上で見出しはとても重要です。
ググれば沢山でてきますのでカッコイイものを選んでくださいね。
私のサイトはテーマカラーを決めているので合わせた見出し色にしています。
この辺りは調整ください。

/* h2の装飾 */
.article h2 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3498db;
}
.article h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

/* h2の装飾 */

.article h2 {

position: relative;

padding: .25em 0 .5em .75em;

border-left: 6px solid #3498db;

}

.article h2::after {

position: absolute;

left: 0;

bottom: 0;

content: '';

width: 100%;

height: 0;

border-bottom: 1px solid #ccc;

}

/* h4の装飾 */
.article h4 {
	padding: .5em .75em;
	background-color: #3498db;
	color:#fff;
	border-bottom:0px;
    border-radius: 6px;
}

/* h4の装飾 */

.article h4 {

padding: .5em .75em;

background-color: #3498db;

color:#fff;

border-bottom:0px;

border-radius: 6px;

}

サイドバーのフォントサイズ

PCページの右横にあるサイドバーのフォントサイズを小さくしました。
フォントサイズは14pxです。

/* サイドバーのフォントサイズ */
#sidebar a{ font-size:14px; }

1 2	/* サイドバーのフォントサイズ */ #sidebar a{ font-size:14px; }

グローバルナビを中央揃え

グローバルナビとはヘッダーの部分にあるナビゲーションです。
これを中央に揃えました。

/* グローバルナビ　中央揃え */
#navi-in{
    display: flex;
    justify-content: center;
}

/* グローバルナビ　中央揃え */

#navi-in{

display: flex;

justify-content: center;

}

トップページの記事の間に線を入れる

何気ないですが、サイトのバランスがかなり良くなるのでオススメです。

/* トップ記事一覧の間に線を入れる　*/
#main .entry {
border-bottom: 1px dotted #ccc;
padding-bottom: 15px;
}

/* トップ記事一覧の間に線を入れる　*/

#main .entry {

border-bottom: 1px dotted #ccc;

padding-bottom: 15px;

}

メインとサイドバーの枠線を消す

デフォルトだとメインとサイドバーに枠線が入っていましたが、これを消しました。

/* メインとサイドバーの間の枠線を消す */
#main,#sidebar{
 border:none !important;
}

/* メインとサイドバーの間の枠線を消す */

#main,#sidebar{

border:none !important;

}

メタ情報の変更

メタ情報とは下の赤枠です。
この大きさを調整して、場所を移動させました。

/* メタ情報の大きさを変更し、右側へ*/
.post-meta,.entry .post-meta a  {
    font-size: 12px;
    line-height: 160%;
}

/* メタ情報の大きさを変更し、右側へ*/

.post-meta,.entry .post-meta a {

font-size: 12px;

line-height: 160%;

}

「記事を読む」の編集

私で言うとトップページの「Read more」の部分です。
これを右に揃えてデザインをカスタマイズしています。
こちらも色などは調整してみて下さい。

文言を変更するのはメニューから
外観→カスタマイズ→テーマ内テキスト→「記事を読む」の変更で変えることができます。

/* 記事を読むの編集　*/
.entry-read a{
  color:#fff;
  font-size:12px;
  background-color:#3498db;
  border:1px solid #3498db;
  border-radius:2px;
  padding:3px 10px 3px 5px;
  text-decoration:none;
  float: right;
}
 
.entry-read a:hover{
  color:#fff;
  background-color:#386183;
  border:1px solid #386183;
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  transition:all 0.3s;
}
 
.entry-read a::before{
 margin-right:5px;
 font-family:"FontAwesome";
 content:"\f058";
}

/* 記事を読むの編集　*/

.entry-read a{

color:#fff;

font-size:12px;

background-color:#3498db;

border:1px solid #3498db;

border-radius:2px;

padding:3px 10px 3px 5px;

text-decoration:none;

float: right;

}

.entry-read a:hover{

color:#fff;

background-color:#386183;

border:1px solid #386183;

-webkit-transition:all 0.3s;

-moz-transition:all 0.3s;

transition:all 0.3s;

}

.entry-read a::before{

margin-right:5px;

font-family:"FontAwesome";

content:"\f058";

}

サムネイル画像にエフェクトをかける

サムネイル画像にマウスオーバーすると拡大するエフェクトをかけています。

/* サムネイル画像にエフェクト */
.entry-thumb,.wpp-thumbnail{
  overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
  transition: 0.6s ;
}
 
.entry-thumb img:hover,.wpp-thumbnail:hover {
   opacity: 0.6;
   -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

/* サムネイル画像にエフェクト */

.entry-thumb,.wpp-thumbnail{

overflow: hidden;

}

.entry-thumb img,.wpp-thumbnail img{

transition: 0.6s ;

}

.entry-thumb img:hover,.wpp-thumbnail:hover {

opacity: 0.6;

-moz-transform: scale(1.1,1.1);

-webkit-transform: scale(1.1,1.1);

-o-transform: scale(1.1,1.1);

-ms-transform: scale(1.1,1.1);

}

タグクラウドのデザイン変更

タグクラウドのデザインをシンプルなものに変更しました。

/* タグクラウドのデザイン変更　*/
.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    color: #666;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    background: #FFF;
}

.tagcloud a:hover {
    transition: 0.3s;
    background: #EFEFEF;
}

/* タグクラウドのデザイン変更　*/

.tagcloud a {

display: inline-block;

margin-bottom: 5px;

padding: 6px 12px;

color: #666;

text-decoration: none;

border-radius: 2px;

border: 1px solid #e6e6e6;

background: #FFF;

}

.tagcloud a:hover {

transition: 0.3s;

background: #EFEFEF;

}

フォントの変更

フォントなのですが、私はWebフォントを使用しているので導入までにちょっとした手順があります。
これもまた時間があるときに書きたいと思いますね！！
なので、割と使っている方が多い、游ゴシックを入れる場合を記載しておきます。

/* フォント游ゴシックを入れる　*/
body {
font-family : YuGothic, ‘游ゴシック’, sans-serif;
}

/* フォント游ゴシックを入れる　*/

body {

font-family : YuGothic, ‘游ゴシック’, sans-serif;

}

カスタマイズのやりすぎも注意

カスタマイズってハマると楽しいのですが、やりすぎると逆にデザインがごちゃごちゃしてしまうので、個人的にはちょっと注意した方がいいと思います。

全体のバランスを見て少しずつ調整していく方がサイトが綺麗に作れるのではないかと思います。