Cocoonの子テーマのスタイルシート (style.css)に貼り付けてご利用ください。
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.2
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/** note 風のワンカラム*/
@media screen and (min-width: 834px){
#content {
width: 700px;
background: #ffffff;
margin:0 auto;
min-height: 100vh;
}
.content-in {
width: 700px;
}
body.no-sidebar {
background: #ffffff;
}
/* ヘッダーをすっきりさせる */
.no-sidebar .content {
margin-top: 0;
}
.no-sidebar .main {
padding: 0px 29px;
}
.no-sidebar .header-container {
background: #ffffff !IMPORTANT;
border: #e6e6e6 1px solid;
}
.no-sidebar .navi-in>ul li {
width: 120px;
}
.no-sidebar .navi-in>ul li:hover {
background: #eee;
}
.no-sidebar .navi-in .item-label {
color: #000 !IMPORTANT;
}
.no-sidebar .footer-bottom {
color: gray;
background-color: #f9f9f9;
}
.no-sidebar .widget_search {
position: relative;
top: 0px;
}
}
#main .button-caption {
display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-message{
display:none;
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: flex-end; /*中央寄せ*/
}
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
border:none;
}
.cat-link{
color:gray;
background-color:white;
border: 1px solid;
}
.cat-link:hover {
opacity: .5;
color: gray;
}
#toc{
padding: 16px;
width: 100%;
margin: 36px 0;
background-color: #f7f9f9;
justify-content: center;
margin: 0 auto;
color: #787c7b;
border: none;
text-decoration: none!important;
position:relative;
}
.toc-title{
font-weight: 700;
text-align: start;
padding:0;
margin:0;
margin-left: 24px;
}
.toc a{
color: #787c7b;
}
.toc-checkbox:checked+.toc-title::before{
font-family: FontAwesome;
content: '\f0dd';
transform: rotate(0deg);
top: 14px
left: 18px;
}
.toc-title::before {
display: inline-block;
font-family: FontAwesome;
transform: rotate(-90deg);
content: '\f0dd';
margin-right: 12px;
position: absolute;
left: 20px;
top: 13px;
}
.toc-title::after {
content: '';
}
.toc-checkbox:checked+.toc-title::after{
content: '';
}
.toc-content {
margin-left: 8px;
transition: unset;
}
/*目次の下線*/
#toc.article ul li, .article ol li{
border-top: 1px solid #e6e6e6;
}
#toc.article ul li, .article ol li:first-child{
border-top:none;
}
/*関連記事*/
.pager-post-navi {
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
flex-direction: row;
}
.pager-post-navi a {
width:50%;
}
.under-entry-content{
position:relative;
}
.pager-post-navi::after {
position: absolute;
top: 16px;
left: 50%;
display: block;
width: 1px;
height: 64px;
content: "";
background-color: #f2f2f2;
}
.article h2{
background-color:#fff;
padding:0;
}
/*カテゴリのアイコン*/
.fa-folder:before {
content: "#"!important;
}
.fa-folder-open:before {
content: "#"!important;
}
/*codeの見た目*/
.wp-block-code{
padding: 36px;
margin-top: 36px;
margin-bottom: 36px;
font-family: note monospace,SFMono-Regular,Consolas,Menlo,Courier,monospace;
line-height: 18px;
color: #fff;
white-space: pre-wrap;
background-color: #282c34;
font-size: 12px;
}
/*引用時の「"」を非表示*/
blockquote{
border: 1px solid #fff;
}
blockquote.wp-block-quote::before {
content: ""!important;
}
blockquote.wp-block-quote::after {
content: ""!important;
}
/*copy*/
.copyright{
font-size: 12px;
}
/*drop-shadow*/
.fixed-header {
box-shadow: 0 1px 3px 0 rgb(239 239 239 / 25%);
}
/*blog card*/
.blogcard{
border: #e6e6e6 solid 1px;
}
.blogcard-footer{
display: grid;
}
.blogcard-date{
font-size: small;
color: #787c7b;
}
.blogcard-snippet {
word-break: break-all;
font-size: 12px;
line-height: 1.5;
color: #787c7b;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/*834px以下*/
@media screen and (max-width: 834px){
.no-sidebar .wrap {
width: auto;
}
/*必要ならばここにコードを書く*/
#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
background-color: #fff;
}
.header-container-in.hlt-top-menu .logo-header {
max-height: none;
text-align: start;
}
.pager-post-navi::after {
height: 32px;
}
}