【コピペでできる！】「simplicity」に行った10のCSSカスタマイズ

こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

本記事では、ワードプレスのテーマ「simplicity2」へ最初に加えたCSSカスタマイズをまとめました。

これからsimplicityをつかってCSSのカスタマイズをしようとしている方の参考になれば幸いです。

はじめに
CSSの紹介
これがh2

はじめに

ワードプレスのテーマ「simplicity」へCSSなどでカスタマイズをする際は、公式からも発表がありますが親テーマと子テーマをインストールし、子テーマを有効化しCSSのカスタマイズをおこなってください。親ページを有効化し、CSSの編集を行なってしまうと親テーマのアップデート時にせっかくのカスタマイズが全て消えてしまいます。

simplicityの子テーマを有効化

参考Simplicity2の子テーマ

CSSの編集は、「外観 >> テーマの編集 >> スタイルシート (style.css)」へ！！

CSSの紹介

ではさっそくコピペでできる！！ simplicityのCSSカスタマイズを紹介していきます。

記事と記事の間に境界線

記事と記事の間に線を引く

記事と記事の間にドットの線を引きます。これによって記事と記事が間が強調されバランスが取れた記事一覧にすることができます。

dottedをsolidなど自由に変えることでお好みの線を引くことができます。

#main .entry {
 border-bottom: 1px dotted #999;
 padding-bottom: 18px;
 margin-bottom: 18px;
}

#main .entry {

border-bottom: 1px dotted #999;

padding-bottom: 18px;

margin-bottom: 18px;

}

カテゴリーに背景色

カテゴリに背景色

カテゴリに背景色をつけることでおしゃれに記事のカテゴリを強調することができます！

よりおしゃれに、上級編は以下のリンクへ！！

LINK【コピペでできる！】simplicity記事カテゴリに背景色をつけてみた

.post-meta .category a{
background-color:#FFE1E1;
border-radius:6px;
padding:1px 5px;
}

.post-meta .category a{

background-color:#FFE1E1;

border-radius:6px;

padding:1px 5px;

}

記事の続きを読むボタン

「続きを読む」ボタンのアレンジ

色はお好みで変えてください。

今回のコードはカーソルがホバーしたときは背景色が白色になりテキストが赤色になります。

.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#FA5858;
 border:1px solid #FA5858;
 border-radius:2px;
 padding:3px 5px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#FA5858!important;
 background-color:#fff;
 border:1px solid #fff;
}

.entry-read a{

color:#fff;

font-size:14px;

background-color:#FA5858;

border:1px solid #FA5858;

border-radius:2px;

padding:3px 5px 3px 5px;

text-decoration:none;

}

.entry-read a:hover{

color:#FA5858!important;

background-color:#fff;

border:1px solid #fff;

}

記事のタイトルにドット柄の線を引く

記事のタイトルに線を引く

記事のタイトルの下に線を引くことでタイトルを強調します！

.article h1{
border-bottom: 3px dotted #444;
    padding-bottom: 7px;
}

.article h1{

border-bottom: 3px dotted #444;

padding-bottom: 7px;

}

記事のh2,h3,h4タグの見出し

これがh2

これがh3

これがh4

こんな見出しにしました！

.article h2 {
  position: relative;
  padding: .5em .75em;
  background-color: #FFE1E1;
  border-radius: 6px;
        border-left:none !important;
        margin:20px 0px 20px 0px;
}
.article h2::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #FFE1E1;
}


.article h3 {
  position: relative;
  padding-bottom: .5em;
}
.article h3::before,
.article h3::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  height: 8px;
}

.article h3::after {
  width: 100%;
  background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
  background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

.article h4{
    margin-bottom: 18px;
    background-color: #D7E8FF;
    border-radius: 6px;
    letter-spacing: 1px;
    padding:10px;
    border-bottom:none !important;
}

.article h2 {

position: relative;

padding: .5em .75em;

background-color: #FFE1E1;

border-radius: 6px;

border-left:none !important;

margin:20px 0px 20px 0px;

}

.article h2::after {

position: absolute;

top: 100%;

left: 30px;

content: '';

width: 0;

height: 0;

border: 10px solid transparent;

border-top: 15px solid #FFE1E1;

}

.article h3 {

position: relative;

padding-bottom: .5em;

}

.article h3::before,

.article h3::after {

position: absolute;

bottom: -4px;

left: 0;

content: '';

height: 8px;

}

.article h3::after {

width: 100%;

background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);

background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);

}

.article h4{

margin-bottom: 18px;

background-color: #D7E8FF;

border-radius: 6px;

letter-spacing: 1px;

padding:10px;

border-bottom:none !important;

}

グローバルナビメニューの中央寄せ

simplicityのグローバルナビメニューを中央に寄せる

パソコンでみたときのグローバルナビメニューを中央に寄せます。

simplicityをつくったわいひらさんにお褒めの言葉をいただいたCSSになります！

LINK【コピペでできる！】simplicityグローバルナビメニューの中央寄せ

#navi-in{
    display: flex;
    justify-content: center;
}

#navi-in{

display: flex;

justify-content: center;

}

bodyとsidebarの枠線を消す

simplicityのbodyとsidebarの枠線を消します。

#main,#sidebar{
 border:none !important;
}

#main,#sidebar{

border:none !important;

}

引用などに使えるボックス

このようにボックスを生成します！！
やほやほこんな感じです！！

引用や、強調、まとめなどさまざまな用途で使えます！！

※CSSのクラスは独自で指定してください。

.css-class{
    height: auto;
    padding: 15px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

.css-class{

height: auto;

padding: 15px 20px;

margin-top: 30px;

margin-bottom: 20px;

background-color: #f2f2f2;

box-shadow: 0 0 4px rgba(0,0,0,0.6);

}

色付きミニ強調ボックス

これ

ぼくは「LINK」を貼り付けるときに使ったりしています。多様な用途で使うことができます！

※CSSのクラスは独自で指定してください。

.css-class{
    padding: 3px 6px;
    margin-right: 8px;
    margin-left: 1px;
    font-size: 75%;
    color: white;
    background-color: #58ACFA;
    border-radius: 6px;
    box-shadow: 0 0 3px #ddd;
    white-space: nowrap;
}

.css-class{

padding: 3px 6px;

margin-right: 8px;

margin-left: 1px;

font-size: 75%;

color: white;

background-color: #58ACFA;

border-radius: 6px;

box-shadow: 0 0 3px #ddd;

white-space: nowrap;

}

まとめ

いかがでしたでしょうか。

すべて基本的には「コピペ！！」で、実装できるので”simplicity”を使いはじめのユーザーのみなさんの参考になれば幸いです。

一応、2017.5.10現在、実装しているデザイン一覧です。

そのほかにもいろいろ仕掛けているので気になる部分は聞いていただければな〜と思います。

ではでは〜〜

sakurabaaa_g

この記事を書いた人。
20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。
書きたいことを気ままに書いてます！
Python、プログラミング、米株、カメラ、野球観戦がすき。趣味は新宿散策。