月: 2021年12月

WordPressのfavicon

WordPressのfaviconをデフォルトから自分が用意したアイコン画像に変更します。

favicon の作成と設定

[外観] > [カスタマイズ] で開いたテーマのカスタマイズ画面で、サイドメニューの[サイト基本情報] を選択するとサイドメニューに表示される「サイトアイコン」で自作のアイコン画像を選択して指定することができます。

画像のサイズは「サイトアイコンは512 × 512ピクセル以上の正方形にしてください」とのことです。

今回、このブログ向けにアイコン画像を自作してみました。画像のサイズが間違えて512 × 512ピクセルより少し大きく作ってしまったのですが、画像をアップロードした後に512 × 512ピクセルで切り抜きする機能があったので調整することができました。
自作のアイコン画像はこちら（PNG形式で作りました）↓

あとがき

自作のアイコン画像は、ブログの名前「Mad Overload」の頭文字「M」にしました。
ゲームWizardryの頭文字「W」を回転させると「M」になるので、ここでもWizardry感を出してみました。
ただ、実際に指定してブラウザのタグを見てみると、字が細くて何かしょぼい。。
気が向いたら字を太くするとか、もっといいデザインを考えようと思います。

WordPressのデザイン

WordPressをインストールした際の最新のデフォルトテーマは「Twenty Twenty-One」でしたが、文章が読みやすくシンプルなデザインにしたかったので、過去のデフォルトテーマを眺めてその中から「Twenty Sixteen」を使うことにしました。

テーマのカスタマイズ

テーマを選択したデフォルトのままではあまりにも個性がないので、テーマをカスタマイズしてWizardry FC版のような雰囲気にすることにチャレンジしてみました。

追加CSS を使って簡単にカスタマイズ

テーマのカスタマイズは、サブメニューに[追加CSS] という便利な機能があるので、この機能を使うことにしました。（テーマのソースコードを直接修正しません）

ウェブデザインの知識については、HTML5とCSS3ことをよく理解できていないのですが、Chrome のデベロッパーツールを使って変更したい箇所で有効になっているCSSの定義を探しては[追加CSS]にコピペして値を変更するという作業を繰り返して、なんとかWizardry っぽい感じにすることができました。
今回[追加CSS] に記載した内容は下記になります。

/* layout */
.site-header {
  padding: 0.5em 7.6923%;
}
.site-branding, .site-header-menu, .header-image {
  margin-top: 0.375em;
  margin-bottom: 0.375em;
}
.site-header-menu {
  margin-top: 1.575em;
  margin-bottom: 0;	
}
.site-main {
  padding: 0.5em;
  border: solid;
  border-radius: 6px;
}
/* font */
body {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
}
h2 {
  font-family: Merriweather, Georgia, serif;
}
.site-branding .site-title a {
  color: red;	
  font-family: Merriweather, Georgia, serif;
}
.site-description {
  color: red;
  font-family: Merriweather, Georgia, serif;
}
.main-navigation {
  font-family: Merriweather, Georgia, serif;
}
.entry-title {
  font-family: Merriweather, Georgia, serif;
}
.wp-block-code {
  color: #0ff;
}
.wp-block-search .wp-block-search__label {
  font-family: Merriweather, Georgia, serif;
}
.site-info {
  font-family: Merriweather, Georgia, serif;
}

できたのがこちら↓

Chrome デベロッパーツール

Chrome デベロッパーツールのことを少し書いてみます。Chrome デベロッパーツールはChromeに備わっている機能で、ブラウザに拡張機能を追加しないで使うことができるツールです。

ツール自体は、確認対象のページを表示した状態で、メニューから[その他のツール] > [デベロッパーツール] をクリックして起動します。

今回はページのデザインに関する調査なので、”Elements”タブに表示されるHTMLのコードを展開して調査したい行をクリックで選択し、下の”Styles”タブに表示されるCSSの定義の中からレイアウトであれば(margin, padding, border)、フォントであれば(font-family, color)を探すという感じで進めます。

この[Style]タブはとても便利で、カーソルを当てると現れるチェックをOFFにするとその定義が無効になって即時で表示中のページに反映されます。それだけでなく、値の変更や、プロパティの追加もできるので、ここでちょこちょこと編集してから[追加CSS]にコピペするという使い方をするのも効率がよくていいです。

今回のデザイン変更は約3時間でできました。画面を少し動かして目に見えた箇所を調整した感じなので、WordPressのいろいろな機能を使うとデザインが崩れるかもしれませんが、とりあえず今回はこのくらいで満足しておきます。使っていて気になったら適宜直していこうとは思います。

参照

WordPressのセキュリティ対策（WP本体）その2

