第二兵糧庫

オタクが好き勝手に喋るブログ

プロフカードでできることをドメインとサーバを用意して自分でやった

この記事は「各種URLをまとめたページを作るためだけにわざわざ個人サイトを立ち上げたよ」という日記です。

経緯

自分が抱えている各種SNSや投稿サイトのアカウントをプロフカードでまとめていたが、そのプロフカードがなぜか自分のスマホでだけログインがしにくくなり大変使いづらくなった。
ログイン後のページ遷移にめちゃくちゃ時間がかかるとかどうして。

代替として半年ほど前から利用していたWriteningは、再発行不可の編集削除パスを紛失してしまい編集ができなくなった。あまりにも愚か。

ただでさえ流動的すぎる昨今のSNS事情のせいで新しいアカウントやら何やらURLをお知らせしなきゃいけない機会が増えすぎているというのに、更に謎のおま環と自らのポカ。

結果「もういいわ!自分のサイトを作ってそこでやる!」と勢い余ってドメインとサーバを用意してプロフカードっぽいものを作ったのでした。

記事内容の前提となるプチ自語

2年ほど前の話になりますが。
複数の名義で公開している創作を自分用にまとめた個人サイトが作りたくなり、コチラの記事を参考にWordPressで作成したことがあります。

cthuwebdice.com

6年近く前の記事で現在とは仕様の違う箇所が複数ありますが、ほぼほぼこの通りに進めて「サーバを借りてWordPressを立ち上げて体裁を整える」までできました。大変参考になりました。ありがとうございます。

最終的にそのおまとめ計画は別名義アカウントのコミュニケーション方面での問題により)頓挫しましたが、ここで得た知識を下地に今回のサイト設立に至った次第です。

……それよりさらに前の学生時代、まだカクヨムなんかもなかった頃に一次創作小説の展示サイトを運営していたこともありますが、どうやって運営していたかほとんど覚えていないので今回はあまり関係ありません。
使っていたテキストエディタと利用していたサーバとサービス以外本当に何も覚えていない。超簡易とはいえCSSも自分で入れていたんだよなすごいな若い頃の私。

 

というわけで始めます。

とりあえず独自ドメインを取得する

いきなりドメインに課金するのも変な話なのですが、そもそもの動機が「これ以上URLを遷移させたくない」というものなので何をするにしてもココから始まるのでした。
ドメインはインターネット上の住所であり、取得すれば中身は後から何とでもなるから「サーバを借りて何かやりたいけど具体的にどう形にするか決まらない」というときには有効な選択となります。サーバを変えたときにURLまで変えなくてもいい、という利点ももちろんあります。

私が利用しているスタードメインは、ドメインを取得したら「スタードメイン無料サーバー」という容量20GBでWordPressもさくさく使えるサーバがついてくるので大変コスパがいいです。手軽さでいえばぶっちぎり。
WordPressは「かんたんインストール」機能のおかげで設置も楽々。先述した計画の際にスターサーバーフリー(※スタードメインの利用もない完全無料状態)WordPressを設置したからよく知っています。
※成人向けコンテンツNGのサーバなので注意

ドメインを取るときは初年度費用だけでなく2年目以降もちゃんと見ましょうね。初年度が格安で2年目以降がクソ高とかよくあるので。
私が最初に取ろうとしていたドメインは2年目以降の使用料が予算の3倍近かったです。焦った。

……というか私があれこれ語るでもなくこちらのサイトに言いたいことが全て書かれていました。

do.gt-gt.org

最初からここを見ておけば良かったのだな私は。後から存在を知りました。

サーバを借りる

同人向けでおすすめのサーバは検索すれば山ほど情報が出てきますが、作品を展示する場合は成人向けコンテンツが置けるか否かが大きなポイントになりますね。
外部の情報を当てにしすぎず自分で規約を確認しましょう。自戒です。

WordPressはプランによって置けたり置けなかったり置ける数が全然違ったりするので、少しでも「やってみたいな~」と思うなら注意が必要です。
ちなみに今回の私も最後までWordPressの設置は検討していましたね。最終的には見送って個人サイトのみにしたので、ブログ部分については今こうしてはてなブログさんでやらせてもらっているわけですが。

あと後述する「てがろぐ」のようなCGIを使いたい場合は、CGI設置可否も要確認。有料無料関係なく設置できないサーバはちらほらありますね。

ドメインとサーバを全く別々の場所から確保した場合は紐づけしましょう。

テンプレートをお借りする

