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

ブログでおすすめ商品やサービスを紹介する際に、テーブル（表）で紹介して、◎や△を付けたい場合があります。とても有効で分かりやすく、読者ファーストのデザイン、装飾になります。

装飾例

本記事では、テーブル（表）に◎や△を付ける方法を解説します。◎◎しちゃいましょう！

プラグイン「SIMPLE BLOG DESIGN」を使う

「SIMPLE BLOG DESIGN」の紹介

SIMPLE BLOG DESIGN は「株式会社メリル」が発売する有料（ 9,800円 ）のプラグインです。本記事の目的であるテーブルへの◎〇△などの記号付与はもちろん、ブログ制作に役立つ多様な機能が包含されています。

その他にも優れた機能がありますので、有料ですが、利用価値の高いプラグインとしてご紹介します。

SIMPLE BLOG DESIGN で追加されるブロック例

「SIMPLE BLOG DESIGN」の購入

SIMPLE BLOG DESIGN のご購入は、「株式会社メリル」の専用ダウンロードページからクレジット会社情報を入力しモジュールをダウンロードします。支払いはクレジットカード支払いとなります。買い切り式ですので、一度購入してしまえば永続的に使えるほか、自身が運営しているサイトであれば、使いまわし可能です。（１回買えば複数の自分のブログで利用できる）

SIMPLE BLOG DESIGN のご購入はこちらから

PR

＼一日でも早いほうが役に立つ／

SIMPLE BLOG DESIGN のご購入はこちらから

プラグインの購入はこちらから（https://meril.co.jp/simple-blog-design）

テーブル（表）に◎や△を付ける方法

「SIMPLE BLOG DESIGN」でテーブルを作る

〇や△を入れるテーブルは「SIMPLE BLOG DESIGN」専用のテーブルを用います。テーブルは WordPress のパターンから選択します。

「SIMPLE BLOG DESIGN」で記号（〇や△）を入れる

実際にテーブルに〇や△を入れていきます。

こちらのように、赤字にしたり☆を付けたりすることもできます（実際に 「SIMPLE BLOG DESIGN」で作成した表になります）。

購入とプラグインのインストール方法

「SIMPLE BLOG DESIGN」は有料プラグインとなっています。以下の「購入はこちらから」をクリックして、購入・ダウンロードページに進んでください。

SIMPLE BLOG DESIGN のご購入はこちらから

PR

＼一日でも早いほうが役に立つ／

SIMPLE BLOG DESIGN のご購入はこちらから

プラグインの購入はこちらから（https://meril.co.jp/simple-blog-design）

支払いが完了すしたら続けて以下のファイルをダウンロードします。

インストール完了です。「SIMPLE BLOG DESIGN」の機能を使い始めることが可能です。

WordPress テーマによっては、標準機能で記号を使うことができる

WordPress のテーマ SWELL （有料：17.600円）を用いている場合は、テーマの標準機能でテーブル内に記号（〇など）を表示することができます。

SWELLで作ったテーブル（記号）の例

SIMPLE BLOG DESIGN プラグインよりも若干記号が小さめなのが特徴です。詳しくは以下の記事を参照してください。

＼SWELLで作るテーブルの中の記号／

Enjoy SWELL

【SWELL】テーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示する方法 | Enjoy SWELL SWELL は標準の機能でテーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示することができます。本記事では、テーブルにマークを付ける方法を解説します。

SIMPLE BLOG DESIGE と SWELL の比較

SIMPLE BLOG DESIGN プラグインでも SWELL でも似たような記号表示をすることができます。実際の見た目を比較します。

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

まとめ：テーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示する方法

ブログでおすすめ商品やサービスを紹介する際に、テーブル（表）で紹介して、◎や△を付けたい場合があります。とても有効で分かりやすく、読者ファーストのデザイン、装飾になります。「SIMPLE BLOG DESIGN」プラグインを使うと、簡単に◎や△をを付けることができます。

