できすぎくんの自由ボックスでフォントがおかしくなるのを簡単に修正する方法

freebox

ショップできすぎくんの「自由ボックス」パーツ。自分で考えた文章を入力し、お客様に必要な情報をお伝えするのに活用されている方も多いですよね。

ただ、自由ボックスに文章を入力してから、改行したりそれを戻したりしていると、フォントサイズがおかしくなる時がありませんか?一部だけ大きくなったり、一部だけとても小さくなったり。。

今回はそれを簡単に解決できる方法をご紹介します。(※Chromeブラウザを使っている場合のみの方法です)

スポンサーリンク

自由ボックスの中で改行すると余計なタグが入る

少し説明しておきます。

自由ボックスの中で文章を編集してしまうと、余計なタグが入ってしまいます。

例えば。

自由ボックス

こちらは改行をせずに、ひたすらテキストを入力した状態。これを、この自由ボックスの中で改行したり、戻してみたりします。

自由ボックス

このように、それだけでテキストの一部が大きくなったりと、おかしくなっているのが分かります。

この時、HTMLソースがどうなっているのかを見てみます。

HTML

HTMLのソースを見るには、画面上部にある「HTML」ボタンをクリックします。

自由ボックス

すると、入れた覚えのない変なタグ(フォントサイズを変更するタグ)があちこちに入っていました。

これが、フォントサイズがおかしくなる原因だったというわけです。

ここに入った余計なタグを1つ1つ削除すればいいのですが、それも大変です。

freebox9

場合によっては、こんなスゴイことになってしまうこともありますから(笑)。

自由ボックスのテキストを全部切り取り、再度「プレーンテキストとして貼り付ける」

これが答えです。

とりあえず、自由ボックスの中に文章を入力し、自由に改行してください。フォントサイズがおかしくなっても大丈夫です。

入力が終わったら、それらをすべて選択し、右クリックして切り取ります。

freebox6

そのあと、空になった自由ボックスの中で再度右クリックします。
出てきたショートカットメニューから「プレーンテキストとして貼り付ける」を選択してクリック。

freebox5

これでOKです!

freebox7

貼り付けられたテキストは、見た目はすべて同じフォントサイズです。
HTMLのソースがどうなっているか見てみます。

freebox8

少しタグが追加されているものの、最初のようなフォントサイズを変更するような余計なタグは削除されました。

(気になる方は、<div></div>タグまで削除して、綺麗にしても。)

Chrome以外のブラウザでは使えません

こちらの、「プレーンテキストとして貼り付け」は、Chromeを使っている場合のみ使える機能です。ちなみにショートカットを使うと、もっと効率よくすることが出来ます。

自由ボックスの中にカーソルがある状態で、

「Ctrl」+「A」ですべて選択

「Cttl」+「X」で切り取り

「Ctrl」+「Shift」+「V」でプレーンテキストとして貼り付け

念のためIE,Firefoxでも試してみましたが、「プレーンテキストとして貼り付け」という機能はなく、ショートカットもうまく使えませんでした。(2016年9月現在)

まとめ

この方法は、自由ボックスにとりあえず「簡単に効率よく」文章を入力したい場合におすすめです。

余計なタグが入ると、フォントサイズがおかしくなるだけでなく、HTMLのソースが複雑になりスマートではありません。

自由ボックスには、あらかじめワードやメモ帳で文章を考えてから貼り付けたり、ウィキペディアなどのサイトから一部だけをコピーして貼り付ける、という場合もあると思います。

ただ、その際も「普通に貼り付け」をしてしまうと、そのテキストに余計な書式がくっついてくることがあります。

それらを削除し、純粋にテキスト(文字)だけを貼り付けてくれるのが、「プレーンテキストとして貼り付け」の機能です。

他の場面でも活用できそうですね(^^)

おまけ

COMゼミナールでは、このように「知っておくと作業効率がぐんとよくなる」といった内容をもりこんだセミナーも開催しています。

ショップできすぎくんに関しては「カスタマイズ基本編」「カスタマイズ上級編」と分けて、できすぎくんをフル活用できるようサポートします。

効率よく売れるショップを作っていきたい!と思われる方はぜひご参加ください(^^)!

スポンサーリンク