みなさまTwitterの凍結祭りおつかれさまでした。大丈夫でしたか？いよいよ危ういですね。
私はサイトを準備万端にしていたので「大変だな～」くらいの気持ちでTLを眺めてました。みなさまもこの機に移行先として個人サイトを持つのはどうでしょうか？WordPressだと更新も楽ですしテーマによっては自由度の高いデザインが可能ですよ！
作り方が分からないという方向けに、たまたま別サイトを作る機会があったので画像付きで手順をまとめてみました。改定前の記事はざっくりしすぎててタイトル詐欺なとこがあったので、今回は「これとおんなじことすればWPの導入ができる！（とまではいかないが私はこんな感じで作った！）」みたいなのを書こうと思います。過去最高に長いです。
WPにはブロックエディタというノーコードでデザインができる便利な機能が備わっているのですが、既存のWP創作サイトの作り方の記事は情報が少し古くてブロックエディタの解説をしてないなというのを感じたのでそこらへんに触れていきます。令和の個人サイトはWordPressのブロックエディタ対応テーマで決まりだぜ！
最終的にこんなサイトが作れます！
（デフォルト感満載ですが画像をイラストに差し替えたりするともっと綺麗になります！）
ちなみにこのサイトはWeb系のブログ用に作ったのですが「管理大変だな…」と思って契約更新しておらず今はアクセスできない状態です。デモサイトとか作ればよかったな。
用意するもの
- お金（なくてもOK！）
いきなり人をふるいにかけるキーワードですみません！お金をかけなくても大丈夫な説明もしているので！去らないでくれ！別サイト取得のついでに書いた記事なので今回は有料プランの説明になってます。申し訳…。
ドメインに対して無料でサーバーがついてくるプランもあるので、無料がいい方はそちらを使ってくださいね。今回は私がいつもお世話になっているスターサーバーさんの有料プランでの説明をしていきます。（お金がかかると言ってもドメイン代が100円～1000円、サーバー代が月額220円くらいなのでお金に余裕がある方は有料プランもおすすめです！）
あと完全に「私はこういう手順でサイト作ってる！」というアレなので他サーバー会社との比較とかは行っておりません。
今回はネットオウルという会社が運営する「スターサーバー」でWordPressをインストールしていきます。スターサーバー大好き。
ドメイン代：310円 サーバー代：無料（2週間無料お試し期間を使いました）
ネットオウルに新規登録する
ネットオウルというサーバー会社でまず新規登録していきます。そして申し訳ない！すでに登録済みだったのでスクショを撮ることができなかったです！こちらを見ると簡単な3ステップで登録出来ますのでこちらに沿って登録を進めてください。
登録出来たらプランを選びます。安い順にエコノミープラン、ライトプラン、スタンダードプラン…とありますが、WordPressがインストールできるプランはライトプランからです。また、無料のプランもあり、スターサーバーフリーの「フリーPHP・MySQLプラン」なら無料でWordPressがインストールできます！ただとても容量が少ないのでイラストサイトには不向きかもしれません。今回は2週間無料キャンペーンが開催されていたのでライトプランを選択しました（2週間無料キャンペーンいつも開催されてるな…）新規申し込みしていきましょう。
ネットオウルのメンバー管理ツールを開きます。「新規お申込み」を押すとこの画面になります。
サーバーIDはデフォルトのままでも可能ですし、自分で設定することもできます。自分で設定すると「http://○○○○○○（設定した文字列）.star.ne.jp」のように無料ドメインとして使うこともできます。今回は分かりやすいようにブログ名「うつつ舎」をそのままサーバーIDにしました。利用規約に同意して確認画面、登録。
登録できました。サーバーアカウント一覧を見ると、さきほどのサーバーIDでこのように登録されています。使いたいサーバーIDの「サーバー管理ツール」をクリックします。
このような画面になります。WordPressをインストールするためには「アカウント情報」の一番下の「MySQL」が一つ必要になります。MySQLが0/1個と書かれているのを確認して、次に進みます。
独自ドメインを取得する
ぐぐっとスクロールして「ドメイン設定」を押します。ここからドメインを取得する作業に入ります。
ドメイン設定＞ドメイン追加＞「スタードメイン管理のドメインを追加する」を押すと、取得してある独自ドメインが表示されます。まだドメインを取得してないので、何も表示されませんね。今回は独自ドメインを取得することを想定して解説していきますが、無料ドメインを使うことも可能です。無料の範囲内で好きな文字列にしたい方は、上の画像の「ドメイン追加」の隣にある「ネットオウルのドメイン」を押すと、制限の中で好きなドメインにできます。たとえば「http://○○○○（好きな文字列）/Illust.jp」「http://○○○○（好きな文字列）/official.jp」等のドメインに設定することができます。
ではスタードメインに移動します。下記のリンクをクリックしてください（別タブで開きます。）
スタードメインに移動したら、トップに表示されている検索ボックスに使いたいドメイン名を入力します。すると取得できるドメイン一覧が表示されるので、値段も見ながら好きなドメインの申し込みボタンを押します。私は「.info」にしてみました！
申し込みボタンを押すとこのような画面になります。「レジストラ選択」→Netowlのまま、「契約年数」→1年で良ければそのまま、で設定して、クレジットカードの情報を入力します。規約に同意し、確認。（コンビニ決済の場合はネットオウルプリペイドを選択すれば大丈夫です！）
これでドメインの取得ができました。タブを閉じて、「サーバー管理ツール」の「ドメイン設定」に戻ります。
「ドメイン名」の欄を見ると、取得したドメインが追加されていますね。それを選択して、「ドメイン設定を追加する（確認）」ボタンを押します。
ドメインを追加できました！これでWordPressをインストールするための準備ができました。これ以降は、このドメインという名の住所に、WordPressという家を建てていきます。
簡単インストールをする
いよいよWordPressをインストールしていきます！
左サイドバーにある「簡単インストール」という項目をクリックし、使いたいドメインを「選択」します。
「追加インストール」タブをクリックし、「WordPress」欄の「インストール設定」をクリックします。
するとこのような画面になります。「データベース情報」＞「自動でデータベースを生成する」にチェックが入っていることを確認し、ブログ情報を入力していきます。
- 「インストール先」のスラッシュの後の空白は入力しなくて大丈夫です。
- ブログ名にはブログのタイトル（日本語OK）
- ユーザー名は覚えやすい英字の文字列にします（ログインの時に使います）
- パスワードとメールアドレスを設定します（ログインの時に使います）
「確認画面」を押します。
確認画面を見て、問題なかったら「確定する」を押します。
インストールができると「インストールが完了しました」と表示されます。重要な情報が載ってるためスクショを載せられませんが、この「ログインフォーム」に書かれているURLが、サイトにログインするときに必要な文字列になりますので、忘れないようにコピペしてメモ帳に貼るなどしておきましょう。
ちなみに、もしメモを忘れてしまっても、「http://ドメイン名/wp-login.php」にアクセスすれば大丈夫です。
http://ドメイン名/wp-login.php
簡単インストールは30分ほど時間がかかります。すぐにログインできなくても焦らず、少し時間を置いてからアクセスしてみてください。
WordPressのダッシュボードにログインする
ログインフォームにある文字列にアクセスしてみましょう。無事インストールが完了すると上のような画面になります。先ほど設定したユーザー名とパスワードを入力しましょう。
ダッシュボードにログインできました！ここまでくれば90％は出来たも同然です。
SSL設定（http://~をhttps://にする作業）をする
サイトの外観を整えていく前に、やっておいた方がよい設定があります。それはサイトのSSL化です。SSLとは平たく言えばデータを暗号化する技術のことで、Web拍手やメッセージを送ってくれた人のデータを守るために近年ではほぼ必須の設定になっています。スターサーバーのライトプランでは無料で簡単に設定できるため、ぜひともやっておきましょう！
STEP①サーバー側のSSL設定をする
スターサーバーのサーバー管理ツールに戻ります。サイドバーの下の方に「SSL設定」とありますのでクリックしましょう。
設定するドメインを選択します。
設定するドメインをクリックし、「独自SSL設定を追加する（確定）」を押します。
※CSR情報は入力しなくても大丈夫です。
設定ができました。SSLが反映されるまで最大1時間程度かかるようなので待ちます。
※SSL設定はもう少し続きます！
STEP②.htaccessのSSL設定をする
独自SSLの設定が終わった時点では、まだ自動的に「https://～」のURLへ転送されません。ですので以下の手順を実行します。
サーバー管理ツール＞FTPアカウント設定＞使用するドメインを選択し、ログインを押します。
ファイルマネージャーにログインできました。そうしたら「.htaccess」という項目の緑色の編集ボタンを押します。
コードエディタが開きますので、コードの一番上に以下のコードを張り付けてください。
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
これで「http://～」のURLでアクセスしても、自動的に「https://～」のURLへ転送されるようになりました。
ダッシュボードに戻りサイトを表示・確認してみましょう。
URLが「https://~」になっているはずです。
STEP③WordPress側のSSL設定をする
それでは最後の設定になります。WordPressのダッシュボードから「設定」＞「一般」をクリックし、「WordPress アドレス(URL)」「サイトアドレス(URL)」の設定内容を、https://～に変更してください。
これでサイトがSSLで保護されるようになりました！以上でSSL設定は完了です。お疲れ様でした！
サイトの着せ替え
ここからはサイトの外観に関わる作業です。やっとですね！まずはテーマ（テンプレートのこと）を変更していきます。
ダッシュボードの外観＞テーマから、「新しいテーマを追加」を押します。
ブロックエディタ対応テーマを選ぶ
ここでブロックエディタの話を少し。WordPressのテーマにはブロックエディタに対応しているテーマとそうでないテーマがあります。ブロックエディタというのはWordPress5.0から標準搭載された、記事やページを編集する機能のことです。HTMLをいじったことがある方なら、テキストエディタというのはご存じかと思います。従来のWordPressではテキストエディタのように自分でコードを書くクラシックエディタというのが主流でしたが、最近コードを書かなくてもブロックをドラッグ＆ドロップするだけで簡単に記事が書けるようになりました。画像や文章をブロックという単位でいじれるので、入れ替えや並べて配置などが簡単にできます。コードに詳しくない初心者にとってこれは画期的なことです。
クラシックエディタはいつ使えなくなるか分からない状態なので、今から個人サイトを始める方はこの新しいブロックエディタに慣れておいた方が絶対にいいと思います。しかし現状は無料テーマでブロックエディタに完全対応しているテーマは少ないです。そこでおススメのテーマをご紹介します！
「Arkhe」というテーマです。こちらのテーマは国内シェアナンバーワンの有料テーマ「SWELL」を開発された了さんの無料テーマというだけあって、シンプルながらもめちゃくちゃ機能が豊富です！私は最近までこのテーマを使っていて、すごく使い心地が良かったのでSWELLを買いました…！ブロックエディタを使ったことはあれど正直そこまで役立つとは思っていなかったのですが、このテーマを使ってみてあまりの快適さにブロックエディタなしでは生きられなくなりました。回し者ではないすよ！マジで使いやすいんです！
好きな機能とか便利さについてはまたおいおい記事にしようかと思います。とりあえず今回はArkheをダウンロードしていきます。テーマの検索ボックスに「Arkhe」と入力してください。
インストール→有効化したら着せ替え完了です。左上のブログタイトル部分をクリックしてサイトの外観をチェックします。このようなかたちになりました！
まだ何も投稿してないので物足りないですね。ではまずトップページを作成していきましょう！
トップページを作る
創作サイトならば最初に見られるページには凝りたいですよね。ヘッダーでどどんとイラストを表示したり、注意書きを書いたり…。ブロックエディタがあればタグを打つことができなくても簡単にヒーローヘッダー付きのページを表示することができます。
また、Arkheはブロックエディタの拡張機能がとても充実しています。まず標準的なブロックエディタの使い方をご紹介した後、Arkhe独自の素敵な機能をご紹介します。
ではまず、ダッシュボードに戻り、固定ページ＞新規追加を押します。固定ページとは、サイト概要やお問い合わせなど、頻繁に更新することのないページのことです。タグやカテゴリでの分類ができない独立したページになります。
左上の青い＋を押します。
左サイドバーに様々な機能が表示されるので、その中から「カバー」を選択します。カバーブロックはヘッダー画像を挿入するのに最適なブロックです。画像をアップロードすると以下のようになります。
挿入できました！これがトップページのヘッダーになる画像です。こんな感じで使いたい機能ごとにブロックを選択し、追加することでページをつくっていきます。
画像をタップすると右サイドバーの「ブロック項目」に設定が表示され、画像のパララックス効果やオーバーレイの度合いなど、様々なオプションを設定することが出来ます。今回はオーバーレイを10％にしてみました。
この要領で次は「段落」ブロックを追加して文字を書いていきます（Enterでも段落が追加できます）
見出しブロックやリストブロックも追加して、サイト概要を書くとこんな感じになります。
このままだと灰色のヘッダー部分が目立つので、非表示にしましょう。CSSで消すこともできますが、これはArkheテーマ側の設定で消せるのでトップページの時だけ消します。
まず今作った固定ページをフロントページに設定していきます。カスタマイズ＞ホームページ設定＞「ホームページの表示」を「固定ページ」にし、「ホームページ」を先ほど新規追加した固定ページに設定します。
灰色のヘッダーが消えました。とりあえず固定ページはここで終了します。
投稿ページを作る
次は投稿ページを作っていきます。投稿ページとはブログなど頻繁に更新するページのことです。タグやカテゴリで分類することができます。投稿ページには二種類あり、一つは投稿一覧を表示するアーカイブページ、二つ目は単体の投稿ページです。
さっそく投稿ページを新規追加する前に、投稿の設定をしていきます。
パーマリンク設定
パーマリンクとは投稿をした際に自動的に生成されるリンクのことです。デフォルトですとhttps://ドメイン名/2023/02/07/記事の名前/という風になりますが、パーマリンクは英数字で構成されているのが望ましいため、変更します。
ダッシュボード＞設定＞パーマリンクを開きます。
カスタム構造＞「post_id」を選択し保存します。これで投稿のidでリンクが表示されるようになりました。
設定が終わりました。それでは投稿ページを新規作成していきましょう。
投稿ページにイラストや日記を載せる
入力画面は固定ページと同じです。日記やイラストを載せていきましょう。
イラストは画像ブロックから追加してもよいですし、右サイドバーの「アイキャッチ画像」を設定すると投稿一覧にも表示されるようになります。また投稿ページでは固定ページと違いカテゴリーやタグをつけることができます。記事を書いたら公開ボタンを押します。
コメント欄を消す
コメント欄を消すにはダッシュボードに戻り、設定＞ディスカッションを押します。「デフォルトの投稿設定」から、「新しい投稿へのコメントを許可」のチェックを外し保存します。これで次回から投稿にコメント欄が表示されなくなります。
すでにコメント欄がついている投稿に関しては、ダッシュボードの投稿ページ一覧から、コメントを非表示にしたい投稿の「クイック編集」を押し、コメントを許可のチェックを外せばOKです。
サイドバー（ウィジェット）を編集する
デフォルトですと「最近の投稿」「最近のコメント」「アーカイブ」などが表示されていますが、これらを編集することができます。
ブロックウィジェットはタイトルが表示できなかったり余白がデカすぎたり色々致命的なんですよね…
なので「Classic Widget」というプラグインをインストールするのをおススメします。プラグインというのは拡張機能のことで色んな機能が追加できるメチャクチャ便利なやつです！手順は簡単で、ダッシュボード＞プラグイン＞新規追加＞「Classic Widget」で検索＞インストール＞有効化するだけです！文字にするとなげーですが！
有効化後、外観＞ウィジェットを押すと、たくさんの項目が出てきます。ドラッグで「サイドバー」ウィジェットに入れたい項目を追加することで、サイドバーを好きな感じにすることができます！
投稿アーカイブを表示するための固定ページを作成する
好きなだけ投稿を増やしたら、今度はその一覧を表示するための固定ページを作成していきます。固定ページは投稿アーカイブを表示するために使うだけなのでタイトルだけ入力すれば大丈夫です。
ちなみに固定ページも投稿ページも個別でパーマリンクを設定できます。今回は日記（nikki）にしました。
公開したら、ダッシュボード＞外観＞カスタマイズに移動します。トップページを設定した時にも使った「ホームページ設定」の「投稿ページ」で「日記」を選択し、公開。これで投稿ページが一覧で表示されるようになりました。
一覧ページはこんな感じです！
灰色のヘッダー部分にはイラストを追加することが可能で、投稿一覧を表示している固定ページにアイキャッチ画像を設定することで表示できます。「カスタマイズ」から非表示にすることも可能です。
ナビゲーションメニューを設定する
今のままだとトップページにアクセスしたときに投稿ページへのリンクがなく、訪問者がサイトを回遊できないのでメニューを設定していきます。カスタマイズ＞メニュー＞メニューを新規作成を押します。
メニュー名は何でもいいです（自分しか見ないので）メニューの位置はグローバルナビゲーションを選択。次を押します。
「項目を追加」→フロントページと投稿ページの＋ボタンを押すと、メニューに項目を追加できます。公開ボタンを押します。
メニューが作成できました！
Arkheで外観をカスタマイズする
こんな感じで色々とカスタマイズできます。どのテーマでも同じように設定できるようにWordPress標準搭載の機能のみを用いて説明しました。基本的な使い方はこんな感じですが、ここからはさらにカスタマイズしたい方のために、Arkhe独自の機能を紹介します！
Arkhe Blocksプラグインをインストールする
先ほどもチラリと話しましたがプラグインは拡張機能のことです。お問い合わせフォームやWeb拍手、アクセス解析など用途に応じて手軽に導入できます。今回はArkheテーマ独自のブロックエディタ拡張機能をインストールします！
このプラグインで何ができるかというと以下の通りです。
すごい高機能で楽しいプラグインなのでおススメです…！私はこのプラグインを入れてからブロックいじりが楽しくなりました。そして余分なプラグインを何個も削除できたので軽量化にも役立つと思います！
ではインストールしていきます。ダッシュボード＞プラグイン＞新規追加＞検索ボックスに「Arkhe」と入力します。
「Arkhe Blocks」を今すぐインストール＞有効化。これだけです！
Arkheパターンライブラリを使ってサイトを装飾する
さっそく拡張された機能を使ってサイトの見た目を装飾していきましょう。
Arkhe Blocksプラグインをインストールしたことで、Arkheパターンライブラリが使えるようになりました。パターンライブラリは、Arkheの作者様が作ってくださった多様なデザインをコピペしてそのまま使えるというものです。
使うと素人くささがなくなりとても素敵なデザインのサイトになります！
フロントページのヘッダー画像をもう少し凝りたいので、Arkheパターンライブラリでヘッダーに適したデザインを探します。トップページ（固定ページ）を開くと上に「Patterns」というボタンが追加されているのでクリックします。以下のURLからでも可能です。
パターンライブラリに移動したら、検索ボックスの下の「無料で利用可」にチェックをして検索します。ヘッダーだと「メインビジュアル」という名前の付いたパターンが綺麗です！
私はscMV06（メインビジュアル06）というデザインにしてみました。「このパターンをコピーする」というボタンがあるので押します。
コピー出来たらWordPressに戻って、固定ページの編集画面のうえでペーストします。
サンプルと同じデザインがペーストできました！
カバーブロックでヘッダー画像を作った時と同じように、画像をタップしてブロックを編集することができます。右サイドバーに「メディアを変更」ボタンが現れるので、画像をイラストに差し替え、文字も変更しましょう。
こんな感じでパターンライブラリとブロックを活用することで、自分好みのサイトが作れるようになります！そして申し訳ない！ダラダラ書いていたら2週間の無料お試し期間が終わってスクショがとれなくなりました！（サイト凍結された）
てきとうにきめたドメインだったし結局別サイト持たなくてもいいかな…とか思い始めてたので特に更新してませんでした。2週間のお試し期間大事…。
完成！
なんやかやいじって完成しました！ヘッダー画像は結局パターンライブラリの別のメインビジュアルをコピペして、ページの文言も書き換えました。AboutはArkhe独自のセクションブロックを使ってます。セクションブロックは背景画像も設定できるのでイラストとか素材とか入れるといいかなと思います！Illustもパターンライブラリからデザインをお借りしました。「もっと見る」はボタンブロックを使ってます。イラストサイトを想定しているので、「もっと見る」のリンク先にギャラリーページがあるといいですね！ギャラリーページは固定ページに一覧表示してもいいですし、投稿ページで絵日記みたいに一個ずつ投稿してもいいと思います。
本当に簡単で自由なのでお好みで調整してください…！
終わりに：個人サイトに役立ちそうなブロック紹介
最後に個人サイト的に役立ちそうなブロックを紹介します！
①アコーディオンブロック（Arkhe Brocksプラグイン搭載）
タップすると文章が展開されます。
拍手のお返事とかネタバレのワンクッションで使えると思います！前はアコーディオンを出すプラグインを入れてましたが、Arkhe Brocksプラグインにまとまっていたためプラグイン節約になりました。
②カラムブロック（WordPressブロック標準搭載）
こんな感じで、文章や画像を横並びにできます！
- リストも表示できます
- 長文を打つとこんな感じ。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
スマホだと自動的に縦並びになります。
トップページでカラムブロックを使うと密度が上がって個人サイトっぽくなる気がします！
3カラムも設定できます。余白も調節可能。
③ブログカード（Arkhe Brocksプラグイン搭載）
↓こんな感じでサイト内リンクや外部リンクを綺麗に目立たせてくれるブロックです。
個人的にとても助かっているブロックで、前はこのブログカードを出すために「Pz Link Card」というプラグインをいれてましたがArkhe Brocksにまとまっていたので不要になりました。
④続きを読む（WordPressブロック標準搭載）
アコーディオンと違い、投稿一覧ページで抜粋文を表示させたくないときに使います。ネタバレ感想を書きたい時に、伏せたい部分の手前に挿入するとそれ以降の文章は非表示になります。ふせったーの代わりになるかもしれません！
以上！
「需要あるのか」とか悩んでましたが、こういう「説明すること」が大好きなんですよね…。説明不足なところもあったかと思いますが、WPは検索すれば大体の情報は出てくるのであとはググってみてください！
WordPressが大好きなのでこれからも色々役に立ちそうなことがあったら発信していきたいです。みなさまも自分の城をつくって楽しく暮らしましょう～！