令和の個人サイト作成備忘録

令和の同人界隈SNSタイヘンすぎんか……??

学生の頃ぶりに二次創作に戻ってきて、半年くらいTwitter…もといXを堪能した果ての感想がこれでした。

そもそもわたしはツイ廃で、まあまあ初期のユーザーでして(本垢は2010から)。
ひとりごとを言い リア友にはリプをするが それ以外は辻ふぁぼ・辻RTで生きてきたんですよ。それがTwitterの正しい姿だと信じて。
それがどうだい。同人界隈のXは交流の場だったんだよ。oh…なんてこと……

※ちなみに今でも本垢は辻ふぁぼらーだし、無言フォローだしフォロバはしない。とても気まま。

ほぼ鍵運用だったけど、それでもSNSはちょっと大変だな〜と思いました。

わたしは すきなものをすきって言い続けるだけの場がほしくて、アカウントもちゃんとそれ用に分けてるのに…
なんかXはケンカのマッチングアプリとしてますます腕を磨いてくるじゃん?
ムリヤリおすすめで戦乱の世を見せてくるじゃん?

もうつかれたよ、パトラッシュ。
おれはもっと平和にえっちな話がしたい。

そしたら数少ない相互さまから「今また個人サイトが流行ってますよ!」と教えていただいた。
そうなのか〜〜〜!! すてき……!
ボクもお城を建てたい!!

それまでは自分だけの豆本を作ってキャッキャしていたけど、自分のお城なら中身も載せてもいいかもと思えたし
(Pixivは絶対イヤだった! 人が多いところは怖いから…)純粋に自分の陣地をつくるのは楽しそうだと思った!
よし、おれはTwitterをやめるぞ! JOJOーーーーー!!!

現在のスペック
 レンタルサーバ:ロリポップ! ハイスピードプラン
 サイト本体:WordPress
  テーマ:Cocoon
  プラグイン:Classic Editor / Custom Post Type UI / SiteGuard WP Plugin / いいねボタン for WordPress / 他
 疑似Twitter:てがろぐ

記事が長くなったので珍しく目次をつけました

サーバについて

最初は無料で探したけど

  • 二次創作サイトの設置OK
  • R-18コンテンツの設置OK
  • 広告バナーが許容範囲内

という条件で選定したら結局有料になった。
なんとなく「無料ドメイン使ってます!」みたいなURLはカッコ悪いような気がしてしまい…
『ドメイン取得費・維持費』と『サーバレンタル費用』のバランスを考えて、ロリポップ! さんのハイスピードプランにしました。

※ちなみに無料ドメインでもカッコ悪くない! 全然いいです。
ただ、将来サーバを引っ越しても、独自ドメイン取っておくとURL変えずに済むメリットはあります。

わたしはビビリで「お城の建築期間がどのくらいになるのかわからない…」と思っていたので、先に無料サーバを借りて、そちらでサイト構築を済ませてから本番サーバに引っ越しました。
無料のほうではXREAさんにお世話になりました。広告バナー控えめ。R-18は文章もだめ。

Twitterの移転先

Twitterが本体なので、本サイトとは分離して擬似Twitterをつくります。
てがろぐCGI+Xmodoki2スキンで無事完成。

見てのとおり本当に見た目がほぼTwitterになります。うれしい。
ギャラリーモードがあるので、メディア欄もできます。うれしい。
まあ、ギャラリーモード活用することはあんまりないけど……

サイト本体

サービス利用型(レンタルホームページ)とサイト構築型で悩んで、結局WordPressで構築することにしました。
プログラム本体に《テーマ》と《スキン》を組み合わせてつくるシステム。テーマは機能とベースデザイン、スキンは見た目の調整…と考えるとわかりやすい。
そこに、プラグインでさらに追加機能を盛っていく感じです。

Cocoonは多機能で、使っている人が多いのとフォーラムが充実しているので、困りごとの解決方法も見つかりやすくてよかったです。

スキンは使用せず、もともとのデザインに自分でCSSを当てています。
この段階で個人サイトさんをあちこち見せていただき、とっても参考になりました!

  • ベースフォントを変える
  • カラーセットを変える
  • NOTE用とSS用のアーカイブ(一覧ページ)を整える

これだけでもそれっぽい形になる。…なっていると信じたい。

日本語フォントは『Zen丸ゴシック』
カラーはMORPHOUSさんのカラーセット『Thyme』をベースにしています。
グリーンとパープルが親衛隊ギラ・ズール部隊って感じでよかったので…。
エラー系はもちろん赤を使うので、これでネオ・ジオン軍の完成です。(?)

