JavaScript だけでは処理が足りずサーバー側（PHP）で処理したい場合があります。しかし、どう作ればよいか、またセキュリティが満たされているか心配ですね。

サンプルコードで実際に作ってみる！

サンプルコードです。こちらを後述の手順に沿って設置することで実際に動かすことができます。

実際のサンプルコードを紹介します。こちらは、赤と青のボタンを配置して、クリックしたらサーバー側（PHP）に通信して「赤を押したね」「青を押したね」のレスポンスを返して画面上に表示するサンプルです。

上記のようなボタンが出ます（上記はイメージなので動きません）

サンプルコード

■ PHP 側（サーバー側）

PHP 側のサンプルコードです。WordPress では functions.php などに張り付けて利用します。一般的に必要なセキュリティ対策を入れています。

/* --- [1] ショートコード： [color_press_inline] --- */
add_shortcode('color_press_inline', function () {
    $ajax_url = admin_url('admin-ajax.php');
    $nonce    = wp_create_nonce('color_press'); // CSRF対策

    // 同一ページに複数設置してもOK（個別のnonceとデータ属性を持たせる）
    if (function_exists('wp_unique_id')) {
        $id = wp_unique_id('color-press-');
    } else {
        $id = 'color-press-' . wp_rand();
    }

    ob_start(); ?>
    <div id="<?php echo esc_attr($id); ?>" class="color-press"
         data-ajax-url="<?php echo esc_url($ajax_url); ?>"
         data-nonce="<?php echo esc_attr($nonce); ?>">
      <button type="button" data-color="red"  aria-label="赤ボタン">赤</button>
      <button type="button" data-color="blue" aria-label="青ボタン">青</button>
      <p class="color-press__msg" aria-live="polite"></p>
    </div>

    <style>
      .color-press button{padding:.6rem 1rem;margin-right:.5rem;border:0;border-radius:.5rem;cursor:pointer}
      .color-press [data-color="red"]{background:#e11;color:#fff}
      .color-press [data-color="blue"]{background:#16f;color:#fff}
      .color-press__msg{margin-top:.5rem}
    </style>
    <?php
    return ob_get_clean();
});

/* --- [2] AJAXハンドラ（未ログインOK） --- */
add_action('wp_ajax_color_press',        'fumi_color_press_handle');
add_action('wp_ajax_nopriv_color_press', 'fumi_color_press_handle');

function fumi_color_press_handle(){
    // [a] メソッド制限
    if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
        wp_send_json_error(['message' => 'method not allowed'], 405);
    }

	// [a1] ペイロードサイズ上限（例：2KB）
    $clen = isset($_SERVER['CONTENT_LENGTH']) ? (int) $_SERVER['CONTENT_LENGTH'] : 0;
    if ($clen > 2048) {
        wp_send_json_error(['message' => 'payload too large'], 413); // 413 Payload Too Large
    }
	
    // [b] ノンス検証（CSRF）
    $nonce = $_POST['nonce'] ?? '';
    if (!wp_verify_nonce($nonce, 'color_press')) {
        wp_send_json_error(['message' => 'invalid nonce'], 403);
    }

    // [c] オリジン/リファラ確認（ヘッダがあれば検証）
    $site_host = wp_parse_url(home_url(), PHP_URL_HOST);
    if (!empty($_SERVER['HTTP_ORIGIN'])) {
        $origin_host = wp_parse_url($_SERVER['HTTP_ORIGIN'], PHP_URL_HOST);
        if ($origin_host !== $site_host) {
            wp_send_json_error(['message' => 'bad origin'], 403);
        }
    } else {
        $ref = wp_get_referer();
        if ($ref) {
            $ref_host = wp_parse_url($ref, PHP_URL_HOST);
            if ($ref_host !== $site_host) {
                wp_send_json_error(['message' => 'bad referer'], 403);
            }
        }
    }

    // [d] 簡易レート制限（IPごと）
    $ip  = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
    $key = 'color_press_rl_' . md5($ip);
    $cnt = (int) get_transient($key);
    if ($cnt > 30) { // 1分に31回超ならブロック
        wp_send_json_error(['message' => 'too many requests'], 429);
    }
    set_transient($key, $cnt + 1, 60);

    // [e] 入力ホワイトリスト
    $color = isset($_POST['color']) ? sanitize_key($_POST['color']) : '';
    if ($color === 'red') {
        $code = 1; $label = '赤';
    } elseif ($color === 'blue') {
        $code = 2; $label = '青';
    } else {
        wp_send_json_error(['message' => 'invalid color'], 400);
    }

    // [f] 応答
    wp_send_json_success([
        'code'  => $code,
        'label' => $label,
        'text'  => sprintf('%sを押したね', $label),
    ]);
}

■ JavaScript 側（画面側）

JavaScript 側のサンプルコードです。WordPress では固定ページや投稿ページに「カスタムHTML」ブロックで張り付けて利用できます。

<script>
(function(init){
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else { init(); }
})(function(){
  document.querySelectorAll('.color-press').forEach(function(wrap){
    var msg     = wrap.querySelector('.color-press__msg');
    var ajaxUrl = wrap.getAttribute('data-ajax-url');
    var nonce   = wrap.getAttribute('data-nonce');

    wrap.addEventListener('click', function(e){
      var btn = e.target.closest('[data-color]');
      if (!btn || !wrap.contains(btn)) return;

      var color = btn.getAttribute('data-color');  // "red" | "blue"
      if (msg) msg.textContent = '送信中…';

      // 連打防止（任意）
      var prevDisabled = btn.disabled;
      btn.disabled = true;

      var body = new URLSearchParams();
      body.append('action', 'color_press');
      body.append('nonce',  nonce);
      body.append('color',  color);

      fetch(ajaxUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        body: body.toString(),
        credentials: 'same-origin',
        cache: 'no-store'
      })
      .then(function(r){ return r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)); })
      .then(function(json){
        if (json && json.success) {
          if (msg) msg.textContent = json.data.text; // 例：「赤/青を押したね」
          // 数値 (1/2) を使いたい場合: json.data.code
        } else {
          var m = json && json.data && (json.data.message || json.data.text);
          if (msg) msg.textContent = 'エラー：' + (m || 'unknown');
        }
      })
      .catch(function(err){
        if (msg) {
          // ノンス切れ等の案内
          var hint = (err.message.indexOf('403') !== -1) ? '（ページを再読み込みしてください）' : '';
          msg.textContent = '通信エラー：' + err.message + hint;
        }
      })
      .finally(function(){
        btn.disabled = prevDisabled;
      });
    });
  });
});
</script>

