SWELLのボックスメニューでテキストが改行しないように調整する方法

SWELLのボックスメニューでテキストが改行しないように調整する方法

SWELL – ver. 2.6.1で「ボックスメニュー」ブロックが追加されました。

枠の中にアイコンとテキストがセットで表示されたリンク群のことで、うまく利用するとサイト回遊率のアップが見込めます。

しかし枠があまり大きくない為、テキストが改行してしまうことがあります

改行のあるボックス行だけ大きさが変わってしまい統一感がなくなってしまうのは少し残念です。

今回はボックスメニューでテキストが改行しないように調整する方法を紹介します。

当ページで使う言葉
ボックス

ボックスメニュー内の一つの枠

ボックスメニューブロック

ボックスが複数集まったボックスメニュー全体

目次

ボックスメニューとは

「アイコンとテキストのセットをリンク化したボックスが並んだやつ」です。
どういうものかは、以下の動画を見ていただくのがわかりやすいかなと思います。

【SWELL – ver. 2.6.1 アップデート情報】 _ WordPressテーマ SWELL

Cocoonにも似たものがあったのでCocoonから乗り換えた方にはなじみがある方もいると思います。

カスタマイズ手順

解決方法

テキストを改行させない施策は次の2つがあります。

  • テキストのフォントを小さくする
  • 枠内の左右にある余白を狭める

両方の方法を併用しても構いません。それぞれ解説します。まとめて設定する手順もあります。

任意の位置であらかじめ改行しておくという対処はお勧めしません。
閲覧する環境によっては自動改行と埋め込んだ改行でガタガタになります。

テキストのフォントを小さくする

改行防止としてまず試したいのがフォントサイズを小さくすることです。

ただし小さすぎて読めなくなってしまっては意味がないので注意が必要です。

複数の方法を紹介しています。次の違いがありますので、ご自身に合った方法を試してみてください。

スクロールできます
全てのボックスメニューに反映する場合特定のボックスメニューブロックに反映する場合一つのボックスだけ反映する場合
管理のしやすさ少し大変 かなり大変
手順の多さ少なめ普通少なめ
ブロック設定使わない使わない使う
CSS使う使う使わない
追加CSSクラス使わない使う使わない
ボックスを追加した時対応なし対応なし対応あり
ボックスメニューブロックを追加した時対応なし対応あり対応あり
手順へ手順へ手順へ

全てのボックスメニューに反映する場合

全ボックスメニューを一括で変更する場合はSWELLが指定しているクラスのフォントサイズを上書きします。

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__text{
    font-size:10px;
}

サイズをもっと小さくする場合は数字を小さく、大きくしたい場合は数字を大きくしてください。

特定のボックスメニューブロックに反映する場合

オリジナルのクラス名で作成して、ブロックの追加CSSクラスで指定します。

STEP
CSSをコピペする

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__text_customize_group{
    font-size:10px;
}

クラス名は既存で使われていなければ分かりやすい名称に変更してかまいません。

STEP
ボックスメニューブロックに追加CSSクラスを指定

クラス名を変えていない場合は「swell-block-box-menu__text_customize_group」を設定します。「.」は不要です。

一つのボックスだけ反映する場合

ブロックツールバーのフォントサイズからサイズを調整します。

より細かいサイズ調整がしたい場合

オリジナルのクラス名で作成して、ボックスの追加CSSクラスで指定します。

枠内の左右にある余白を狭める

こちらはブロックの設定からは変更できません。

スクロールできます
全てのボックスメニューに反映する場合特定のボックスメニューブロックに反映する場合
管理のしやすさ少し大変
手順の多さ少なめ普通
ブロック設定使わない使わない
CSS使う使う
追加CSSクラス使わない使う
ボックスを追加した時対応なし対応なし
ボックスメニューブロックを追加した時対応なし対応あり
手順へ手順へ

全てのボックスメニューに反映する場合

全ボックスメニューを一括で変更する場合はSWELLが指定しているクラスのフォントサイズを上書きします。

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__link{
    padding: 1em .93em 1em .93em;
}

「.93」は「0.93」の意味です。余白をもっと小さくする場合は数字を小さく、大きくしたい場合は数字を大きくしてください。

特定のボックスメニューブロックに反映する場合

オリジナルのクラス名で作成して、ブロックの追加CSSクラスで指定します。

STEP
CSSをコピペする

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__link_customize_group{
    padding: 1em .93em 1em .93em;
}

クラス名は既存で使われていなければ分かりやすい名称に変更してかまいません。

STEP
ボックスメニューブロックに追加CSSクラスを指定

クラス名を変えていない場合は「swell-block-box-menu__link_customize_group」を設定します。「.」は不要です。

フォントサイズと枠内の余白をまとめて設定する

スクロールできます
全てのボックスメニューに反映する場合特定のボックスメニューブロックに反映する場合
管理のしやすさ少し大変
手順の多さ少なめ普通
ブロック設定使わない使わない
CSS使う使う
追加CSSクラス使わない使う
ボックスを追加した時対応なし対応なし
ボックスメニューブロックを追加した時対応なし対応あり
手順へ手順へ

全てのボックスメニューに反映する場合

全ボックスメニューを一括で変更する場合はSWELLが指定しているクラスのフォントサイズを上書きします。

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__text{
    font-size:10px;
}
.swell-block-box-menu__link{
    padding: 1em .93em 1em .93em;
}

font-sizeは文字の大きさです。
paddingは余白です。
もっと小さくする場合は数字を小さく、大きくしたい場合は数字を大きくしてください。
「.93」は「0.93」の意味です。

特定のボックスメニューブロックに反映する場合

まとめて設定する場合は一つのクラスで設定するのがおすすめです。

オリジナルのクラス名で作成して、ブロックの追加CSSクラスで指定します。

STEP
CSSをコピペする

子テーマのstyle.cssかカスタマイズ画面の追加CSSに次のコードをコピペしてください。

.swell-block-box-menu__customize{
	padding: 1em .93em 1em .93em;
	font-size:10px;
}

クラス名は既存で使われていなければ分かりやすい名称に変更してかまいません。

STEP
ボックスメニューブロックに追加CSSクラスを指定

クラス名を変えていない場合は「swell-block-box-menu__customize」を設定します。「.」は不要です。

まとめ

SWELLのボックスメニューでテキストが改行しないように調整する方法を紹介しました。

これでも改行してしまう場合は画像にすることが多いのですが、それならギャラリーでいいような気がします。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど

最後まで読んでいただきありがとうございました。

SWELLのボックスメニューでテキストが改行しないように調整する方法

この記事が気に入ったら
フォローをお願いします!

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる