このブログの技術構成

はじめに
サーバ契約
WordPressの構成とか
参考：Wordpress管理画面が死ぬ程遅くなった際のメモ

はじめに

FC2ブログやnoteみたいな無料サービスは手軽なんですが、サービス終了の危険性があります。
特にFC2なんてそれ系のジャンルのせいで悪名高すぎるので使ってて怖かったです。
もし興味を持っていただけたら、まずは無料ブログで初めてみて本格的にはまったら自前のサーバを契約すると面白いですよ。

どっかで聞いたのですが、個人ブログって9割ぐらいが短期間で飽きて終了するらしいです。
アフィリエイトなんて今の時代厳しいし、何らかのモチベーションが無いと続けるのは難しいんでしょうね。
このブログは超ニッチ戦略で非営利の「刺さる人には刺さりまくる」ブログを目指しています。
この世の誰かの役に立ったらそれで十分なのです。
あとアクセス解析で今日は何人来てくれた…を見るのが地味に楽しみだったりします。

私は特に、別界隈のブログをFC2からWordPressに移行したこともあります。
データがいっぱいあって大変でした。
移行用データはCSVかなんかでエクスポートできるのですが、FC2のデータがガタガタになってて結構苦労しました。。

なにより自前サーバのほうがカスタマイズ幅が段違いなのでね。
広告を付ける際の制限もありません。

サーバ契約

サーバはXserverのレンタルサーバを利用しています。

レンタルサーバー高速・高機能・高安定性の【エックスサーバー】

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額693円(税込)から利用可能。まずは無料お試し10日間。

12ヶ月まとめて支払うと、毎月990円です。
…と書くと安く見えますが、1年だと11,880円です。
この会社はサポートが充実していて好きです。
DifyもXServerのVPSサービスを契約して遊んでました。

ドメイン名取得【XServerドメイン】

ドメイン取得サービス【XServerドメイン】は格安1円から取得可能！人気の.com/.net/.jpは1円からご利用いただけます。

ドメインもXServerのサービスを使っています。
XServerレンタルサーバと合わせるとドメイン登録がとっても楽です。
ドメイン無料特典とかを使わなかった場合、例えばこのブログのドメイン「.info」は年間2000円ぐらいです。
.comとか.co.jpはもっと高いです。

WordPressの構成とか

構築

XServerのWordPress簡単インストールという機能を使っています。
複雑な知識無しでWordPressが構築できます。
まじで構築だけなら5分で終わります。（実際にアクセス出来るようになるまでは1時間ぐらいかかりますが）

php.iniとかキャッシュ設定とかXserver独自の高速化オプションとかはすべて初期値です。
一時期クソ遅くなった時に調査で色々いじったけど何も変わらなかったです。

テーマカスタマイズ

Cocoonというテーマを使っています。
よく分からんけど有名なので。
以下、主要なカスタマイズ内容を掲載します。

スキン：てがきノート(ブルーコーラル)※カスタマイズしまくってます

フォント：游ゴシック体、ヒラギノ角ゴ（文字の太さ500）

カスタムCSS

タップして表示

CSS

:root {
	/* 塗りつぶし色 */
	--base-color: rgb(79,99,142);
}


/********* 色変更(文字) *********/
/*記事タイトル*/
.entry-title,
/*プロフィール*/
.author-box .author-name a,
/*パンくずリスト*/
.breadcrumb,.breadcrumb a,
/*検索結果の検索文字列*/
.search-edit
{
	color: var(--cocoon-text-color);
}
/*******************************/



/***** 色変更(塗りつぶし) *****/
/* もくじ */
.toc-title,
.toc-list > li > a::before
{
	background: var(--base-color);
}
.toc-list > li > ol li a:before{
	border: 2px solid var(--base-color);
}
.toc-list > li > a{
	border-top: solid 1px var(--base-color);
	border-bottom: solid 1px var(--base-color);
}
.toc/* もくじ背景 */
{
	background: #fafafa !important;
}
.toc-title::before/*目次左のマーク*/
{
	color: var(--base-color);
}

