この記事では、SWELLでテキストやグローバルメニューを縦書きにする基本の流れから、スマホでレイアウトが崩れにくい設定の考え方までをまとめて解説します。ざっくり言うと「最低限のCSSだけ触れれば、縦書きはほぼコピペでどうにかできる」という内容です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Swell 縦書きで作れるデザインとメリット
ここでは、そもそもSwellで縦書きを取り入れるとどんな雰囲気になるのか、どんなサイトと相性が良いのかを整理しておきます。自分のサイトに縦書きを入れるかどうか判断する材料にしてみてください。
縦書きが似合うサイトジャンルとSwellの使い方
日本語サイトはもともと縦書きとの相性が良いので、使いどころさえ間違えなければ一気に「らしさ」が出ます。とくに次のようなジャンルは、Swellで縦書きを入れると映えやすいです。
| ジャンル | 縦書きの使い方の例 |
|---|---|
| 和食・割烹・居酒屋 | お品書き風のメニュー名、コース名、サイドに入れる一言キャッチ |
| 旅館・温泉 | プラン名や館内案内の見出し、ヘッダー横の縦書きフレーズ |
| 着物・和雑貨・和小物 | ブランド名やコンセプトコピー、カテゴリ名 |
| 個人ブログ | サイドバーの縦書きキャッチ、プロフィール横の一言 |
メインの本文は横書きのままにして、ヘッダーやサイド、見出しの一部だけ縦書きにするだけでも雰囲気はかなり変わります。Swellは余白やフォントがきれいなので、少し縦書きを足すだけでも「和風っぽいな」と感じてもらいやすいです。
Swellで縦書きを入れるメリットと注意点
メリットと一緒に、あらかじめ知っておきたい注意点も押さえておきましょう。
- よくある横書きだけの和風サイトより、ひと目で違いが出せる
- ヘッダーやグローバルメニューを縦書きにすると、世界観が一瞬で伝わる
- 本文は横書きのままにできるので、読みやすさも犠牲にしなくてすむ
一方で、次のような点には注意が必要です。
- 長文まで全部縦書きにすると、特にスマホでは読むのがつらくなりがち
- CSSの指定を間違えると、編集画面で文字の位置が崩れて見えることがある
- 英数字や記号の向きが思っていた表示と違うことがある
なので、Swellで縦書きを使うときは「アクセントとして使う」が基本です。メニューや短い見出し、キャッチコピーなど、情報量が少ない部分から縦書きを試すのがおすすめです。
Swellで縦書きを設定する3つの基本ステップ
ここからは、実際にSwellで縦書きを設定するときの全体の流れを整理します。専門的なことを全部覚える必要はなくて、「CSSを書く場所」と「縦書きにしたいブロックを指定する場所」さえ分かれば十分です。
Swell 縦書きの全体像：CSSとクラスの関係
Swellで縦書きを実現するときは、ざっくり次のようなステップで作業します。
| やること | 操作する場所 |
|---|---|
| 縦書き用のCSSを書く | 外観 → カスタマイズ → 追加CSS |
| 縦書きにしたいブロックにクラス名を入れる | ブロック設定 → 高度な設定 → 追加CSSクラス |
| 表示をチェックする | プレビューや別タブで実際のページを確認 |
イメージとしては、「追加CSS」で縦書きのルールを作り、「追加CSSクラス」でどのブロックにそのルールを適用するか指示している感じです。ルールと、それを使う場所を分けておくと、あとから別のブロックにも同じ縦書きスタイルを簡単に流用できます。
縦書きに使うCSSプロパティの基本
Swellで縦書きにするときによく登場するCSSプロパティは、主に次の3つです。
- writing-mode：縦書きにするか横書きにするかを指定する
- text-orientation：縦書きのときの英数字や記号の向きを調整する
- line-height・letter-spacing：行間や文字間を整えて読みやすくする
縦書きの基本は、writing-modeに vertical-rl を指定することです。これは「右から左に向かって進む縦書き」の指定で、いわゆる一般的な和文の縦書きに近い見た目です。
アルファベットや数字が多い場合は、text-orientationで向きを調整しておくと読みやすくなります。また、縦書きは文字が詰まって見えやすいので、line-heightで行間を少し広げておくとバランスが取りやすいです。
グローバルメニューや見出しをSwell縦書きにするコツ
ここからは、実際にどの部分を縦書きにしていくかを具体的に見ていきます。テキストブロックとグローバルメニューは、Swellで縦書きにすると効果が分かりやすいので、まずはこの2つから手を入れていくと失敗しにくいです。
テキストブロックを縦書きにする具体的な手順
最初の練習として、段落ブロックや見出しブロックを縦書きにしてみましょう。流れはとてもシンプルです。
- 追加CSSに、縦書き用のクラス（例：.tategaki）を用意する
- 縦書きにしたいブロックを選び、右側の「高度な設定」を開く
- 「追加CSSクラス」に tategaki などのクラス名を入力する
- プレビューで文字が縦方向に並んでいるか確認する
【稼げるキーワード教えます】
▼ ▼ ▼
どのブロックにどのクラス名を付けるか、表にして整理しておくとミスが減ります。
| ブロック | 入れるクラス名の例 |
|---|---|
| 段落ブロック（本文の一部） | tategaki |
| 見出しブロック（小見出し） | tategaki-title |
| ボタンブロック（縦書きボタン） | tategaki-btn |
私の場合は、まず共通で使うベースのクラス名（tategaki）を用意して、見出しやボタン用に少しだけデザインを変えたいときにクラス名を増やしていくことが多いです。こうしておくと、「この見出しだけ文字を大きくしたい」といった細かい調整があとからでもやりやすくなります。
グローバルメニューをSwell 縦書きにするときのポイント
次に、ヘッダーのグローバルメニューを縦書きにするパターンです。ここを変えると、サイトを開いた瞬間の印象がガラッと変わります。
- PC表示だけグローバルメニューを縦書きにして、スマホは横書きのままにする
- メニュー名はできるだけ短くし、1〜3文字程度を目安にする
- メニュー同士の余白を気持ち広めにとり、ギュウギュウ詰めにしない
縦書きのメニューはおしゃれですが、やりすぎると「どこがどのページか分かりにくい」という問題も出てきます。Swellで縦書きメニューを作るときは、項目数を絞ることもセットで考えておくと、デザインと使いやすさのバランスが取りやすくなります。
スマホ表示とデザイン調整でSwellの縦書きを整える
ここでは、Swellで縦書きを使うときに特に気を付けたい「スマホ表示」と「細かいデザイン調整」についてお話しします。PCだけ見ていると問題なさそうに見えても、スマホで確認すると一気に読みにくくなることがあるので要注意です。
PCだけSwell 縦書きにしてスマホは横書きにする
個人的に一番おすすめなのは、「PCでは縦書き、スマホでは横書き」に切り分けてしまうやり方です。CSSのメディアクエリを使えば、画面幅によって縦書きの指定をオン・オフできます。
- 一定以上の画面幅までは writing-mode: vertical-rl; を適用する
- ある幅より小さくなったら writing-mode を横書きに戻す
- スマホでは、読みやすさを優先して縦書きの範囲を最小限にする
| 端末 | 縦書きの扱いイメージ |
|---|---|
| PC | 縦書きをしっかり使い、和風デザインの雰囲気を出す |
| タブレット | レイアウトを見ながら、縦書きか横書きかをケースごとに判断 |
| スマホ | 基本は横書きにして、どうしても見せたい部分だけ縦書きにする |
Swellはプレビュー機能が使いやすいので、作業のたびにPCとスマホ両方で確認するクセをつけておくと安心です。縦書きの範囲を絞るだけでも、スマホでの読みやすさはかなり変わってきます。
フォント・余白・行間の調整で読みやすくする
縦書きのCSS自体はシンプルですが、「なんとなく読みにくい」と感じる原因の多くはデザイン側にあります。フォントや余白を少し整えるだけで、印象がだいぶ変わります。
- 縦書きにする部分だけ、明朝体や和風の雰囲気があるフォントを試してみる
- line-heightを少し高めに設定し、行間に余裕を持たせる
- 上下左右の余白を広めにとり、縦書き部分を「飾り」として見せる
- 英数字がたくさん出てくる箇所は、あえて横書きのままにしておく
私の肌感覚としては、Swellで縦書きを使うときは「テキストそのもの」よりも「余白とのバランス」が重要だと感じています。縦書き部分だけを主役にするのではなく、ページ全体のレイアウトの中でどう見えるかを意識して配置してみてください。
よくある質問（Swellの縦書き編）
最後に、Swellで縦書きを使うときによく出てくる疑問をQ&A形式でまとめておきます。迷いやすいポイントを先に押さえておくと、作業でつまずきにくくなります。
| 質問 | ざっくりした答え |
|---|---|
| 本文を全部縦書きにしてもいい？ | 可能だが、読みづらいのでアクセント使いの方が現実的 |
| CSSがうまく効かないときは？ | クラス名のつづりと適用場所を一つずつ確認する |
| どこから縦書きにするのが無難？ | まずはグローバルメニューや短い見出しから試す |
Q1. Swellで本文全部を縦書きにしても大丈夫？
理論的には、Swellでも本文まるごと縦書きにすることはできます。ただ、実際にやってみると分かりますが、特にスマホだと読む側の負担がかなり大きくなります。
おすすめの使い方は次のとおりです。
- メインの本文は横書きのままにしておく
- 見出しやキャッチコピーなど短い文章だけ縦書きにする
- グローバルメニューやサイドの装飾テキストに縦書きを使う
こうしておけば、デザインの雰囲気は変えつつも、読みやすさを大きく損なわずに済みます。Swellの縦書きは「全部やる」より「ここぞという場所だけ」の方がちょうど良いバランスになりやすいです。
Q2. Swell 縦書きのCSSが反映されないときはどうする？
Swellで縦書きのCSSが効かないときは、慌てずに次のポイントを順番に見直してみてください。
- 追加CSSに書いたクラス名と、ブロック側に入力したクラス名が完全に一致しているか
- 全角スペースやタイプミスが紛れ込んでいないか
- キャッシュ系プラグインを使っている場合は、キャッシュを削除して表示を更新したか
縦書きに限らず、Swellのカスタマイズでうまく反映されない原因の多くは、クラス名のミスかキャッシュの残りです。いったんシンプルなクラス名（tate など）だけで試してみて、最低限のコードから動作を確認していくと原因を探しやすくなります。
Q3. グローバルメニューとテキスト、どちらからSwell 縦書きにすべき？
どこから縦書きにするか迷うなら、まずはグローバルメニューから手を付けるのが分かりやすいと思います。ヘッダーのメニューは一番目につく場所なので、Swellで縦書きを導入した効果をすぐに実感しやすいです。
個人的におすすめの順番は次のとおりです。
- グローバルメニューを縦書きにして、サイト全体の雰囲気を作る
- 次に、トップのヒーロー部分のキャッチコピーを縦書きにしてアクセントを足す
- そのあとで、必要に応じて本文中の一部見出しにも縦書きを広げる
この順番なら、「やってみたけどやっぱり合わないかも」と感じたときも、特定の部分だけ設定を戻すのが簡単です。Swellの縦書きは、一気に全ページでやるより、少しずつ範囲を広げていくイメージで調整すると失敗しにくいです。
Swell 縦書きカスタマイズのまとめ
ポイントを改めて整理しておきます
- Swellで縦書きを使うと、和食店や旅館、和雑貨などのサイトで「らしい」雰囲気を出しやすい。
- 実装は「追加CSSで縦書き用クラスを用意する → ブロックにクラス名を指定する」というシンプルな流れ。
- テキストブロックやグローバルメニューを縦書きにするだけでも、サイト全体の印象が大きく変わる。
- PCでは縦書き、スマホでは横書きといった形で、端末ごとに使い方を変えると読みやすさを保ちやすい。
- 本文すべてを縦書きにするより、アクセントとして部分的に縦書きを使う方が現実的で、ユーザーにも親切。
今日からできる最初の一歩としては、まずSwellの「追加CSS」に自分専用の縦書き用クラスをひとつ作ってみてください。そして、そのクラスをグローバルメニューや短いキャッチコピーなど、目立つけれど文章量が少ない場所にだけ試しに当ててみましょう。
一度「このくらいなら自分でも縦書きにできる」と感覚をつかめれば、Swellでの縦書きカスタマイズは難しいテクニックではなく、サイトの雰囲気を少し格上げするための楽しい作業になってくるはずです。
記事を読んだらコチラ
▼ ▼ ▼