実装方法

■ PHP 側（サーバー側）

WordPress の functions.php に PHP のコードをそのまま張り付けて保存します。

■ JavaScript 側（画面側）

投稿ページ（または固定ページ）側の実装です。

• ショートコード（今回の場合は PHP 内で作成している「color_press_inline」を貼り付けます。
• 「カスタムHTML」ブロックを用いて、JavaScript をすべて貼り付けます。

保存して実行すると、サンプルが動きます。

サンプルコードの解説

PHP 側（サーバー側）

ショートコード実装

/* --- [1] ショートコード： [color_press_inline] --- */
add_shortcode('color_press_inline', function () {
    $ajax_url = admin_url('admin-ajax.php');
    $nonce    = wp_create_nonce('color_press'); // CSRF対策

    // 同一ページに複数設置してもOK（個別のnonceとデータ属性を持たせる）
    if (function_exists('wp_unique_id')) {
        $id = wp_unique_id('color-press-');
    } else {
        $id = 'color-press-' . wp_rand();
    }

    ob_start(); ?>
    <div id="<?php echo esc_attr($id); ?>" class="color-press"
         data-ajax-url="<?php echo esc_url($ajax_url); ?>"
         data-nonce="<?php echo esc_attr($nonce); ?>">
      <button type="button" data-color="red"  aria-label="赤ボタン">赤</button>
      <button type="button" data-color="blue" aria-label="青ボタン">青</button>
      <p class="color-press__msg" aria-live="polite"></p>
    </div>

    <style>
      .color-press button{padding:.6rem 1rem;margin-right:.5rem;border:0;border-radius:.5rem;cursor:pointer}
      .color-press [data-color="red"]{background:#e11;color:#fff}
      .color-press [data-color="blue"]{background:#16f;color:#fff}
      .color-press__msg{margin-top:.5rem}
    </style>
    <?php
    return ob_get_clean();
});

• admin-ajax.php の絶対URLを生成しクライアント側へ連携します
• nonce は CSRF防止の今回限りの時限トークンの発行です。ページを開いたユーザーのブラウザに埋めこみ、送信時に一緒にPOSTすることで、サーバー側で wp_verify_nonce() で送信元の正誤を判定します。
• wp_unique_id() を用いて、各ブロックをユニークIDで識別できるように実装します（同じページ内に何個でも置ける）
• HTML（ボタン部分）とCSSもPHPから返しています。時限トークンと重複防止用のコードを埋め込むためPHP側でコードを実装しています（”<?php echo esc_url($ajax_url); ?>”、”<?php echo esc_attr($nonce); ?>”>）

fumi_color_press_handle() にルーティング

/* --- [2] AJAXハンドラ（未ログインOK） --- */
add_action('wp_ajax_color_press',        'fumi_color_press_handle');
add_action('wp_ajax_nopriv_color_press', 'fumi_color_press_handle');

WordPress のログインに関係なく（どちらでも）、admin-ajax に action=color_press で届いたリクエストを fumi_color_press_handle() にルーティングする設定です。

リクエストのチェック

    // [a] メソッド制限
    if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
        wp_send_json_error(['message' => 'method not allowed'], 405);
    }

	// [a1] ペイロードサイズ上限（例：2KB）
    $clen = isset($_SERVER['CONTENT_LENGTH']) ? (int) $_SERVER['CONTENT_LENGTH'] : 0;
    if ($clen > 2048) {
        wp_send_json_error(['message' => 'payload too large'], 413); // 413 Payload Too Large
    }

「入口で不正リクエストを即切り」してガードしています。

• $_SERVER[‘REQUEST_METHOD’] を見て POST以外（GET/HEAD/PUT 等）を 405 で拒否し、想定外の叩き方や余計な処理実行を防ぎます。
• CONTENT_LENGTH から本文サイズを取得し、2KB超は 413（Payload Too Large） を返して遮断します。これにより、JavaScript やリクエストを改ざんして、長文のリクエストを送信する巨大POSTによるリソース消費（DoS）攻撃を防いでいます。

ノンスの検証

    // [b] ノンス検証（CSRF）
    $nonce = $_POST['nonce'] ?? '';
    if (!wp_verify_nonce($nonce, 'color_press')) {
        wp_send_json_error(['message' => 'invalid nonce'], 403);
    }

CSRF対策です。ページ表示時にサーバーが発行した時限トークン（nonce）を、POSTのnonceから取り出して検証しています。wp_verify_nonce($nonce, ‘color_press’)が失敗したら、実際のページ由来でない送信や期限切れと判断し、403 ForbiddenのJSONを返して処理を即終了します。

オリジン/リファラ確認

    // [c] オリジン/リファラ確認（ヘッダがあれば検証）
    $site_host = wp_parse_url(home_url(), PHP_URL_HOST);
    if (!empty($_SERVER['HTTP_ORIGIN'])) {
        $origin_host = wp_parse_url($_SERVER['HTTP_ORIGIN'], PHP_URL_HOST);
        if ($origin_host !== $site_host) {
            wp_send_json_error(['message' => 'bad origin'], 403);
        }
    } else {
        $ref = wp_get_referer();
        if ($ref) {
            $ref_host = wp_parse_url($ref, PHP_URL_HOST);
            if ($ref_host !== $site_host) {
                wp_send_json_error(['message' => 'bad referer'], 403);
            }
        }
    }

リクエストが自サイト（同一ホスト）から来たかをヘッダで確認する防御です。

• home_url() から自サイトのホスト名を取得。Origin ヘッダがあればそのホストを取り出し、一致しなければ 403（bad origin）を返す。
• Origin が無い場合は Referer を代替的に確認し、不一致なら 403（bad referer）を返す。

ここでクロスサイトからの不正POST（CSRFや外部ページ経由の叩き）を追加的にブロックします。

簡易レート制限（IPごと）

    // [d] 簡易レート制限（IPごと）
    $ip  = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
    $key = 'color_press_rl_' . md5($ip);
    $cnt = (int) get_transient($key);
    if ($cnt > 30) { // 1分に31回超ならブロック
        wp_send_json_error(['message' => 'too many requests'], 429);
    }
    set_transient($key, $cnt + 1, 60);

1分あたりの呼び出し回数をIP単位で制限している処理です。REMOTE_ADDR をキー（color_press_rl_…）にして Transient にカウントを60秒保持し、毎回+1。読み出し値が >30（=31回目）なら HTTP 429 (Too Many Requests) を返してブロックします。スパム連打やボット負荷を緩和する目的です。

入力ホワイトリスト

    // [e] 入力ホワイトリスト
    $color = isset($_POST['color']) ? sanitize_key($_POST['color']) : '';
    if ($color === 'red') {
        $code = 1; $label = '赤';
    } elseif ($color === 'blue') {
        $code = 2; $label = '青';
    } else {
        wp_send_json_error(['message' => 'invalid color'], 400);
    }

color パラメータを受け取り、まず sanitize_key() で英小文字・数字・-_以外を除去＆小文字化します。そのうえで red / blue のみ許可（ホワイトリスト）。一致したら内部用の数値 1 / 2 と表示ラベル（赤/青）を確定し、どれにも当たらなければ 400（invalid color）で即終了。期待しているリクエストのみ許容し、改ざん文字列やスクリプト混入をここで遮断します。

応答

    // [f] 応答
    wp_send_json_success([
        'code'  => $code,
        'label' => $label,
        'text'  => sprintf('%sを押したね', $label),
    ]);

wp_send_json_success() で HTTP 200 + JSON を返し、処理を終了します（Content-Type: application/json となる）。

フロント側の JavaScript は json.success === true を確認し、この text を画面に出します。

JavaScript 側（画面側）

※コードは上記サンプルを参照

JavaScript 側ではページ読込後に各 「.color-press」 ブロックを初期化し、ボタンクリックを検知しています。

クリック時、data-ajax-url（Ajax のURL） と data-nonce（時短トークン）、押下色(data-color)を取得し、「送信中…」表示した後、念のため連打防止で一時 disabled を入れています。URLSearchParams で action = color_press / nonce / color を組み、admin-ajax へ（同一オリジン Cookie送信・キャッシュ無効にしつつ） POST します。

成功時は返却されたテキストを表示します。失敗時はエラー文を表示し、403なら「再読み込み」ヒントを出しています。

実際に送信している場所

var body = new URLSearchParams();
body.append('action', 'color_press');
body.append('nonce',  nonce);
body.append('color',  color);

fetch(ajaxUrl, {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
  body: body.toString(),
  credentials: 'same-origin',
  cache: 'no-store'
})

実際にパラメータを作成し送信している処理は、fetch(ajaxUrl……の部分です。

まとめ：JavaScriptとWordPress(PHP)で通信して値を返すサンプル

WordPress で 赤 / 青ボタンを押すと、admin-ajax にフォーム POST し、PHPハンドラが色に応じて値（1 / 2）を返し、JavaScript 側がレスポンスを受け取って「○○を押したね」と表示するサンプルです。HTML/CSS＋nonce/URLはショートコードにて埋め込み、JavaScript はページに直貼りで動きます。サーバ側はPOST限定・サイズ上限・nonce検証・Origin/Referer 確認・値のホワイトリスト・レート制限で一般的なセキュリティ対策を実装しています。

サンプルの構成

• ショートコード：UIと data-ajax-url / data-nonce を出力
• インラインJS：fetch() で admin-ajax へPOSTし、結果を表示
• PHPハンドラ：検証→数値(1/2)と文言をJSONで返却

導入手順

• functions.php にショートコード＆ハンドラを追加
• ページ本文にショートコード 「color_press_inline」 を挿入
• 同ページにJSをべた貼りする

セキュリティ

• POST以外は 405、サイズ上限(例2KB)で 413 を返す
• wp_verify_nonce() によるCSRF対策 (403) を実施
• Origin/Referer一致チェック (403) を実施
• sanitize_key()＋red|blue ホワイトリスト(400) を実施
• IPあたり1分で30回以内限定（429) を実施
• 表示は textContent（反射XSS回避）を実施

実装のコツ

• 対象ページはフルページキャッシュ除外（nonce期限切れ防止）にする必要があります
• 同一ページ複数配置OK（ユニークID対応）にするほうが想定外のエラー（うっかり重複配置）を防げます

以上で、JavaScriptとWordPress(PHP)で通信して値を返すサンプル完成です。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

AI対策（LLMO）に対する施策として、LLMS.txtの設置という方法があります。LLMS.txt とは、AI（LLM）に向けてサイトの概要、構造などを解説する情報ファイルです。LLMがサイトの内容を把握する補助情報になります。AI クローラー向けのサイト解説情報 （LLMS.txt）を作成、配置し、クロールを促進します。

本記事では、LLMS.txt を簡単に設置する方法を紹介します。

LLMS.txt を設置するプラグインは「Website LLMs.txt」

LLMS.txt を簡単に作ってくれるプラグイン「Website LLMs.txt」があります。簡単な操作でLLMS.txtを作り設置したうえで、定期的に更新してくれるプラグインです。

Website LLMs.txt のインストール方法

Website LLMs.txt プラグインをインストールします。

STEP

プラグインの選択とインストール

• WordPress の管理画面から「プラグイン」を指定して「新規プラグインを追加」をクリックします

• 検索窓に「Website LLMs.txt」を入力します
• 「Website LLMs.txt」プラグインを確認し、「今すぐインストール」をクリックします

STEP

プラグインの有効化

• 「Website LLMs.txt」プラグインの「有効化」をクリックします

インストールと有効化完了です。

Website LLMs.txt の設定と「LLMS.txt」の配置

Website LLMs.txt プラグインを用いて実際に「LLMS.txt」を配置します。最初に一回必ず実施します。

STEP

設定画面を開く

• WordPressの管理画面から「プラグイン」をクリックします
• 一覧から「Website LLMs.txt」を確認し、「Settings」をクリックします

STEP

Website LLMs.txt の設定①

• 特に設定を変える必要はないので、そのまま下にスクロールします

STEP

Website LLMs.txt の設定②

• 同じく特に設定を変える必要はありません
• Update Frequency は更新頻度です、「immediate」は「即座」で、変更都度反映されます
• 「Save Setting」をクリックします

STEP

設定完了

• 上部の「File Status」で「File is being……」と表示されていれば成功です
• リンクをクリックすると実際のファイルを表示します

LLMS.txt の中身

LLM（AI）向けに出力された「LLMS.txt 」の中身は単なるテキストファイルですので実際に見てみることができます。

一見するとサイトマップのような構成です。Webサイトの各種情報が整理され載っています。特に人間が中を確認する必要はありませんので、あとはこのまま運用すればOKです。

AI時代の到来、Webマスター、ブロガーに求められるLLMO戦略

Google が AIモードを発表し、ますます本格的に身近になってくるであろうAI時代には、AIに対してどのようにアプローチするかがマーケティングとして必要になってきます。Webの世界ではSEOをより拡張したAI対策「LLMO（Large Language Model Optimization）」が必要になります。

Webマスター、ブロガーに必要となるLLMOを次の記事でまとめました。

あわせて読みたい

ブログ運営者必見！LLMO対策の完全ガイド！SEOと一緒に対応が必要 Google が AIモードを発表、検索結果にAIの回答が標準装備されるようになり昨今AI対策「LLMO（Large Language Model Optimization）」が必要になってきています。LLMOとは、GoogleなどのAIが記事をどのように理解し、評価するかを最適化するテクニックです。ブログ運営は従来のSEO対策だけでは不十分になりつつあり、LLMOを意識したブログ運営がカギとなります。本記事では、LLMOとSEOの違い、ブログ運営への影響、そして今すぐ実践できる具体的な対策をわかりやすく解説します。

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：LLMS.txt を簡単に作成する方法

LLMS.txt を簡単に作成する方法は「Website LLMs.txt 」プラグインの利用です。通常のプラグイン同様にインストールを行い、設定そのままで保存することで自動的にLLMS.txtを作成、配置します

変わりゆく時代、変わりゆく技術の流れは早いですが、情報察知のアンテナを張って、変化について行けるWebマスター、ブロガーが活躍できる時代です。これからも頑張りましょう！

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

画像やテキストを重ね合わせることができる CSS （ Position～absolute ）はとても便利なCSSですが、要素（ブロック）の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。

本記事では、Position～absolute でセンタリングする方法を解説します。センタリングしちゃいましょう！

画像や文字を重ね合わせる方法はこちら

あわせて読みたい

【WordPressで簡単】画像の上に画像や文字を重ねて表示する方法 画像や文字を重ね合わせることで、スマートでスタイリッシュな表現ができ、読者に「かっこいい」と思ってもらえるページを作ることが可能です。HTML と CSS で実現する方法と、WordPress で応用する方法を紹介します。

Position～absolute でセンタリングする方法

Position～absolute で要素（ブロック）をセンタリングする方法は簡単です。考え方を先に解説します。

最初に左から 50% の位置にセンタリングしたい要素（ブロック）を配置します。「left : 50%」をCSSで指定することで上記の配置になります。

さらに要素の%0%の幅だけ左に移動すると、ちょうどセンタリング位置に移動します。「transform : translateX(-50%)」をCSSで指定することで要素が左に50%移動します。

サンプルコード

Position～absolute でセンタリングするサンプルです。

X 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    left : 50%;
    transform: translateX(-50%);
    border: 2px solid darkblue;
  }