/* ページネーション */
.pagination-next-link:before,
.pagination .current,
/* 検索ボタン */
.wp-block-search__button,
/* 記事下のカテゴリ */
.cat-link
{
	background-color: var(--base-color);
}
.pagination-next-link,
.cat-link{
	color: white;
}

/*******************************/




/* 固定ページの日付とタグエリアを非表示 */
.page .article-header .date-tags {
    display: none !important;
}




/*******ヘッダに柄追加*******/
#header{
	background-image: repeating-linear-gradient(45deg, rgba(var(--gray-light-color), 1), rgba(var(--gray-light-color), 1) 3px, rgba(var(--white-color), .7) 0, rgba(var(--white-color), .7) 6px);
}
/*サブタイトルの背景削除*/
.tagline{
	background-image: none;
}
/*******************************/


/******文字サイズ、太さ調整******/
/*スマホ版のヘッダ文字サイズはテーマファイルエディタで指定してます*/

.tagline{/*サブタイトル*/
	font-size: 17px;
}
.blogcard-footer {/*埋め込みURL*/
	font-size: 14px;
}
.list-item-caption,.cat-item{/*カテゴリ文字*/
	font-size: 15px;
}
/*******************************/



/********* カテゴリ *********/
/* 1. デフォルトの装飾（丸マークなど）をリセット */
.widget_categories ul li a:before {
  content: none !important;
}
/* 2. レイアウト・余白の調整 */
.widget_categories > ul > li,
.widget_categories .cat-item > a {
  padding-left: 0;
}
/* 子カテゴリー（第2階層）のインデント */
.widget_categories ul li ul {
  padding-left: 24px;
}
/* 3. リンクテキストのスタイル */
.widget_categories ul li a {
  display: block;
  position: relative;
  padding: 4px 0;
  margin: 0;
  font-size: 90%;
  color: #41CDFC;
  line-height: 1.5;
  text-decoration: none;
}
.widget_categories ul li a:hover {
  color: #41CDFC; /* ホバー時も色を維持 */
}
/* 4. 投稿数（.post-count）のスタイル */
.widget_categories ul li a .post-count {
  float: initial;
  display: initial;
}
/* 投稿数を ( ) で囲む */
.widget_categories ul li a .post-count::before {
  content: ' (';
}
.widget_categories ul li a .post-count::after {
  content: ')';
}
/*******************************/



/************ 余白調整 ************/
.logo{
	padding-bottom: 0px;
}
.site-name-text-link,.tagline{
  padding: 0;
}
.tagline{
	margin-top: 0px;
}

.article p/*文章下部*/
{margin-bottom: 1em;}
.entry-content/*記事全体の下部余白*/
{margin-bottom: 0em;}

.article h2/*H2タグ下部*/
{margin-bottom: 1em;}
.article h3/*H3タグ下部*/
{margin: 1em 0 1.3em;}

.wp-block-image/*画像下部*/
{margin-bottom: 0.2em !important;}
/* カテゴリ画面カード */
.entry-card-content {
  padding-bottom: 0.5em;
}
/* 記事内埋め込みブログカード */
.wp-block-embed,.blogcard-wrap{
	margin-bottom: 1em !important;
}
.footer-bottom/*フッタ*/
{margin-top: 5px;}

/*もくじ*/
.toc-list li a{
	padding-top: 6px;
	padding-bottom: 6px;
}
/*******************************/


/** 全要素のアニメーションを解除 **/
*,*::before,*::after{
  transition: none !important;
  transition-duration: 0s !important;
  animation: none !important;
  animation-duration: 0s !important;
}
/*** カテゴリのホバー演出をオフ ***/
.widget_categories ul li a:hover {
  background: transparent !important;
  transform: none !important;
}
/*******************************/



/****** コメント欄をカスタム ******/
.comment-form-email,#email-notes {
  display: none;
}
/*******************************/



/*********** 要素非表示 ***********/
.cat-label,/*サムネのカテゴリ名*/
.author-thumb,/*プロフアイコン*/
.wp-block-search__label/*検索ボックス*/
{
	display: none;
}
/* プロフィール名のマーカーを消す */
.author-box .author-name a {
  background-image: none !important;
}
/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge { 
  visibility: hidden; 
}
/*******************************/