見やすいデザイン・装飾はクリック率、収益率を上げます。１日でも早く導入して１日でも早く収益アップを狙いましょう。

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

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

詳しくはこちら

詳しくはこちら

詳しくはこちら

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

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

著作者：Boon ☆

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

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

PR

CSSはホームページ上で色々なデザインを表現できるとても便利なものですが、直線や四角の図形は作りやすいものの、実は「円弧」を作ろうと思うと悩みます。（角丸や円は簡単ですが円弧は難しい）。

本記事では、CSSで円弧を描く方法を紹介します。さらに円弧を成長させるアニメーションの方法も紹介します。

CSSで作る円弧のサンプル

円弧を描く

円弧をCSSで書いてみます。なお、border-radius ではなく、svg の dasharray を使っています。

アニメーションで成長させる演出も可能です。

border-radius ではなく、svg の dasharray を使う利点は円弧の内側を透過した状態で円弧が描けることです。

こちらも、1/4 の円弧を描き、90度分アニメーションで成長させています。

円弧を作る方法

SVG で円を描き、円周を破線にする

<svg class="mySvg" width="220" height="220">
  <circle cx="110" cy="110" r="100" fill="none" stroke="blue" stroke-width="2" style="stroke-dasharray: 10 10;">
</svg>

• cx, cy は円の中心点を表していて、幅 220、高さ 220 の svg の中心（ 110, 110 ）に円の中心を持ってきていますので、円周になります
• r は円の半径で 100 を指定しています
• fill=”none” で円の内側を透明にします（塗りつぶしたい場合は色を指定）
• stroke=”blue” は円周の線の色、stroke-width=”2″ は円周の線の太さ、stroke-dasharray: 10 10; で 長さ10 の破線を引きます

破線の長さを変えて円弧にする

stroke-dasharray を使って破線の長さを変えることで、長さ（角度）の違う円弧を自由に引くことができます。

「stroke-dasharray: 長さ1 長さ2;」 の破線の長さの考え方は、以下の通りです。

ここで長さ１に 90度分（1/4 円周）、長さ２に360度分（円周）を指定した場合、最初の長さ１だけが表示される円弧となります。円周は （半径✕２）✕ 3.14 ですので、計算結果は以下となります。

直線の破線を円周に割り当てると以下の通り、狙った角度の円弧となります。

実際に、円弧を引くと以下のように表示されます。

<svg class="mySvg" width="220" height="220">
  <circle cx="110" cy="110" r="100" fill="none" stroke="blue" stroke-width="10" style="stroke-dasharray: 157 628;">
</svg>

実際は、円弧の開始位置が 右真横（90度の地点）になります。（こういうものだと覚えてください）。見た目の位置を変えたい場合は、transform : rotate(-90deg); で回転させるのが最も簡単です。

実際に、円弧を回転させると以下のように表示されます。

<div style="text-align:center">
  <svg class="mySvg" width="220" height="220">
    <circle  cx="110" cy="110" r="100" fill="none" stroke="blue" stroke-width="10"  style="stroke-dasharray: 157 628;">
  </svg>
</div>

<style>
  .mySvg {
    transform : rotate(-90deg);
  }
</style>

扇形にする

stroke-dasharray を使って扇形を表現することもできます。扇形にする場合は、円周の線の太さを円の中心まで来るように太くします。

<div style="text-align:center">
  <svg class="mySvg" width="220" height="220">
    <circle  cx="0" cy="0" r="100" fill="none" stroke="blue" stroke-width="200" style="stroke-dasharray: 78 628;">
  </svg>
</div>

<style>
  .mySvg {
    transform : rotate(-90deg);
  }
</style>

円の中心位置に気を付けつつ、円周の線の太さを半径✕２以上にすることで扇形になります。（円周の線の太さは円の内外に平等に太くなるので、円の中心まで満たす場合は半径の２倍の太さが必要です）

