令和の個人サイト創世記

1日目 神はレンタルサーバを借り、独自ドメインを取得された。アクセスしても何も無い中、神はWordpressをインストールし、トップページが作成された。
2日目 神はカスタムCSSをいじった。cgiをつかったミニブログも設置した。
3日目 神はWordpressのインストール手順を間違えたことに気づき、すべてを白紙にもどした。
4日目 神は再度カスタムCSSをいじった。
5日目 神は今日もカスタムCSSをいじった。
6日目 神はとにかくカスタムCSSをいじり続けた。
7日目 神は完成した個人サイトをみて満足し、お休みになった。

以上が、令和最新版の個人サイト創世記です。うそです。

急になんもかんもいやになり、毎日ちゃんとデイリー消化していたソシャゲも一切やらず、もくもくと個人サイトを作っていました。そしてやっとひと段落ついたわけですが、やっぱり、持つべきものはマイホームなんだよな!

検索をかければ個人サイトの作り方がいろいろ出てくるけど、令和最新版(2023年)として備忘録がてら記しておこうと思います。あくまでもわたしの作り方はこうでした、ってだけだけど、誰かの参考になれば幸いです。ていうかみんな個人サイト作ってくれ。

1.Wordpressで使うテーマを決めた。

・EASEL

個人サイトを作るにあたって、まあWordpressでやるのが無難だろうなと思い、まずはどんなサイトにしようか考えた。Wordpressってシャレオツなブログが作れるやつでしょ…でも個人サイトってそういうんじゃないんだよな…と思いながら「Wordpress テーマ 二次創作」で調べたら、一番上に神テーマがでてきたじゃないですか!

 

あーこれですこれ!個人サイトといえばこうなんだよな!!作品の一覧が見れるし、ブログページもある!サイトデザインもおしゃれでかわいい!このテーマにしよう!そうと決まれば早速レンタルサーバを探さねば!

2.レンタルサーバを借り、独自ドメインを取得した。

・WitchServer

古の個人サイトといえばさくらサーバーとかロリポップだけど、ロリポップにしようかな…昔ロリポップにあこがれてたしな…と思ってたけど、神テーマEASELを配布しているガタガタさんが紹介していたのを発見。

月額が安いし、2次創作OKって言ってるし、月額が安いし、初期費用なしだし、Wordpressのインストール手順もマニュアルがあるし、月額が安いし、いいのではないか!?と申し込みをしました。夜中に申し込んだら、翌日の昼間には審査OKよ~の返事がきてた。

あと、てがろぐの設置時にうまくいかなくて初心者丸出しの問い合わせをしたけど、優しい回答がすぐ帰ってきたのでうれしかったです(小並感)

・Xserverドメイン

独自ドメイン取得についてはどこも一緒だし、なんでもいいやと思って適当に決めた。.comドメインの場合、初期費用が1円(どういうこと?)で、1年の更新料が1,300円くらい。レンタルサーバ代と合わせて、だいたい年5,000円ってとこですね。12か月で割れば月500円もしない。やすい!月500円でマイホームが持てる!すごい!

3.Wordpressをインストールした。

独自ドメインにレンタルサーバを紐づけしたら、いよいよWordpressのインストール。WitchServerのマニュアルにWordpressをインストールする手順が丁寧に書いてあるので、その通りにやったらインストールできました。でも1点だけ注意することがあります。

・FTPを使ってcgiとか設置する場合は、「ドメイン+インストール先のパスをURLとする」を選択しろ!!

URLのところなんだけど、これはまじです。単純にドメイン名でアクセスできるほうがいいじゃん?と思って「ドメインのみで表示」でインストールしたら、てがろぐを設置したときにてがろぐにアクセスできない問題が発生し、一旦データを全部消す羽目になってしまった。(3日目の話)

FTP使わない・cgiの設置もしない、Wordpressだけのサイト運用であれば「ドメインのみで表示」でインストールで大丈夫だと思います。

~~~~~
◇以下、あんまり読まなくてもいい話。(おりたたんでます)

ここの項目は、サイトにアクセスしたときにどういうURLにするかって設定になります。うちのサイトでいうと、

5onn3t.com/WordPressというのかい?贅沢な名前だね!今からお前の名前は5onn3t.comだ!いいかい、5onn3t.com、わかったら返事をするんだ、5onn3t.com!」

こういうことになる。(システム的には5onn3t.comで見れるよう設定してるので、奪ったのではなく逆に与えたというのが正しいと思うけど…)

で、これのなにが問題かっていうと、Wordpressだけ使う分には問題ないけど、じゃあ次はcgi設置しよ!て時、ルートディレクトリ直下にcgiのフォルダ(例えばtegalog)を配置し、いざ 5onn3t.com/tegalog にアクセスしても、404エラーがでてしまいます。
5onn3t.com/tegalog の本当の名前は 5onn3t.com/WordPress/tegalog で、実際のWordPressのフォルダ配下にtegalogフォルダはないからです。

それじゃあWordPressフォルダの配下にtegalogフォルダを設置すれば、5onn3t.com/tegalogでアクセスできるようになるのか?と思ったけど、WordPressフォルダの中身ってなんかもういろいろ入ってるし、Wordpress自体がどういう動きしてるのか全然わからないし、てがろぐの公式ページにも、Wordpress配下には設置しないほうがいいよって書いてあるのでやらないほうがいいみたいだし。

