見出し画像

Wordpressで同人サイトを作る -スターサーバーフリー・スタードメイン編-


 これから個人サイトを作ろうとする方に極意を教えようじゃないか!!
  ……と、堂々と胸張って指南したいところですが筆者も初心者です。なんだったら現在絶賛悪戦苦闘中です。すみません。
 でも、そんな訳のわかってない自分だからこそ伝えれるものがあるんじゃないかと思い、こうして記事を書くことにしました。

 なので、間違っていたり知識の深堀が必要な点があるときはコメントで教えていただけると助かります!

 この記事にかかれる内容はあくまでもスタードメインとスターサーバー周りのことであり、ロリポップやさくらで応用が利くかは不明です(サーバーをお試しでいじった感じ初心者的には結構違う印象)。

 SSL等の仕組み的な話はネット共通ですが設定方法等はそれぞれのサービスによって異なるので、「この機能はこういう文言のとこにだいたい格納されてるんだなぁ」くらいのふわっとした目安になる程度です。
 他サーバー利用の方は以上を踏まえた上でご覧ください。

 

スターサーバーフリー

■ 長所、登録方法

 無料で気軽に始められるスターサーバーフリー。
 個人的に一番おすすめです。私も最初はスターサーバーフリーでした。

 一番の魅力は無料であること!
 Wordpressってどんなもん? と気兼ねなく試せるのは大きな強みです。

 とりあえずやれるだけやってみたけど難しいなぁと感じたり、求めていたものと違ったなーってときにお金を気にせず気軽に違うサービスに移れる道があるのは結構メリットだと思います。
 挙動がひと通りわかったあとで、お手軽で簡単な引越し機能があるロリポップ等に移るというのもアリだし、こういう感じならフォレストページ+でいいか…みたいなことも全然アリ。
 無料ってだけでサイトの運営方針の選択肢が広がるのでオススメです。

 また、スターサーバーフリーを利用する手順(+その後のWordpressの使い方)を教えてくれている神サイトもあるのも理由の一つです。


 もう一つ、参考になるサイト。
 スターサーバーフリーの登録手順もありますが、こちらはサーバーのダッシュボード的なもの(管理ツール)への行き方が図解されています。

 管理ツール、本当に見つけにくいんですよ。
 個人サイト立ち上げ初めての人は格納されてる場所の見当がつかないだろうし、慣れてる人でも目滑らせて見逃しそうな気がします。スターサーバー管理→(小さい文字)無料プラン管理→サーバー管理ツールとか、マジで分かんないです。
 そういう分かりにくい部分を説明してくれてます。
 
 どちらの記事も最新ではないので今の登録画面と全く一緒ではないかも知れませんが、大きな変化はないかと思われます。

■ 短所

 いいことづくしのスターサーバーフリーですが、無料が故のデメリットもあります

 まず一つが「広告」。
 とは言え、スターサーバーフリーの広告はかなり良心的でPCからのアクセスには一切広告が出ません。ありがたい。
 スマホやタブレット端末からのアクセスには広告が表示されますが、位置もサイズも景観を邪魔してくるものではないです。追っかけ広告などの鬱陶しさも皆無。
 広告の内容も私が見てる限りでは成人向けはなさそう(目にしてない可能性もあるので絶対ではない)。


 そしてもう一つが「非SSLである」こと。
 SSLとはネット上のセキュリティ対策のひとつで、通信を暗号化する仕組みのことを言います。ざっくり言うと個人情報を守る機能です。スターサーバーフリーにはそのSSL機能が備わっていないです(=非SSL)。
