追加CSSを使ってCSSをカスタマイズする

追加CSSとは？

追加CSSというWordpressの標準機能で、管理画面からCSSを追記編集できます。

WordPressにはたくさんのテーマやプラグインが用意されていますが、用意されているデザインでは物足りないと、サイトのデザインをカスタムしたいときに役立ちます。

追加CSSを設定する

1. WordPress管理画面に移動する
2. 外観>カスタマイズ>追加CSSに追記編集したいCSSを記述する
3. 公開ボタンを押下すると設定完了

おすすめ追加CSS

Cacoonテーマ&SILKスキンをさらにカスタマイズする、おすすめの追加CSS文をご紹介します。

プロフィール背景色の変更

.author-box{
  background-color: #585B5C;
}

目次背景色の変更

.toc{
 background-color: #585B5C;
}

h2見出しナンバリングしない

.entry-content h2 > span::before{
 content: none;
}

h2見出しリセット

.article h2{
 background:none;
 border-bottom:none;
 padding: 0;
}
.article h2 span::after{
 background: transparent;
}

h2見出し装飾

.article h2{
 position: relative;
 background: #ffd98a;
 padding: 2px 5px 2px 25px;
 font-size: 20px;
 color: #474747;
 border-radius: 0 10px 10px 0;
}
.article h2:before {
 font-family: FontAwesome;
 content: "\f1b0";
 display: inline-block;
 line-height: 40px;
 position: absolute;
 padding: 0em;
 color: white;
 background: #ffa337;
 font-weight: 900;
 width: 40px;
 text-align: center;
 height: 40px;
 line-height: 40px;
 left: -1.35em;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 border: solid 3px white; 
 border-radius: 50%;
}