</style>

Y 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    top : 50%;
    transform: translateY(-50%);
    border: 2px solid darkblue;
  }
</style>

X / Y 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    border: 2px solid darkblue;
  }
</style>

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：Position～absoluteで要素（ブロック）をセンタリングする方法

画像やテキストを重ね合わせることができる CSS （ Position～absolute ）はとても便利なCSSですが、要素（ブロック）の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。

Position～absoluteで要素（ブロック）をセンタリングする方法です。

ブラウザの幅が変化してもちゃんとセンタリングしてくれる便利なコードです。

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

WordPress のアップデートはセキュリティの観点からも実施するべきものですが、更新すると思わぬ不具合や既存のプラグインやテーマとの相性でサイトの表示が崩れたり使えなくなってしまうこともあります。

WordPress を自動更新に設定していると、勝手にアップデートしてしまい思わぬ状態になりかねません。

本記事では、WordPress の自動更新を停止（無効）にする方法を解説します。

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

WordPress を自動更新させない方法

WordPress を自動更新を停止する方法は主に３方法あります。

プラグインを多く入れるのは避けたいところです、また、「functions.php」を編集するよりも「wp-config.php」で設定する方が本来の適切な設定になりますので、本記事では「wp-config.php」を編集する方法について解説します。

■「wp-config.php」を編集する

