前置き

特に何も考えずWordPressの投稿ページに画像を貼るだけだとクリックでの画像拡大とかしてくれない。
画像クリックでの拡大方法と、拡大したときの背景色変更方法を備忘録として残す。

設定の有無でどう変わるか

これが特に何も設定してない状態。クリックしても何も起こらない。

でこっちが設定後。

設定方法

画像を選択してリンクから「クリックで拡大」を設定する必要がある。

背景色の設定方法

デフォルトだと画像の描写範囲外は全て白になり大変目に悪い。
また、動的に生成してる関係上、子テーマのCSSに追加するだけでは適用されない。

なので生成部分を書き換える。

自作の子テーマ、大体 wordpress/wp-content/themes/hogehoge-child とかに作ってるはずなのでそのディレクトリのそれぞれのファイルの最終行に以下を追加。

custom.js

document.addEventListener('click', function() {
    setTimeout(() => {
        const scrim = document.querySelector('.wp-lightbox-overlay.zoom.active .scrim');
        if (scrim) {
            scrim.style.setProperty('background-color', '#202020', 'important');
        }
    }, 0);
});

function.php

// ==========================
// custom.js読み込み
// ==========================
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'child-custom-js',
        get_stylesheet_directory_uri() . '/custom.js',
        array(),
        false,
        true // フッターで読み込む
    );
});

最後に。

セレクタの .wp-lightbox-overlay.zoom.active .scrim は、今使用しているテーマではこうだっただけで、もしかしたらテーマごとに違うかも。
もし違ったらデベロッパーツールを駆使して自分の環境に合わせて。

投稿 画像クリックでの拡大と背景色変更 は はんだとキーボードのあいだ に最初に表示されました。

前置き

WordPressの通知などメールでのシステムメッセージ送信は自身のWebページのホスト名のメールアドレスからしか送れないらしい？
少なくともプラグインの Contact Form 7 はそういう仕様。

なのでメールサーバを用意して、hoge@bassdig.ddns.net を使えるようにする必要がある。

使用パッケージ

使用するパッケージは Synology Mail Server と Antivirus Essential の2つ。

基本、前提パッケージは自動で入れてくれるのに、これは自動で入れてくれない。
メール送受信でエラーが起きてハマった。

設定方法

基本的な設定は以下。

これらと、「エイリアス」画面で @ より前の部分を設定する。
メアド全て乗ってるので画像は割愛。

LAN外に解放してるわけじゃないので載せても大丈夫だとは思うけど念の為。

SMTPリレー

メールの大量送受信の予定はないけどセキュリティ的にも設定しておいたほうが良さそう？それとも設定必須？
この辺専門範囲外なのであんまりよくわかってない。

gmailのリレーサービスを利用するよう設定した。

ちなみに、2025年03月14日以降 gmail は基本認証（Basic Authentication）を廃止。Synology Mail Server でSMTPリレーの設定を行うには「アプリパスワード」を使用する必要がある。

アプリパスワードは、2段階認証を有効にしたGoogleアカウントで、OAuthに対応していないアプリからの接続を許可するための代替認証方式。Googleが生成する16桁の一時的なパスワードを使って認証する。

この辺見るといいかな。
https://support.google.com/mail/answer/185833?hl=ja

最後に。

Antivirus Essentialがクソ重い。メールのスキャンを切ればいらなくなるのかな…。
LAN外に公開しないし切るのも手かなと思ってる。

他にわからないことあればこことか見る。
https://kb.synology.com/ja-jp/DSM/help/MailServer/mailserver_desc?version=7

投稿 Synology Mail Server の設定 は はんだとキーボードのあいだ に最初に表示されました。

前置き

synologyのnasでwordpressを構築すると、

ルーター>NASポート>WebStation>WordPress と、
Webstation(nginx)を経由することになる。

WebstationではWebポータルというものを定義するのだが、ここでサービス毎に独立した仮想ホストとして扱うらしい。

Webstationの設定と仕様

以下は現状の設定。
WANのIPでアクセスされるとデフォルトのWebサーバに転送し、bassdig.ddns.netへのアクセスはすべてwordpressへ転送する。

