当サイトはリンクフリーです。管理人の許可なくサイトやSNSにリンクを貼っていただいて問題ありません。
サイト情報

当サイトは、管理人がWebサイトを作成した時に行った「WordPress[※1]高速化」や「カスタマイズ方法」を忘れないためにメモ(覚え書き)として残しておくために作成したサイトです。折角作成するので、初心者の方にもわかりやすいよう、IT[※2]用語に「説明」や「ルビ」を記載して詳細に説明しています。
OBOEGAKIでは新たなカスタマイズ方法を考えるため、テーマはCocoonを使用しています。自作テーマを使用しているサイトはコチラ。
※1 | WordPress WordPress Foundationによって開発されたオープンソース・ブログプラットフォーム。プログラム言語がわからなくても管理画面からサイトやブログの作成が可能。 |
※2 | InformationTechnology 主にパソコンやモバイル端末をベースにネットワークを利用した技術全般のこと。 |
サーバースペック
VPS[※1] | ConoHa VPS![]() |
メモリー | 2GB→ 4GB(2022/9/30~) |
CPU | 3コア → 4コア(2022/9/30~) |
SSD | 100GB |
OS | CentOS Stream 8[※3](KUSANAGI 9[※4]) |
※1 | VirtualPrivateServer(仮想専用サーバー) 複数のユーザーで1つのサーバーを共有するが、専用サーバーと同等の機能を有しているサーバ |
※2 | ConoHa VPS GMOインターネット株式会社が運営するVPS。豊富なテンプレートイメージと高速SSDによって、たったの25秒で「今すぐ使える」サーバーが作れる。 |
※3 | CentOS Stream CentOSプロジェクトが開発するLinuxディストリビューション(Linuxと動作に必要なソフトを組み合わせたもの)で、Red Hat Enterprise Linuxの開発版(アップストリーム)にあたる。 |
※4 | KUSANAGI プライム・ストラテジー株式会社が開発した、CentOSベースの超高速WordPress実行環境。 |
導入ソフトウェア
Webサーバー | NGINX[※1] |
SMTP[※2]サーバー | Postfix[※3] |
PHP[※4] | PHP 8 |
データベース | MariaDB[※5]10 |
高速化ソフトウェア | WEXAL®Page Speed Technology[※6] |
CMS[※7] | WordPress |
WordPressテーマ | Cocoon[※8] |
※1 | NGINX NGINXが開発したWebサーバーソフトウェア。軽量で同時に大量のアクセスがあった場合でもレスポンス性能が大きく下がることがない。 |
※2 | SimpleMailTransferProtocol 電子メールを転送するために使用される規約。SMTPサーバーは主にメール送信に使用される。 |
※3 | Postfix Wietse Venema氏によって開発されたメール転送エージェント。CentOSには標準でインストールされている。 |
※4 | PHP The PHP Groupによって開発されたプログラミング言語。主にWebサイト制作に使用され、サーバー側で処理される。 メリット:サーバー側で処理するためユーザー側の設定が必要ない(ユーザー環境に左右されにくい)。また、ユーザーはプログラム処理後のコード(HTML)しか見ることができないためPHPコードの盗用も防止にもなる。 デメリット:サーバーで処理されるのでサイト表示後の処理はできない(JSなどブラウザなどで処理するプログラム言語ならば可能)。 |
※5 | MariaDB Michael Widenius氏によって開発されたMySQLから派生したデータベース管理システム。大量のデータを高速に処理できることが特徴。 |
※6 | WEXAL®Page Speed Technology プライム・ストラテジー株式会社が開発した、KUSANAGI専用のWebページをさらに高速化するソフトウェア。 |
※7 | ContentsManagementSystem 専門知識がなくても、サイトの作成・更新・管理が簡単に行えるシステム。 |
※8 | Cocoon 検索エンジン対策・高速化・モバイルフレンドリーに最適化した無料テーマ。 |
導入プラグイン (WordPress)
(WEXALとの使用で速度低下が発生したため現在未使用) | サイトに表示されているjpeg[※1]やpng[※2]を自動生成したWebP[※3]に置き換える。 |
Intuitive Custom Post Order | 投稿、固定ページ、カテゴリなどの項目をドラッグ&ドロップで並べ替えが可能になる。 |
Advanced Editor Tools | ブロックエディター(Gutenberg)とクラシックエディター(TinyMCE)の機能を拡張し、追加の編集ボタンなどを設置できるようになる。 |
※1 | JointPhotographicExpertsGroup Joint Photographic Experts Groupによって開発された静止画像圧縮方式。非可逆圧縮(圧縮後元の画質に戻せない)で圧縮率が高くファイルサイズが小さい。 |
※2 | PortableNetworkGraphics World Wide Web Consortiumによって開発された静止画像圧縮方式。可逆圧縮(圧縮後元の画質に戻せる)で透過できるがJPEGより圧縮率が低い。 |
※3 | WebP Googleによって開発された画像圧縮方式。JPEGよりも圧縮率高く、PNGのように透過でき、GIFのようなアニメーションにも対応している。 |
管理人情報
趣味のサイトを作るため、知識ゼロの状態からサイト作りをスタートしました。
サイト作りを始めた直後は、なにをすればいいのかわからない状態でしたが、サイトの作り方を調べていくうちにWordPressで作ると比較的簡単に作れることを知り、なんとか作成することができました。
その後は、サイト運営を行いながら不具合修正を繰り返すことで、様々なスキルを取得することができ、サーバーの構築からサイトのカスタマイズまで一通り出来るようになりました。
また、初めて作成したサイトのアクセス数は1年半程で月間100万PV[※1]を超えることができるようになり、現在はTwitterのフォロワー管理ツールなどWebアプリの制作も行っています。
※1 | PageView サイトアクセス数の単位で、ユーザーがサイト(ページ)を表示した回数。 |
現在運営中のサイト
運営サイト①

