このブログの技術構成

はじめに

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

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

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

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

サーバ契約

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

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

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

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

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

WordPressの構成とか

構築

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

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

テーマカスタマイズ

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

スキン：アリス（ローズ）※カスタマイズしまくってます

カスタムCSS

CSS
:root {
	--text-orange: #FFE99A;
	--light-orange: #fff0d2;
	--lightest-orange: #fffcf6;
	--radius-default: 7px;
}

/*********角をまるめる*********/
/*画像*/
img{
	border-radius: var(--radius-default) !important;
}
/******************************/



/***埋め込みURLのサムネイルサイズ****/
.blogcard-thumbnail {
    /* デフォルト160pxを上書き */
    width: 190px !important;
}
@media screen and (max-width: 834px) {
  .blogcard-thumbnail{
     /* デフォルト120pxを上書き */
    width: 150px !important;
    }
}

.blogcard .blogcard-thumbnail img {
    width: 100% !important; 
    height: auto !important;
}
/******************************/




/*********全体の背景とか*********/
body{
	background-color: white !important;
}
/* ヘッダとフッタのしましま */
.header, .footer {
background-color: #fffceb;
background-image: linear-gradient(-90deg, #ffce8080 50%, transparent 50%),linear-gradient(#ffce8080 50%, transparent 50%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
/*以下のサイトで生成できます
  develop.tools/css-checkered
*/
}
/*テーブル背景色*/
table tr:nth-of-type(2n+1) {
  background-color: var(--lightest-orange);
}
/*フッタ背景、モバイルメニュー*/
#footer,
.mobile-menu-buttons{
	background: var(--light-orange);
}
/******************************/



/*******見出し、サイドバー*******/
.article h2{
    border-left: none !important;
    border-radius: var(--radius-default) !important;
    background-color: var(--light-orange);
}
.article h3{
    border-left: none !important;
    border-radius: var(--radius-default) !important;
    background-color: #fff7e7;
}

.sidebar h3 {
	border-bottom: none;
	background-color: #fff7e7;
}
.pagination-next-link,
.toggle-button,
.cat-link{
	background-color: var(--light-orange) !important;
}
/*検索ボックス*/
[type="submit"].search-submit{
background-color: var(--light-orange);
}
.search-edit{
	border: 2px solid var(--light-orange) !important;
}
/******************************/



/*********文字色など*********/
/*カテゴリの区切り線*/
.widget_categories ul li a{ 
  border-bottom: 2px dashed var(--light-orange); 
}

.tagline,/*サブタイトル*/
.breadcrumb-caption,/*パンくずリスト*/
.entry-title,/*本文タイトル*/
.related-entry-card-title,/*関連記事*/
.fa,
.entry-card-title/*カテゴリ内タイトル*/,
.pagination-next-link,/*次のページ*/
.toggle-button,
.toggle-button::before,
.cat-link,
#slide-in-sidebar,
/*もくじ*/
.toc-title,.toc a
{
	color: var(--cocoon-text-color);
}

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




/**********太字指定***********/
.site-name-text{
	font-weight: 500;
}
/******************************/




/***********もくじ***********/
.toc {
	border-radius: 10px;
	border: 3px dashed var(--text-orange);
	background: white;
}
ol.toc-list > li:before,
.toc ol li ol a::before {
	background: var(--text-orange);
}
/*****************************/




/*インデックスからカテゴリを消す*/
/*カテゴリページの不要文字消去*/
.cat-label,
.archive-title{
	display: none;
}


/*********フォントサイズ*********/
/*「目次」の文字*/
.toc-title {
	font-size: 20px;
}
/*キャッチフレーズ*/
.tagline{
	font-size: 15px;
}
/*パンくずリスト*/
#breadcrumb{
	font-size: 15px;
}
/*カテゴリ画面のタイトル*/
.entry-card-title{
	font-size: 15px;
}
.menu-caption{
	font-size: 13px !important;
}
/*プロフィールの文字*/
.author-box{
	font-size: 16px;
}
/*****************************/




/***********余白調整***********/
/*フッタ*/
.footer,
.footer-bottom{
	margin-top: 0px;
}

/*記事エリア下部*/
.main{
	padding-top:0px !important;
	padding-bottom:0px !important;
}

/*見出し*/
h2{
	margin-top: 20px !important;
	margin-bottom: 15px !important;
}
h3{
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
/*画像の下*/
.wp-block-image{
	margin-bottom: 4px !important;
}
/*ヘッダの下*/
.tagline{
	margin: 0 0 20px 0;
}
/*パンくずリスト*/
/*アイコン色は .fa で変化してます*/
#breadcrumb{
	margin-top: 0px;
	margin-bottom: 0px;
}
/*カテゴリ画面のタイトル*/
.entry-card-title{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 6px;
}
.entry-content p {
  margin-bottom: 5px !important;
}
/****************************/




/*******アニメーション解除*******/
* {
  transition: none !important;
  transition-duration: 0s !important;
}
.a-wrap:hover {
	transform: none !important;
	box-shadow: none !important;
	background: none !important;
}
.pagination-next-link:hover {
  color: var(--cocoon-text-color) !important; 
}
/*******************************/


主要なプラグイン

名前機能
Category Order and Taxonomy Terms Orderカテゴリの並び替え。
オプションで自動ソートONにしないと動かないので注意。
Code Block Proコードのシンタックスハイライトがきれいになる。
Envira Gallery Liteブログトップのここちゃん写真集（タイル）の表示に利用。
EWWW Image Optimizerアップした画像の縮小とEXIF情報を除去してくれる。
WP 2FA – (2要素認証) Two-factor authentication for WordPressログイン時に二要素認証をしてくれる。
怖いのでなんとなく入れている。
XO Securityログイン履歴保存やログインURL変更ができる。
URL変更は必須かと思う。
※変更するとWordpress公式アプリでログイン出来ないので注意（login.phpじゃないとだめ）
XML Sitemap Generator for GoogleGoogleサーチコンソールとかで使うサイトマップを作ってくれる。
https://cute-dolls.info/post-sitemap.xml
BackWPupブログデータを世代指定で保存してくれる。
いつか役に立つかもね。
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サポートに問い合わせ（あんまり有益な情報が得られず）