いろいろやったけど解決せず、結局どうしたのかっていうと、追加したCSSと固定ページの中身をメモ帳にコピーしておいて、witchserverの管理ページからWordpressを削除、作成したDBも削除、紐づけした独自ドメインもいったん削除をして、最初の独自ドメイン登録からやり直しました。固定ページとかも全部作り直した。コピペで済んだけど。
今度はちゃんと「ドメイン+インストール先のパスをURLとする」でインストールして、5onn3t.com/WordPress でアクセスできるように。てがろぐにも 5onn3t.com/tegalog でアクセスできました。はあはあ、これでやっと先に進めるぞ…。

~~~~~

4.WordpressのURLを変更した。

今のままだと5onn3t.comにアクセスしても404エラーがでるので、5onn3t.comにアクセスしたらWordpressのトップページが表示されるように設定を手動でする必要があります。

ここの「方法2 (URL を変更する)」の、「2,3,4,5,7,8,9」を実施して無事5onn3t.comにアクセスできるようになりました。コアファイルってなにって感じだけど、Wordpressのフォルダ名のことです。

9のところ、require( dirname( __FILE__ )じゃなくてrequire( dirname( __DIR__ )だったから、Wordpressのバージョンの違いがあるのかも。現時点での最新だったらDIRのとこで大丈夫だと思います。

パーマリンク設定を使っていなければ、.htaccess ファイルは存在しない場合がある、と書いてあるので、上記作業をする前に、設定>パーマリンク設定>パーマリンク構造を、基本以外に設定しておいたほうがいいと思う。わたしは数字ベースにしています。

5.テーマとプラグインをインストールして、CSSをいじった。

テーマをインストールしてEASELの初期設定が済んだらやっと本番!CSSを好き勝手いじって、自分だけの最強の個人サイトを作ろう!

「Wordpress easel」で検索すると先人たちのいろいろなブログがでてくるので、参考にしながらもりもりカスタムCSSをいじっていじっていじりまくります。EASELのフォーラムを一通りみるのもいいかも。

わたしがインストールしたプラグインは下記のとおりです。使い方とか設定方法はプラグイン名でぐぐったら色々でる!個人サイトをつくるにはとにかくなんでも調べなきゃいけない……。そして調べたら大体答えがあるので大変ありがたい……。先人たちに感謝……。

・Classic Editor

EASELを使う場合、ぜったいに入れなきゃいけないプラグイン。クラシックエディタとブロックエディタを切り替えて使うといい感じにカスタムできる気がするので、設定のところで「ユーザーにエディターの切り替えを許可」を「はい」にするといいです。

・Simple Custom CSS and JS

カスタムCSSのファイルを用途ごとに作成できるので便利。カスタムCSS欄にぜーーーんぶ書き込んでると、めちゃくちゃな量になるし、どれがなんだかわからなくなるので……。わたしの場合、投稿用CSSって名前をつけて、ボックスデザイン(囲み枠)とか、ボタン設定とかを書き込んでます。使い方がこれであってるのかはわかんないです。

・Simple Lightbox

画像をクリックするとポップアップてでてくるアレ。Lightbox機能っていうらしい。

・Ninja Forms

お問い合わせフォームが簡単につくれるやつ。忍●ツールズとは関係ないっぽい?なんでNinjaなんだろ。

・Table of Contents Plus

自動で目次作ってくれる便利なプラグイン。CSSでカスタムもできるけど、わたしはデフォルトのまま使ってます。

・WP ULike

いいねが設置できるぞ!ついったーのいいねに一喜一憂するのも疲れちゃったナ…て思って個人サイトを作ったのにね……。

あんまりプラグインを入れてもページの表示が遅くなるらしいので、現時点ではそんなに入れてないほうだと思う。個人サイトを細々とやる分にはそんなにいらない気もするし。調べたらほんといろんなプラグインあって便利だなーってなります。

・Font Awesomeについて

これどこにも書いてなくてすごい困ってたんだけど、EASELは「EASEL: テーマヘッダー (header.php)」のheadタグ内に、下記リンクが仕込まれてます。

<link href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" rel="stylesheet">

なので、https://fontawesome.com/search?m=free&o=r にアクセスして、右のほうにあるバージョンのプルダウンを6.3.0→5.15.4にすれば、そのバージョンで使えるフリーのアイコンがでてくる。
v5.12.1をv6.3.0に書き換えれば、6.3.0のアイコンも使えるようになるけど、EASELの公式ページにも書いてある通り、親テーマを編集するとのちのアップデートでめんどくさいのでやめたほういいよってあるので、修正する場合は自己責任になります。子テーマに書き込むのはちょっとよくわかんなかった…。

・CSSについて

わたしはCSSについてまじのまじで初心者で、10数年前のHTML手打ち時代で止まってるので本当にめちゃくちゃ大変だったし、全然意味わかんなかった。Google Chromeデベロッパーツール(右クリックで検証のやつ)をつかって、設定変えたい部分のセレクタ(クラス名)を探し、CSSを追加して…てのをずっと繰り返してた。そしてCSSチョトワカッタかも→CSSわかんないよ…を一生ループしてる。

たぶん一番知りたいところってCSSの部分だと思うんだけど、こればっかりはもうまじで調べるしかないので、がんばって調べてほしい。うちのサイトであれば、この部分どうやったの?て聞かれたら答えることはできると思うので、なんかあればwaveboxとかからお願いします。

でも思った通りの書き換えができるとヤッター!てなってめちゃくちゃうれしい!大変だけど、思ったより簡単に作れるので、みんな、個人サイト作ろう!!!