今まで数回、ザ・トールのボックスについてブログを書いてきました。
このテーマのボックスの良いところは、自分でパーツをカスタマイズできたり、色を変更できたりするところです。
しかし、ザ・トールにしたての時は、改行が上手くいかずに悩みました…。
ボックス内であらゆる手段を試してもダメだったのですが、ザ・トールでの設定と改行のコツで、現在は問題なくデザインが保たれています！
「HTMLを圧縮する」のチェックを外す
これで改行が上手くいったといっても過言ではない…！
まずは、「HTMLを圧縮する」とはどういう意味なのか調べてみました。
圧縮（軽量化）とは、ブラウザによるリソースの処理に影響を与えることなく、不要なデータや重複データ（コードのコメントや書式など）の削除、使用されていないコードの削除、短い変数名や関数名の使用といった処理を行うことを指します。
サイトスピードを確認するGoogleの「PageSpeed Insights」によれば、「HTMLの圧縮」とは、HTMLに含まれる不要な改行や書式を削除して、ファイルを軽量化する仕組みのことです。
サイトの表示スピードを早めるためにはオススメな機能ですが、デザインが崩れてしまい見にくくなってしまっては元も子もありません。
そこで、私のブログでは、「HTMLの圧縮」を取りやめています。
設定方法
それでは、ザ・トールでの設定方法をご紹介します。
難しいことはありませんので、下記の順序に沿って進んでください。
これで、HTMLが圧縮されなくなり、改行ができるようになりました。
ボックスでの改行方法
「return (enter)」キーを押すだけではボックスが増えるだけで改行されないのが問題。
そこで、私も実践している、改行する（改行した状態でボックスに入れる）方法を3つご紹介します。
①ボックス内で改行する
ビジュアルエディタでボックスを先に作って、その中に文字を打ち込んで改行する方法です。
POINT!
ボックス内で改行するときは、「Shift」＋「return (enter)キー」を押す。
ただこのボックスを先に作る方法、改行は問題ないのですが、1つ注意点があります。
それは、ボックスを作って文字を打ち「return (enter)」キーを押すと、ボックスがなくなる現象。
例）↓
コメント
こんな感じでボックスが消えてしまうこともあるので、取り消しボタンで戻ります。すると・・・
最初の一文字だけ残ります。
そこから、面倒ではありますが、最初の一文字を消さずに、文字を打ち込んでから冒頭の文字を消すことをオススメします。
冒頭の文字を消すとまたreturn(enter)キーを押したときに例のようになるので…
しかし、こうなると、改行はできても前段階で手間がかかるので微妙かな…？
なので、ボックス内で改行する方法だけでも覚えておくと良いでしょう！
ボックスの作り方に関しては記事にしていますので、合わせてご覧ください。
WordPressで人気急上昇のテーマ、「THE・THOR（ザ・トール）」では、ラベルやボタン、ボックス等を組み合わせてオリジナルのパーツを作ることができます。 もちろん、デフォルトで入っているものもありますが、せ[…]
②先に文章を書いておいてボックスにコピペ
この方法が、ビジュアルエディタで行うなら楽で綺麗に改行できるのでオススメです。
まずは、ボックスに入れたい文章を先に作っておいて、完成したら「スタイル」からボックスを選択。
※ボックスに入れる前でしたら、「return (enter）」キーのみで改行できます。
例）↓
改行①
改行②
改行③
このような感じで文章を書いたら、入れたい文章全体をドラッグして選択し、「command」＋「c」（コピー）か「x」（コピーして切り取り）をします。
最後に、ボックス内で、「command」＋「v」を押して貼り付けます。
↓
改行①
改行②
改行③
そうすると、ボックス内で改行をせずとも、先に作っておいた文章が改行されたままボックスに挿入できました。
③テキストエディタで改行
WordPressで人気急上昇のテーマ、「THE・THOR（ザ・トール）」では、ラベルやボタン、ボックス等を組み合わせてオリジナルのパーツを作ることができます。 もちろん、デフォルトで入っているものもありますが、せ[…]
こちらの記事でも記載しましたが、ラベルやボタンなどパーツを組み合わせたボックスは、テキストエディットやメモにHTMLを保存しておくと便利です。
また、パーツの色変更方法についての記事では、ボックス内での改行についても少し触れました。
前回、私が普段使用しているボックスを例に、パーツの組み合わせ方を解説しました。 [sitecard subtitle=関連記事 url=https://www.aru-karu.com/entry/the-thor[…]
そこで、以上2つの記事に関する改行方法についてもまとめます。
私は、以下の画像のようにテキストエディットでボックスを保存し、コピーして記事のテキストエディタに貼り付けています。
この状態のままテキストエディタに貼り付けると、改行もそのまま残っているのでご安心を。
（HTMLの１行目はボックスについて、２~3行目はラベルについて、それ以降はコメントが入ります）
POINT!
大切なことは、ボックスのHTMLとラベルのHTMLの間など、それぞれ改行して空白を入れることです。
最初に「HTMLを圧縮する」のチェックを外したことによって、HTML内の改行を生かすことができるので、パーツごとに空白を入れて見栄えをよくしようとする作戦です。
あとは、②でもお伝えしたように先に文章を作っておき、テキストエディタ内でコピー。
最後に、画像でいうと「コメントが入ります！」の部分にペーストします。
この方法を実践すると、テキストエディタ内でボックスも文章も一度に完成させることができるというわけです！
また、テキストエディタ内では、改行も「return (enter)」キーのみでできますし、パーツの色も一度に直せるので、慣れてきた方は③の方法がオススメです。
ポイントのまとめ
以上、ザ・トールのボックスの改行について解説しました。
最後に、今回の記事のポイントをまとめておきます。
まとめ
- 設定で「HTMLを圧縮する」のチェックを外す
- ボックス内で改行するなら「Shift」を押しながら「return (enter）」を押す
- 先に文章を作っておいてボックスにコピペする方が楽
私は、改行方法については専ら③を活用しています。
正直、HTMLなどに詳しいわけではないのですが、試行錯誤して自己流で試してみました。
今回の記事が、ザ・トールのボックスで改行にお困りの方へ、少しでも参考になれば嬉しいです。
皆さんは、ブロガーさんが一つの記事を完成させるまで、どのような手順を踏んでいるか知りたいと思ったことはありませんか？ ブログの書き方のハウツーは、インターネット上でも書籍でもよく目にすると思います。 &nbs[…]
アイキャッチを自作している皆さんは、どんなことにこだわりを持っていますか？ もちろん、総合的なデザインも大切ですが、私が特に重要視しているのは『フォント』です。 フォントの違いで、読み手に[…]