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全般のカスタマイズ記事を執筆しております。

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

★無料でエンジニアに転職したい方★
東京(四ツ谷)に通える20代限定ですが、GEEKJOBは学習から転職までを無料で徹底サポート!

説明会と無料体験(1日)がありますので、「現状を変えたい方」や「エンジニア転職をしたい方」は是非、足を運んでみましょう!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
WordPress
スポンサーリンク
Y&K Studio – 二人三脚ブログ –

コメント

  1. 「ちくわブログ」というサイトを運営しているものでございます。
    まだ運用歴半年の初心者なので、スマホでの表示をもっと見やすくできないかと
    探していたところ素晴らしい記事に出会えました。
    ありがとうございます!

    ただ、1点だけお聞きしたいのですが、こちらのCSSをコピーするとH3の見出しの線が消えてしまいました。

    H3の見出し線を消さずに縮小する方法はありますでしょうか?
    もしありましたら、お手数をおかけ致しますがご教授願えればと思います。
    宜しくお願い致します。

    • コメントありがとうございます!

      H3の見出しを消さずに縮小する方法は.article h3 {…}と書いてある部分を消して頂ければ、期待されている結果が表示されます。

タイトルとURLをコピーしました