円弧をアニメーションさせる方法

アニメーションさせる方法

円弧をまるで伸びるようにアニメーションさせる場合は、transform を使うのが簡単です。

<svg class="MySvg" width="200" height="200">
  <circle  cx="0" cy="0" r="150" fill="none" stroke="red"  stroke-width="100" style="stroke-dasharray: 0 942; animation: MyDrawCircle 1.0s infinite;">
</svg>

<style>
  @keyframes MyDrawCircle {
    to {
      stroke-dasharray: 235 942;
    }
  }

  .MySvg {
    transform : rotate(180deg);
  }
</style>

• 「stroke-dasharray: 0 942」と破線の長さを最初「0」にすることでもともと破線は表示されません
• CSS の animation でアニメーションを定義し、@keyframes で「stroke-dasharray: 235 942;」と破線の長さを伸ばしたい位置まで定義することで船長するようにアニメーションします

アニメーションで「infinite」を指定すると永続的に繰り返し、「forwards」に変えるとページ表示時の最初の一回のみアニメーションします。

アニメーションサンプル

３個の円弧を組みあわせて一緒に伸ばす

<div class="myContainer11"  style="text-align:center">
  <svg class="MySvg" width="200" height="200">
    <circle  cx="0" cy="0" r="150" fill="none" stroke="red" stroke-width="50"  style="stroke-dasharray: 0 942; animation: MyDrawCircle11 1.0s infinite;">
  </svg>
  <svg class="MySvg" width="200" height="200">
    <circle  cx="0" cy="0" r="100" fill="none" stroke="orange" stroke-width="50"  style="stroke-dasharray: 0 628; animation: MyDrawCircle12 1.0s infinite;">
  </svg>
  <svg class="MySvg" width="200" height="200">
    <circle  cx="0" cy="0" r="38" fill="none" stroke="pink" stroke-width="76"  style="stroke-dasharray: 0 314; animation: MyDrawCircle13 1.0s infinite;">
  </svg>
</div>

<style>
  .myContainer11{
    position : relative;
    width : 220px;
    height : 220px;
    margin : 0 auto;
  }

  @keyframes MyDrawCircle11 {
    to {
      stroke-dasharray: 235 942;
    }
  }
  @keyframes MyDrawCircle12 {
    to {
      stroke-dasharray: 157 628;
    }
  }
  @keyframes MyDrawCircle13 {
    to {
      stroke-dasharray: 60 314;
    }
  }

  .MySvg {
    position: absolute;
    top : 0px;
    right : 0px;
    transform : rotate(180deg);
  }
</style>

レンジに応じて円弧の長さが変わる

<div style="text-align:center">
  <svg class="mySvg" width="220" height="220">
    <circle id="myCircle" cx="110" cy="110" r="100" fill="none" stroke="blue" stroke-width="10" style="stroke-dasharray: 157 628;">
  </svg>
  <br>
  <input type="range" id="inputRange" min="0" max="100" value="25" style="width: 300px;">
</div>

<style>
  .mySvg {
    transform: rotate(-90deg);
  }
</style>

<script>
  document.getElementById("inputRange").addEventListener("input", function() {
    const inputValue = parseInt(this.value, 10);
    const maxValue = 100;
    const circumference = 2 * Math.PI * 100; // 円周
    const dashValue = (inputValue / maxValue) * circumference;
    
    document.getElementById("myCircle").style.strokeDasharray = `${dashValue} ${circumference - dashValue}`;
  });
</script>

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

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

ブログ

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

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

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

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

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

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

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

まとめ：円弧（扇形）を描く方法

CSSで円弧（扇形）を描く方法を紹介しました。

動きのあるサイトはかっこよく見えますね。どんどん使ってより素敵なサイトを作りましょう。

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

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

詳しくはこちら

詳しくはこちら

詳しくはこちら

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