ブログ

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

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

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

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

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

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

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

イメージはこんな感じ

↓ ↓ ↓

カスタマイズコードはこちら!(コピペ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に貼ってください!

③公開ボタンを押す

貼り付けが終わったら右上にある「公開ボタン」を押します。
これでカスタマイズは完了です!

まとめ

これで「スマホでブログを見た時、文章の左右に余白をつける」という、カスタマイズ方法の説明は終わりです!

実は約8割の方がスマホでこのmiyublogを、見ていただいています。

パソコンでブログの更新しているので、スマホからの見え方をつい忘れてしまうことがあります…!。

みゆ
みゆ
「ほとんどの方がスマホからみている」ということを忘れず、よりよいブログを作っていきたいと思いました!

最後まで読んでいただき、ありがとうございました!