(SSL機能が備わってないっていうか対応できないみたいな印象)

 SSLとは何か、非SSLによるデメリット等は以下を参考にして下さい。


 昔は個人情報を入力するページ〝のみ〟SSL機能を付けていましたが、令和となった今では個人情報入力ページに限らずサイト全体にSSLを施すのがスタンダードになりつつあります(=常時SSL化)。
 また近年、上の紹介した記事にもあるように非SSLサイトは「安全ではない」「保護されてない」といった表示が出るようになりました。場合によってはセキュリティソフトが反応し、警告文が出るパターンもあります。

 じゃあ、同人サイトにSSL化は必須かというと、個人的には推奨するが重要度は低い(現時点ではそんなに気にしなくていい)かなーと思います。
 というのも、幸いなことにスターサーバーフリーで「警告」表示は出ませんし、作品を置いておくだけなら個人情報を入力してもらう場面はないのでSSLなくても大きな問題はないと考えます。
 ただし、連絡先を入力できるフォームを設置する場合はSSL化を強く推奨します。やはり個人情報を取り扱うことになるので慎重にした方が無難、というのが個人的な見解。
 気になるようだったらサイト内に問い合わせフォームは設置せず、マシュマロ等の匿名の第三ツールを借りて運用するのも手です。

 SSL化については、メリット・デメリットの双方を知った上で決めることをお勧めします。
 時間もお金も安全性も責任もかかるので慎重なくらいがちょうどいいです。

 私自身は非SSLサイトを利用することに抵抗はないのですが、イマドキ「安全ではないサイト」って出ちゃうとフィッシングを疑われそうだなーとか利用者が警戒心MAXになって遠のいちゃうんじゃないかとか。他人からどう見えるかが気になりました(なので下記で紹介するスタードメインを選びました)。


 以上2つのデメリットが気になる場合は、ロリポップやさくら、リトルサーバーなどの有料サーバーを検討するか、以下のスタードメインを検討するかになります。

 ……あ、すっかり忘れてた。運営するにあたってとっても重要な「同人は大丈夫か問題」。公式として以下の回答です。



 そのあとはWordpressであーだこーだし始めます。

 もし良かったら「wordpressで同人サイトを作る -wordpress cocoon編-」を参考にしてください。 2024.04.11現在 作成中につきまだ記事ありません



スタードメイン

■ はじめに

 まず注意点として、スタードメインはドメイン契約であってサーバー契約ではないです。
 私は独自ドメイン契約時にもらえる無料サーバーを目当てに登録・契約しました。
 後述しますが、このおまけの無料サーバーの考え方には注意が必要です(後述:無料サーバー=スターサーバーフリーではない!? 参照)。

 支払うのはドメイン料だけ、サーバー代不要ってのがとにかく魅力

 私が調べた限り、サーバー代+独自ドメイン料の場合だと1年あたり約5,000円前後。一部のレンタルサーバーでやっているドメイン永続プラン(月550円程度)の場合だと約6,600円程度。
 どちらも1年ならいいけど何年、何十年となるとちょっと出費が痛いかなぁと感じる絶妙に微妙な金額。……10年で5万~7万なら安いとは思うけど。

 こういう私のような微課金はできるけど……みたいな懐事情で二の足を踏んでる方には是非スタードメイン無料サーバー付きをおすすめします。

 スターサーバー(有料)と比べたら容量とかは劣りますが、趣味のサイトやブログなら十分。特に字書きなら必要十分です。
 たぶん、この容量で厳しいと感じるのは長期にわたって定期的に更新し続けているイラストサイトとか写真ブログとかじゃないかなぁ。

■ ドメインとは

 ドメイン、ドメインって言ってますけど、そもそもドメインとは何かっていうのも一応説明しておきます。
 簡単に言えばネット上の住所です。○○市○条○丁目みたいなのが、ネット上では「http://」以降にある羅列がドメインにあたります。このnoteで言うと、「note.com/rozeasy/n/nc37325acb270」の部分ですね。

 まあ、リアルでは好き勝手に住所を選べられるわけではないですが、ネット上では(独自ドメインを取れば)Vtuber-daisuki.comとかgame-izon.jpとか自分が思うままの好きな住所にできます。
 
……というようなことを書いてくれているサイトがあります。

 とてもわかりやすい……。
 そもそもドメインとかサーバーってなんぞやって時はこっちがおすすめ。イメージがしやすいと思います。 

 このスタードメイン無料サーバー付きを例えるなら住民登録したら土地がついてくる(ドメイン契約したらサーバーがおまけ)って感じかもしれない。……そう考えたら本当にお得だなァ!!

 以下は独自ドメインの取得方法や長所・短所も書いています。 

 ドメインの理解、ムズカシイネ…

 ドメインは買い切りではなく、更新型なので1年ごとに「更新料」が発生します。この更新料、結構ピンキリなので確認してください
 スタードメインで見たものだと■■が100円! みたいなのがありましたけど、それは1年目だけで2年目以降は適用されません。ものによっては更新料が3,000円とかあるので慎重にね(決済画面で高くなるから気付くとは思うけど)。


■ スタードメイン登録、ドメイン取得

 上記のスターサーバーフリーと同じNetOwlアカウントでログインが可能です。1つのアカウント(メールアドレス)でスターサーバーフリーを併せて使えるって便利。
 スターサーバーフリーを使ってない人は新たにNetOwlアカウントを作ることになります。



○ 番外編:ドメイン取得にかかる時間

 ドメイン取得にかなりの時間を要したよってお話。
 なぜか2個目のドメイン取得のときは時間かからずにすんなり行けたから、元より会員登録されているかとかクレカの実績があるかとか、そういう部分が関係してると思う。知らんけど。

 支払後(契約後)は無料サーバーの申し込みをするため、スターサーバー公式マニュアルに書かれているとおりに従って進めていきます。

