令和だけど、個人サイト運営とても楽しいです
目次
0.前置き
自分用に書いていた小説が、完結した。
パソコン用にテキストエディタに書いていたけれど、スマホでも読み返したい。
ついでに体裁を整えたりしたい……。
そのほか諸々、やってみたいことがある。
そんな動機で、個人サイトの運営を始めました。
1.そうだ、サイト作ろう
きっかけや理由は色々あります。
・凄く好みのテンプレートサイト様を見つけた
・実際に使ってみたい機能を無性配布されているサイト様を見つけた
・有料サーバを使ってみたかった
・ドメイン取ってみたかった
・サイト運営というノウハウが欲しかった
・HTMLが、CSSが、JavaScriptが無性に書きたい時がある
・書き溜めていた小説が増えてきたので、整理して読みやすいようにしたかった
などなど。多いですね……。
私は仕事柄、HTMLなどWeb系の知識がある人間なので、ちょっと技術的にとっつきやすかったということもあります。
いくつか具体的に書いていこうと思います。
2.サイト全体のこと
まず「サイト名」が無いといけません。
独自ドメインを取得する場合、ドメイン名（サイトURL）にもかかわってくるので、
後悔しないもの、ずっと使っていきたい、と思う名前を考えました。
私の場合、好きな単語や漢字をリストアップしていって、
その組み合わせで候補を作成し、その単語で、
・Google検索の結果
・ドメイン取得状況の確認
を行いました。
一次創作なら、検索結果が少ない方が見つかりやすいので良いのではないかと思います。
サイト名が決定したら、ドメインの取得です。
3.有料サーバの契約
有料サーバー、自分で契約したことがなかったので、一度やってみたかったのです。
広告がないサイトと言うと、やはり特別な気もします。
（広告が悪い訳ではないのですが、最近の過激な内容の広告にちょっと辟易していまして……）
有料サーバも色んなところがあって、それぞれ規約が違います。
創作・同人サイトのためのレンタルサーバーの選び方とおすすめサーバー比較
こちらのページや
二次創作や同人サイト向きのレンタルサーバーを比較 | ゆぱんだらいふ
こちらのページを参考にさせていただきました。
どちらのサイトも個人サイトを運営したい方向けの情報が沢山あって、お勧めです。
各サーバの規約、特に年齢制限のあるものを制作されている方は、
「成人向けコンテンツ」の許可、不許可がどうなっているかを確認されることをお勧めします。
色々選択肢があって悩みますが、私は「ロリポップ」さんを利用しています。
・お値段が安い
・選べるドメインが多かった
（独自ドメインを取ったので現状未使用ですが……）
・初期費用無料キャンペーンが割とよく行われている
・ムームードメインでドメインを取得し、
条件を満たした契約だと「ドメインずっと無料」サービスがあったこと
などが決め手でした。
4.独自ドメイン
サイトのURLをどうしても短く、覚えやすいものにしたかったので、
独自ドメインを取得することにしました。
ムームードメインでドメインを取得＋ロリポップの特定のプランを契約
で、「ドメインずっと無料」サービスが受けられます。
詳しくは
「ドメインずっと無料」について教えてください
をご確認ください。
ドメイン、取得するのにもお金がかかりますが、年ごとに更新する必要があって、
更新にもお金がかかります。
お名前.comで一度100円以下のドメインを取ったことがあるのですが、
次の年に更新しようとしたら、更新費用が2万とかでびっくりしたことがありまして。
なので、「ドメインずっと無料」サービスに凄く魅かれたんですよね。
独自ドメイン取得してサイト運営を考えている方に、一度は知って欲しいサービスです。
さて、サーバーの契約、ドメインの取得など、
サイトの箱が出来たら、いよいよ中身を作っていきます。
5.サイトを作ろう！
私が一目ぼれしたテンプレートサイト様はこちらです。
無糖
すっきりとしたデザインがとても素敵です……！
テンプレートをお借りして、サイトの見た目が決まりました。
見た目以外の部分も作っていきましょう。
私がサイトで使用させていただいているプログラムなどです。
do様：いいねボタン・改
Twitter風のいいねボタンが設置出来ます！
アップデートされて、連打や一日ごとの回数制限が設定できるようになったり、
色々細かくカスタマイズできます！
デモページが用意されているので、まずは一度ボタンを押してみてください……！
do様：コイブミ
一言感想フォームという名前ですが、複数行（改行可）のメッセージも送れます。
しかも「ワンタイムトークンによるスパム防止機能つき」で、
「NGワードの設定」が出来たり、「メール通知機能」が付いていたり、
ありがた過ぎて足を向けて眠れません。
darkmode.js（英語サイトです）
最近対応するサイト、アプリが増えてきている「ダークモード」。
サイトを簡単にライト・ダークを切り替えられるJavaScriptライブラリです。
実装方法はこちら↓
たった4行のコードをコピペするだけで、Webサイトやブログをダークモードにする軽量JavaScript -Darkmode.js
こちらで詳しい設置方法が載っています。
ただし、最近はCSSの機能だけで、スマホがダークモード設定になっているか判定出来ます。
Webサイトをダークモードに対応させよう | Webクリエイターボックス
こちらのページが個人的にわかりやすかったです。
私は閲覧する人によって、ライトかダークか切り替えられるようにしたかったので、
darkmode.jsを使用しています。
また、ダークモード対応もdarkmode.jsだけではなく、色々な方法があります。
私はdarkmode.jsが相性がよかったのか、わかりやすかったのでこちらにしました。
ただ、ライトモードとダークモード、どちらも表示確認する必要があり、手間が……増えます。
更にCSSを追記したりすると確認作業が凄いことになります。
私は一時期、①PC、②スマホ、③タブレットの三種類CSSを用意していて、
更にそれぞれライトモード、ダークモードの確認、計6パターンありました。
表示確認が大変だったので、現在はタブレット対応は諦めて、スマホと同じ見た目になるようにしています。
更に、iOSのsafariは、CSSの書き方に一癖ありまして。
テンプレートに手を加えた部分がiPhoneで崩れてしまったりすることが稀によくあります。
6.サイト・ファイルの管理
do様：PHPを使ってサイトをパーツ分けし、制作・管理を効率化する方法【中・上級者向け】
Webサイトのヘッダーやフッターなど、使いまわせそうな部分をパーツにして、
楽に管理できるようにしています。
ページの解説を読んで、出来そうな方はチャレンジしてみるとよいかもしれないです。
PHPの知識が無くても、WordPressというCMSを導入する方法もあります。
do様：創作・同人サイトに特化したWordPressテーマ、EASEL
同人サイト用のWordPressテーマもあります。
ガタガタ様には足を向けて寝れません……。
ちなみに私は、WordPressに2回チャレンジして2回挫折しました。
これはもう相性だと思います。
EASEL、デモサイトも用意してくださっているので、そちらで試してみるのが一番だと思います。
note（SNSの方です）でも、EASELを使用してサイトを構築した方の記事がいくつもあるので、
気になる方は調べてみてもいいかかもしれません。
また、全く別のアプローチでの作成方法もあります。
さくた様：2019年版、オタク向け個人サイトの作り方
さくた様：2020年版、もっと楽をしたいオタク向け個人サイトの作り方
英語のサイトを使用することになるので、英語アレルギーではない方は検討されてみてもよいのではないでしょうか。
英語サイトですが、記事の中で画面キャプチャ付きで解説されているので、私にも出来そうな気がする凄い記事でした。
インターネット、凄いです。
こんなにノウハウが無料で提供されているの、すごくないですか？
個人サイト、自分が作った自分のお城！という感じがしてとても楽しいので、
作ってみようかなと思う方がいらっしゃったら嬉しいです。