スマホとPCどちらからでも見れるレスポンシブ対応のテンプレートを配布してくださるGODが世の中にいらっしゃいます。ありがたくお借ります。
あとはテキストや画像を差し替えるだけで完成です。「CSSとは????」と頭を抱える必要はないです。ありがたいですね。
利用規約は必ず確認しましょう。

私はプロフカードの代替としてサイトをおっ立てたのでコチラをお借りしました。

do.gt-gt.org

もうガタガタ様のサイトを紹介するためにこの記事を書いていると言っても過言ではありません。

デザイン面でいうと、テンプレートをそのまま使えば他人と被る可能性はまぁ……ありうるでしょうけど……色を変えるだけでも結構雰囲気が違って見えるし私は気にしないことにしました。
色は次のステップで頑張って変えます。

HTMLやCSSを好きにいじる

テンプレートには「ここはこれを示しているんやで」的な「こうしたかったらここを変えるんやで」的な手控えが添えられていることが多いです。ありがたい話です。それに従ってせっせと書き換えます。
※書き換えNGのコードが含まれることもあるので利用規約を確認。

Windowsのメモ帳でもできますがタグを色分けしてくれるテキストエディタがあると嬉しいです。
今はVisual Studio Code(通称VSCode)が超定番でしょうか。今回初めて使ってみましたが大変便利ですねこれ。名前以外何も知りませんでした。

visualstudio.microsoft.com

学生時代に作っていた一次創作小説サイトはEmEditor FreeでHTMLを手打ちしていました。というか今回もVSCodeと半々くらいで使っています。
タブで複数ファイル展開できてタグを色分けしてくれるテキストエディタなんて、XX年前は選択肢がほぼなかったように記憶しています。EmEditor以外にもう1つ有名どころのエディタがあったような気がするのですが思い出せないです。

jp.emeditor.com

サーバにアップロードする

ファイル数が少なければサーバの管理サイトから直接アップロードできなくもないですが、しんどいのでFFFTPを導入・設定します。

forest.watch.impress.co.jp

これは完全に自分用のメモなのですが、スタードメイン無料サーバーの場合FTPソフトの設定は
ホスト名(ID):sv**.star.ne.jp
ユーザー名:ドメイン
パスワード:管理画面から別個で設定
となります。

そしてこれも自分用のメモですが、ネットオウルのマイページからアクセスする場合
スタードメイン管理→サーバー管理ツール(スターサーバー管理)→左プルダウンからFTPアカウント設定→対象ドメインを選択→WebFTPのログイン
でアップロードページにたどり着けます。

サーバにアップロードできれば、サイトにアクセスして想定通りに表示されていたら完成です。コングラッチュレーション!

てがろぐを設置する

今回の計画に直接は関係ないのですが、せっかくなので設置してみました。
詳しくは公式サイトをご参照のほど。

www.nishishi.com

要は自サイトに置けるマイクロブログのような掲示板のようなCGIです。

SNSを巡る情勢が不安定だったり使わなくなったSNS垢が山ほどあったりして、色々考えた結果「自分の呟きを自分のサーバに置いてみるのはどうか」と思い立ち設置してみました。
X(Twitter)より字数制限は緩いし文字装飾やカテゴリ分けにも対応していて書き甲斐がある(?)けど、ブログよりは気楽に扱えてメモ帳代わりに使える。なかなかにバランスのいいツールです。

CGI?何それ?」状態でも大丈夫。
とんでもなく丁寧な設置ガイドが公式でご用意されています。

www.nishishi.com

見た目を変えるスキンは複数種類プリセットされているほか、有志の方が自作して配布してくれていることもあります。あまりにもGOD。
私は例によってガタガタ様からお借りしました。おんぶにだっこ。

do.gt-gt.org

 

◇◇◇

以上、ほぼほぼ知識がないけど神な方々が提供してくださる神な情報のおかげでド素人でも個人サイトが作れたよ、というだけのお話でした。

個人サイトやWordPressの立ち上げと運用はスマホタブレットからではかなりハードルが高い(というか実質非推奨かもしれない)のがネックですが、自分で部屋を借りて自分でインテリアを決めるみたいな楽しさがあるので個人的には好きです。
ドメインを取得すれば良質サーバが無料、あるいは有料サーバを借りれば独自ドメインが無料のサービスを使えば相当費用は抑えられますし、そうでなくても普通に完全無料でも立ち上げと運用は可能なので、気になったら気軽に手を出してみるのもアリなんじゃないかな~と勝手に思っています。

謝辞

ガタガタ様

do.gt-gt.org

にしし様

www.nishishi.com

(勝手に、ですが)その節は大変お世話になりました。ありがとうございます。