【WordPress】Cloudflare Turnstileを中央揃えにする方法

2026年1月8日WordPress

この記事では、WordPressブログの「Contact Form 7」に導入した「Cloudflare Turnstile」の表示位置を中央揃えにする方法（CSS）を書きます。

子テーマの編集（style.css）にCSSを書き込みます。

ナポリタン寿司は2025年2月から「reCAPTCHA」ではなく「Cloudflare Turnstile」を利用しています。めんどくさい画像認証や信号機タイルをクリックしてね認証からおさらばです。

• 【WordPress】Googleの「reCAPTCHA」を解除してやめる方法 | ナポリタン寿司のPC日記
• 【WordPress】問い合わせのスパム対策にCloudflare Turnstile導入！ | ナポリタン寿司のPC日記

僕が使っている問い合わせフォームは「Contact Form 7」プラグインです。「Simple Cloudflare Turnstile」を使って表示させています。

2025年6月26日に公開されたバージョン6.1からプラグインを導入しなくてもTurnstileに対応したので、現在はプラグイン使っていません。Contact Form 7に直接Turnstileを登録しています。

デフォルトの配置は左揃えでした。記事執筆時点では設定が用意されていません。

CSSを使うことで変えられます。

僕の環境だと「margin: 0 auto;」じゃダメだった

似たような要望・質問がWordPressページに投稿されていてプラグイン作者は以下のように回答していました。

Hi, there is no way to do this within the plugin settings currently, though you can apply some custom CSS to do it if needed.

.frm_forms .cf-turnstile {
margin: 0 auto;
}
【DeepL翻訳】
こんにちは、プラグインの設定でこれを行う方法は今のところありませんが、必要に応じてカスタムCSSを適用することはできます。

Center Turnstile in Forminator Forms | WordPress.org

子テーマの編集（style.css）にCSSを書き込むという点は一緒ですが、「margin: 0 auto;」だと僕が使っている「Contact Form 7」では動作しませんでした。

使っているテーマや問い合わせフォームプラグインによっては「margin: 0 auto;」でもいける場合があります。

いけない場合は本記事のCSSを試す価値があるかもです。

「Simple Cloudflare Turnstile」を中央揃えにするCSS

子テーマの編集（style.css）を開く

WordPressの管理画面→左側サイドバーにある自身が使っているテーマ名（僕の場合Luxeritas）→「子テーマの編集」をクリックします。

CSSを書き込む

CSSを書き込めるスタイルシートに以下のCSSをコピペします。

/*「Cloudflare Turnstile」ウィジェットを中央揃えにする*/
div.cf-turnstile {
    display: flex !important;
    justify-content: center !important;
}

/*「Cloudflare Turnstile」ウィジェットを中央揃えにする*/
div.cf-turnstile {
    display: flex !important;
    justify-content: center !important;
}

「保存」をクリックします。

中央揃えになったか確認

「Cloudflare Turnstile」を設置しているページを開きます。僕の場合問い合わせページです。既に開いていた場合は一度再読み込みします。

中央揃えになっています。

「Simple Cloudflare Turnstile」プラグインを使って配置している場合でも、プラグインを使わず直接「Contact Form 7」にインテグレーション登録している場合でも、どっちでもCSS使えました。

感想

以上、WordPressブログの「Contact Form 7」に導入した「Cloudflare Turnstile」の表示位置を中央揃えにする方法（CSS）でした。