ワードプレスを初期インストールしたアダルトサイトを、記事の投稿ができる運用可能なレベルまで設定していきます。
この記事は「WordPressでアダルトサイトを作る方法」を解説しています。
「アダルトブログの始め方」や「アダルトブログの作り方」などアダルトサイトの運営全般を知りたい方は、以下の記事がおすすめです。
アダルトブログを始めるときに必要なサーバーのレンタル、WordPressのインストールおよびWordPressの基本設定など、アダルトサイトの運用環境を構築する作業手順を知りたい方は、以下の記事がおすすめです。
デモサイトではなく、実際にビジネスをする目的でアダルトアフィリエイトのサイトをひとつ構築して運用するので、アダルトサイトの運用経験がない方には参考になるでしょう。
作るのは「札幌すすきの求人ガイド（事情により一時的に非公開）」というアダルト動画レビュー＆出会い系アフィリエイトサイトです。投稿する記事を作成する手順も、このブログで解説していきます（別の記事でも書いています）。
WordPressのテーマをアダルトサイトにインストールする
当サイトでは、WordPressのテーマとしてCocoonを推奨しています（おすすめのWordPressテーマ）。
WordPressの初期インストール状態で、ダッシュボードの「外観 → テーマ」で、Cocoonの親テーマと子テーマをインストールし、子テーマを有効化します（Cocoonのインストール方法）。
※親テーマについては、更新するとき以外は存在を忘れてください。
ここまでの手順を終えた状態が、こんな感じです。
デフォルトテーマ以外のチェック用テーマをインストールする
WordPressを運用していると、プラグインやアクセス解析など、さまざまな機能や外部ツールを導入したくなります。その多くは、WordPressの内部にアクセスするプログラムや、WordPress上で動作するスクリプトです。
マイクロソフトでさえWindowsの更新プログラムで深刻な不具合を起こすことがあるように、WordPressでも機能が重複するプラグインやテーマを導入すると不具合が起きることがあります。すべての環境で事前に動作検証をすることはできないので、こうした不具合の発生は避けることができません。
普段からWordPressのテーマ開発に携わっていたり開発言語に触れる機会が多いと、不具合が起きたときでも原因を推測することができるようですが、WordPressの専門家でもない一般人には、不具合の原因特定は難しい仕事です。
そんなときに大切なのは、本当に不具合が起きているのかを検証できる環境があることです。もしかしたら、あなたが導入しようとしているプラグインは、ほとんどの環境で誰が導入しても不具合が起きるプラグインなのかもしれません。たまたまプラグインの更新時にバグバージョンを導入してしまうと、マイクロソフトの更新プログラムと同じで、不具合が当たり前の状態が起こりえます。
そうした不具合が起きたときの検証環境として、WordPressの公式テーマをインストールしておきましょう。普段はCocoonを使いますが、動作がおかしいなと思ったときにはWordPressの公式テーマに切り替えて、同じ状況が起こるかを確認します。
もし公式テーマで不具合が再現しない場合は、Cocoonに不具合の原因があると推測できます。公式テーマでも不具合が起きたときには、導入したプラグインなどのプログラム関係に原因があると推測できます。
Cocoonを使っているときの検証環境として用意するWordPress公式テーマには、Newsupを使ってください。Cocoonと同じ2カラムなので確認しやすいです。Newsupでも不具合が起きたときには、WordPressのデフォルトテーマに切り替えて状況を確認しましょう。
ダッシュボードの「外観 → テーマ」から、「新規追加」でnewsupを検索してインストールしてください。
インストールをすると、このようにテーマが並びます。検証環境としてインストールしただけなので有効化はしません。有効化するのは、不具合を検証するときだけです。
WPテーマCocoonにスキンを設定する
Cocoonの親テーマと子テーマをインストールしただけでは、非常に寂しいアダルトサイトになります。斬新でいいかもしれませんが、やはり見栄えも大事なのでスキンを導入しましょう。Cocoonはスキンも豊富にそろっています。
WordPressでスキンは、外見、デザイン、見栄え、つまりガワを担当しています。テーマごとに利用できるスキンは異なります。また、利用方法もカスタマイズ方法も違います。Cocoonを使うときは、当然Cocoon用のスキンを使います。
ほんの少しでもカスタマイズをしたいときは、必ずCocoonの子テーマをインストールして子テーマを有効化してください。Cocoonの親テーマを有効化することはありません。
Cocoonで、スキンSILKを設定する。
ダッシュボードの「Cocoon 設定 → スキン」で、スキン一覧から「SILK（シルク）」を選択して「変更をまとめて保存」をクリックします。
スキンは、好みを優先して選んでいいのですが、アダルト系サイトとしては画像を目立たせたいので、シンプルなデザインがいいでしょう。ほかのスキンも実際に適用してみてください。
スキンSILKを適用したので、少し色がでてデザインがよくなりました。
全体設定とヘッダーでアダルトサイトの色を決める
SILKスキンは、サイトを自分好みの色合いにすることが可能なスキンです。というより、自分でサイトのカラーを設定しないと地味な感じになるスキンです。デザインをするのが面倒でしたら、あらかじめキーカラーが設定されている別のスキンにしてください。
サイトのキーカラーを設定する
アダルトサイトの場合、明るい雰囲気とダークな雰囲気、どちらでもいいと思います。ダーク系は配色のデザインが難しいらしく、スキンも少なめです。
どちらに決めたらいいか迷ったら、サイトで扱いたい動画ジャンルのDVDジャケットを見てください。明るいDVDジャケットが多ければ明るい配色、暗いDVDジャケットが多い場合は暗いダークな配色のサイトが合っています。
これから作っていく「札幌すすきの求人ガイド（事情により一時的に非公開）」 は、動画のレビューだけではなく幅広いアダルト系コンテンツを書いていきたいのでライトな雰囲気でいきます。
サイトのキーカラーは「Cocoon設定 → 全体」で設定します。
キーカラー横の「▲」をクリックしてカラーチャートを表示し、濃いめのピンク（#D60077）を選びました。
濃い色を選択したのは、キーテキストカラーが白だからです。
薄い色を選択するときは、キーテキストカラーを濃い色にした方がいいでしょう。
そうしないと字が読みにくくなります。
ヘッダーをデザインする
ヘッダーは目立たない方がいいです。画面では少しでも多くコンテンツを表示したいので、ヘッダーの高さを狭くします。ここでは、ヘッダーの高さを50ピクセルにします。
※筆者の好みです。そのままでも問題ありません。
「ヘッダー設定」で「高さ 50」としただけでは狭まりません。
ダッシュボードから、「外観 → カスタマイズ」と遷移し、「追加CSS」をクリックして、次のCSSを追加CSS欄に記述して定義します。
.logo.logo-header.logo-text {
padding: 0px;
}
これでヘッダーの高さが狭まりました。このほかにヘッダーで定義するのは、ヘッダーの全体色だけです。ロゴなどは作りません。必要なら暇なときに作りましょう。
有名サイトでもなければ、ヘッダーもヘッダーロゴも注目はされません。ですから、サイト名がはっきり読めれば問題ありません。
となると、黒地に白、焦げ茶地に白、白地に黒、薄色地に黒、あたりの組み合わせです。どれでもいいのですが、サイト全体を明るい配色にしたいときには、ヘッダーを暗い色にすると全体が締まります。
サイトのキーカラーがピンク系の#D60077なので、#D60077で色の組み合わせを見てみます。
画面を眺めながら感覚的に決めればいいでしょう。
ということで、格調のある赤紫色(#4D002A)に決定。
こうなりました。
焦げ茶系ではなく薄いピンク系にして、ヘッダーのテキスト色を黒にすると次のようになります。これでもいいです。
フッターをデザインする
ヘッダーができたので、同じカラーを使ってフッターを設定します。
格調のある赤紫色(#4D002A)が背景色で白文字です。
サイドバーを設計する
ここまで外見のデザインを設計してきましたが、記事の一覧などが表示されるサイドバーも設計していきます。
ダッシュボードから、「外観 → ウィジェット」と進んで設定します。
サイドバーには、検索、新着記事、カテゴリー、アーカイブを配置します。
サイドバースクロール追従には、目次を配置します。
デフォルトで付いているメタ情報はいらないので削除しましょう。
サイドバーの見出しもカスタマイズしたくなるかもしれませんが、そうした細かなデザインは後回しにして、記事の投稿を急ぎましょう。
とはいえ、オーバーラインに乙女チック背景色というデフォルトはいまひとつなので、背景色を消してアンダーラインに変更しておきます。
.sidebar h3 {
color: #222222;
background: none;
padding: 0.25em;
border-right: none;
border-top: none;
border-bottom: solid 2px #d60077;
border-left: none;
}これを追加CSSに貼ります。
.sidebar h3 { 見出し「sidebar h3」の定義
color: #222222; 文字の色は、#222222（真っ黒なグレー）
background: none; 背景は、なし
padding: 0.25em; 枠の余白は、0.25em（emは単位です）
border-right: none; 右の枠線は、なし
border-top: none; 上の枠線は、なし
border-bottom: solid 2px #d60077; 下の枠線は、線幅2px、色#d60077 の実線
border-left: none; 左の枠線は、なし
}