WordPress本体に対して行うセキュリティ対策「WordPressのセキュリティ対策（WP本体）」の続きです。

WordPressのバージョン情報を隠蔽する

WordPressのバージョンが分かってしまうと、それをヒントに攻撃者からそのバージョンの脆弱性が狙われるリスクが高くなるため、バージョン情報はページ上のどこにも出力されない方がよいという考えに基づく対策です。

WordPressのデフォルトテーマのままでは見た目上はバージョン情報が表示されませんが、HTMLのソース上にはWordPressのバージョン情報が出力されてしまうようです。
テーマ「Twenty Sixteen」で、ページのソースを調べると下記のように出力されていました。（パスの部分は*に置き換えてあります）

headタグ内に出力

<script>window._wpemojiSettings = {*.js?ver=5.8.2"}};
<link rel='stylesheet' id='*-css' href='*.css?ver=5.8.2' media='all' />
<meta name="generator" content="WordPress 5.8.2" />

bodyタグ内に出力

<script src='*.js?ver=5.8.2' id='admin-bar-js'></script>

バージョン情報を出力しないようにする方法

function.php に所定のコードを追記追記することで対応できるようです。function.php の編集はWordPressの管理画面上でも行うことができます。（[外観] > [テーマエディター]でfunction.php を選択して編集します）

metaタグのgeneratorを非表示にする

function.php に下記を追記します。（末尾に追記しました）
これで、metaタグ自体が出力されないようになります。

remove_action( 'wp_head', 'wp_generator' );

JavaScriptやCSSのパラメータを非表示にする

function.php に下記を追記します。（末尾に追記しました）
これで、scriptとlinkのタグ自体は変わらず出力されますが、パラメータの”?ver=5.8.2″の部分は出力されなくなりました。

function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );

なお、下記のコード追記でも非表示にできるようでしたが、headタグ内のscriptタグのパラメータのみ非表示にすることができませんでした。（原因は分かりませんが、実際に起きたこととして記録しておきます）

function remove_src_wp_ver( $dep ) { 
	$dep->default_version = '';
}
add_action( 'wp_default_scripts', 'remove_src_wp_ver' );
add_action( 'wp_default_styles', 'remove_src_wp_ver' );

今回は以上です。WordPress本体に対して行うセキュリティ対策、他にも何かあれば掲載しようと思います。

WordPressのセキュリティ対策（プラグイン）

プラグインを使ったWordPressのセキュリティ対策をします。
使いたかった機能から候補のプラグインは以下の2つに絞りました。
・SiteGuard WP Plugin – EG Secure Solutions
・All In One WP Security & Firewall(AIOWPS)
たった1日ですが吟味した結果、使いやすそうなSiteGuard WP Plugin を使うことにしました。純国産として定評のやつです。

今回対応したこと

使いたかった機能

  • ログインページのURLを変更
    • WordPressのデフォルト「/wp-login.php」ではアクセスできなくする。プラグインのデフォルト「/login_<5桁の乱数>」よりもっと見つけづらくしたかったので変更しました。
  • ユーザ名の漏洩防止
    • 投稿者アーカイブを使って登録されているユーザ名が特定されないようにする（”/?author=n” でユーザ名がURL上に表れて特定されないようにする）
  • PingBack機能を無効化する
    • DDoS攻撃の踏み台としてPingBack機能が悪用されないようにする。
  • アカウントロック
    • 連続してログイン失敗した場合、一時的にログインできないようにする。
  • ログイン失敗時のメッセージ共通化
    • ログインに失敗した際に表示するメッセージからユーザ名が登録されているか、パスワードのみの不一致だったのかが分からないようにする。

せっかくだから使った機能

  • CAPTCHA
    • ログインページに動的に生成される画像に表示された内容を入力させて認証時の要素として使う機能。（コメント投稿も）
  • ログイン通知
    • ログインが成功する度に、登録したメールアドレス宛にメールで通知を行う。
  • 更新通知
    • WordPress本体、プラグイン、テーマの更新がある場合、登録したメールアドレス宛にメールで通知を行う。

今回はここまで。他にも確認したいことややっておきたいことがあるので、次回はその辺をやろうと思います。ただ、どこまでやってるかを開けっ広げにするのもどうかと思うので投稿はしないかもしれないです。

WordPressのセキュリティ対策（WP本体）

セキュリティ対策に有効なプラグインがありますが、その前に最低限やっておきたいWordPress 本体のセキュリティ対策をしておきます。
※WordPress のバージョン：5.8.2（2021年12月20日時点の最新版）

今回対応したこと

WordPressを最新版に更新

[ダッシュボード] > [更新] の現在のバージョンのリンク「再確認してください」をクリック。最新版だったので最終チェック日時が更新されただけでした。