/* サイドバーにfaアイコン付与 */
#author_box-2 .widget-title::before,
#categories-2 .widget-title::before{
  all: revert;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: 8px;
}
#author_box-2 .widget-title::before {
  content: "\f2bd";
}
#categories-2 .widget-title::before {
  content: "\f03a";
}
/*******************************/


/* 説明文の行数制限（3行）を解除する */
.blogcard-snippet {
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  height: auto !important;
}

:root {
	/* 塗りつぶし色 */
	--base-color: rgb(79,99,142);
}


/********* 色変更(文字) *********/
/*記事タイトル*/
.entry-title,
/*プロフィール*/
.author-box .author-name a,
/*パンくずリスト*/
.breadcrumb,.breadcrumb a,
/*検索結果の検索文字列*/
.search-edit
{
	color: var(--cocoon-text-color);
}
/*******************************/



/***** 色変更(塗りつぶし) *****/
/* もくじ */
.toc-title,
.toc-list > li > a::before
{
	background: var(--base-color);
}
.toc-list > li > ol li a:before{
	border: 2px solid var(--base-color);
}
.toc-list > li > a{
	border-top: solid 1px var(--base-color);
	border-bottom: solid 1px var(--base-color);
}
.toc/* もくじ背景 */
{
	background: #fafafa !important;
}
.toc-title::before/*目次左のマーク*/
{
	color: var(--base-color);
}

/* ページネーション */
.pagination-next-link:before,
.pagination .current,
/* 検索ボタン */
.wp-block-search__button,
/* 記事下のカテゴリ */
.cat-link
{
	background-color: var(--base-color);
}
.pagination-next-link,
.cat-link{
	color: white;
}

/*******************************/




/* 固定ページの日付とタグエリアを非表示 */
.page .article-header .date-tags {
    display: none !important;
}




/*******ヘッダに柄追加*******/
#header{
	background-image: repeating-linear-gradient(45deg, rgba(var(--gray-light-color), 1), rgba(var(--gray-light-color), 1) 3px, rgba(var(--white-color), .7) 0, rgba(var(--white-color), .7) 6px);
}
/*サブタイトルの背景削除*/
.tagline{
	background-image: none;
}
/*******************************/


/******文字サイズ、太さ調整******/
/*スマホ版のヘッダ文字サイズはテーマファイルエディタで指定してます*/

.tagline{/*サブタイトル*/
	font-size: 17px;
}
.blogcard-footer {/*埋め込みURL*/
	font-size: 14px;
}
.list-item-caption,.cat-item{/*カテゴリ文字*/
	font-size: 15px;
}
/*******************************/



/********* カテゴリ *********/
/* 1. デフォルトの装飾（丸マークなど）をリセット */
.widget_categories ul li a:before {
  content: none !important;
}
/* 2. レイアウト・余白の調整 */
.widget_categories > ul > li,
.widget_categories .cat-item > a {
  padding-left: 0;
}
/* 子カテゴリー（第2階層）のインデント */
.widget_categories ul li ul {
  padding-left: 24px;
}
/* 3. リンクテキストのスタイル */
.widget_categories ul li a {
  display: block;
  position: relative;
  padding: 4px 0;
  margin: 0;
  font-size: 90%;
  color: #41CDFC;
  line-height: 1.5;
  text-decoration: none;
}
.widget_categories ul li a:hover {
  color: #41CDFC; /* ホバー時も色を維持 */
}
/* 4. 投稿数（.post-count）のスタイル */
.widget_categories ul li a .post-count {
  float: initial;
  display: initial;
}
/* 投稿数を ( ) で囲む */
.widget_categories ul li a .post-count::before {
  content: ' (';
}
.widget_categories ul li a .post-count::after {
  content: ')';
}
/*******************************/



/************ 余白調整 ************/
.logo{
	padding-bottom: 0px;
}
.site-name-text-link,.tagline{
  padding: 0;
}
.tagline{
	margin-top: 0px;
}

.article p/*文章下部*/
{margin-bottom: 1em;}
.entry-content/*記事全体の下部余白*/
{margin-bottom: 0em;}

.article h2/*H2タグ下部*/
{margin-bottom: 1em;}
.article h3/*H3タグ下部*/
{margin: 1em 0 1.3em;}

