こちらは、pipi様企画の『個人サイトを語ろう Advent Calendar 2025』の記事です
以下のリンク先から他の参加者様の記事を見れるので、是非確認してみてください！
個人サイトを語ろう Advent Calendar 2025
気づいたら次の記事が企画折り返し地点ですね。
これまでの記事、どれもとても楽しく読ませていただいています。
個人サイトに直接記事をあげてくださる方が多いので、記事を楽しんだ後は個人サイトのつくりも楽しく拝見させていただいていました！
今後公開予定の記事も楽しみです～。
さて、前置きが長くなりましたが、私の記事では約3年半前に思い付きでレンタルサーバを借りてから現在の個人サイトが完成するまでの思い出を振り返っていこうと思います。
最初は、私がこのサイトをつくる時につまづいた技術的な話をかみ砕いて書こうと思っていたのですが、書いているうちにあれもこれも大変だったなと思い出して、昔話をしたい気分になりました（笑）
当記事をきっかけにサイト内の他ページを閲覧される場合は、当サイトが2次元コンテンツの非公式BLCPの二次創作物を取り扱っている点ご了承ください。
また、改修ノウハウを記載している箇所がありますが、当記事を参考に実施した改修で不具合が発生した場合、責任がとれませんのでご了承ください。
そうだ、個人サイトをつくろう
当サイトを開設した約3年半前、私は個人サイトカスタマイズ歴皆無のひよこでした。
ネット歴自体はそこそこ長いので、お気に入りの個人サイトをめぐっていた過去等はありました。個人サイトへのあこがれもありました。けれど行動に起こすきっかけがなく、ブログ（mixi、アメーバ）とSNSとPixivくらいでしかネット上の発信手段がない人生を歩んでいたのです。
そんな私が個人サイトをつくろうと思ったのは、某サービス提供会社の不祥事がきっかけでした。
そのころ、私が日々閲覧しているTwitterには、頻繁に「個人サイトいいよ」というつぶやきが流れていました。
同じ作品ジャンルを好きな方で個人サイトをつくっている方も見かけるようになり、少しだけ個人サイト作成のハードルを低く感じる環境が生まれていたように思います。
昔から引き返せるラインまでは見切り発車で行動を起こす癖がある私は、かねてからも憧れもあり個人サイトをつくる決意をしたのです。
つくると決めたからにはさっそく情報収集。
広告を出したくなかったので、個人サイトを作ろうと考えた段階でレンタルサーバを借りることは決めていました。
色々調べた結果、最終的にWordpress（プログラムを書かなくてもホームページを作成可能なサービス。細かなアレンジは知識がないと大変）とHTML/CSSのテンプレート（比較的シンプルでカスタマイズしやすいが、更新が大変）をお借りする形式を天秤にかけて、私は後者のHTML/CSSを選択しました。
というのも、空蝉様のテンプレートにひとめぼれしたのです。Novel向けテンプレートの中に、小説を縦書き表示もできる機能がありまして、これしかないと思いました。
そんなこんなで、空蝉様からお借りしたNovel向けテンプレートの色味をアレンジして、たしかある程度ローカルで作成した後にえいやとレンタルサーバを借りてサイトを公開しました。
2週間くらいかけて準備した記憶があります。
初めてサイトを公開したときの喜びといったらそれはもうSNSでおおはしゃぎでした。
私にもできた！ すばらしい達成感！ 個人サイト最高！
見てください、私の個人サイトを！
という感じで気分はお祭りでしたね。祝日のない6月に特別な日を増やせました～！（サイトの公開が2022/6/22なのです）
半年ちょっとでメンテナンスに疲れた静的サイト
しかし、そんな喜びもつかの間、飽き性な私は半年ちょっとで更新を面倒くさがり始めました。
公開してすぐのころは、それはもう頑張っていました。多分、月に1回は何らかの更新をしていたと思います。それがゆるやかに頻度が下がっていき、半年くらいで載せたいものがあるのにタイムリーな更新を諦めるようになりました。
それでもなんとか更新をしようと、所持しているタブレットから更新できるようにするなどしましたが、面倒くささは消えず諦めの境地。
最終的に私の怠け心が勝利した結果、個人サイト公開から約半年後にはWordpressをインストールしただけの作品倉庫サイトを併設してしまいました。
一度、更新が楽なものをつくったら、もうダメでした。
WordPressの更新が楽すぎて、ますます滞るメインサイトの更新。
初心者なりにこだわったサイトより、半日でえいやとたてた倉庫サイトばかりが活用されている状況。
小説を縦表示にもできる喜びを放置して、横書きしかできない倉庫サイトに永遠と作品をあげる私。
面倒くささには、勝てない。
一方、私の性格はサイトカスタマイズと相性がよかった(?)ようで、メインの作品更新はさぼるのに、サイトをアレンジしたい欲求は沢山ありました。
マウスカーソルをキラキラさせたい（昔のブログでよく見たあれです）。同人誌のサンプルを画像でも載せたい。次頁がない時はテンプレートの次へボタン表示消したい……等々。個人サイトへの欲求が高まるたび、不定期にアップグレードしていた覚えがあります。
書き上げた作品の更新をさぼりつつも謎の機能ばかり増やしていった初の個人サイトは、もはや私の実験場となり果てました（こうなってしまうと、何をしたい場所だったのかもわからないですね）。
そして、私は気づきました。
そうだ、サイトをまるっとWordpressに移動すればいいんだ！
こうして、サイト公開から約2年後、私はサイトをWordpressに乗り換える決意をしました。
かっこつけましたが、実際はもうちょっとウダウダ悩んでいました。
ソースコードの海に溺れたサイト改修
個人サイトの作品更新を怠る一方で、GitHub（利用・改変が許可されているソース公開も多数あるIT系の開発プラットフォーム）でキラキラマウスカーソルを見つけて導入したり、個人利用の範囲であればソースを変えても良い機能パーツを借り改造したりしていた私は、すこし調子に乗っていました。
今の私なら、カスタマイズが難しいと噂のWordpressでもいい感じの個人サイトをつくれるはず！
慢心ですね。慢心だったけど無事にやりとげたので今のサイトがあります。
今となっては笑い話ですが、めちゃくちゃ大変でした。初心者に毛が生えた程度の人間がいきなり手を出していい領域ではありません。
改造にあたり知らなければいけないこと、理解しなければいけないソースコードの量がHTML/CSSサイトの比ではないのです。
そもそも、倉庫サイトにしていたWordpressもほとんど改造していない状態なので、知識なんてあるはずもない。
ネットで調べた知識でLocalというアプリをいれて検証環境（Webで公開する前の実験場）をつくるも、何をどうしたらよいのかわからない。
唯一偉かったのは、実現したいことが結構決まっていたことです。
- 小説ページは縦書き表示にも対応させる
- ゆるく呟くメモページはてがろぐを併用する
- それとは別に、しっかり感想を残したり、色々書くページを作る
- 倉庫サイトに書いていた記事はそのままこのサイトに移行する
- 推しCPをイメージした要素をとりいれる……等々
正直、これも無かったら途方に暮れて挫折していたと思います。
個人的にWordpressのカスタマイズの嬉しいところは、よく使われているサービスのため、ひたすら調べれば忍耐と妥協でどうにかなるということですね。
ともかく、こうして仕事終わりも休日もひたすら調べものをしながら、個人サイトを理想に近づけていく日々が始まりました。
毎日毎日ソースコードを眺め、コードを書き、試行錯誤を続け、楽しくも時々嫌になりつつ、意地になったり妥協したりして、なんとか完成させたのがこのサイトです（外に出るのも億劫に感じる夏の盛りに始めて、同年9/8にリニューアルなので、作業期間にすると1か月くらいだと思います、期間にすると意外と短いことに自分で驚いています）。
サイトリニューアルしたときのデザイン的なこだわりは既に記事にしているので、気になる方はサイト内を探してみてください（好きなCPの話をしているのでリンクは避けておきます。CPの意味が分からない方は探さないほうが良いと思います）。
ここまでの内容で終わっても良いのですが、実はもともと今回の記事はこの先を書く予定でした。
私がWordpressの個人サイトをつくるにあたってつまづいたところ集です。
もう1年以上前の記憶ですが、未だに鮮明に思い出せる苦労がいくつもあります……。
なぜか反映されないCSS
私が、今のサイトを構築しているときに一番つまずいたのは多分CSS（Webページのデザインをするのによく使われるもの）でした。
JSよりも、初めてさわるPHPよりも、旧個人サイトでも使っていたCSSになぜか苦戦させられる私。
うーん、HTML/CSSのサイトが恋しい。
WordPressって導入はお手軽なのに、思い描くデザインを反映しようとすればするほど沼にはまっていきますね。
書いたのに一部反映されないCSSが多々発生するのです。
おそらく、Wordpressがピラミッド構造みたいになっていることが原因です。
私のサイトは、親テーマの作成は諦めて子テーマにデザインをのせたつくりになっています。
クリスマスアドカレ企画の記事なのでクリスマスケーキの手作りキットで例えると、多分こんな感じです。
- WordPress本体：スポンジ（キットの土台なので基本的にいじれない、単品ではサイトにならない）
- 親テーマ：クリーム（使うテーマは選べるが直接カスタマイズは困難、ここまであればサイトになる）
- 子テーマ：キット外のデコレーション（オプション要素。好みにカスタマイズできる）
そして、せっかく買ったデコレーションが生クリームやスポンジと相性がわるくて見えなくなることがあるのが、CSSのおそろしさ……。
記述したものがWordpress母体ソースのjsで上書きされて無に帰したり、同じパーツだと思っていたものの要素名が異なっていて画面遷移するとおかしくなったり……。レスポンシブ対応の確認でパーツごとにレスポンシブのタイミングが不揃いで思いきりレイアウト崩れる事件もありましたね……。
しまいには、完成した～と公開した後に発覚する、iOSでだけ崩れているレイアウト（どうして）。
おかげで、Chromeのソース検証（Webページのレイアウトがどう決まっているかなんとなく分析できる手段）とはすっかり友達になりました。
ここで一言、こうしたら上手くいきますよがあればよいのですが、多分求められる力はある程度の知識と忍耐と妥協です。
私は、いまだに原因特定できずに妥協している箇所がいくつかあります（どうして小説カテゴリと記録カテゴリでメインコンテンツ幅が違うんですか～、変な設定変更してないはずなんですけど～）。
一応、細かな調整をするときは、こんな感じのことを地道に繰り返しました（全部独学、細切れで知識を拾っているので非効率かもしれません、もっと良い方法あれば教えていただけると飛び跳ねて喜びます）。
- Chromeでサイトのレイアウトをつくりたい要素の近くで右クリック→検証
- 変更したいパーツの要素を探す（なんとなく画面に枠がでるので、選択しているパーツがわかります）
- 計算済タブでいじりたい部分の設定がどうなっているか見る（例えば周りのコンテンツとの位置であればmargin,padding,boarderなど。このあたりは「CSS コンテンツ幅 調整」などで検索すると解説サイトが沢山見れます）
- スタイルタブで、上のほうにある要素に変更したいレイアウトを書いてみる
- 上手くいったらサイトのCSSに反映する（基本的には子テーマのCSSに書きます）。
大枠のデザイン作りたいときは、CSSの書き方を解説しているサイトなどを見てインプットしました。
私はサルワカ様に大変お世話になりました。
jsの読み込み範囲を間違えて全ページキラキラカーソルに……
ここからはJavaScript（Webページに動きをつけるためによく使われるもの）の話です。
とはいっても、正直中身の記述は雰囲気で修正していてあまりわかっていないので、私が話せるのは外部ページで個人利用OKですよとあるファイルを、どうやってWordpressで使えるようにするかです。
当サイトはページに応じて色々とJavaScriptで書かれたjsファイルを読み込ませていますが、用途によって導入の仕方は使い分ける必要がありました。
最初、これを理解せずにとにかく全体へ読み込ませたら、現在はホームなどの一部でのみ実現しているキラキラカーソルが全部のページに適用されてしまって大変でした。
私はどうしても投稿ページはカーソルをキラキラさせたくなかったので、JavaScriptファイルの読み込み方に工夫を求められました。
他にも、小説の縦書き対応用に読み込ませているJavaScriptも読み込ませ方に工夫が必要でした（こっちはCokkieも考慮して読み込み範囲を決める必要があり、色々勉強になりました）。
このあたりのJavaScriptの読み込みは、細かな情報を拾おうとすると私は検索で上手くたどり着けなかったのでざっくり整理したものを書いておきます。
ちなみに、PHPを編集する時は、記述に失敗していると画面表示できなくなることもあるので、バックアップをとって慎重に作業することを推奨します！（私は色々変えているけど、本来、初心者がふわっとした知識でガツガツいじるものではないと思われる）
WordPressでのJavaScriptの読み込ませ方
いくつか選択肢がありますが、大雑把には以下方法が可能だったと思います（記憶が古いので間違ってたらすみません！）
- 投稿ページのカスタムJavaScriptに直接記述
- 投稿ページのカスタムフィールド＞footer_customにインポート先を記述
- 子テーマのJavaScriptファイルに直接記述
- 子テーマの中にフォルダをつくってJavaScriptファイルを配置して、footer.phpに読み込みを記述（表示速度の都合から、JavaScriptはフッダーで読み込ませるほうがいいみたいです）
ちなみに、当サイトでは上記のうち読み込ませたい特定ページの種類によって2パターンを使い分けています。
- 特定の投稿/固定ページのみ：1～2の投稿ページに記述する形式
- カテゴリ単位：4の形式
すべて4の形式でも対応できると思うのですが、ページが決まっているときは投稿ページ内に書いちゃうほうが私の好みというだけです。
本当はあっちこっちに書くと不具合が出た時の特定が大変になるので、そろえるほうが良いのかもしれません（経験上、記載位置が散らばっていることで、変更したくなった時の原因特定が難しく感じたことあるので……）。
4の方法ですが、Wordpressに標準で用意されている条件分岐をうまく組み合わせると、期待するページでの読み込みが可能になります。
私の場合、投稿ページ（小説ページや、本記事のようなページ）以外はマウスカーソルのキラキラを読み込ませたかったので、投稿ページ以外の場合にJavaScriptを読み込むようにfooter.phpを書いています。
以下のイメージです。
<?php
//投稿ページ以外の時に読み込む
if (!(is_single())): ?>
<script src="jsファイルへのフルパス"></script>
<?php endif; ?>is_single()が投稿ページかどうか判定するWordpressの記述で、先頭に!をつけると否定の意味になっています。Wordpressではほかにも、トップページだけや固定ページだけのような判定もできるので、対応したい読み込ませ方はほとんど同じ書き方の応用で実現できると思います！
どんな書き方が使えるかは、調べると教えてくれている人がたくさんいます。
CSSの時に紹介したサルカワ様の記事にもまとめているものがあり、私はそちらを参考にしていました。
余談ですが、CSSも特定のページのみ反映させたいときは、header.phpに同じようなif文を書いて、中身をCSSファイルの読み込みにすると上手くいきます。
さいごに
長々とした記事を最後まで読んでくださりありがとうございました。素敵な企画に参加できて光栄です！
本当は、投稿ページのページテンプレート設定が決まっているカテゴリーに対するおまじないの書き方や、クエリーループ機能のことなども書きたかったのですが、時間切れになってしまいました。
いつか書けたらいいなと思います。
最近は、特定端末で変更履歴の表示がされないバグがあるのでその修正をしたいなと思っています！