Cocoonで携帯画面右側にできる余白を消したい！原因はWord Balloonの吹き出し!?

ケイタ君

Cocoonで携帯画面右側にできる余白が消せなくて困っている人
✅パソコン上は大丈夫なのに、携帯で見ると、自分の記事の右側に余白が出てしまうんだ。
✅画面が右側に無駄にスクロールされてしまうから、余白が邪魔で仕方ないよ。
✅でも、調べても余白の消し方が分からなくて、困ってるよ。
✅CSSいじくるとか、初心者の自分にはムリ。もっと簡単な解決法ないかな。

その原因はWord Balloonの吹き出しかもしれないね。簡単に説明していくよ。

鈴木先生

　皆さんのブログの携帯画面上では、以下の画像のように右側に余計な余白ができてしまって、意図せず画面が右側にスクロールされてしまうことってありませんか？

　記事を上下だけにスクロールしたいのに、左右に無駄に動いたら、記事を読んでいる側からしたら、かなりストレス貯まりますよね。

　今回の記事では、「Cocoonで携帯画面右側にできる余白を簡単に消す方法の１つ」を解説したいと思います。

　この記事を読んで、あなたのブログのユーザビリティを上げて、ブログをさらに魅力的なものにしていきましょう！

余白の原因はWord Balloonの吹き出しの可能性あり

　皆さんは、Cocoonでブログ記事を作成するときに、Word Balloonという吹き出しプラグインを使っていませんか？因みに、Word Balloonの吹き出しというのは、以下のような吹き出しです。

鈴木先生

この吹き出しは、Word Balloonを使って作っています。

　携帯画面の右側に余白ができる原因は、このWord Balloonの設定で「吹き出しが画面に表示される際にアニメーションさせる」にチェック✅している可能性があります。

ケイタ君

やっと原因が分かったよ！早く解決方法を教えてよ。

まあ、慌てないで。これから説明していくよ。

鈴木先生

携帯画面右側の余白の超簡単な消し方

　ここから具体的な解決法について順番に説明していきます。

　①Word Pressにログイン後、左側の「設定」→「Word Balloon」と選択していきます。

　②以下のように「Word Balloon」の管理画面の上部にある「設定」をクリックします。

　③「設定」の一番上の項目「吹き出しが画面に表示される際にアニメーションさせる」の✅を外して、右下の「保存」をクリックします。

ケイタ君

え！？こんな簡単に携帯画面の右側の余白が消えるんだね！

本当に簡単だよね。この設定変更で、先ほどの記事は以下のとおり右側に余計な余白がなくなったよ。

鈴木先生

　なお、これ以外にもCocoon携帯記事の右側に余白を生み出している原因はあるかもしれません。今回の解決法はあくまで一例として捉えていただけると幸いです。