緊急で記事書いてます！いいこと思いついちゃったので！
elementor v4の残念な点の一つは、見出しウィジットのテキストにhtmlタグを入力できないこと…！
v3でこんなことしてた人に向けた記事です。
よくv3ウィジットの見出しに<span>とか<br>とか入れてませんでしたか？
特に私は、スマホ版だけ改行したい時には
・<br class=”br-sp”>を見出しのテキストの中に入れる
・追加cssでクラス名「br-sp」をPCの時は無効・スマホの時には有効にする
みたいな感じでやってました。
① ↓ こんな感じでbrタグを入れとく
② ↓追加CSS入れる
.br-sp{
display:none;
}
/* スマホ */
@media (max-width: 767px) {
.br-sp{
display:block;
}
}③ ↓ そうするとPCではこうなって…
④ ↓ スマホではこうなる。
v4では見出しウィジットのテキストにhtmlタグを入れられない…！
v4をいじりはじめて、これダメじゃーんと思ったのがここでした。
先ほどの①と同じようにv4ウィジットで作ろうとすると…
↓ PC
↓ スマホ
そうじゃない…！！
これじゃまだ使えないな、と思ってましたが、対策方法を思いつきました！！
v4ウィジットでスマホ版だけ改行する方法
逆にv3の見出しウィジットではできなかったけど、v4の見出しウィジットでできるようになったことがあります。
テキスト入力画面で改行をしたら、そのままウィジットでも改行されるのです。
これを利用します！！
ステップ① テキストをスマホで改行したいところで改行する
PCでは改行なしで見せたい場合でも、一旦スマホで改行したいところで改行します。
ステップ② クラスを作る
先ほどの見出しウィジットを選択して、CSSクラス「br-sp」を作ります。
スタイルタブのクラスのところで、「br-sp」と入力し、エンター！
青緑になればOK。
クラスを作った後は、elementor上で何か値を入れる必要はありません。
保存して次のステップへ。
ステップ③ CSSコードを追加する
<style>
.br-sp br{
display:none !important;
}
/* スマホ */
@media screen and (max-width: 767px) {
.br-sp br{
display:block !important;
}
}
</style>これは.br-sp の中にある brを、PCでは無効・スマホでは有効にするというコードです。
v3で使ったコードとは少し異なるのでご注意ください！
これを以下にコピペしてください。
・無料版→ 外観 > カスタマイズ > 追加CSS ※<style> 〜 </style>の中身だけでOK
・有料版→ elementor > エディター > カスタムエレメント > code
結果…
これで先ほどのページに戻ってみると…！
↓PC
↓ スマホ
できました！！
複数改行がある時に、一部だけスマホ時のみ改行したい時はどうすればいい？
次は段落ウィジットの場合ですが、1つのウィジットの中に、一部はいつでも改行・一部はPC時無効でスマホ時有効にしたいというときありますよね。
例えば、こんなセクションがあるとして…
↓ PCの時はこうにしたい。
↓ スマホの時はこうしたい。
ステップ① テキストをスマホで改行したいところで改行する
見出しウィジットでやったように、一旦スマホで改行したいところ全てで改行しておきます。
ステップ② スマホのみ改行したいところが何個目なのか把握する
今回やりたいことは、以下のように整理できます。
・いつでも改行したい：「創り、」の後
・PCでは無効/スマホでは有効にしたい：「暮らしを」の後、「高めていく」の後
スマホの時のテキストを基準に、改行を上から数えます。
スマホのみ改行したいのは、改行①と③になりますね。
ステップ③ クラスをつける
先ほどと同じように、この段落ウィジットを選択してクラスをつけます。
今回はCSSクラス「br-sp-1-3」としておきます。
スタイルタブのクラスのところで、「br-sp-1-3」と入力し、エンター！
青緑になればOK。
クラスを作った後は、elementor上で何か値を入れる必要はないので、保存して次へ。
ステップ④ CSSコードを追加する
<style>
.br-sp-1-3 br:nth-of-type(1),
.br-sp-1-3 br:nth-of-type(3) {
display: none;
}
/* スマホ */
@media screen and (max-width: 767px) {
.br-sp-1-3 br:nth-of-type(1),
.br-sp-1-3 br:nth-of-type(3) {
display: block;
}
}
</style>今回は、「br-sp-1-3」というクラスの中の、1つ目と3つ目の改行（br）だけ、PCの時は無効・スマホになったら有効にするというコードです。
:nth-of-type()のカッコの中身を変えれば、どの改行にも対応できます！
先ほど同様、このコードを以下にコピペしてください。
・無料版→ 外観 > カスタマイズ > 追加CSS ※<style> 〜 </style>の中身だけでOK
・有料版→ elementor > エディター > カスタムエレメント > code
結果…
これで先ほどのページに戻ってみましょう！
↓PC
↓ スマホ
こちらもできました！！
まとめ
多分どこかの誰かがもう思いついてたかもしれませんが…
今後もこんな感じで実務で役立つelementor v4ティップスをご紹介していきますので、お楽しみに！
では本日もお疲れ様でした！