スターサーバー公式マニュアル「お申し込み方法」

 Netowlメンバー管理ツール(ログイン後の画面)から、
  スタードメイン管理 > 管理ドメイン一覧 と辿ると
 画像のように「ドメイン管理ツール」が……

スクショ忘れたためイメージ画像
状態:未収得  新規取得のラジオボタンがあった

 な、ない!!!!!???

 この画面になってる場合は、とにかく待つしかないようです。
 人によるとは思いますが、私はこの画面からマニュアル通りの画面になるまで約4時間かかりました。待つのも作業のうち……とはいえ、しんど。

 いやー、これマジで焦りましたよ。特に未収得ってステータスがやばい。「クレカ情報入れたし契約されてるはずだけど……え、コレ契約されて、ない……?」って何度も悩みました。もう少し案内は親切にしてくれェ。

 マニュアルに書かれている倍は時間がかかると思っていても問題ないと思います。


スタードメイン:無料サーバー

■ 無料サーバーの申し込み手順

 この辺からはアフィとか頼らなくても、スターサーバー公式マニュアルに書いてある通りに進めることができます(躓くこともあるけど)。

 ここの「お申し込み方法」のとおりに進みます。



○ 番外編:無料サーバー=スターサーバーフリーではない!?


 私も盛大に勘違いしていたのですが、スタードメインの無料サーバースターサーバーフリーは同じ無料でも全くの別物です。

 これをまず念頭に置いておかないと私のようにスターサーバーフリーで使えない…なんでだ……と無駄に時間を溶かします。
 まあこんな思い違いするのは私くらいなものか…と思ってたら、Netowl掲示板にも似た質問があって親近感わきました。Netowlの案内が総じてわかりにくいのが問題だと思う。



○ 番外編:無料サーバーの申し込みができない!

 マニュアルどおりにやったのに申請するが出てこないそこのあなた。
 もしかして、スターサーバーフリーのサイトをスタードメインで得たやつで運用して……みたいなことを考えて引越し作業をした方でしょうか。で、あれば私と同類です。大丈夫です。
 マニュアルにあるように、申請ボタンを出現させてみせます!!!

 Netowl掲示板に似た質問があり、回答がついていました。

 >>(1)ネームサーバーがスタードメイン指定
 >>(2)DNSレコードが1レコードもない
 >>上記の2条件を満たさないと、申込ボタンが出てこなかったはず

ネットオウルQ&A掲示板
https://secure.netowl.jp/bbs/detail.cgi?td=5436


 最初からスター(Netowl)系のサーバーであれば(1)はほぼクリアできていると思われます。ここで引っかかるとしたら他サーバーから引っ越してきた人とかかな?
 ちなみに他社ネームサーバーを使ってると下の画像のような状態になります。スタードメイン無料サーバーはスタードメインでのみ使って下さいってことですね。

ロリポップのネームサーバーを入れた状態で表示された画面


 なので、大半の方が(2)の方で引っかかっているかと思います。

 ということで、DNSレコードを編集します

スタードメイン管理 > ドメイン管理ツール から「DNSレコード編集」
DNSレコード編集画面

 ここにある「タイプ:A」のレコードを削除します。おそらく全部。
 消すには右の編集と削除のうち、「削除」を選びます。

 不安な方は1つ消す度にサーバー申し子みボタンが現れていないか確認しながらやった方が安心。私もそうしました。



■ サブドメインの設定

 スタードメインで取得した■■■.comではなくて、▲▲.■■■.comといったサブドメインでの運用を考えてる人はこの辺りで設定するのが(SSLの関係上)おすすめです。



■ SSL化に挑戦しよう!

 SSLについては、スターサーバーフリーの短所の項目「非SSL」で触れているのでそちらをご覧ください。
 簡単に言うとSSLとは、なんか知らんけど個人情報入力しても安全なページの状態にさせてくれる機能のことです。詳しく言えば、送受信の際に暗号化して第三者からは分からないようになってて云々……って長くて納得のいく理屈があるんですけど、もうざっくり行きましょう。

 そして、SSL〝化〟とは、SSL(安全なページにさせる機能)を施す、又は施された状態を指していると捉えてほぼ問題ないです(…と思います)。つまり、サイト運営・管理側が「安全なページさせたらぁ!」ってSSL機能を設定することであり、サイトが安全なページになっている状態を言います。

 SSL化(SSL機能が発動している状態)になると、http:// が、https:// になります。加えて「安全なページです(又は保護されたページです)」と表示されるようになります。
 最も分かりやすいのは、URLの左横に鍵マークの状態ですかね。単に鍵マークがボンと単体で表示されていればSSL化(SSLが機能している)されています。スラッシュとか余計なものがあるときはSSL化されていない可能性が高いです。

 SSL化のデメリットほぼないので、ぜひとも設定しましょう!


