このブログの技術構成

はじめに

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

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

カスタムCSS

CSS
/* 固定ページのみ日付とタグエリアを非表示にする */
.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;
}
/*******************************/


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

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


/** 全要素のアニメーションを解除 **/
*,
*::before,
*::after {
    transition: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
}
/*******************************/

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


/**** recapchaアイコンをオフ ****/
.grecaptcha-badge { 
    visibility: hidden; 
}
/*******************************/


テーマファイルエディタ(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;
	}
}


主要なプラグイン

名前機能
Category Order and Taxonomy Terms Orderカテゴリの並び替え。
オプションで自動ソートONにしないと動かないので注意。
Code Block Proコードのシンタックスハイライトがきれいになる。
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://yuki-diary.net/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サポートに問い合わせ(あんまり有益な情報が得られず)

コメント