フォントはめちゃくちゃ紆余曲折あったけど…
小説と普段のテキスト、両方に使えて読みやすい、NotoSansじゃないフォントにしています。

いや、NotoSans自体はすごくいいフォントだよ!
わたしが、猫も杓子もNotoSans…みたいな風潮なのがあんまり好きじゃないだけで……

入れているプラグイン

Advanced Editotr Tools

Classic Editor

WordPressのエディタを、現在主流のブロックエディタから旧エディタに切り替えられるようにするプラグインが「Classic Editor」。
「Advanced Editotr Tools」は、クラシックエディタ内テキストの一字下げ・空行を保持してくれます。(WordPressは空行を自動検知して詰めてしまうらしい)
「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックが入っていればOK!

ちなみにCocoonはデフォルトでクラシックエディタを有効にする設定を持ったテーマです。
「Cocoon設定>エディタ」に「Gutenbergを有効にする」という項目があり、このチェックを外せばクラシックエディタがデフォルトになるはず(ブロックエディタの名称がGutenberg)。
…だけど、ブロックエディタ自体はとても便利だし、無効にはしたくないので、わたしはClassic Editorプラグインを入れて併用しています!

Custom Post Type UI

『投稿の種類』と『タグ・カテゴリの種類』を増やすプラグイン。
わたしは投稿一覧を3つに分けてます。

デフォルトの「投稿」は更新履歴に。
それ以外に「NOTE」と「SS」を作りました。
作る時にアイコンの設定もできます。Cocoonは Font Awesome 5 が使える設定になっているので、好きなものを選ぶとわかりやすくなるぞ。

投稿タイプを分ければ、種類に合わせたテンプレートを用意することでページの見せ方を変えられる。
今回、小説ページはリーダー機能をある程度作り込むことを前提にしていたので、詳細ページのテンプレートを分けるために投稿タイプを切り分けました。
タグとかはデフォルトのものを各投稿タイプで使い分けてもいいんだけど、管理のしやすさを考えて専用タグ・専用カテゴリを作っています。

投稿タイプの増やし方、function.phpに手書きする方法もあるんだけど…
プラグインを使うほうがラクだったので入れました!(素人)

ちなみにFont Awesome5、うまいことアイコンが見つけられないよ…となると思うのですが、Weblicaさんのこちらのページが圧倒的に便利で超おすすめ。

Admin Menu Editor

Category Order and Taxonomy Terms Order

メニューの並び順を自由に入れ替えるプラグインと、タグやカテゴリの並び順を自由に入れ替えるプラグイン。
並び順、だいじだから……!!
使い勝手に直結するから!

Feedzy RSS Feeds Lite

Twitterもどきのてがろぐ新着投稿をRSSフィードで取得してHOMEに埋め込むためのプラグイン。RSSフィードを扱うためのものです。
めちゃくちゃクセがある…。時間が9時間ズレるし、日付の日本語化もおかしい。わんぱくすぎる。
なんとか御したけど、素直で良い子なRSS系のプラグインを探せたら乗り換えてしまうかもしれない。

Otter

ブロックエディタの拡張プラグイン。
ブロックの種類自体は、実は Cocoonはすごく豊富に持っていて、わざわざ拡張プラグインを入れるまでもない。
ほぼCocoonブロックで足りる。その方が安定してるし。

ただ、Otterはブロックごとの見た目の微調整をすごくさせてくれるため、

「このブロックだけは指定のmarginを無視して余白を大きめに取りたいんだよな…」
「この見出しだけはスマホ表示の時のフォントサイズを変えたいんだよな…」

などがすべて叶います。正直どっか干渉したりしている気はする……
もちろんOtter独自ブロックもあります。
あとソースはきたなくなる……(恥)

いいねボタン for WordPress

いいね系はいくつかあるけど、国産で使い勝手がいいプラグイン。
いいねボタン押すとコメント欄を出せる。出さないようにすることもできる。
いいねはメール通知機能なし、コメントはメール通知機能あり(切ることもできる)。

サイトにボタンやコメントフォームつけるの、ためらう人も多いと思います。わたしも悩んだ。
でも、読み手の心のわたしが「絶対つけろ」と言ったのでつけました。
同好の志がいるのだと感じられるボタン、いいものですよ…!

あと、いいねくださった方! コメントくださった方!!
フルアン好きな方も! サイトがいいなと思ってくださった方も!
とってもうれしい ありがとうございます LOVE