WordPress をインストールすると、サーバー内のファイルの中に「wp-config.php」ファイルが作られます。主にレンタルサーバー側に「ファイルマネージャ」や「FTP で接続」しファイルを直接編集する必要があります。

（「wp-config.php」ファイルは WordPress 上からは編集できません。レンタルサーバー側提供の機能でファイルを編集します。）

「wp-config.php」ファイルにて、以下の設定を変更（ない場合は追記）します。

define('AUTOMATIC_UPDATER_DISABLED', true);

※自動更新を しない 場合が true になります。

FTP ソフトでファイルをダウンロード、アップロードする場合

市販の（無料もしくは有料の）FTP ソフトを用いて、レンタルサーバーに接続してファイルを取得（ダウンロード）、更新（アップロード）します。

FTP ソフトを用いた方法は、接続方法やファイルの送受信、取り扱いが難しいため、慣れている人向けの方法です。わからない方は次に紹介するレンタルサーバー側提供のファイルマネージャーを使う方法で編集してください。

FTP ソフトを用いる場合は、レンタルサーバーからサーバー内の「wp-config.php」ファイルを直接取得して更新します。

レンタルサーバーのファイルマネージャを用いる場合

初心者の場合、FTPソフトを用いるよりレンタルサーバーのファイルマネージャを利用したほうが簡単です。ファイルマネージャはレンタルサーバーサービス会社ごとに利用方法が異なります。利用例を記載します。