サイト名
VTbuer Ch.–VTbuerの動画まとめサイト
サイト説明
「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuber達の動画を「ライブ配信」「ライブ配信予定」「アーカイブ」「プレミア動画」「通常アップロード動画」に分類し並び替えることで動画が探しやすくなっています。
また、箱(所属グループ)で絞り込むこともできるので、すべてのページで特定の箱だけの動画を表示することもできます。動画共有サービスは、YouTubeとTwitchに対応しています。
コメント
サイト名を決めた際は、すべてのVTuberを紹介しようと考え「VTuber Ch.」という名前にしましたが、サイトを運営していくうちにサーバーのスペック不足や作業時間がかかることが判明したため、現在は「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuberを紹介するサイトになっています。
運営サイト②

サイト名
VMusic Ch.– VTbuerのMVまとめサイト
サイト説明
「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuber達のMVを「オリジナル曲」「カバー曲」「#Shorts曲」に分類し並び替えることでMVが探しやすくなっています。
また、箱(所属グループ)で絞り込むこともできるので、すべてのページで特定の箱だけのMVを表示することもできます。
コメント
「VTuber Ch.」と同じ理由により、現在は「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTbuerのMVを紹介するサイトになっています。
サイト作りのきっかけ

サイト作りをスタートしたきっかけは趣味のYouTube鑑賞ががきっかけでした。
具体的には、VTuberのメインコンテンツである「ライブ配信」を視聴するため、登録チャンネルページで「ライブ配信」と「ライブ公開予定」をチェックしていました。
しかし、登録チャンネルページには「アーカイブ」や「通常アップロード動画」など様々なタイプの動画が同じページに表示してあり、尚且つアップロード順に並んでいるため、新しい動画が公開される度に「ライブ公開予定」が後ろに流れていってしまい、ライブ配信を見逃してしまったり、少し使いにくく感じたことでした。
そこで、YouTubeでは同じページに表示されていた「ライブ配信」「ライブ公開予定」「アーカイブ」「プレミア動画」「通常アップロード動画」をそれぞれ別々のページに表示し、並び順も動画の種類によって最適な並び順に自動で並び替えられるサイトを作ろうと思いました。
こだわったポイント
こだわったポイントは二つあります。
一つ目はサイトの表示速度です。主に下記の処理を行った結果、画像ばかりのサイトですが「Google PageSpeed Insights」でPC「99~100」・モバイル「96~100」のスコアを獲得できるようになりました。
- 高速WordPress実行環境KUSANAGIを使用
- WordPress高速化ソフトWEXALを使用
- 機能最小限のWordPressテーマを自作
- WordPressプラグインをできるだけ使用しない
- 機能最小限のブログパーツを自作
- jQuery[※1]を使用しない
※1 | jQuery プログラミング言語のJavaScriptを簡単に実行するためのプログラムをひとまとまりにしたもの |
二つ目のポイントは更新作業の自動化です。下記の処理を実行した結果、手動で更新を行わなくてもリアルタイムで最新動画情報がサイトに表示され、サイトの更新を行う必要がなくなりました。また、サイトの更新情報も自動でSNSに投稿されるので、PR活動も自動で行われます。
- YouTubeやTwitchのWebAPI[※2]を利用してサイトの動画情報を自動更新
- TwitterやFacebookのWebAPIを利用してサイトの更新情報をSNSに自動投稿
※1 | ApplicationProgrammingInterface 開発者向けに公開されているデータなどをやり取りするために用いられる機能。 |