令和の個人サイトづくり(WordPress+テーマ「EASEL」)

発端

以前からSNS中心のブログサービスに限界を感じていてまた昔みたいな個人サイトを作りたいという欲求はあったんだけど、なかなかどこから手をつければいいかわからなかった。当時使ってたHTMLエディタはFrontPage Expressの世代です。
フォロワーで何人か静的サイトジェネレーターを使ってサイトを作っていた人もいたのでそれも挑戦してみたけどちょっと敷居が高すぎたのと普段使いするには厳しそうだった。

そんな中で見つけたのがこの記事。

どうやら同じことを考えている人がいて昔の個人サイトライクなテーマを配布してくれているらしい。
WordPressは敷居が高そう+オーバースペックな気がしていて敬遠していたけど手順通りやればいけそうな気がする。やっぱり同人界隈はすごい。今のインターネットで本当に大事な情報は全部お姉さま方が発信している。

WordPressを使った個人サイト作りについては下記のページも参考になりました。

こちらもすごい。

 

あとはひたすらぐぐって頑張る(実際はここが長い)。

WordPressテーマ「EASEL」について

これがなければ絶対作れなかった。感謝してもしきれない。
こちらの制作者の方は創作活動の個人サイト支援をやっていて、EASELに限らずテンプレートやFAQなど情報が一通り揃っているのでまずこちらに目を通すことをオススメします。

EASELのコンセプトは「創作・同人サイト特化のWordPressテーマ」。
最大の特徴は「作品」という独自の投稿タイプ。

↑の画像はEASELをインストールしたWordPressの管理画面。
この作品タイプを使うことで、通常の時系列に沿って並ぶブログとは別に自分で好きなようにタグをつけて一覧を生成できる独立したページが作れる。
これと「固定ページ」というWordPressデフォルトのページ生成機能を組み合わせることで、最近のインターネットで一般的なタイムライン型と違ったサイトが作れる。

当サイトでいうと、「投稿」で追加されるのがブログの記事(↓プラグインとの相性が悪いらしくてリンクエラー)。

「固定ページ」で使っているのはサイトのトップページや、↓こういうテキスト一覧ページ。

「作品」はブログから独立で表示させたいそれぞれの長文テキストのページ↓。

という感じで使い分けています。
たぶんEASEL以外のテーマでも固定ページと投稿をうまく組み合わせればだいたい好みのサイトにできるはず。

サーバーを選ぶ

上に全部まとまってるけど、まず敷居の低い無料サービスで候補になるのがWordPressの使えるスターサーバーフリーとXFREEの2つ。

なんでこの2つやめたんだったかな……たしか3ヶ月に1回くらい手動の更新手続きが必要でそれを忘れるとサイトが消されるみたいな理由だった気がする。
普通の人ならとりあえずこの2つのどちらか選べばいいと思います。

そして最初に候補にしてたのが大昔作ったサイトでも使っていたxreaの無料プラン。

ただここは今「『.shop』ドメインがついてくる!」として強制的に独自ドメインを取らされるという何かすごく嫌な感じのオプションがついてたので最終的に却下。

となると有料プランなんだけど、安定なのはさくら、ロリポップ、スターサーバー、エックスサーバーあたり。

どれ選ぶかはほぼ好みだと思うけど、印象ではロリポップが特に創作や個人サイトの支援に熱心な感じがしました。
ついでに最近のサーバーはどこも管理画面からボタン1つ押すだけでWordPressがインストールできる機能がついてて引くほど簡単です。無料サーバーでサイト作ってから移転させると手順がやや煩雑になるのである程度触って手応えがあればさっさと登録しちゃっていいかも。

で、最終的に見つけたのがスタードメインの特典サーバー。

これはドメインを取ると容量3GB+WordPressが1つインストールできるサーバーがついてくるという非常にありがたいサービス。
メリットは何より安さ。.comや.netドメインを取れば年間1,000円台で維持できる。
(※初期費用99円になっているようなマイナードメインは翌年度以降の料金が跳ね上がる仕組みになっています)。
後々他の用途で使いたくなっても安定のスターサーバーにそのまま移行できるのでほぼ問題なし。というわけでこれに決定。

このサイトの構成

  • トップページ
  • ブログ
    • ほぼ手つかずのまま使ってるはず。
  • テキスト一覧
    • 固定ページを生成→見出しを手打ちしてEASELのショートコード機能で各タグごとに一覧を生成。EASELはこのショートコードが特に強力だと思う。
  • 各種テキスト
    • EASELの「作品」タイプで生成。タグがとにかく便利。この機能が一般的なブログと画していてとにかく便利。
  • 背景色や見出しの変更は各ページごとに編集画面→カスタムCSS欄か、外観→カスタマイズ→追加CSSに記入。

使ってるプラグインなど

SiteGuard WP Plugin

WordPressを調べると絶対入れろと出てくるセキュリティプラグイン。ロリポップだと標準搭載らしい。

Site Kit by Google

Googleアナリティクスの連携方法は色々あるけどGoogle公式のこれが一番いい気がする。一応変なアクセスないかも確認できる。コード直書きだとテーマ更新のときに消える?ことがあるっぽい。

Classic Editor

WordPressはブロックエディターという新しい編集画面になってるんだけど、それを昔ながらのブログUIに近い感じに戻すプラグイン。でもこれももう少ししたら使えなくなるんだったかな?

Table of Contents Plus

見出しタグから自動的に目次を生成してくれる。レンタルブログによくある機能。

PS Auto Sitemap

サイトマップ自動生成。

Pz-LinkCard

リンクカード生成。バージョンアップやテーマを変えたときの互換性がやや不安なんだけど他に探すのがめんどくさい。

ARVE Advanced Responsive Video Embedder / Shortcake ( Shortcode UI)

YouTubeの埋め込みだったはずだけどあんまり使ってない気がする。
EASELは本来創作用テーマなので埋め込みリンクがちょっと崩れやすい気がする。

Back Button Widget

「戻るボタン」をつける。たぶん俺にしか需要ない。

Custom Post Type UI

カスタム投稿タイプを追加。
ブログをもう1つ追加しようと思ったんだけど結局やめたので入れっぱなしで使ってない。

WP Social Bookmarking Light

今日教えてもらった、ツイート、Facebook、はてブなどのシェアボタン。

Imsanity

画像をアップロードするとき自動的にリサイズしてくれる。
ミラーレスの画像が1枚10MBくらいになることがありサーバー容量圧迫するので入れた。

Twitterにシェアしたときサムネイル(Twitterカード)を表示する

(※追記 いつのまにかEASELデフォルトで対応した?かもしれない)

方法は色々出てくるんだけど記憶が正しければこの方法を使ってる。

あと今日教えてもらったけどサイト汎用のサムネイルは設定→EASEL設定→OGP設定で設定できた。

まとめ

だいたいこんなもんかな。ご興味のある方はぜひ。