WordPressの自動更新の有効化

[ダッシュボード] > [更新] に”このサイトは WordPress の新しいバージョンごとに自動的に最新の状態に保たれます” と表示されていたのでデフォルトで有効になっているようです。

その下に「メンテナンスリリースとセキュリティリリースのみの自動更新に切り替えます」というリンクがあったので試しにクリックしてみました。すると、”メンテナンスリリースとセキュリティリリースのみで自動的に最新の状態に保たれます” に表示が変わったので、その下のリンク「WordPress のすべての新しいバージョンに対する自動更新を有効にします」をクリックして元に戻しておきました。

プラグインとテーマを最新版に更新

[ダッシュボード] > [更新] に”〜はすべて最新版です” と表示されてたので、今回は何も更新しませんでした。

ユーザ名、パスワードの複雑化

ユーザ名は、直前の投稿「ブログ開設作業」でも書きましたが、ログイン時に入力するユーザ名とブログ上に表示するユーザ名を別にすることができるので、ログインに使うユーザ名は推測が困難な文字列にしておきました。これで、ユーザ名を固定したパスワードのブルートフォース攻撃が簡単に行われないようにしました。（投稿者アーカイブによるユーザ名の特定を防ぐ方法はプラグインで対応します）

パスワードは、新たにパスワードマネージャで生成した英数字記号混在の30桁以上の文字列を設定しました。

不要なユーザの削除

このブログは自分一人でしか使わないので、ユーザは1人だけしか登録されていない状態にしておきます。

今回のWordPress本体のセキュリティ対策は以上としておきます。次回はプラグインを使ったセキュリティ対策をします。

参考

ブログ開設作業

今回のブログ開設作業がどのようなものであったのかの記録です。

環境・費用

費用をなるべく抑えたかったので、環境はさくらインターネットの「さくらのレンタルサーバ」というサービスの「スタンダードプラン」（初期費用1,048円円、年間料金5,238円）を使うことにしました。
https://rs.sakura.ad.jp/standard.html

「スタンダードプラン」はWordPressが使える一番安いプランです。必要条件と思っていたSSL対応（Let’s Encrypt）、独自ドメインを備えていて、ディスク容量も100GBとブログを運用するにはこれで充分と判断しました。

SSL対応はLet’s Encrypt を採用したので無料でできましたが、独自ドメイン（madoverload.com）は有料サービスだったので、安定の.com ドメイン（年間料金1,952円）を取得することにしました。独自ドメインは複数年契約できますが、大して安くならないので1年契約にしました。
https://domain.sakura.ad.jp/

結果、当ブログ運用にかかる費用は下記になります。
・初期費用：1,048円
・年間費用：7,190円

作業時間

昨日は一日中このブログ開設の作業をしていた感じです。初投稿が18時頃だったので7〜8時間くらいかかったようです。
独自ドメインのDNSへの反映やSSLを有効にするのに少し待ち時間ができましたが、それ以外は待ち時間なく作業することができた感じです。
おおまかな作業手順だけ記載しておきます。

  1. データベース作成（MySQL）
  2. www配下にフォルダ作成（WordPressインストール先）
  3. 独自ドメイン取得
  4. 取得したドメインを新規追加
  5. SSL証明書の申請・設定（Let’s Encrypt）
  6. WordPress インストール（クイックインストールを使用）
  7. WordPress 初回ログイン・プラグインの更新

WordPress を公式サイトからダウンロードしたものをアップロードしてインストールするより簡単そうなので、せっかく用意されているクイックインストールを使いました。クイックインストールは実際簡単でしたが、インストールする際に登録したユーザしかインストール時に作成されないので、安全面でもいいのではないかと思いました。
ちなみにログイン時に入力するユーザ名とブログ上に表示するユーザ名を別にすることができるので、ログインに使うユーザ名は推測が困難な名前にしておいた方がよさそうです。今回、簡単なユーザ名にしてしまったので、インストール後にWordPressの設定画面で別のユーザを作成して、インストール時に作成したユーザは削除することにしました。

まだ初期設定状態なので、とりあえずこれからセキュリティに配慮した諸々の対応をするところからしていこうと思います。WordPressはしばらく触っていなかったので、最新の情報を調査しながら進める予定です。

ブログ開設

ブログを開設しました。

システム関連の情報を記録・整理する場として使っていこうと思います。

madoverload.com の「Mad Overload」はゲームWizardry のサブタイトル「Proving Grounds of the Mad Overlord」（狂王の試練場）から。”Overlord”（君主）が“Overload”（過負荷）なのは単にドメイン名が取れなかったからです。

よろしくお願いします。