アドベントカレンダー参加中！
この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月14日の記事になります。
はい、いしかわでございます。昨日の「[ 解説動画あり ] WordPressにノーコードで絞り込み検索を設置する方法 – VK Filter Search 設定解説 –」に続いて、今回は僕としてはめちゃくちゃよく使うのですが、nowrap 指定を使ってない方がいたらもったいないので、使い所を紹介します。
見出しなどで途中で改行されたくない語句を指定
語句の途中で改行されてしまったり、改行された２行目が１文字だけになったりすると見栄えが悪いですよね？
そういった時に nowrap 指定を使うとキレイに制御する事ができます。
まずはサンプルを置きましたので、ブラウザサイズを変更できる環境の方は変更してみてください。
指定なしの場合
改行位置をnowrap指定で整える方法
nowrapで調整した場合
改行位置を nowrap 指定で 整える方法
見え方の違いの例
指定方法
この指定、ちょっとコツが必要ですので解説します。
区切りたい語句でスペースを入れる
まずは以下のように、区切りたい位置でスペースを入れます。
改行位置を nowrap 指定で 整える方法
区切りたくない語句の範囲で nowrap 指定をする
区切りたくない語句を選択して、nowrap 指定をしていきます。
1で入れたスペースを削除
１で入れたスペースを削除していきます。１でスペースを入れないと、結局文章全体が一つの nowrap 指定にされてしまうので、ちょっと手間ですがこの手順で指定します。
改行指定との違いは？
VK Blocks には同じく画面サイズに応じて改行指定を入れる機能がありますが…個人的には「画面サイズでいろいろ気にするよりこっちの方が早くない？」と思ってこっちばかり使ってます…。
表の中で改行されたくない部分をラップ
テーブルで表を作った時に、文字量によって、左側のセルがへんな所で改行してしまって見栄えが悪くなりますよね？
| 会社名 | 株式会社サンプル |
| 英文社名 | Sample Co. Ltd. |
| 代表取締役 | 山田次郎 |
| 従業員数 | 100名 |
| 所在地 | 愛知県名古屋市中村区名駅X-XX-X サンプルビル |
| TEL | 000-000-0000 |
| 事業内容 | めちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入ります |
これも同じく、左側のセルで一番文字数の多い部分に nowrap 指定すれば…
| 会社名 | 株式会社サンプル |
| 英文社名 | Sample Co. Ltd. |
| 代表取締役 | 山田次郎 |
| 従業員数 | 100名 |
| 所在地 | 愛知県名古屋市中村区名駅X-XX-X サンプルビル |
| TEL | 000-000-0000 |
| 事業内容 | めちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入りますめちゃめちゃ長い業務内容の説明が入ります |
こんな感じで見栄えが悪くなる事を防ぐ事ができます！
改行位置で見栄えが悪くなってしまってた方は是非使ってみてください。
アドベントカレンダーへのご参加をお待ちしております！
明日は対馬さんによる「アコーディオンブロックの比較 – VK Blocks Pro vs WordPress コア」です。
みなさまのご参加を心よりお待ちしております！
この記事を書いた人
- 代表取締役
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。