ConoHa WING レンタルサーバーサービスの場合

ConoHa WING でファイルマネージャを使う方法

STEP

管理マネージャからファイルマネージャをクリックする

ConoHa WING の管理画面から、「サイト管理」→「ファイルマネージャ」をクリックします。

STEP

「.htaccess」ファイルを選択して編集する

ConoHa WING のファイルマネージャから、「wp-config.php」を選択して、鉛筆アイコンを押して編集します。

編集するための画面が出るので、追記して、保存することで編集完了です。

ファイルを編集する前に、ファイルの内容を全てメモ帳にコピーするなどで、必ずバックアップをとってからファイルを編集してください。

WordPress のお役立ちテクニックはこちら

まとめ：WordPress の自動更新を停止（無効）にする方法

WordPress を自動更新に設定していると、勝手にアップデートしてしまい思わぬ状態になりかねません。様子を見つつ安全性を確認してからアップデートできるよう、WordPress の自動更新を停止（無効）にすることをおすすめします。

自動更新の停止は、「wp-config.php」を編集して設定します。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

WordPressでブログを書いていると、ドメイン名の変更や記事の統合など、URLを変更する必要が生じることがあります。しかし、何もしなければ検索順位が引き継がれず、アクセス数が激減する可能性があります。

そこで必要なのが「リダイレクト設定」です。

