カテゴリー: 同人サイト作成備忘録

【2024年11月版】WPで個人サイトを作ろう

はじめまして、ごがつと申します。
昨今のSNS事情を鑑み、
久しぶりに個人サイトを作るか!と思い立ち
(多分に相互フォロワーの影響を受けています)
成人向け小説を置くことができる
サイトを作成しました。

HTML知識はアメブロなどが流行った頃に
ふんわりと触れ、なんとなーく読めるかも…
というレベル感です。

WordPressはお仕事で触っているので
画像のアップロードや投稿は問題なくできますが1からの構築となるとまったく…
という感じ。

大まかな流れは

1.サーバーを契約しよう
2.WPをインストール
3.テーマやプラグインをインストール
4.実際に構築してみよう

という感じになります。ちなみにこのサイトを作るのに6時間程度かかりました。

1.サーバーの契約

あなたが運用したいのが成人向けコンテンツであるならば、サーバーの選定が必要になります。
私は主に成人向け小説を制作しているのでリトルサーバー様にお世話になることにしました。
ここでは文章における成人向け表現が可能で、かつ費用がかなりお安いためです。

今回はWordPressに最適!とうたわれているワードプランにしました。
20日の無料期間がついていて安心ですね!(お財布にも優しい)

絵も載せるならウィッチサーバー様もよいのではないでしょうか。

とりあえずまずはページに従って無料お試しの登録をしましょう!

2.WPのインストール ※表示されるまでに時間がかかります

メールで送られてくるコントロールパネル(コンパネ)にログインし、※超かんたん・初心者向けと書かれている方のWordPressをインストールしましょう。
成功すると「【リトルサーバー】超簡単インストール成功」というメールが送られてきます。
指定の方法でログインしましょう!

3.テーマやプラグインをインストール

テーマは同人サイトに特化したeaselというものを使用しています。
ダウンロード・導入手順は上記ページに記載の手順に従ってくださいね。

プラグイン一覧 ※メニューのプラグインから新規プラグインを追加→コピペしたタイトルを検索すれば簡単に導入できます!
Advanced Editor Tools
:
エディタ拡張
Age Gate :
必須。年齢確認ページ作成用
bbPress :
フォーラム作成プラグイン(BBS代わり)
Classic Editor :
ほぼ必須。こちらの方が使いやすい編集画面になります。
Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts :
フォント変更用。ちなみに当サイトはZen Maru Gothic を使用しています。
Show Current Template : ツールバーにテンプレートファイル名が出ます。カスタムするなら必須かも?
SiteGuard WP Plugin : ほぼ必須のスパム対策。これに設定→表示設定から「検索エンジンがサイトをインデックスしないようにする」をオンにしておくサイトが多いのではないでしょうか。
SlimStat Analytics : アクセスカウンター代わりにします。
いいねボタン for WordPress : web拍手、欲しいですよね。 ※こちらはDLして導入するタイプ。テーマと同じように導入できます。

4.実際に構築してみよう

さて、ここからは実際にサイトを作成してみましょう!
プラグインについては不明点を検索すれば出てくることが多いので割愛し、今回は私がひっかかったポイントを記載します。

・AgeGateの設定
しっかり作り込めるプラグインなのですが、残念なことに日本語対応していないんですよね…。

RestrictionsのRestrictをselected contentsにしておくと各ページの編集画面に鍵マークが表示されるようになります。成人向けワンクッションを置きたいところは鍵を掛けましょう。

Redirect failuresでいいえを選択した時に飛ばしたいリンクが設定できるようです。折角なのでお好きなサイトに飛ばしましょう。

その後はMessages及びAppearanceでページの見た目をカスタムしましょう!

ロゴはBoothなどで配布されているものが沢山ありますのでお好きなものを置いてみましょう!
message内のAdditional contentでトップページへのリンクを置いてあげると親切かもしれませんね。

もしPC版サイトで年確ページがスクロールできない場合はAdvancedで
MethodをStandard(PHP)にすると改善されるかもしれません。私の場合はこちらで解決しました。

FontAwesomeのアイコンを埋め込んでも表示されない
こちらはeaselの対応バージョンが最新ではないためのようです。FontAwesome側で5.15.4のバージョンを選択し、それに合った絵文字を探して埋め込みましょう!
メニューバーの絵文字は外観→メニューでヘッダーメニューを作成、表示したい固定ページなどを追加した後詳細設定で<i class=”fas fa-home”></i> はじめに のように追加すると反映されます。

・トップに表示したいページの設定
まずは固定ページで本文なし(勿論書いても構いません)の大枠を作りましょう。
当サイトであれば はじめに、小説置き場、BBS…のようなものです。
外観→カスタマイズ→ホームページ設定で固定ページを選択し、トップページに置きたいページを選択して公開すると反映されます!

・アクセスカウンターを設置
Slimstat Analyticsから数値を持ってくるという仕組み。こちらは「Slimstat Analytics ショートコード」などで検索すると出てきます。訪問者数~人や囲み枠でデコレーションするとそれっぽくなりますね!

あとはbbpressのIPアドレスを非表示にしたり、メールアドレスの入力を任意にしています。
固定ページにはeaselの作品リスト挿入(β)機能を用いています。

ちなみにバナーはcanvaで作っています。バナーをトップに置くと途端にそれらしくなってテンションが上がりますね!

おわりに

実際に触ってみるとわからないことだらけかもしれませんが、一通り形になった時の喜びはひとしおです。
ちなみに私はPC版ヘッダーメニューの文字サイズを変える方法を探しています。見つかり次第追記しますね!

追記: 文字サイズというよりは文字幅の方が正確かも。外観→カスタマイズ→追加CSSで以下を入れるとすっと綺麗になりました!ちなみに元のmin-widthは120pxでした。

ul.nav li a {
margin-left: 0;
border-bottom: 0;
color: #323438;
display: block;
min-width: 10px;
}

割愛部分が多いページでしたが、誰かのサイト作りの手助けになりますように!

それでは良い同人ライフを!

送信中です

×

※コメントは最大500文字、5回まで送信できます

送信中です送信しました!