Cocoonカスタマイズ まとめ記事公開中

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

WordPress

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

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

Cocoon 公式サイト
Y&K Studio – 二人三脚ブログ –

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

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

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

スポンサーリンク

完成イメージ

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

Y&K Studio - 二人三脚ブログ -
Y&K Studio – 二人三脚ブログ –
スポンサーリンク

カスタマイズ方法

手順は以下の通りです。

カスタマイズ手順

  • 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;
}
スポンサーリンク

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

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

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

コメント