リダイレクト設定を行うことで、古いURLにアクセスしたユーザーが自動的に新しいURLに転送され、検索順位などの評価を概ね引き継ぐことができます。

本記事では、初心者でも簡単に理解できるリダイレクト設定の方法を紹介します。ちゃんと設定すれば評価を引き継げます。

リダイレクトとは新しい URL に自動で移動させること

リダイレクトとは、古い URL にアクセスしたユーザー（読者）に対して、新しい URL に自動で移動させることです。リダイレクトが必要なのは、URL が変更になる時です。具体的には次のようなパターンで リダイレクト設定 を行います。

リダイレクト設定の方法

■ 主なリダイレクト設定を行う方法（リダイレクトの種類）

リダイレクト設定を行う方法はいくつかあります。しかしおすすめは一つです。

数種類あるリダイレクトの方法のなかで、Google が推奨している方法は、「.htaccess」ファイルにリダイレクトの設定を書く方法です。

特に、meta タグや、JavaScript を使う方法は、古いページ（URL）をユーザーが読み込んでから強制的に新しいページ（URL）を読み込みなおさせる方法のため、SEO の観点から推奨されておらず、また、ユーザーファーストではないため避ける方が無難です。

プラグインを使い方法は設定が簡単ですが、プラグインが必ずしも 「.htaccess」ファイルにリダイレクトの設定を書く」手法を使っているとは限りません。またプラグインの多用は WordPress への負荷となるのでできる限り避けたいです。