.wp-block-image/*画像下部*/
{margin-bottom: 0.2em !important;}
/* カテゴリ画面カード */
.entry-card-content {
  padding-bottom: 0.5em;
}
/* 記事内埋め込みブログカード */
.wp-block-embed,.blogcard-wrap{
	margin-bottom: 1em !important;
}
.footer-bottom/*フッタ*/
{margin-top: 5px;}

/*もくじ*/
.toc-list li a{
	padding-top: 6px;
	padding-bottom: 6px;
}
/*******************************/


/** 全要素のアニメーションを解除 **/
*,*::before,*::after{
  transition: none !important;
  transition-duration: 0s !important;
  animation: none !important;
  animation-duration: 0s !important;
}
/*** カテゴリのホバー演出をオフ ***/
.widget_categories ul li a:hover {
  background: transparent !important;
  transform: none !important;
}
/*******************************/



/****** コメント欄をカスタム ******/
.comment-form-email,#email-notes {
  display: none;
}
/*******************************/



/*********** 要素非表示 ***********/
.cat-label,/*サムネのカテゴリ名*/
.author-thumb,/*プロフアイコン*/
.wp-block-search__label/*検索ボックス*/
{
	display: none;
}
/* プロフィール名のマーカーを消す */
.author-box .author-name a {
  background-image: none !important;
}
/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge { 
  visibility: hidden; 
}
/*******************************/



/* サイドバーにfaアイコン付与 */
#author_box-2 .widget-title::before,
#categories-2 .widget-title::before{
  all: revert;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: 8px;
}
#author_box-2 .widget-title::before {
  content: "\f2bd";
}
#categories-2 .widget-title::before {
  content: "\f03a";
}
/*******************************/


/* 説明文の行数制限（3行）を解除する */
.blogcard-snippet {
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  height: auto !important;
}

テーマファイルエディタ（style.css）

CSS

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.site-name-text {
        font-size: 1.3rem !important;
    }
	.tagline{
		font-size: 0.8rem !important;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.site-name-text {
        font-size: 1.3rem !important;
    }
	.tagline{
		font-size: 0.8rem !important;
	}
}

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.site-name-text {
        font-size: 1.3rem !important;
    }
	.tagline{
		font-size: 0.8rem !important;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.site-name-text {
        font-size: 1.3rem !important;
    }
	.tagline{
		font-size: 0.8rem !important;
	}
}

テーマファイルエディタ（functions.php）

PHP

<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く


//コメント欄の「コメント」と「名前」を上下入れ替え
function reorder_comment_fields($fields) {
    $comment_field = $fields['comment'];
    $author_field = $fields['author'];
    unset($fields['comment']);
    unset($fields['author']);
    $fields['author'] = $author_field;
    $fields['comment'] = $comment_field;
    return $fields;
}
add_filter('comment_form_fields', 'reorder_comment_fields');

function my_redirect_after_comment($location, $comment) {
  // 投稿のパーマリンクを取得
  $redirect_url = get_permalink($comment->comment_post_ID);
  // クエリパラメータを付けてリダイレクト
  $location = add_query_arg('comment_status', 'submitted', $redirect_url);
  return $location;
}
add_filter('comment_post_redirect', 'my_redirect_after_comment', 10, 2);

function my_show_comment_status_message() {
    // URLのクエリパラメータを安全に取得
    $comment_status = filter_input(INPUT_GET, 'comment_status');
    // パラメータが 'submitted' の場合にメッセージを表示
    if ($comment_status === 'submitted') {
		echo '<div class="comment-success-message">コメントありがとうございました。</div>';
    }
}
add_action('wp_head', 'my_show_comment_status_message');

<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く


//コメント欄の「コメント」と「名前」を上下入れ替え
function reorder_comment_fields($fields) {
    $comment_field = $fields['comment'];
    $author_field = $fields['author'];
    unset($fields['comment']);
    unset($fields['author']);
    $fields['author'] = $author_field;
    $fields['comment'] = $comment_field;
    return $fields;
}
add_filter('comment_form_fields', 'reorder_comment_fields');

