word pressのCocoonのスタイルの簡単改行方法

Cocoon設定方法

SASUKE父です。ご覧いただきありがとうございます。

先日ようやく、私のCocoonの投稿作成画面に「スタイル」が表示されるようになり、色々なことが出来るようになりました。

しかし、実際使ってみて改行がうまく出来ませんでした。

本来ならこのような物を作りたいのですが、

この記事は

1.word pressのCocoonの
2.スタイルで文字装飾したときの
3.改行方法

を紹介します。

うまく作ることが出来なかったので、調べて作れるようになったので消化したいと思います。

word pressやCocoonの設定など、調べて記事にした一覧は下になります。よろしければご覧ください。
【わかりやすく解説】word pressのCocoonで迷って調べた物の一覧。
スポンサーリンク

改行分だけボックスが出来る

下の青の枠の中の文字を普通に打って改行したものを、すべて選択し、スタイルからメモや補足情報などを選択すると、

この記事は

1.word pressのCocoonの
2.スタイルで文字装飾したときの
3.改行方法

を紹介します。

 

下のように改行した数だけメモや補足情報が出来てしまいます。

 

この記事は
1.word pressのCocoonの
2.スタイルで文字装飾したときの
3.改行方法
を紹介します。

上のような感じなってしまいます。

せっかくスタイルで色々なボックスを作れるようになったのに、これでは使いづらいですね。

スペースで改行するとずれてしまう

次に改行ではなく、いったん改行せずに全部の文字を打って、その後スペースで下の方に持っていく方法で試してみました。

こんな感じです

この記事は1.word pressのCocoonの2.スタイルで文字装飾したときの
3.改行方法を紹介します。

①この状態で、青の部分を選択してボックスのメモをクリックすると

この記事は1.word pressのCocoonの2.スタイルで文字装飾したときの
3.改行方法を紹介します。

②上のような感じなります。この状態で改行ではなく、スペースを押して形を整えると

この記事は                           1.word pressのCocoonの                    2.スタイルで文字装飾したときの
3.改行方法                          を紹介します。

③見た感じは改行できたように見えています。ただ、1行空白を作ろうとするとうまく作ることは出来ませんでした。

この状態でプレビューで見てみると

スペースだと入力画面では綺麗ですが、プレビューで見てしまうとずれてしました。

簡単解決方法

やはり、改行しないとずれてしまうことがわかりました。

ちなみにスマホとPCでも文字数が違うので、スペースだと、スマホとPCでは違うずれになってしまいます。

長々書いてきましたが、改行方法の紹介です。やり方は簡単。

改行するときに「enter」キーだけでなく「shift」+「enter」で改行して下さい。

それだけでオッケーです。そうすれば、

この記事は

1.word pressのCocoonの
2.スタイルで文字装飾したときの
3.改行方法

を紹介します。

はい、見事に一つのボックスに収まりました。

「shift」+「enter」で改行すればいいだけなので、ボックスのメモを先に出してから文字を打つ→「shift」+「enter」で改行でも問題ないです。

テスト「shift」+「enter」
「shift」+「enter」
1、〇〇〇「shift」+「enter」
2、〇〇
そのつど、「shift」+「enter」で改行すれば普通にボックス内で何行でも入力できますよ。

まとめ

こんなところで苦戦しているのはSASUKE父だけかもしれませんが、もしかすると同じような症状で悩んでいる方がいるかもしれません。

私レベルの方の役に立てれば幸いです。

今後の悩みは色々ボックスの種類があるので、どういうのを使えばいいのか分からないところです。

などまだまだあります。
上手に使い分ける男になりたいと思っています。
ご覧いただきありがとうございました。
PS,私のようなブログ初心者が悩んで調べたものを記事にしています。
word pressやCocoonの設定など、調べて記事にした一覧は下になります。よろしければご覧ください。
【わかりやすく解説】word pressのCocoonで迷って調べた物の一覧。