
こんにちは、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を、見ていただいています。
パソコンでブログの更新しているので、スマホからの見え方をつい忘れてしまうことがあります…!。
みゆ
「ほとんどの方がスマホからみている」ということを忘れず、よりよいブログを作っていきたいと思いました!
最後まで読んでいただき、ありがとうございました!