CSS オーバーライドによる結果ウィンドウのカスタマイズと視覚的な変更
カスタム CSS を使用して、[今すぐ購入] ポップアップ ボックスの現在のスタイルをオーバーライドできます。次のテンプレートを使用できます。
必要に応じて、ファイルに記述されているクラスを編集するだけです。次に、カスタマイズした CSS ファイルをページ上、または [今すぐ購入] スクリプトを埋め込んだ後の <style> タグ内に含めます。
注: [今すぐ購入] スクリプト タグの前にファイルを埋め込むと、ドキュメントの順序が重要であるため、スタイルシートが特定の値をオーバーライドできなくなる場合があります。一部の特殊なケースでは、カスタム スタイルを!importantで装飾することも必要になる場合があります。スタイル プロパティが上書きされない場合のルール (詳細については、 https ://www.w3schools.com/css/css_important.asp を参照してください)。以下のチャートは、クラスの主要なセクションが何をするかに関する一般的な情報を示しています。各メイン セクション内には、上書き可能な多くのタグがネストされています。
| ヒント: ブラウザーの「検査」ツール (Google Chrome や Microsoft Edge に組み込まれているツールなど) を使用することをお勧めします。このツールは、スタイルを設定できる特定の CSS クラスと HTML タグを分離するのに便利です。検査ツールを使用してプロパティを変更し、プロパティがどのように見えるかを確認します |
/* Omacro モーダル ポップアップの外部クラス */
.oma-buynow.oma-modal { }
.oma-buynow.oma-modal .oma-dialog .oma-content { }
/* Omacro モーダル ポップアップ ヘッダー (ウィンドウを閉じるアイコンを含む、ポップアップ ウィンドウのタイトル バー部分) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-close { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title span { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title small { }
/* Omacro モーダル ポップアップ ヘッダー タブ (オンライン小売業者とローカル小売業者のタブ) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs .oma-active { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li a { }
/* Omacroモーダルポップアップ本体 */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-active { } /* アクティブなタブ */
/* Omacro Modal ポップアップ本体 (オンライン小売業者のコンテンツ) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading .oma -スピナー{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-result-filters { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.your-online-retailer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer.oma-card {}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-image { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-image img { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer.oma-card.oma-info {}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-info .oma-name { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma -retailer.oma-online-retailer .oma-card .oma-info .oma-button.oma-buylink { }
/* Omacro Modal ポップアップ本体 (ローカル小売業者のコンテンツ) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map .oma -グーグルマップ { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -ポケットベル { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .own-retailer.own-local-retailer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者.oma-小売業者.oma-ローカル小売業者.oma-カード{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者.oma-小売業者.oma-ローカル小売業者.oma-カード.oma-イメージ{}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-image img { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者.oma-小売業者.oma-ローカル小売業者.oma-カード.oma-info {}
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info アドレス { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info アドレス スパン { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info アドレス span.oma-name{ }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-message { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level.oma-none { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-one { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-two { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-three { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-four { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma -小売業者 .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-distance { }
/* Omacro モーダル ポップアップ フッター (国セレクター、omacro ブランディング) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li .oma-icon.oma-flag-icon { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo img { }
Related Articles
サプライヤー今すぐ購入実装ガイド
次の記事では、Buy Now をポップアップとして実装するか、 製品ベースのディーラー ロケーターまたは一般ディーラー ロケーターとしてページ内に埋め込むさまざまな方法について説明します。 [今すぐ購入] は、特定の市場 (オンラインまたはローカル) に開かれるように構成して、 1 つ以上の特定のディーラー タイプ (レンタル プロバイダー、小売業者、またはサービス センター) を表示し、 ブランドに合わせたスタイルなど、さまざまな方法で表示できます。 前提条件 ...Web サイト ページ内にディーラー ロケータを埋め込む
ロケータをページに直接埋め込むことができます。 omacro の今すぐ購入コード スニペットをページに追加する手順を完了したと仮定して、次の例を使用して、ページ自体内にロケーターをレンダリングします。 ライブデモを見るには、 ライブデモサイトにアクセスしてください カスタム スタイルを備えた専用のディーラー ロケーターの例。 ステップ 1: CSS クラスをページに追加する 「oma-omacro」というクラス名を持つ要素がページにあることを確認してください。 <div ...ディストリビューター ロケーター Web サイト コードの実装
ステップ 1: Web サイト内にスクリプトを含める 以下の例は、Distributor Locator ウィジェットをサイトに統合するために必要なものを示しています。必要なパラメータを更新して、スニペットを Web サイトにコピーするだけです。 <script id="omacro-widget-buynow" src=" ...ディーラーの結果にカスタム ルールを追加する
場合によっては、特定の結果をカスタマイズしたい場合があります。たとえば、レンタル プロバイダーやサービス センターのみを表示したり、小売店の場所 (またはその組み合わせ) のみを表示したりする場合です。そのために、このオプションのパラメーターをいくつかの異なる方法で実装できます。 オプション 1: 今すぐ購入スクリプト パスからルールをグローバルに追加する サイト全体 ([今すぐ購入] が使用されている場所) 全体にルールをグローバルに追加する場合は、[今すぐ購入] スクリプト ...カスタム ページ サイズをオンライン ディーラーの結果に追加する
[今すぐ購入] ポップアップのオンライン部分に表示される結果の数をカスタマイズしたい場合があります。たとえば、ページごとに表示する販売者の数を増やしたり減らしたりしたい場合 (またはページング コントロールのないすべての販売者)。 オプション 1: [今すぐ購入] スクリプト パスからページ サイズをグローバルに追加する サイト全体 ([今すぐ購入] が使用されている場所) 全体でページ サイズをグローバルに追加する場合は、[今すぐ購入] スクリプト ...