【JIN】スマホでブログを見た時、文章の左右に余白をつけるカスタマイズ。【コピペでOK】

こんにちは、JINユーザーのみゆです！

JIN公式コミュニティ「BLOG CAMP」にて、秋のフィードバック会とよばれるイベントがはじまりました。

そこに記事を投稿したところ、「スマホで読んだ時に文章の左右にスペースがあるので、見やすい」とのありがたいコメントをいただきました！！

この記事では、スマホでブログを見た時に、文章の左右に余白をつけるカスタマイズをご紹介します。

みゆ

コピペでOKなので、初心者の方でもかんたんにカスタマイズできると思います！

イメージはこんな感じ
カスタマイズコードはこちら！（コピペOK）
「追加CSS」にCSSを入力する方法
まとめ

イメージはこんな感じ

↓ ↓ ↓

カスタマイズコードはこちら！（コピペOK）

結論からいうと、下記のコードを丸ごとコピーして追加CSSに入力すればOKです。

/* 記事の両脇に余白をつける ここから / 
 @media (max-width: 767px) { 
  .cps-post-main p { 
   padding-left: 1em;
   padding-right: 1em; 
  }
 }  
/ 記事の両脇に余白をつける ここまで */

追加CSSに入力する方法がわからない…！という方は今から画像つきで説明するので安心してください！

「追加CSS」にCSSを入力する方法

①WordPress管理画面の「外観 > カスタマイズ > 追加CSS」を開く

まずWordPress管理画面を開いて、「外観→カスタマイズ→追加CSS」の順に選択。
追加CSSは1番下にあるので、わかりやすいかと思います！

②追加CSSにコピーしたコードを貼り付ける

追加CSSに下記のコードを丸ごとコピーして貼り付ける。

/* 記事の両脇に余白をつける ここから */ 
 @media (max-width: 767px) { 
  .cps-post-main p { 
   padding-left: 1em;
   padding-right: 1em; 
  }
 }  
/* 記事の両脇に余白をつける ここまで */

こんな感じで追加CSSに貼ってください！