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

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

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

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

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

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

ボックスメニューとは

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

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

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

あわせて読みたい

CocoonとSWELLの機能名・設定比較対照表～ブロック編～ 乗り換えサポート用プラグインを紹介した記事で「プラグインでデザインが維持されているブロックも修正推奨」と記載しました。 しかし乗り換えたばかりの時はSWELLの機…

カスタマイズ手順

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

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

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

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

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

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

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

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

全ボックスメニューを一括で変更する場合は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クラスで指定します。

ここをクリックすると手順を開閉できます

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

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

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

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

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

全ボックスメニューを一括で変更する場合は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」を設定します。「.」は不要です。

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

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

全ボックスメニューを一括で変更する場合は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のボックスメニューでテキストが改行しないように調整する方法を紹介しました。

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

そらしど

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