XSERVERでは、「無料独自SSL」が利用できるので、試しに「Angel21 HP」サイトに適用してみました。
サーバパネルの「ドメイン」の「SSL設定」で、対象とするドメインを選択し、「独自SSL設定の追加」タグをクリックし、「□CSR情報(SSL証明書申請情報)を入力する」をチェックして、CSR情報を入力します。
国(country)、都道府県(state)、市区町村(local)、組織(org)、部署(unit)を、サンプルや指示を参考に入力し「独自SSL設定を追加する（確定）」ボタンを押します。
およそ1時間ほどで、https://でアクセスできるようになりました。
ただし、そのままでは、旧URL（http://）でアクセスしても、新URL（https://）に転送してくれません。
そこで、
http://www.a21-hp.com でアクセスすると、
https://www.a21-hp.com に自動転送してくれるように
.htaccessファイルをhtmlドキュメントルートに置きました。
.htaccessファイルの内容は以下としました。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
WordPress側は、管理画面にログイン後、設定メニューで、
URL記載の2箇所を変更しました。
また、WordPressプラグイン「Better Search Replace」でDB内のURL表記を一括検索置換しました。
以下のサイトを参考にさせて頂きました。ありがとうございました。
Webサイトを「HTTP」から「HTTPS」へ切り替える際に行う一連の作業をまとめました｜今村だけがよくわかるブログ
■ブラウザでの見え方の違い
ブラウザChrome（OS:OpenSUSE）で、これまでのAngel21-HP（HTTPS非対応）を表示。
URL（www.a21-hp.com）の左側に、（i）マークが表示されます。
その部分をクリックすると、「このWebサイトへの接続は暗号化されていません。・・・」と表示されます。
ブラウザChrome（OS:OpenSUSE）で、HTTPSに対応したAngel21-HP（XSERVER無料独自SSL利用）を表示。
URL（https://www.a21-hp.com）の左側に、鍵マークと「保護された通信」が緑色で表示されます。
（Windows10のブラウザEdgeで表示すると、鍵マーク（灰色）のみで表示されました。）
その部分をクリックすると、「サーバへの接続は暗号化されています。」と表示されます。
ただし、より深くリンクを辿ると、SSL証明書の発行が簡易的なものなので、悪意を持つ者が制作したサイトの可能性も残っているので注意しましょう・・・的な話になります。
本サイトなどは、ログインが必要なサイトではないし、金融情報や個人情報を扱うサイトでもないので、無料SSL利用でも問題ないでしょう。
試しに、ブラウザChrome（OS:OpenSUSE）で、楽天銀行（HTTPS）を表示してみました。
URL（https://・・・）の左側に、鍵マークとそれに続くサイト説明文字が緑色で表示されます。
信頼できる発行機関からのSSL証明書を利用していることを意味しています。SSL証明書にはランクがあり、より高いランクの証明書は発行に費用がかかり、本人確認も入念に行われるらしいです。犯罪者が、高い費用を払って、身元を明かしてまでSSL証明書を取得し、偽サイトを作る事を防ぐ一助とはなるかも知れません。
金融関連のサイトにログインする際は、ＩＤとパスワードの盗難に合わない為にも、「https://」と鍵マークを確認し、サイトが偽物か本物か確認する癖を付けましょう。
・・・とは言え、地方銀行のＨＰなどはまだまだセキュリティレベルの低いものが見受けられるので、そちらの方が問題かも・・・。