Cocoonカスタマイズの記録

ワードプレス

2024.01.18

記事内に広告が含まれています。

ちょっとブログの雰囲気を変える為に”美しいグレーに統一されたデザインの「grayish」スキン”に変更してみました。

Cocoonではボタン一つでスキンが変更できるので、ホントこのテーマが無料で使用できていることに毎回ビックリします。

今回は以前まで使用していたCSSを記録する為に残します。

Cocoon Child: スタイルシート (style.css)

/* 目次全体デザイン */
.toc{
background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
border:none;
display:block;
border-top:5px solid;
border-top-color:#79b3ff; /* defalt#FFC679 */
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
text-align:left;
margin: 0 20px 20px -10px;
padding-left: -20px;
font-size: 23px;
font-weight: 700;
color: #79b3ff; /* 目次の文字色を変える場合はここを変更 defalt#FFC679 */
}


/* 目次のデザインカスタマイズ */
.toc-content ol {
padding: 0 0.5em;
position: relative;
}
.toc-content ol li {
line-height: 1.5;
padding: 0.7em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
font-family: FontAwesome;
content: "\f138"; /* アイコンを変える場合はここを変更 */
position: absolute;
left : 0.5em;
color: #79b3ff; /* 色を変える場合はここを変更 defalt#ffc679 */
}
.toc-content ol li:last-of-type {
border-bottom: none;
}
.toc-content .toc-list li {
font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
font-weight:normal; /* h3以降の文字サイズを普通に */
}

.entry-content h2 {
 font-size: 24px !important;/*H2の文字のサイズ*/
border-left: 5px solid #323232;/*左線*/
padding: .5em .7em;/*余白*/
background: rgba(50,50,50,.07);/*背景色*/
color: #323232;
margin-bottom: 15px;
border-top: none;
border-bottom: none;
}


/* マウスが来たら動く */
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
}
.a-wrap:hover {
background-color: #FFFFFF;
}


/* サイドバー文字小さく */
.widget-entry-card {
font-size: 14px;
}

.nwa .author-box .author-description {
font-size: 14px;
}

.widget-sidebar ul li a {
font-size: 16px;
}

/* ボックスメニューの設定 */
.box-menu{
    background: #FFFFFF; /* 背景色 */
    box-shadow: inset 1px 1px 0 0 #F2F0EE, 1px 1px 0 0 #F2F0EE, 1px 0 0 0 #F2F0EE; /* 枠線の設定 */
}
.box-menu-label{
color: #4d4d4d; /* 文字の色 */
}
.box-menu-icon{
    color: #2f4f4f; /* アイコンの色 */
}
.wwa .box-menu {
    width: calc(100%/4); /* メニューの数 */
}
/* オンマウス時の設定 */
.box-menu:hover{
    box-shadow: none; /* 枠線を消す */
    background: #F2F0EE; /* 背景色 */
}
/* モバイル用の設定 */
@media screen and (max-width: 599px){
    .box-menus .box-menu {
	width: calc(100%/2); /* メニューの数 */
	}
    .box-menu-label{
	font-size: 12px; /* 文字サイズ */
	}
	.box-menu{
	min-height: 50px; /* 高さ */
	}
}

/*アドセンス広告幅調整*/
.ad-area {
overflow: visible;
}

目次の変更だったり、H2などの見出しのカスタマイズが中心だったと思います。

「grayish」スキンを使うとなれば不要なCSSも消さないと、へんな表示になったり不具合が発生します。

もし元に戻す時が来た時の為に・・・。

Cocoon-grayish

grayish（グレイッシュ）は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...