みなさんSUKIサイトのいいねボタンは軽率に押しましょう。あとフルアンサイト様はみなさまつけてください。
わたしが! そのボタンを! 押すので!!

All-in-One WP Migration and Backup

バックアップとるやつ。
これでバックアップデータを吐き出して、本番サーバに移行した後に読み込めば丸ごと復旧してくれるのでべんり。
ただし、旧URLが設定されてるとこも丸ごと復元してくれるため、細かい部分は調整する必要がある。OGP画像のURLとか。

SiteGuard WP Plugin

定番のセキュリティ系プラグイン。まずはこれを入れて管理画面のログインURLを変えよう。

Lunalys

国産のアクセス解析プラグイン。
プラグインとして機能するのに、WordPress以外で作ったサイトを解析する機能もついている便利なやつ。
Cookie未使用ですので、個人をバリバリ追いかけるタイプではない。全体感の把握には十分。

例えばだけど、わたしは仕事で扱ってるサイトは8割スマホユーザーなので、PCユーザーは無視でよいと考えてました。
デザイン調整もスマホ中心にやりました。

でも、リリースしてみてデバイス割合見たら、PCめちゃくちゃ多かった…!!?
ので、PC版の見た目はちょっと再調整しようかと思ってます。
界隈変われば…ってやつだなぁ……

LiteSpeed Cache

キャッシュ系プラグイン。表示のスピードアップに貢献するけど、そもそもLiteSpeed対応のサーバでしか意味がない。
あとキャッシュ系は一長一短なのでなんとも言えねぇ…。根が深いキャッシュはダルいなってなることもまあ、あるしね…。

LightStart(現在未使用)

XREA時代に、サイトを工事中表示にするのに使ってました。
サイト全体をnoindexにしたので迷い込む人はいない前提だったけど、一応ね…!

ひとことフォーム:コイブミ

DMに使用しています。doさんの一言フォーム。

Waveboxやマシュマロも検討したけど、サイト外遷移はちょっと面倒だった。
最初は定番プラグインのcontact form7+Flamingoを試してみたけど、受信履歴がめちゃくちゃ見づらくて…(メールで全部管理するから構わないって人はいいと思う)
コイブミは管理画面が別になるので、それが面倒な人はプラグインがいいかもしれません。
あとはメアドの入力欄がほしいかとか、その辺との兼ね合いかなぁ。

コイブミはWordPressのサイトに設置(呼び出し)する場合は

  1. functions.phpに、コイブミのJavaScriptを読み込むよう記述
  2. functions.phpに、コイブミ表示用のショートコードを記述
  3. 該当ページにショートコードを書く

という手順になり、結構ややこしいので、WordPressプラグイン版が出るといいなぁと思います。

Google Search Console

本来であれば、どんな検索キーワードを使ってサイトにたどり着いたのかとかがわかる、サイト管理者のための(SEO対策とかに使える)ツールではありますが……

わたしは逆に、本当に検索避けが正しくできているのか? を確認するためにウェブマスターとして登録しています。
noindexが全ページ正しく機能していれば、Googleのインデックス登録はサイト内0件になるはず。
ここでページが検出されるようであれば、どこかのmetaタグが漏れているので、サイト側を修正&サーチコンソールからインデックス削除の申請を出します。(今のところその対応はしたことないけど)

まあ、それとは関係なくbotは来ますからね。特にAI学習系の botは本当にギュンギュンくるので、robots.txtで対策するか
<meta name=”robots” content=”noimageai,noai”>
を<head></head>に挟んでおくか。絵の方は特に……

最後に:作ってよかったか

よかった〜〜〜〜〜!!!!!!(大声)

ここを訪れてくださった方は、わざわざサーチサイトから飛んでくださった方です。
つまり

  • 個人サイトに興味がある
  • フルアンに興味がある

のいずれかです。ありがとうございます。どちらもうれしい。
興味ない人に勝手に表示されることがない、自分だけのお城、最高です!!!
まだまだ少しずつ手を入れてあげたいな。

わたしはWordPressでサイト作るって決めた時、「みんなどんなプラグイン入れてるんだろう?!」をすごく知りたかったので、プラグインやツールの紹介を中心の概要メモにしました。

フォントの話とか縦書きビューワの話とか、こだわりの部分のメモをそのうちまた書くかもしれない。
ちなみに縦書きビューワ多分ほぼ使われていない。わたしが思っていたよりもWeb小説は横書きが主流らしい。
でもわたしは会話前後の空行は入れないので…読みづらくないならもちろんどちらでも……

とにかく!
令和のオタク!
個人サイト!!
つくろ!!!

たのしいよ!