function my_redirect_after_comment($location, $comment) {
  // 投稿のパーマリンクを取得
  $redirect_url = get_permalink($comment->comment_post_ID);
  // クエリパラメータを付けてリダイレクト
  $location = add_query_arg('comment_status', 'submitted', $redirect_url);
  return $location;
}
add_filter('comment_post_redirect', 'my_redirect_after_comment', 10, 2);

function my_show_comment_status_message() {
    // URLのクエリパラメータを安全に取得
    $comment_status = filter_input(INPUT_GET, 'comment_status');
    // パラメータが 'submitted' の場合にメッセージを表示
    if ($comment_status === 'submitted') {
		echo '<div class="comment-success-message">コメントありがとうございました。</div>';
    }
}
add_action('wp_head', 'my_show_comment_status_message');

主要なプラグイン

名前	機能
Category Order and Taxonomy Terms Order	カテゴリの並び替え。オプションで自動ソートONにしないと動かないので注意。
Code Block Pro	コードのシンタックスハイライトがきれいになる。
Contact Form 7	永遠に来ないであろうお問い合わせフォーム用。律儀にreCAPTCHAも設定してあるぞ。
EWWW Image Optimizer	アップした画像の縮小とEXIF情報を除去してくれる。
WP 2FA – (2要素認証) Two-factor authentication for WordPress	ログイン時に二要素認証をしてくれる。怖いのでなんとなく入れている。
XO Security	ログイン履歴保存やログインURL変更ができる。 URL変更は必須かと思う。 ※変更するとWordpress公式アプリでログイン出来ないので注意（login.phpじゃないとだめ）
XML Sitemap Generator for Google	Googleサーチコンソールとかで使うサイトマップを作ってくれる。 https://yuki-diary.net/post-sitemap.xml
BackWPup	ブログデータを世代指定で保存してくれる。いつか役に立つかもね。
Broken Link Checker	リンク切れ検知に。
WP Multibyte Patch	マルチバイト文字関連のバグを直してくれるらしいけど効果は知らん。
WP-Optimize – クリーン、圧縮、キャッシュ	不要なキャッシュ削除とかDB最適化が出来る。
WP-Sweep	不要なリビジョン削除とかが出来る。

参考：Wordpress管理画面が死ぬ程遅くなった際のメモ

プラグインを色々入れて遊んでいたとき、気がついたら管理画面の動作が遅くなってきたのに気づきました。
具体的には管理画面トップの表示で遅いと20秒掛かったり。
投稿ページの表示、保存に1分以上掛かったり。

システム屋からすると一番困る「再現性がない」と言うやつで、早いときもありました。
まじで困り果てました。
色々試した結果、ネットで腐る程言われてるプラグインの干渉が原因でした。（推定）

使ってないプラグインは消そうね！！
あと、動作遅延の調査目的で入れた「Query Monitor」が原因で更に遅くなったというね。
※ブラウザ開発者ツールで見てたらこれが原因でレスポンスが遅くなってた

以下、試したけど効果がなかったこと

Xserver管理画面
サーバパネル＞ホームページ
　XPageSpeed設定をオフ
サーバパネル＞Wordpress
　WordPressセキュリティ設定をオフ
サーバパネル＞高速化
　XアクセラレータをOFF、サーバキャッシュ・ブラウザキャッシュを削除、オフ
サーバパネル＞セキュリティ＞WAF設定
　設定オフ
サーバパネル＞PHP
　バージョンをいじる、php.iniのメモリ上限とかいじる
ファイルマネージャーで以下のファイルをいじる
　ドメイン/public_html/wp-config.php

Cocoon設定
「ブログカード」タブでカード表示をオフ
「エディタ」タブでエディターにテーマスタイルを反映させる　をオフ
「管理者画面」タブでアクセスカウンタをオフ
「アクセス解析・認証」タブでClarityの解析コードを削除
左のタブ「高速化」で、遅延読み込みとかcss最適化の高速化オプションをオフ

その他
Chromeのキャッシュを全消去
シークレットモード、ブラウザを変えてテスト（Chrome→Firefox）
通信速度は問題なし（実家、レンタルwifi共に再現）
phpのデバッグログを出そうとしたけど出なかった
Xserverサポートに問い合わせ（あんまり有益な情報が得られず）