■ SSL設定方法及び常時SSL化

 公式マニュアルもあるのですが若干わかりにくい……気がする。なので、手順としては以下のサイトの方がおすすめです。

 こちらはカンタンな説明と設定の仕方のみ。
 そして以下のサイトは設定までの手順以外に、そもそもSSLとは何かを具体的に説明しているサイトです。私としてはこっちの方が学びになるのでオススメです。サブドメインに設定したい方もこっちを見ると分かりやすい。


 さて、次はサイト全体にSSL機能を施します。これを常時SSL化と言うようです(上のサイトでは正規化?)。

 >>独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されません。
 >>Webサイトにおけるすべての表示を常時SSL化する場合は、以下の記述を.htaccessに追記します。

スターサーバー公式マニュアル「Webサイトの常時SSL化」


 ……「.htaccess」って、どこ???
 ……「.htaccess」って、なに???

 結論から言うと、Web上から編集が可能です。

スターサーバー管理ツール内「FTPアカウント設定」

 Web FTPの下にある「ログイン」をクリックすれば、Web上で「.htaccess」の編集ができます。

 詳しい手順はこちらのサイトが参考になります。

 探した中で最もわかりやすかったです。なんでコレをしなければならないのかが理解できましたし、公式の言う漠然とした「追加して下さい」に対しての答えも書かれていてめちゃくちゃ親切。追加して下さいってどこにって話ですよ。上か下かくらい書こうぜ、公式……。


○ 番外編:SSL化できない!? Cocoonでの失敗

 ここまでやってきたらサイト全体がSSL化されているはず……が、全然SSL化されていないという事態に陥りました。
 TOPページは非SSL、作品ページはSSL化されているという混在している不思議な状況。

 調べたところ原因は2つ。

 (1)WordpressでCocoonのテーマを使用
 (2)SSL化前にCocoonを導入・運営している

 うん、サイト作ってからSSL化の手順踏んでた。やっちゃってた。
 へー…WordpressインストールしてからSSL化って面倒だったんだ、それを前もって教えてくれぃ。

 ggって見つけたサイトその1。
 F12キーでデベロッパツール呼び出し→http:// を検索 という手順を知れたサイト。

 この方法でTOPを調べると、やたら「themes/cocoon-master/screenshot.jpg」というのが引っかかってきた。
 cocoon-masterってことは編集に使ってるchildの方じゃないのか? ってかそもそもスクリーンショットってどういうことだってばよ……となり再度検索。そして該当するQ&Aを発見しました。

 Cocoonテーマを一度http環境でセットアップしてしまった場合は、httpsにした時に「OGPホームイメージ」や「ヘッダー画像」のような、「Cocoon設定」で行った画像URL設定は、すべて再設定してhttpsにしてやる必要があります。 

Cocoonフォーラム「httpからhttpsに移行しきれない」よりわいひら氏の回答抜粋

 つまり、サーバーのSSL化を完了する前に設定して使い始めるとhttpでの状態がデフォになっちゃうよってことですね。
 そして、使い始めちゃった人がSSL化する場合はCocoon内で再設定する必要があるよ、とのことですね。なるほどなるほど。

 再設定に必要な項目はWordpress>Cocoon設定の中にあります。

「Cocoon設定」で設定する画像はこれだけありました。
・サイト背景画像
・ヘッダーロゴ
・ヘッダー背景画像
・OGPのホームイメージ
・アピールエリア画像
・トップへ戻るボタン画像
・404ページ画像

Cocoonフォーラム「httpからhttpsに移行しきれない」よりわいひら氏の回答抜粋


 私はOGPが引っかかっていました。

Cocoon設定 OGPタブ内
ホームイメージ Httpsへの書き換え画面

 httpになっているところをhttpsに書き換えたら、変更を保存します。

 これでSSL化された安全なサイトができます!


■ Wordpressを導入

 いよいよ、Wordpressをインストールします。
 ここまでは大変な道のりでしたが、Wordpressの導入はびっくりするほど簡単です。

 スターサーバー公式マニュアル通りに進めればWordpressが設置されます。


 さあ、いよいよ次はWordpressです。
 Cocoonを使用した作成かつ、字書きメインの同人サイトになります。

 2024.04.11現在 作成中につきまだ記事ありません

 どなたかの同人サイトの作りの参考になれば幸いです。

いいなと思ったら応援しよう!