【CSS】WordPressテーマCocoonで当サイトが使っているCSS

Cocoonの設定画面で設定できる項目のCSSは削除した方が良いかと(私はあまり整理していません…)

◆当サイトで使っているCSSと記述場所
◆【CSS】WordPressテーマLuxeritas

見出し

/*見出し*/
.article h1 {
font-weight: 400;
font-size:30px;
padding: 0px 0px 10px 10px;
line-height: 1.3;
}
.article h2 {
font-size:30px;
padding: 30px 10px 30px 10px;
margin: 130px 0px 35px 0px;
background-color: #F5DA81;
}
.article h3 {
font-size:25px;
padding:25px 5px 25px 10px;
margin: 30px 0px 30px 0px;
color: #494949;
background: #f4f4f4;
border-left: solid 7px #FE9A2E;
border-bottom: solid 2px #d7d7d7;
}
.article h4 {
font-size:28px;
padding: 20px 30px 20px 20px;
margin: 70px 0px 15px 0px;
border-left: 6px single #000;
background: #f4f4f4;
}

リンク

色を変更。

a{color:#0044CC;}

下線を消す。

a{text-decoration:none;}

ポインタした時だけ下線を表示(下線を消している時のみ有効)。

a:hover {text-decoration: underline; color:#808080;}

吹き出し

/*cocoon吹き出し*/
.speech-wrap {
font-size: 18px;
}
@media screen and (max-width: 768px) {
.speech-wrap {
font-size: 17px;
}}
@media screen and (max-width: 480px) {
.speech-wrap {
font-size: 16px;
}}

テーマをCocoonからLuxeritasに変更したので吹き出しをパクり自作

エントリーカード

/*cocoonエントリーカードタイトル*/
.entry-card-title{ 
font-weight:normal; 
color:#333333; 
font-size:20px; 
text-align:left;
}
/*cocoonエントリーカードカテゴリ非表示*/
.entry-card .cat-label{display: none;}

カテゴリー

/*cocoonカテゴリー*/
.cat-link {
background-color: #FFF;
border: 2px solid #333;
font-size:80%;
color: #222;
}

タグ

/*cocoonタグ*/
.tag-link {
background-color: #FFF;
border: 2px solid #333;
font-size:80%;
color: #222;
}

ブログカード

/*ブログカード*/
.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #CCCCCC !important;
}
a.blogcard-wrap:hover{
background-color: transparent!important;
opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
transform: scale(1.1);
transition: .3s;
}
.blogcard-thumbnail {
line-height: 0;
margin-right: 1rem;
overflow: hidden;
}
.blogcard-title{
margin-bottom: .5rem;
}
.blogcard-snipet{
display: none;
}

「もっと見る」を付ける。

/*ブログカードもっと見る*/
.internal-blogcard:after,.external-blogcard:after{
font-family: "FontAwesome";
content: "もっと見る";
font-weight: bold;
font-size: .9em;
color: #f4f4f4;
padding: 0.5em;
border-radius: 4px;
width: 40%;
background-color: #777777;
margin-left: auto;
text-align: center;
display: block;
margin-top: 0em;
margin-bottom: 0.5em;
}

モバイルでは抜粋を非表示。

/*モバイルブログカード抜粋非表示*/
@media screen and (max-width: 480px){
.blogcard-thumbnail{
width: 40%;
}
.blogcard-snipet{
display: none;
}}

サイドバー

/*cocoonサイドバーカテゴリ行間*/
.widget_categories ul li a{
line-height: 1.3;
}
/*cocoonサイドバーカテゴリ文字サイズ*/
.widget_categories ul li a{
font-size: 15px;
}
/*モバイルでサイドバーを非表示*/
@media screen and (max-width: 480px){
#sidebar {
display: none;
}}

カルーセル

/*下のドット非表示*/
.slick-dots li {
display: none;
}
/*モバイルカテゴリ非表示*/ 
.carousel 
.cat-label { 
display: none; 
} 
@media screen and
 (max-width: 480px){
.carousel{
display: none;
} }

フロントページ

簡単!固定ページでフロントページを作成しました【WordPress@Cocoon】

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