当サイトで使っている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】メニューグローバルナビの作成方法とカスタマイズ
zbnr-hp.com
カテゴリー
/*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;
}