【Cocoon】スマホサイズの画面をデザインカスタマイズ

【Cocoon】スマホサイズで本文の幅をカスタマイズ

WordPress

2019.12.27 2019.11.22

無料WordPressテーマ「Cocoon」は有料テーマのSWELLやSANGOと違って、スマホサイズで読むときに、本文が少し広いのがデフォルトです。

※少し見づらいかもしれませんが、以下はCocoon公式サイトと当ブログY&K Studioの比較画像です。

私たちの運営しているY&K Studioの本文は、Cocoon公式サイトと比べて少し内側に入っているのがわかると思います。

これは、人の好みにも寄るところが多いとは思いますが、基本的に画面いっぱいに文字を表示するよりは少し内側に入っている方が見やすいと思う人が多い？と私は思っているので当ブログでは文字を少し内側にしております。

ということで、今回は、Cocoonユーザーの方に向けて、スマホサイズにおける本文の見栄えをカスタマイズする方法をご紹介します！

完成イメージ
カスタマイズ方法
1. STEP1 : CSSをコピー & ペースト
Cocoonカスタマイズをしています

完成イメージ

一応イメージは理解して頂けていると思うのですが、完成イメージは以下となります。

カスタマイズ方法

手順は以下の通りです。

カスタマイズ手順

STEP1
CSSをコピー & ペースト
外観 > テーマエディター > style.cssにペーストします

STEP1 : CSSをコピー & ペースト

以下のソースコードをコピーして下さい。

スマホサイズに反映する場合

@media screen and (max-width: 480px){
    .single-post .entry-content {
        padding: 0 16px;
    }
    .article h2 {
        margin: 4em -20px 2em;
    }
    .article h3 {
	margin: 3em -16px 2em;
        border-right: 0;
        border-top: 0;
        border-bottom: 0;
    }
    .article h4 {
         border-top: 0;
    }
}

ソースコードをコピーしてペーストしたら、当サイトと同じように見えると思うので、スマホサイズで確認してみてください。

また、反映したのを確認して貰ったらわかると思いますが、h2タグとh3のみ、内側に入るようにはなっておりません。これは、有料WordPressテーマSWELLのデザインを参考にさせて貰っているからです。

パソコンにも反映する場合

スマホサイズだけじゃなく、パソコンにおいても反映したい場合は以下のCSSをコピーしてください。

こちらのコードをコピーする場合は、スマホ用のコードをコピーする必要はありません。

.single-post .entry-content {
    padding: 0 16px;
}
.article h2 {
    margin: 4em -20px 2em;
}
.article h3 {
    margin: 3em -16px 2em;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}
.article h4 {
    border-top: 0;
}