スマホ閲覧時のヘッダー画像変更
子テーマ（外観→テーマエディタ→Cocoon Child→スタイルシート）に以下CSSを書き込むことによりスマホ閲覧時のヘッダー画像を変更することができます。高さの変更は、ダッシュボードの「Cocoon設定」のヘッダー→高さ（モバイル）で指定して下さい。今回は、文字サイズも変更しています。太字にしたい場合は、font-weight: 600;を追加してください。
【CSS】
/*———————————
トップページ（スマホ用画像）
——————————–*/
@media screen and (max-width:767px) {
.header {
background-image: url(“https://mugen.minibird.jp/wp3/wp-content/uploads/2020/06/top-img2b.jpg“);
}
#header .site-name-text {
font-size: 25px !important;
}
}
/*———————————
トップページ（タブレット用画像）
———————————*/
@media screen and (min-width: 768px) and (max-device-width: 1024px) {
.header {
background-image: url(“https://mugen.minibird.jp/wp3/wp-content/uploads/2020/06/stockfoto_5645378_S.jpg“);
}
#header .site-name-text {
font-size: 28px !important;
}
}
カテゴリーページのタイトル文字を小さく
※ 子テーマに以下CSSを張り付ける
/*———————————
スマホ閲覧時、カテゴリーページの文字サイズ変更
——————————–*/
@media screen and (max-width:767px) {
.archive-title {
font-size: 22px !important;
}
}
記事一覧をフェードインさせる
※ 子テーマに以下CSSを張り付ける
/*———————————
記事一覧ぼかしフェードイン
———————————*/
a.entry-card-wrap figure.entry-card-thumb{
overflow: hidden;
}
a.entry-card-wrap:hover img.entry-card-thumb-image{
-webkit-filter: blur(2px) brightness(60%);
filter: blur(2px) brightness(60%);
-webkit-transform: scale(1.03);
transform: scale(1.03);
opacity: 1;
transition: 0.3s;
}
a.entry-card-wrap figure.entry-card-thumb::before{
z-index: 1;
font-family: sans-serif;
font-weight: bold;
content: “READ MORE”;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
font-size: 100%;
width: 100%;
height: 100%;
color: #fff;
top: 0;
left: 0;
opacity: 0;
transition: .25s ease;
-webkit-transition: .4s ease;
-moz-transition: .4s ease;
-ms-transition: .4s ease;
}
a.entry-card-wrap:hover figure.entry-card-thumb::before{
opacity: 0.9;
font-size: 150%;
}
.entry-card-snippet{
font-size: 90%;
line-height: 1.5;
text-align: justify;
text-justify: inter-ideograph;
}
サイドバーの見出し色変更
※ 子テーマに以下CSSを張り付ける
/*———————————
サイドバーの見出し色変更
———————————*/
.sidebar h3 {
background-color: #f3f3f3 !important;
padding-left : 0.7em;
}
目次のカスタマイズ
※ 子テーマに以下CSSを張り付ける（見出し2と3のみ）
/*———————————
目次カスタマイズ
——————————–*/
.toc{
display: block;
padding: 0px;
}
.toc-title{
position: relative;
padding: 10px 0px;
background: #067743;/**背景色**/
color: #fff;
font-weight: bold;
}
.toc .toc-content{
padding: 5px 35px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}
.toc-list > li li ::before {
content: ”;
width: 5px;
height: 5px;
display: inline-block;
left: -7px;/**左の位置**/
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
.article .toc-list > li li {
list-style: none;
}
/* 目次のアイコン設定 */
.toc-title:before {
top: 0;
left: -45px;
width: 50px;
height: 50px;
font-family:“Font Awesome 5 Free”;
content : “\f03a”; /*アイコンを変える場合はここを変更 */
font-size:20px;
margin-right:5px;
color:#FFF; /*アイコンの色を変える場合はここを変更 */
}
数字付きリストの作り方
- ここにテキストを入力
- ここにテキストを入力
- ここにテキストを入力
【HTML】
<div class=”list-box-3″>
<!– ここから下にリストを貼り付ける –>
<ol class=”list-5″>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>
<!– ここから上にリストを貼り付ける –>
</div>
【CSS】
/*———————————
数字リスト
——————————–*/
.list-5{
counter-reset:number;
list-style-type: none;
padding:0;
margin:0;
}
.list-5 li {
position: relative;
margin:1em auto 1em 10px !important;
padding-left: 2em;
padding-top:0.3em
}
.list-5 li:before {
counter-increment: number;
content: counter(number);
background-color: #0e7ac4;/* 文字背景色 */
color: #fff;/*文字色*/
position: absolute;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
top:0.5em;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.list-box-3{
background: #F0FAFF;/* 背景色 */
border-radius: 0px;
max-width: 100%;
padding: 1em 0.5em;
margin:5 auto;
margin-left:0.2em;
margin-right:0.2em;
border:2px dotted;
border-color:#0e7ac4;/* 線の色 */
}
@media screen and (max-width: 768px){
.article ul, .article ol {
padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
padding-right: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
オシャレなボックスデザイン
タイトルの行をボックスの横いっぱいに広げるとより派手で目立つものになります。
さきほどのものから配色を変えて、さらに影をつけてみました。POINTの左のチェックマークはFontAwesomeのアイコンフォントで表示しています。
見出しのデザイン変更
見出し4
.article h4,
#comment-area h4,
#related-entries h4{
border: none;
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
.article h4::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: ”;
width: 20%;
height: 4px;
background-color: #69B560;
}
見出し5
見出し6
.article h6 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border: none;
padding:0px 30px 10px;
margin-top: 30px !important;
color: #69B560;/*文字色*/
}
.article h6:before {
font-family: FontAwesome;/*アイコンフォント*/
content: “\f138”;/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #69B560; /*アイコン色*/
}
プロフィールボックスをカスタマイズ
グローバルメニューのホームアイコン
サイトタイトルとキャッチフレーズの文字の大きさ
/*—————————–
サイトタイトルとキャッチフレーズの文字の大きさ（PC）
—————————–*/
/*サイトタイトル*/
.site-name-text{
font-weight: 500;
font-family: ‘Josefin Sans’sans-serif;
font-size: 32px!important;
color:#ffff;
}
/*キャッチフレーズ*/
.tagline {
font-size: 18px;
}
/*—————————–
サイトタイトルとキャッチフレーズの文字の大きさ（スマホ）
—————————–*/
@media screen and (max-width: 480px){
/*サイトタイトル*/
.site-name-text {
font-size: 28px;
}
/*キャッチフレーズ*/
.tagline {
font-size: 15px;
}
}
