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

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

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

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

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

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

完成イメージ

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

カスタマイズ方法

手順は以下の通りです。

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

Cocoonカスタマイズをしています

当ブログでは、Cocoonのカスタマイズ記事やWordPress全般のカスタマイズ記事を執筆しております。

良かったら他の記事もご覧ください！

WordPress

「WordPress」の記事一覧です。

y-k-studio.com