よくカスタマイズする項目のCSSコードの名称【Cocoon】

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

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

スポンサーリンク

子テーマを使う理由

Cocoonのカスタマイズはずっと追加CSSを使っていましたが、かなりコード数が多くなってきたので編集・管理が困難になってきました。

なぜ追加CSSを使っていたかというと、子テーマの編集画面に進むと「えっ?追加CSS知らないの?」の様なメッセージが表示されるからです。そこまで言うなら使った方が良いのかなと思いまして。。

追加CSS知らないの?

追加CSS活用方法

追加CSSは手軽にカスタマイズのテストができるというメリットがあるので、テスト用と完成用で保存場所を分けた方が良いのかなと思いました。

利用方法

  • 追加CSS:カスタマイズTEST用(一時利用)
  • 子テーマ:完成したコードの保存用

スタイルシート(style.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 h2{
  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;
}

Comment

タイトルとURLをコピーしました