Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
Swellボタンのフォントサイズのレス...
 
通知
すべてクリア

Swellボタンのフォントサイズのレスポンシブ化

1 投稿
1 ユーザー
0 Likes
779 表示
yosh
 yosh
(@yosh)
投稿: 4
メンバー
Topic starter
 

Swellボタン内のテキストがデバイスによっては2行になってしまうため、フォントサイズを自動調整できるようにする方法を探しています。

サンプルとして下のボタンを作成しました。ボタンとしては正常に動作しますが、フォントサイズがレスポンシブになっていません。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span>ボタンのテキスト</span></a></div>

ケース1.

以下のようにSPAN要素にスタイルを追加すると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」というエラーが発生します。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span style="font-size:clamp(0.1rem,0.8rem,2rem);">ボタンのテキスト</span></a></div>

ケース2.

次に以下のようにSPAN要素にIDを付与してみましたが、同じエラーが返ってきます。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span id="btn_text">ボタンのテキスト</span></a></div>

ケース3.

ちなみに、DIV要素にIDを付与したところ、エラーは発生しませんでした。id="btn_text"の代わりに上記のstyle="font..."を入力すると同じエラーが発生します。

<div class="swell-block-button is-style-btn_normal -size-l" id="btn_text"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span>ボタンのテキスト</span></a></div>

 

なぜエラーが発生するのか、理由が分からず解決方法をご存知の方は教えていただけないでしょうか?

また、目的はボタン内のフォントサイズが動的に変わるようになることなので、他に方法があればぜひご教示いただきたけないでしょうか?

お手数をおかけしますが、宜しくお願い致します。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.0.1
利用中のWordPressバージョン
6.0.3
利用中のプラグイン一覧

Advanced Custom Fields
Contact Form 7
Google XML Sitemaps
Limit Login Attempts Reloaded
SEO SIMPLE PACK

 
投稿済 : 04/11/2022 2:34 am
共有: