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



当サイトで使っているCSSと記述場所
LuxeritasをCSSでカスタマイズ

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

サイトタイトル

クラス名

#header .site-name-text

モバイルのみ文字サイズを大きくしました。

/*サイトタイトル文字大きく*/
@media screen and (max-width:1023px){
#header .site-name-text {
font-size:32px;
}
}

見出し

クラス名。

.article

当サイトではこんな風に設定しています。

/*見出し*/
.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;
}

目次

クラス名。

.toc

モバイルのみ幅を90%の中央寄せにして、文字の大きさは少し小さく、間隔もやや狭くしてあります。

@media screen and (max-width:480px){
.toc{
font-size:90%;
line-height:1.5;
width:90%;
margin-left:auto;
margin-right:auto;
}
}

※目次タイトルのクラス名は「.toc-title」、目次リストは「.toc-list」

リンク

色を変更。

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:834px) {
.speech-wrap {
font-size: 17px;
}
}

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

エントリーカード

文字の太さを標準にして色やサイズを変更し、左寄せにしました。

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

ページ送りナビ

クラス名。

.pager-post-navi

画像(アイキャッチ)を非表示(文字通り画像だけが消えるので見た目はあまり)

.pager-post-navi img{
display: none;
}

モバイルでページ送りナビ非表示(パソコンでは表示される)

@media screen and (max-width:480px){
.pager-post-navi{
display: none;}
}

メニューグローバルナビ

【WP】メニューグローバルナビの作成方法とカスタマイズ

カテゴリー

/*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;
}

インデックスリストのカテゴリーとタグ

カテゴリーを開くと1番上に表示される見出し。

クラス名

.archive-title

表示を消したい場合。

.archive-title{
display:none;
}

アイコンを消したい場合。

.archive-title :before{
display:none;
}

フォントのサイズ変更・太さは標準・左に余白を指定してみました。

.archive-title {
font-size:1.8rem;
font-weight:normal;
margin-left:20px;
}

カテゴリとタグのアイコンを消す

.entry-categories .fa-folder:before {
display:none;
}
.entry-tags .fa-tag:before {
display:none;
}

ブログカード

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

/*ブログカードもっと見る*/
.external-blogcard:after,
.internal-blogcard:after{
content:"もっと見る";
font-weight:500;
font-size:1.4rem;
color:#f4f4f4;
padding:3px;
width:40%;
background-color:#777;
margin-left:auto;
text-align:center;
display:block;
margin-top:0;
margin-bottom:5px;
}

モバイルで抜粋非表示。

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

幅を変える。

.blogcard-wrap{width:70%;}

マウスを当てたときに透過。

.blogcard-wrap:hover{background:transparent;opacity:0.7;}

タイトルの文字の太さとサイズを変更。

.blogcard-title{font-weight:500;font-size:95%;}

サムネイルの幅を変更。

.blogcard-thumbnail{width:30%;}

サイドバー

/*cocoonサイドバーカテゴリ行間*/
.widget_categories ul li a{
line-height: 1.3;
}
/*cocoonサイドバーカテゴリ文字サイズ*/
.widget_categories ul li a{
font-size:1rem;
}
/*cocoonサイドバーリンク文字の大きさや色*/
.widget a{
background-color:#FFF;
color:#313131;
font-size:1rem;
}
/*モバイルでサイドバーを非表示*/
@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;
}
}

投稿者非表示

/*投稿者名非表示*/
.author-info {
display:none;
}

フロントページ

簡単!Cocoon固定ページでフロントページを作成 その1
Cocoon固定ページでフロントページを作成 その2