スマホだけFooterCTAのラベルを変えたい

♥ 0

いいねをした人: 居ません

このトピックには2件の返信、2人の参加者があり、最後にキタジマタカシにより5年、 1ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2019年10月13日 12:07 PM #30452

星乃みなみ
閲覧者

♥ 36

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】最新版
【お使いのブラウザ】chrome
【当該サイトのURL】https://www.kigoulab.co.jp/

===

ダメ元で質問します。

CTAのラベルが長くてスマホに収まりません。
スマホだけ、ラベルを短くすることはできますでしょうか？

PC：サクッとUXデザイン診断のお申し込み
SP：UXデザイン診断

CSSのcontentプロパティとかつかって書き換えられないかなと妄想しています。
つかったことないので、試行錯誤中です

よろしくご教授ください。

♥ 0

いいねをした人: 居ません

2019年10月13日 12:48 PM #30459
星乃みなみ
閲覧者

♥ 36
```
@media (max-width: 39.9375em) {
  .p-footer-cta .p-footer-cta__secondary-btn {
    font-size:0;
  }

  .p-footer-cta .p-footer-cta__secondary-btn:before {
    font-size:14px;
    content:"UXデザイン診断";
    text-align:center;
    display: block;
    position: absolute;
  }
}
```
上記コードで、文字がいれかわりましたが、以下の不具合があります

・文字がセンターでなく、左寄せになる
・クリックすると、文字が消える（致命的）

よろしくお願いします

♥ 0

いいねをした人: 居ません
2019年10月15日 4:14 PM #30674
キタジマタカシ
参加者

♥ 2421
CSS ではなかなか無理くりになると思うので、PHP でモバイルかどうか判定して切り替えるのが良いと思います（なのでいわゆるレスポンシブではないです）
```
add_filter(
	'snow_monkey_template_part_render',
	function( $html, $slug ) {
		if ( 'footer-cta/primary-btn' === $slug ) {
			$text = wp_is_mobile() ? 'モバイル用' : 'PC用';
			return preg_replace(
				'|(<a[^>]*?>)([^<]+?)(</a>)|ms',
				'$1' . $text . '$3',
				$html
			);
		}
		return $html;
	},
	11,
	2
);
```
♥ 0

いいねをした人: 居ません
投稿者

投稿