よくカスタマイズする項目のCSSサンプルコード•セレクタ名称など【WordPress•Cocoon】

サイト運営の醍醐味でもあるカスタマイズですが、変更したい箇所のセレクタ名が分からないケースが非常に多いです。※私だけかも知れませんが

当サイトで使用しているCocoon系のカスタマイズ用コードを備忘録的に追加していきます。あくまでも参考用としてご活用いただければと思います。※コピペ用ではないのでご注意ください

子テーマと追加CSSの使い分け

WordPressのカスタマイズはずっと追加CSSを使っていましたが、コードも増えてきて管理が困難になってきました。

なぜ追加CSSを使っていたかというと、子テーマの編集画面に進むとえっ？追加CSS知らないの？という煽りメッセージが表示されるからです。

↓この様なメッセージ

追加CSSの活用

現在はほぼ子テーマに集約していますが、追加CSSは手軽にカスタマイズのテストができるというメリットがあるので、テスト用として活用しています。カスタマイズが完成したらコードを子テーマに移動させる流れです。

サンプルコード集

当サイトは概ねスマホでの見え方しか考えていないので、以下に載せていないスマホ用のコードがあります。それも辺りも含め、コピペ用ではなく参考用としてご確認ください。

リスト

.list-3 {
  position: relative;
  padding: 1 0.5em;
  margin-top: 1em;
  list-style-type: none;
  border: solid 1px #29B6F6;
}
.list-3 li {
  line-height: 2.3em;
  border-bottom: 1px dashed #81D4FA;
}
.list-3 li::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F058";
  color: #81D4FA;
  font-weight: bold;
  left : 0.9em;
}
.list-3 li:last-of-type {
  border-bottom: none;
}

※このコードの適用方法はこちら

見出し

.article h1 {
  position: relative;
  color: #fff;
  background: #414141;
  line-height: 1.4;
  padding: 0.3em 0.3em 0.3em 0.5em;
  border-radius : 7px;
  font-size: 14pt;
}

※h1は「見出し1」h2は「見出し2」・・

エントリーカードとキャットラベル

.entry-card .cat-label {
  display: none;
}

サイドバータイトル

.sidebar h3 {
  line-height: 10px;
  margin-top: 30px;
  padding: 8px;
  font-weight: bold;
  font-size: 15px;
  color: #e85a70;
  background-color:transparent;
  border-bottom:solid 1px #e85a70;
}

目次

.toc {
  display: block;
  padding: 0px;
  margin-bottom: 70px;
  margin-left: 10px;
  margin-right: 10px;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #8EdAe5;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 5px;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #708090;
  margin-left: -20px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -30px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}

グローバルナビ

nav#navi, .menu-header .sub-menu {
  box-shadow:0 2px 5px -6px rgba(0,0,0,.8);
}
.menu-header .sub-menu .item-label {
  font-size: 70%;
  color: #696969;
}
.menu-header .menu-item:hover {
  border-bottom: 1px solid #ffc1e0;
  transition: all .1s ease;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .item-label:hover {
  color: #5ebaba !important;
  transition: all .2s ease;
  border-bottom: none;	
}

SNSシェアボタン

.button-caption {
  display: none;
}
.sns-share-buttons a {
  border-radius: 50%;
  margin: 5px;
}
#main .sns-share a {
  height: 28px;
  width: 28px;
  margin-bottom: 0.5em;
}
.sns-share-buttons {
  justify-content: center;
}
.social-icon {
  font-size: 15px;
}

ロゴ

.logo {
  text-align: center;
  padding-left: 10px;
  background-color: #fff;
  height: 60px;
  margin-top: 0;
  padding-top: 0px;
  margin-bottom: 5px;
}

アンダーライン

.marker-under-red {
  background: linear-gradient(transparent 80%, #ffa3a3 80%);
}
.marker-under-blue {
  background: linear-gradient(transparent 80%, #afefff 80%);
}

パンくずリスト

.breadcrumb {
  color: #b0c4de;
}

カテゴリーページのアイコン

.archive-title .fa-folder-open:before {
 content: "\f022";
}

タグページのアイコン

.archive-title .fa-tags ::before {
  content: "\f022";
}

※FontAwesomeのアイコンを非表示にする場合は{display:none;}

関連記事タイトル

.related-entry-heading {
  color: #778899;
}