実際のページのほとんどでは、CTAは<button>ではなく、CSSを適用したアンカータグです。それらをスタイル付きテキストのままにせず、本物のボタンウィジェットに変換するには、少し調査が必要です。
高速パス：形状の判定は一切なし
次の3つの形状は、追加のテストなしで即座にボタンウィジェットへ変換されます。実際の<button>要素、クラスリストに正確なクラス名としてbtnまたはbuttonを含むリンク、そして計算済みスタイルがdisplay: inline-blockになるリンクです。最後のものは、古典的なボタンCSSが15年来書かれてきた方法そのものなので、従来のスタイルのリンクボタンのほとんどは、知らないうちにこの経路を通ります。
buttonロールやcta系のクラス名もボタン判定に有利に働きますが、あくまで手がかりの1つにすぎません。それらを持つ要素も、以下の形状テストを通ります。
CSSのみからの検出
興味深いのは、単に見た目がボタンらしい普通の<a>です。変換は実際にレンダリングされたページに対して行われるため、計算済みスタイルを調べられます。要素は以下のすべてを満たす場合にボタンとみなされます。
- リンク、button要素、buttonロールを持つ、またはポインターカーソル付きのspan/divであること。
- ブロックレベルの子要素を含まないこと。ボタンは単一行のコンテンツなので、段落、リスト、入れ子のコンテナを含むものはすべて除外されます。
- テキストが短いこと（おおよそ1行分）。長いテキストはボタンラベルではなく本文です。
- 背景または境界線、角丸、実際のパディングがあること。
- displayがblock、inline-block、flex、inline-flexのいずれかであること。
これらすべてを同時に要求するのは意図的です。どれか1つのシグナルだけでは誤検出が生まれます。背景を持つ非ボタンは多く、角丸を持つ非ボタンも多いからです。
引き継がれるもの
ラベルテキスト、リンクURL、新しいタブで開くかどうか、nofollowフラグ、テキスト色、背景色、境界線と角丸、ボックスシャドウ、パディング（ボタン自身の「テキストパディング」コントロールとして）、そして全タイポグラフィ設定です。
引き継がれないもの
- ホバー状態。 CSSのホバールールは静的な計算済みスタイルからは読み取れないため、ホバー色はElementorで設定する必要があります。変換後の手直しとして、これが最もよく発生する作業です。
- トランジションとアニメーション。 Elementorのコントロールで再適用してください。
- ボタン内のアイコンは、ソースがアイコンクラスではなくインラインSVGを使っていた場合、再選択が必要になることがあります。
リンクをボタンにすべきでない場合
段落内のインラインテキストリンクは、マークアップを保ったままテキストエディターのコンテンツの一部として残ります。それは正しい動作です。すべてのリンクをボタンウィジェットに変換すると、本文が断片化されてしまいます。
実際の数値
しきい値は知っておく価値があります。成功と失敗の両方を説明してくれるからです。ラベルテキストは48文字以下である必要があります。角丸は少なくとも3px、パディングは水平6px以上または垂直4px以上である必要があります。そして背景または境界線が必要です。
48文字は、ラベルがラベルでなくなるおおよその境目です。「Start your free trial today」は27文字です。枠付きコールアウトボックス内の本文の1文は、それを大きく超えます。ここで線を引くことで、他のすべてのプロパティを共有しているスタイル付き段落からCTAを分離できます。
パディングの下限は、インラインのバッジやタグを除外します。「New」と書かれた小さな色付きピルには背景、角丸、短いテキストがあり、実際のパディング以外はボタンと同じ条件をすべて満たしています。水平6pxを要求することで、それらをテキストのままにし、見出しの中に偽のボタンウィジェットを散らばらせずに済みます。
四角い角の死角
角丸の要件には、率直に言って次のような結果があります。高速パスを外れた四角い角のボタンは検出されません。inline-blockリンクは無条件で変換されるため、この影響を受けるのは次の2つの形状です。display: inline-flexまたはflexでスタイルされたモダンなアンカー（ラベルの横にアイコンを中央配置する一般的な方法）と、クリック可能なdiv要素やspan要素です。これらにあえて鋭い角、つまり角丸ゼロの角を持たせると（ブルータリズムやエディトリアルレイアウトでは実際にある選択です）、ボタンウィジェットではなくスタイル付きテキストとして変換されます。
このトレードオフは意図的です。角丸の条件を外すと、テーブルのセル、アラートバー、色付きコールアウト、そして背景と短いテキストを持つその他すべての長方形が巻き込まれてしまいます。四角いボタンをいくつか取りこぼす方が、誤検出が何十個も出るよりはるかに安上がりなエラーです。
デザインがそれらを使っている場合の修正方法は高速パスです。要素を実際の<button>にするか、クラスリストにbtnまたはbuttonを正確なクラス名として含むリンクにします。btn-primaryだけでは一致しないためです。1つの属性で、ページ上のそうしたボタンをすべて修正できます。
divとspanのカーソル経路
CTAがリンクではないこともあります。JavaScriptで動きを付けた<div>や<span>です。それらはcursor: pointerを持つ場合にのみ対象となります。これは、作者がクリック可能にする意図を持っていたことを示す唯一の信頼できるシグナルです。
それらはリンクなしのボタンウィジェットに変換されます。読み取るhrefが存在しないためです。リンク先は安全のために除去されたスクリプト内にありました。後でリンクを入力してください。それでも、スタイル付きdivよりは良い出発点です。スタイルを付け直さなければならないコンテナではなく、ボタンウィジェットのコントロール一式が手に入るからです。
推測が間違っている場合は上書きする
ヒューリスティックはあくまでヒューリスティックであり、結果を受け入れる必要はありません。ネイティブモードで高度な方式を選び、マッピング解析を実行して、項目別のマッピングパネルを開いてください。検出されたすべての要素が、変換後の内容とその判定の確信度とともに一覧表示され、それぞれにドロップダウンがあります。
ボタンウィジェットになったが見出しであるべきもの、またはコンテナのままであるべきだったスタイル付きボックスは、そこで変更してから変換します。これは後からElementorで直すより速く、再変換しても変更が保たれます。手作業での編集では、そうはいきません。
ヒント
- ソース内でCTAに
buttonまたはbtnクラスを付けてください。あいまいさがすべてなくなり、形状テストを経由せずに済みます。 - 抽出したブロックのhrefを確認してください。内側のセクションだけをコピーした場合、外側を包んでいたアンカーが取り残されている可能性があります。
- インポート後、どのボタンがどれか覚えているうちに、すぐホバースタイルを設定してください。
- ボタンが変換されなかった場合は、何よりも先に角丸を確認してください。四角い角がたいていの原因です。