ユーザー定義ポータルは内部的にリバースプロキシのような動作をする。

このとき REMOTE_ADDR に渡されるのは、ポータルが処理した接続元IPである。つまりLAN内のデバイスからアクセスした場合でもグローバルIPになるっぽい。

やっと本題になるが、つまりはローカルからでも外からアクセスしているように見えるので.htaccessで192.168.1.0/24のみwp-adminへのアクセスを許可、とかの設定ができない。致命的。

X-Forwarded-Forで元のIPを読むとか色々試したけどどうにもうまくいかなかった。

バッチでなんとかする。

そこで、htaccessの自動更新スクリプトを作成し、常に自身のグローバルIPを設定しそこからのアクセスのみWordpressの管理画面を表示するようにした。

以下はスクリプト。

#!/bin/sh

# ======================================
# BASSDIG WordPress IP 自動更新スクリプト
# ======================================

# === 外部IP取得（DDNS から） ===
NEWIP=$(curl -s https://ifconfig.me/ip)

if [ -z "$NEWIP" ]; then
    echo "$(date '+%Y-%m-%d %H:%M:%S') ERROR: Failed to resolve bassdig.ddns.net" >> /var/log/bassdig_ip_update.log
    exit 1
fi

# === .htaccess の場所 ===
HTA="/volume1/web_packages/wordpress/.htaccess"

# === バックアップ（初回または上書き用） ===
if [ ! -f "$HTA.bak" ]; then
    cp "$HTA" "$HTA.bak"
fi

# === BASSDIG SETTINGS ブロック内だけ書き換え ===
sed -i "/# BEGIN BASSDIG SETTINGS/,/# END BASSDIG SETTINGS/ s/^RewriteCond %{REMOTE_ADDR}.*/RewriteCond %{REMOTE_ADDR} !^$NEWIP$/" "$HTA"

synologyのデフォルトのタスクスケジューラを利用して自動実行する。
コントロールパネル>タスクスケジューラ>作成>予約タスク>ユーザー指定のスクリプト

実行時のメール送信設定などもここから。

あと肝心のhtaccessの設定は最終行に以下を追加。
スクリプトでBEGIN BASSDIG SETTINGS～END BASSDIG SETTINGSの間のみ変更を行う。

# BEGIN BASSDIG SETTINGS

# ============================
# admin-ajax.php は常に許可
# ============================
RewriteCond %{REQUEST_URI} ^/wp-admin/admin-ajax\.php$
RewriteRule .* - [L]

# ============================
# wp-login.php を制限
# ============================
RewriteCond %{REQUEST_URI} ^/wp-login\.php$
RewriteCond %{REMOTE_ADDR} !^218.41.146.89$
RewriteRule ^.*$ - [R=404,L]

# ============================
# wp-admin ディレクトリを制限
# ============================
RewriteCond %{REQUEST_URI} ^/wp-admin
RewriteCond %{REMOTE_ADDR} !^218.41.146.89$
RewriteRule ^.*$ - [R=404,L]

# END BASSDIG SETTINGS

これで自身のグローバルIP以外からの管理画面へのアクセスは404へと誘導される。

最後に

Webstation経由じゃなく直接Wordpressにという手も使えるらしいけど、調べた感じ結構Webstationはデフォルトで怪しい通信等をブロックしたり公開範囲絞ったりしてくれてるらしいのでできればこのまま使うほうがセキュアなサイトを作れそうかなという判断。

投稿 管理ページへのアクセス制限と.htaccessの自動更新 は はんだとキーボードのあいだ に最初に表示されました。

前置き

SynologyのNASでWebサイトを構築する場合に必須というか、使わなきゃならないのがWebstaionというアプリ。

こいつがなかなかにクセが強いというかなんというか。という感じ。
特に複雑な設定なしにWebページを作成できるという点は良いんだけど、本職の人とか、逸般の誤家庭の人とかだと、なんでこれ設定するのにこんなことしなきゃいけないの…って感じになる。

設定について

このWebページはSynologyのNASにWordpressを導入して構築しているが、NASじゃなくきちんと鯖を用意するべきかなぁ…とも思ってる。

メイン鯖はProxmoxVE入れて遊んでるんだけど、やっぱり色々と遊ぶのでよく壊れがちというか…。備忘録も消えたら意味ないのでRAID組んでバックアップもあるNASのが安心というか…。

少し話がそれたが、以下が現状の設定。

デフォルトポータルのphpMyAdminやWordpressは無効化しておくのが良い。

wordpressをインストールしたばかりのデフォルト設定だと、wordpressへのアクセスは http://ローカルIP/wordpress/ になる。

つまり、せっかくドメインとか取得してローカルからのアクセスもDNSサーバを構築とかしても
アクセスするには https://bassdig.ddns.net/wordpress とかになる。クソダサい。

ユーザー定義して、bassdig.ddns.netへのアクセスはすべてwordpressにしておくと良い。

最後に

ちなみにphpMyAdminとかもそのままにしておくとdigコマンドとかでドメイン名からIP見られて、直接IPでアクセスされるとhttp:/IPアドレス/phpmyadmin とかでアクセスできるのでデフォルトポータルは基本無効化しておくべき。

投稿 Webstaionの設定について は はんだとキーボードのあいだ に最初に表示されました。

ただここで問題になるのがSynology NASのWebStation。

synologyはデフォルトでnginxを使用してユーザーごとにwebページを作成する機能がある。
アクセスされたポートやエイリアスによってどのサービスに転送するかを決定しており、
このサイトの場合はbassdig.ddns.netからのアクセスはすべてwordpressへと転送する設定にしている。

その過程でアクセス元のIPはグローバルIPに書き換えられる。
htaccessで192.168.1.0/24に制限とかするのが一般的だが、それをしてしまうとローカルからのアクセスでも既にグローバルIPに書き換えられているため弾かれてしまうっぽい。

解決するためにChatGPTに聞きながら色々試してみたけどどうもうまくいかない。とりあえずは二要素認証を有効にしといたけど、なんかいい方法ないかなぁ。。

投稿 WordPressの管理ページへのアクセス制限の話 は はんだとキーボードのあいだ に最初に表示されました。

前置き

ローカルや外からのアクセスで生のIPアドレスを使用するのはちょっと。
ということでまずはDDNSの設定。

No-IPの設定

アカウントの作成等については割愛。

ManagedDNS > DNS Record から Add Record をクリックでDNSの設定を行う。
デフォでアクセスしてるIPv4アドレスが入り、Hostに任意のホストネームを設定する。

最低限Aレコードを設定しておけばアクセスはできる。

• AはIPv4
• AAAAはIPv6
• MXはメールサーバ
• CNAMEはCDNとかリダイレクト
• NSが権威DNSサーバ

ぐらいまで覚えておけば個人で使う分には事足りるんじゃないかな。

SynologyのDNS Serverの設定

Synologyの方で使うのはこれ。

インストールしたらメインメニューからDNS Serverを選び設定画面を起動

作成からプライマリゾーンを選択。

追加できたら作成したレコードを選択して
リソースレコードを編集。とりあえずAタイプ。

リソースレコードの追加。

名前を空白にすると、リソースレコードがドメイン名と同じになる。
空白と、*で登録しておく。

最終的には以下のような形。これで内向きの設定が完了。

WordPressの設定

サイトアドレスに登録したホスト名を入れて保存しておく。

Webstationの設定

デフォルトポータルはすべて無効化しておく。外からアクセスできるようになってしまうので。
ユーザー定義で以下のように設定することで、bassdig.ddns.netでのアクセスはすべてWordpressに転送する。所謂、リバースプロキシと思っていいのかな。

最後に。

以上で基本的には終了だが、LAN内の危機からDNSでの接続を行うには、各機器でDNSサーバの割当をこのDNSサーバにするか、ルータやモデムの設定でプライマリDNSサーバをこのサーバに設定する必要がある。

ルータやモデムの設定についてはメーカーや型番によって千差万別なので各自で調べる感じで。

投稿 SynologyのDNSサーバとNo-IPでの設定 は はんだとキーボードのあいだ に最初に表示されました。

投稿 Hello world! は はんだとキーボードのあいだ に最初に表示されました。