状況を鑑みると、リダイレクト設定は「.htaccess」ファイルにリダイレクトの設定を書く」方法一択となります。

■「.htaccesss」ファイルの編集方法

「.htaccess」ファイルは WordPress 上からは編集できません。レンタルサーバー側提供の機能でファイルを編集します。

主な手法は２点「FTP ソフトでファイルをダウンロード、アップロードする」または、「レンタルサーバーのファイルマネージャーを用いて編集する」です。

FTP ソフトでファイルをダウンロード、アップロードする場合

市販の（無料もしくは有料の）FTP ソフトを用いて、レンタルサーバーに接続してファイルを取得（ダウンロード）、更新（アップロード）します。

FTP ソフトを用いた方法は、接続方法やファイルの送受信、取り扱いが難しいため、慣れている人向けの方法です。わからない方は次に紹介するレンタルサーバー側提供のファイルマネージャーを使う方法で編集してください。

FTP ソフトを用いる場合は、レンタルサーバーからサーバー内の .htaccess ファイルを直接取得して更新します。

レンタルサーバーのファイルマネージャを用いる場合

初心者の場合、FTPソフトを用いるよりレンタルサーバーのファイルマネージャを利用したほうが簡単です。

ファイルマネージャはレンタルサーバーサービス会社ごとに利用方法が異なります。利用例を記載します。

ConoHa WING レンタルサーバーサービスの場合

ConoHa WING でファイルマネージャを使う方法

STEP

管理マネージャからファイルマネージャをクリックする

ConoHa WING の管理画面から、「サイト管理」→「ファイルマネージャ」をクリックします。

STEP

「.htaccess」ファイルを選択して編集する

ConoHa WING のファイルマネージャから、「.htaccess」を選択して、鉛筆アイコンを押して編集します。

編集するための画面が出るので、追記して、保存することで編集完了です。

ファイルを編集する前に、ファイルの内容を全てメモ帳にコピーするなどで、必ずバックアップをとってからファイルを編集してください。

■「.htaccesss」ファイルに記載する内容

最初に書く「おまじない」

ファイルの一番先頭に以下を追記します。コピペでOKです。

仮にファイル内に似たような記載があっても構わず、必ずファイルの一番先頭に記載してください。

# START MY CUSTOMIZE
<IfModule mod_rewrite.c>
  RewriteEngine on
    RewriteBase /


</IfModule>
# END MY CUSTOMIZE

「# START MY CUSTOMIZE」と「# END MY CUSTOMIZE」はコメントです。# がコメントを表します、# より右側の記載は自分がわかりやすい単語に変えて問題ありません。日本語は文字化けする可能性があるのでお勧めしません。

ファイルの先頭に書く理由は、プラグインや WordPress、レンタルサーバーなどが自動で .htaccess ファイルに自動追記を行っており、ファイルの途中、または最後に追記した場合は設定が反映されない場合があるためです。

記載例）ドメインを変えた場合

古い方（帰る前のドメイン側）の「.htaccesss」にリダイレクト設定を記載します。

# START MY CUSTOMIZE
<IfModule mod_rewrite.c>
  RewriteEngine on
    RewriteBase /
    RewriteRule (.*) https://（あたらしいドメイン）/$1 [R=301,L]
</IfModule>
# END MY CUSTOMIZE

「（あたらしいドメイン）」部分に、新しいドメインを記載します。それ以外はコピペでOKです。

記載例）記事を移動、統合した場合

記事を同じブログ（同じドメイン）内で移動した場合、２個の記事を１個に統合した場合などは、移動元のURLと移動先のURLを記載します。

# START MY CUSTOMIZE
<IfModule mod_rewrite.c>
  RewriteEngine on
    RewriteBase /
    RewriteRule topics/元の記事.html$ https://（ドメイン）/topics/新しい記事.html [R=301,L]
</IfModule>
# END MY CUSTOMIZE

「topics/元の記事.html$」が移動元のURLを示します。ドメイン直下にある場合は、「元の記事.html$」だけになります。$を忘れずに。

移動先（新しい記事）のURLは「https://（ドメイン）/topics/新しい記事.html」となり、URL全体を記載します。$は付きません。

記載例）ディレクトリー以下全てを、別のディレクトリーにまとめてリダイレクトする場合

「https://ドメイン/aaa/」の下にある記事全てを、「https://ドメイン/bbb/」の下にリダイレクトする場合を指します、ディレクトリー単位でのリダイレクトの設定方法です。

この場合、もともと「https://ドメイン/aaa/」配下にあった記事やディレクトリーは、全て「https://ドメイン/bbb/」配下に同じ構成、同じファイル名で存在していなければなりません。

# START MY CUSTOMIZE
<IfModule mod_rewrite.c>
  RewriteEngine on
    RewriteBase /
    RewriteRule aaa(.*)$ /bbb$1 [R=301,L]
</IfModule>
# END MY CUSTOMIZE

「aaa」が移動元のディレクトリーで「bbb」が移動先のディレクトリーです。

サイトをSSL化した場合（ http → https に URL が変わったとき）

サイトを SSL 化した場合、http から https への変換はほとんどの場合、レンタルサーバー側のサービスにて自動的に行われます。

そのため、ユーザー（利用者）側で設定することは基本的にはありません。

ユーザー（利用者）側で設定する場合の記載は以下です。

# START MY CUSTOMIZE
<IfModule mod_rewrite.c>
  RewriteEngine on
    RewriteBase /
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END MY CUSTOMIZE

リダイレクト「301」と「302」の違い

リダイレクトには、用途によって異なる２種類のリダイレクトが用意されています。

「３０１リダイレクト」と「３０２リダイレクト」です。

基本的には３０１リダイレクトを利用することが多いでしょう。もしサイトメンテナンス中などで一時的に特定のページへのリダイレクトを利用する場合は、[R=301,L] を [R=302,L] に変えて記載することで、「３０２リダイレクト」として利用できます。

リダイレクトを設定する期間

リダイレクトを設定する期間は、「もともとのURLに対してアクセスが無くなる日まで」が最も適した答えになります。

もともとのURLに被リンクを張っている可能性や、ユーザー（読者）がブックマークしている可能性などを考えると、ほぼ永久的にリダイレクトを設定しておく必要があります。

ただしドメインを変更した場合など、もともとのドメインを維持していくために費用が発生する場合もあるため、ある程度の期間を経て削除することも考えなければなりません。

もっとも判断材料するべきポイントは検索順位（SEOの評価）の引継ぎです。Google などで狙っているキーワードを検索し、新しいドメインが検索されるようになれば移行は完了したと考えることもできます。

検索順位がほぼ引き継がれる期間などを考えると、１年以上は保持することが一般的です。

リダイレクト設定の注意点

リダイレクトを設定する場合の注意点、および、やってはいけないリダイレクト設定を解説します。

■ リダイレクト回数は最小限にする

リダイレクト設定はとても便利です。しかし、計画性なく記事のURLを変え続けた場合など、リダイレクトが多重になる場合があります。

「ページＡ」→「ページＢ」→「ページＣ」……

リダイレクトは少なからずユーザー（読者）側に負荷をかけること、なにより、リダイレクト回数が多すぎると SEO でマイナス評価を受けるリスクがあるため、リダイレクト回数は少なくしてください。

例）「ページＡ」→「ページＢ」→「ページＣ」なら、「ページＡ」→「ページＣ」と設定する。

■ リダイレクトによる永久ループ（リダイレクトループ）に注意する

リダイレクト設定を利用すると論理的には、「ページＡ」→「ページＢ」→「ページＣ」→「ページＡ」→「ページＢ」→……と永久ループさせることが可能です。（実際には「リダイレクト回数が多すぎます」のエラーになります）

もし、わざと作ったら、「いやがらせ」以外に何者でもありませんね。

誤ってリダイレクトループを作っている場合もあるため、サイト設計（リダイレクトの設計）には十二分に注意してください。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：リダイレクト設定完全ガイド

ドメインを変更した場合や、記事のURLを変えた場合、記事を統合した場合は、リダイレクト設定を行います。

検索順位などの評価を引き継ぎつつ、ユーザー（読者）を自動で新しいURLに移動させることができます。

リダイレクト設定を活用して、ブログライフを楽しんでくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR