WordPressで2時間で同人サイトを作る方法【初心者向け】

2017年2月5日 wordpress


ご無沙汰しております、いのりです。

最近私の推しジャンルでなつかしのサーチを見つけてしまい、つい、いにしえの同人サイトを復活させてしまいました。
小説やイラストを置いたり、50の質問に答えたり相互リンクしたりするアレです。
久々に自分のサイトを持ったところ、Pixivのファボ数とか評価数が全く気にならなくなりました……!
「ファボ数がなんだ?俺には自分の家がある」というこの謎の落ち着きwww
職場でモテなくても家に帰れば嫁がいる、くらいの余裕があり、精神衛生上大変宜しいです(?)
人と比較されずに好きなものを何でも掲載できる自分のホーム、同人サイト。これは良いものだ……!

 
67l-qujb14w-fabian-irsara

 
私のまわりでも「いにしえの同人サイトを作りたい」と仰ってくれる方が増え、嬉しい限りです!!
あの同人サイト全盛期時代に生きていた腐女子といたしましては、是非ともこの時流に乗っていにしえの同人サイトに増えていただきたいところ……!
一方で、「今さらサイト……作れるかな?」と尻込みをされる方も少なくないようです。

「あの頃HTMLを触ることはできた。でも、スマホ&PC両用デザインの作り方が分からない」
「今更個人サイトなんて、更新が面倒じゃない?(Pixivの操作に慣れてしまった顔)」

わかります……わかります……!
ところで!!!!
同人サイト全盛期から幾数年を経て、この両方をスッ……と叶えてくれる夢のような無料ツールが登場しているんです!
「ワードプレス(wordpress)」っていうんですが、是非この機会に知っていただきたい神ツールでございます。。

wordpress-logo-stacked-rgb

 

  • HTML・CSSの知識がなくても、スマホ&PC両用デザインのサイトが作れる
  • ブログやPixivのように、管理画面から簡単に作品を投稿したりデザインを変更したりできる
  • ブログと違い、「注意書き」ページを設置したり、個人サイトっぽい見た目に出来る
  • 検索除けの設定が出来る

 

どうですか、すごくないですか??
これらの理由から、これから始める同人サイト作成にはWordpressをオススメします!!

具体的には、こんなサイトが2時間と+αで作れちゃいます!
テストサイトはこちら→http://inoritest.wpblog.jp/

 

また、↓こんな感じの管理画面を触るだけで、こういうサイトを作ったり、更新したり出来ちゃいます。
もちろん、スマホからでも弄れます!

 

 

2時間で作るWordpressサイトの作成手順

今回は「TOP、TEXT、PICT、OFF」のページと「注意書き」ページがあるシンプルなサイトを2時間で作ってみようと思います。

スクリーンショット-2017-01-31-23.17.29

更にBLOGやリンクのページをつけたり、TwitterやPixivへリンクを貼ったり、デザインに凝りたい方向けには、後日+αとしてオマケの解説をつけますので、必要に応じてご覧下さい\(^o^)/
それでは早速、Wordpressサイトの作成手順を見てみましょう!
 

  1. 無料レンタルサーバWPblogを借りる
  2. wordpressインストールを申し込む
  3. テンプレート「First」をインストール
  4. 検索除けを施す
  5. デザインをカスタマイズする
  6. パーマリンク設定をする
  7. 「固定」ページでTOPページを作る
  8. 「投稿」ページでTEXT、PICT、OFFのページを作る
  9. 「固定」ページで注意書きページを作る

 
以上、全9ステップで大体2時間くらいです!
(2番の行程でwordpressインストールの待ち時間が30分ほど発生しますが、この時間は作業時間から省いています)
専門用語があってよく分からないと思いますので、さっそく始めようと思います!

また、作業環境はGoogleChromeを推奨いたします!
サイト解析ツールが優秀で、後にCSSを弄るときにChromeの機能を使いますので、できればChromeでの作業をお願いいたします!

 

1.無料レンタルサーバー「WPblog」を借りる

まずは、サイトを公開するための無料レンタルサーバーを借ります。
懐かしの忍○ツールズさんでも借りたくなるところですが、ぐっと堪えてください。
Wordpressを使うためには、PHPMySQLというデータベースが使えるサーバを借りる必要があります。
なんだか難しく聞こえますが、最近は「最初からWordpressが使える状態で貸してくれる無料レンタルサーバー」が増えてきていますのでご安心下さい!
今回お借りするのは、「WPblog」(http://www.wpblog.jp/)さんです。

 
スクリーンショット-2017-01-31-21.35.05

 
見て分かるとおり、WordPressを使うことに特化した無料サービスです!
他にも色々なレンタルサーバーさんがあるのですが、なぜ「WPblog」さんにしたかというと、単純に私がいつもこの「クトゥルフWEBダイス」でお世話になっているミニバードさんと同じ会社「ネットオウル」さんが運営しているからですね!
月50万アクセスにも耐えてくれる安心と信頼のサーバーさんです。
また、無料なのにPC版は広告ナシスマホサイトでも下部に小さくバナーが出るだけという親切っぷり!

 
スマホ広告

 
よくある「スマホの真ん中あたりに出てきて下まで広告が降りてくるウザいやつ」ではなく、最初から下に小さく固定してあるだけなので安心して使えます!
実際に広告が見たいかたはデモサイト(http://inoritest.wpblog.jp/)をスマホからご覧いただけば確認できるのでどうぞ!
WPblogさんを借りるためには、運営会社さんである「ネットオウル」さんの会員登録が必要になります。
実は私、すでに会員登録済みでスクショが撮れませんでしたので、公式サイトにある説明通りにご登録をお願いいたします~!

 
WPblog お申し込みの流れ
http://www.wpblog.jp/application/

スクリーンショット-2017-02-03-23.21.48

 

2.Wordpressインストールを申し込む

ネットオウルの会員登録ができたら、さっそくWordpressのインストールを申し込みます!

まずこの(http://www.wpblog.jp/application/)ページの「管理ツールログイン」ボタンから、ネットオウルの管理画面にいき、登録時にメールで送られてきたId・パスワードでログインします。

スクリーンショット-2017-01-31-21.30.07


ログインしたら、左側の様々なネットオウルさんのサービスが書いてあるメニューの中から「WPblog管理」を選び、新規インストールをクリック。

スクリーンショット-2017-01-31-21.30.54


入力フォームが出てくるので、必要事項を記入します。

スクリーンショット-2017-01-31-21.32.12

「アプリケーションID」と書かれているところに入れた文字が、サイトのURLになります。
無料ユーザーの場合、サイトのURLはhttp://●●(アプリケーションID).wpblog.jp になります。
右側に書いてある「スタードメイン」は有料で「wpblog.jp」ではなく好きなドメイン名を使うことが出来るサービスなので、今回は無視して「初期ドメインを利用」を選択してください!
また、メールアドレスは、サイトにお問い合わせフォームを設置した場合にデフォルトでメールが送られてくるアドレスになります。
ブログタイトル(サイト名)はあとから変更できますので、適当に入れて「次へ進む」を押してください!


入力事項の確認画面です。OKであれば「確定」ボタンを押してください。

スクリーンショット-2017-01-31-21.32.25


インストール完了画面が表示されます。
このパスワードはwordpressの管理画面に入るために必要なんですけど、メールで控えとか送られてこないし管理画面からも確認できないので、絶対にスクショしたり、ほかに控えるなどして取っておいてくださいね!!!
これが無いと詰みます!!!マジで大事!!!

スクリーンショット-2017-01-31-21.32.44

これでインストールの手続きが完了いたしました!
上記画面に書いてあるとおり、インストールが終わってブログが表示されるまでに、15~30分ほど時間が掛かります!
このブログの先を読むなり、休憩するなりして、まったりインストールが終わるのを待ちましょう~\(^o^)/


15~30分くらい待って、ブログURLにアクセスすると、デフォルトのブログが表示されます!
こんな画面が出てきたら成功です!おめでとうございます~!

スクリーンショット-2017-01-31-21.48.53

 

3.テンプレート「First」をインストール

無事にWordpressがインストールできたので、さっそく管理画面にアクセスしてみましょう!
WPblogさんの管理画面にいくと、「ダッシュボードへ」のリンクが出来ているはずです。
これをクリックすると、Wordpressのログイン画面がでてきますので、先ほどしつこくスクショしろと言った画面に書いてあったIDとパスワードでログインしてください!

スクリーンショット-2017-01-31-21.54.30


ログインが出来ると、このような管理画面に入れます!
この管理画面から、デザインやらレイアウトやら、記事の更新やらをしていくことになります。
長い付き合いになるよ!よろしくね!

スクリーンショット-2017-01-31-21.56.45


それでは早速、同人サイトを作るためのテーマを入れましょう!
今回は、こちらの記事で紹介されていた「First」というテンプレートを使って説明を行います。

WordPressテーマ(テンプレート)50+選
http://themegraphy.com/ja/wordpress-themes/

初心者向けで弄りやすいこと、日本語のマニュアルが存在することからこのテンプレートを選んでみました! →デモはこちら

このテンプレートをWordpressにインストールします。
管理画面の「外観」「テーマ」を選び、「新しいテーマを追加」をクリックして下さい。

スクリーンショット-2017-01-31-22.00.41


検索窓に「First」と入れて検索すると、このようにテーマが表示されます。

スクリーンショット-2017-01-31-22.01.00


テーマをマウスオーバーすると、「インストール」ボタンが出てくるのでクリックします。

スクリーンショット-2017-01-31-22.01.08


インストールが完了しました!インストール済みの文字が表示されます。
早速「有効化」ボタンを押して、デザインを反映させてみましょう。

スクリーンショット-2017-01-31-22.01.14


有効化をして、自分のサイトのURLにアクセスすると、このような表示に変わっているはずです。
これでテーマのインストールが完了しました!

スクリーンショット-2017-01-31-22.01.43

 

4.検索除けを施す

無事にテーマがインストール出来たところで、我々腐女子が推しの名前を一文字でも出す前に必ずやっておくべきことがあります。
そう!「検索除け」です!
何も知らない小中学生がGoogleで推しキャラを検索したら、うっかり自分のサイトが出てきてしまって、トラウマを植えつけてしまった……なんてことにならないための、腐女子のたしなみの一つですね。
最近はツイッターやPixivがガンガン検索結果にヒットしてしまっているので隠れることにどれほどの意味があるんだろうか、と賢者タイムに入りそうになりますが、伝統にのっとって検索除けを施したいと思います。

それでは管理画面の「設定」「表示設定」を開き、「検索エンジンでの表示」項目の「検索エンジンがサイトをインデックスしないようにする」にチェックを入れてください。

JOQI1AvL

以上!簡単ですね!!
これでGoogleさんなどの検索エンジンに、「もしうちのサイトを見つけても、どうか検索結果に出さないで下さいお願いします……!」とお願いすることが出来ました。
Pixivなどがあるこのご時勢、これだけでも検索除けは充分かもしれませんが、しかし、画面にも書いてあるとおり、あくまで検索エンジンへのお願いなので確実に聞き入れてもらえるとは限りません。
念には念を、ということでもう一つおまじないを試したい方は、次の方法もどうぞ!

 

【Tips:検索除けのMETAタグを入れる】

直接テーマのHTMLを弄ることになりますので、テーマがアップデートされる度に都度入れなおす必要がある、というちょっと面倒くさいやり方です……と先にお伝えしておきます。
(PHPの知識があれば1回入れればOKな方法もあるのですが、正直その方が面倒なので、どうしてもやりたい方は「子テーマ」でググってみてください)

「外観」「テーマの編集」を選ぶと、直接テーマのテンプレートを編集することが出来ます。

C3gFoqyVcAEhDAu

右側のテンプレート一覧から「テーマヘッダー(header.php)」を選び、 <head></head> 内に下記のコードをコピペして下さい!

これも検索エンジンのrobotさんに「うちのサイトを見つけても、検索結果に出さないでね」とお願いするおまじないです!
自分の同人サイトにも同様の対策をしてGoogleさんのウェブマスターツールで検索結果に出ていないかどうか確認してみましたが、今のところ1ヶ月たっても1回もインデックスされなかったので、この二つをしっかりやればそれなりに検索除け出来てるんじゃないかな!?と思います!

 

5.デザインをカスタマイズする

無事検索除けが施せました!これで安心して同人ライフを楽しめますね!
それではようやく、サイトのカスタマイズに入りましょう!

デザインをカスタマイズするためには、「外観」メニュー内の「カスタマイズ」をクリックし、カスタマイザー画面を開きます。

スクリーンショット-2017-02-04-01.21.14


これが外観のカスタマイザー画面です!左側のメニューにあるとおり、文字とか色とかを、右側のプレビュー画面を見ながら直感的に編集していくことが出来ます。
ためしに「レイアウト」画面を開いてみましょう。赤い四角で囲んだ「レイアウト」ボタンをクリックします。

スクリーンショット-2017-01-31-22.10.57


左上に、何の編集画面かが表示されます。間違いなく「レイアウト」編集画面ですね!
ここでは、ヘッダーやフッターのレイアウトを中央や左寄せに変更できるみたいです。
このように、直感的に編集できるようになっているので、色々好きにいじって見て下さい!

スクリーンショット-2017-01-31-22.14.04

 

メインビジュアルを入れる

カスタマイザーから、TOPページ用のメイン画像を入れる方法を説明します。
左メニューから「ヘッダー画像」を選ぶと、このようにヘッダー画像を選ぶ画面が表示されます。
説明によれば「1220×480」ピクセルの画像が推奨されているようですね。
あとで画像の切抜きをすることが出来ますので、ここで切り抜き作業をする必要はありません(絵師様が自分で絵を描いて用意する場合はこのサイズで用意してください!)。
画像の準備が出来たら、「新規画像を追加」ボタンを押します。

スクリーンショット-2017-01-31-22.12.17


このような画像アップローダーが表示されます。
用意したメインビジュアルをドラッグ&ドロップします。

スクリーンショット-2017-01-31-22.18.56


ドロップした画像が登録されました!
今回、画像はハイクオリティな無料写真素材を提供してくださるUnsplushさんからお借りしています。いつも小説の表紙とかでお世話になっています……!
「選択して切り抜く」を押します。

スクリーンショット-2017-01-31-22.19.04


この画面で画像を切り抜くことが出来ますね。Photoshopが無くても大丈夫!
ちょうどいい位置をさがして「画像切抜き」ボタンを押してください。

スクリーンショット-2017-01-31-22.19.12


じゃ~ん!メイン画像が表示されました!ちょっと自分のサイトっぽくなりましたね。
あと、とりあえず目が痛くならないようにメニューバーの色だけ灰色にかえてみました。
細かなデザインの調整は時間がかかるので後にまわして、先にサイトの中身を作っていきましょう!

スクリーンショット-2017-01-31-22.21.11

 

6.パーマリンク設定をする

デフォルトだとURLが記事のナンバーになってしまいます(http://●●.wpblog.jp/記事のナンバー)ので、まずは自分で好きなようにURLが決められるようにカスタマイズします。

管理画面の「設定」「パーマリンク設定」を開きます。

スクリーンショット-2017-01-31-22.45.54

「カスタム構造」を選び、赤枠で囲んだ部分に下記のように入力し、「変更を保存」ボタンを押してください。
/%category%/%postname%/

これで、URLの末尾を「http://●●.wpblog.jp/カテゴリー名/投稿ページの名前(毎回自分で付ける)」のように、好きに変えられるようになりました!
なんでカテゴリー名を取得するかというと、やっぱり小説のページなら「/text/小説タイトル/」のようにしたいですし、イラストのページなら「/pict/イラストのタイトル/」にしたいなあと思ったので……。

URLは日付がいい、カテゴリー名はいらない、など自分で決めたい場合は、いくつか設定が選べるようになっているので好きなやつを選んでください!
また、選択肢にないURLが使いたければ、wordpress公式のパーマリンクの設定方法のページがありますのでご覧下さい!
wordpress:パーマリンクの使い方

 

7.「固定」ページでTOPページを作る

それではいよいよ、TOPページを作っていきます。
wordpressには作成できるページの種類が2種類あります。「固定ページ」「投稿ページ」です。
「固定ページ」はいわゆる普通のサイトのようなページで、「TOPページ」「注意書き」のページに使います。
「投稿ページ」はブログのように記事を投稿していくタイプのページです。小説やイラスト、オフライン活動情報など、コンテンツを投稿するページに使います!

TOPページは固定ページで作りますので、管理画面の「固定ページ」「新規追加」を選択します。

スクリーンショット-2017-01-31-22.24.12


すると、このようなブログの投稿画面のようなページが表示されますので、TOPページに表示したい内容を書いていきましょう!
1番上はこのページの名前を書きます。「TOPページ」とかでもいいんですが、なんとなくサイト名を入れておきました。
本文にはとりあえず、「About Me」(自己紹介)と、「About This Site」(サイトの取り扱いジャンル・カップリング)とかがあればいいかな……と思うので、適当にこんなかんじに書きました。
エディターの機能で見出しとか太字とかラインとか入れられるので、ブログと同じ感覚で書けます!

スクリーンショット-2017-02-04-13.02.46

ちなみに、投稿画面で↓の「テキスト」ボタンを押すと、HTML形式で入力することが可能です!
いにしえの腐女子にはこちらの方がやりやすいかもしれませんね。笑

スクリーンショット-2017-01-31-22.40.05

そしてパーマリンクのとなりの「編集」ボタンを押すと、URLを好きに直せます。
TOPページなので、ここは「top」でいいんじゃないでしょうか!

スクリーンショット-2017-02-04-15.56.56


最後に、TOPページなので、アイキャッチ画像(メインビジュアル)を挿入します。
画面右下にある「アイキャッチ画像」メニューの、「アイキャッチ画像を設定」ボタンを押します。

スクリーンショット-2017-02-04-15.57.08


すると、画像選択画面がでてきます。
先ほどデザインのカスタマイザーで登録したメインビジュアルが出てきますので、それを選んで「アイキャッチ画像を設定」ボタンを押します。

スクリーンショット-2017-02-04-15.57.15


無事にアイキャッチ画像が設定されると、画面右下にメインビジュアルのプレビュー画像が出てきます!
これでバッチリですね!

スクリーンショット-2017-02-04-15.57.31


ここまで出来たら、「公開」ボタンを押します(スクショは「公開」ボタンを撮りのがしたので「更新」ボタンになっちゃっています、、すみません)。

スクリーンショット-2017-02-04-15.57.44

これでTOPページの完成です!


「公開」ボタンを押して、プレビューボタンを押すと、このようにTOPページが表示できているのが分かると思います。

スクリーンショット-2017-01-31-22.39.53

この右側に赤枠で囲んだサイドバーの部分、デフォルトの状態だと、ブログのように色々な情報が出ていると思います。ブログじゃないので、こんなに沢山の情報は要りませんよね!
というわけで、サイドバーを編集していきましょう。

 

サイドバーのウィジェットを編集する

「外観」「ウィジェット」で、サイドバーに表示するウィジェット(更新履歴などをwordpressが自動で出してくれる機能)を選んでいきます!
デフォルトではこんな感じになっているかと思います。
スクリーンショット-2017-01-31-22.37.32


いらないウィジェットを選んで、右側の▼を押すと、このように詳細が出てきます。
スクリーンショット-2017-01-31-22.37.41

赤枠で囲んだ「削除」ボタンを押して、不要なウィジェットをガンガン消していきましょう!
あとで追加しなおすことが出来るので、安心して消しちゃってください。
ここでは「検索」「最近のコメント」「アーカイブ」「メタ情報」を消してみました。

逆に新しいウィジェットを追加するにはどうするかというと、ためしに「固定ページ」を追加してみましょう。
青枠で囲んだ「固定ページ」をクリックしてください。


すると、このように、ウィジェットを表示する場所を選ぶ画面が表示されます。
スクリーンショット-2017-02-04-13.29.00

いまはサイドバーの編集をしていますので、「サイドバー」を選んで「ウィジェットを追加」ボタンを押します。


するとこのように、サイドバーの中に「固定ページ」ウィジェットが増えています!
右側の▼をクリックすると詳細が編集できますので、ウィジェットのタイトルを「サイトMAP」にし、ドラッグ&ドロップでカテゴリの上に表示するようにしてみました!
スクリーンショット-2017-01-31-22.39.46


これでサイドバーがこのように表示できましたね!
「固定ページ」の中に、いまあるページの名前が出てきたと思います。
最初からデフォルトで入っていた「サンプルページ」が邪魔ですね。消しちゃいましょう!

スクリーンショット-2017-01-31-22.39.53

 

不要になったページを削除する

「固定ページ」「固定ページ一覧」を表示すると、「サンプルページ」が出てきます。
赤枠で囲んだ「ゴミ箱に移動」をクリックで、簡単に消すことが出来ます!
(なお、スクショにはまだ作成していないページも出ていますが気にしないで下さい……今の状態だと、ここにTOPページのみが表示される状態になると思います)

スクリーンショット-2017-02-04-13.11.41

これでTOPページは完成です!
メニューの部分は先に「TEXT」「PICT」「OFF」などのコンテンツのページを作ってからまとめて編集しますので、一旦は置いておいてください!

 

8.「投稿」ページでTEXT、PICT、OFFのページを作る

それでは、同人サイトの肝となるコンテンツを表示するページ「TEXT」「PICT」「OFF」を作っていきましょう!
これらはTOPページを作るときに説明したように、更新しやすいように「投稿ページ」で作成していきます!

まず最初に、管理画面から、投稿のカテゴリーを設定していきます!

なぜカテゴリーを最初に設定するかというと、wordpressではブログのように記事を投稿するときに「カテゴリー」を選択することができるのですが、ブログでもカテゴリーに絞って表示させたりすることがありますよね。
これを利用して、小説は「TEXT」カテゴリーイラストは「PICT」カテゴリーオフライン活動情報は「OFF」カテゴリーに分けて、最初からカテゴリー別に絞り込んだページを表示することで、別のページのように見せかけることが出来るんです!!

文字で説明しても分かりにくいので、とっとと作ってまいりましょう。

 

カテゴリーを作る

管理画面の「投稿」「カテゴリー」で、投稿のカテゴリーを設定していきます!

スクリーンショット-2017-02-04-14.14

カテゴリーのページを開くと、このように新規カテゴリーを追加するフォームが出てくるので、TEXT、PIXT、OFFのカテゴリーを作っていきます。
TEXTの場合は、名前を「TEXT」、スラッグを「text」、親を「なし」、説明を「TEXT一覧です。」のように設定しました。
「名前」は日本語でも大丈夫で、メニュー部分などに表示される名前になります。
「スラッグ」は説明にもあるとおり、URLのカテゴリー部分に表示される名前になりますので、半角英数のみで付けます。
説明はページのTOPに表示されますので、わかりやすい説明にしておきましょう!

同様に、「PICT」「OFF」のカテゴリーも作っていきます。
スクリーンショットの右側のカテゴリー一覧を参考に作っていただくと分かりやすいかもしれません!

 

TEXTページを作る

カテゴリーが出来たら、いよいよコンテンツをテスト投稿してみましょう!
まずはTEXTページを作ってみます。

「投稿」>「新規追加」で投稿画面を開き、このように本文を入力していきます!
スクリーンショット-2017-01-31-22.45.36

「URL」を適切な半角英数文字にし、「投稿フォーマット」は「標準」にします。
「カテゴリー」に先ほど作ったカテゴリーが追加されていますので、忘れずに「TEXT」を選択しましょう!
出来たら「公開」ボタンを押します(ここでもスクショ取り逃して「更新」ボタンになってますが「公開」ボタンでした……)


公開されたページを確認してみると、このように小説が投稿されました!
スクリーンショット-2017-02-04-15.06.05

この調子で、テスト小説を2、3と3つくらい投稿しておいてください。

 

Tips:コメント欄を消したい場合

この「First」テーマでは、このように投稿ページにデフォルトでコメント欄がついてきます。
投稿ページにコメント欄はいらないなあ……と思った場合の消し方を説明します!
スクリーンショット-2017-02-04-15.08.42

まず、コメントを消したい投稿ページの管理画面を開き、右上の「表示オプション」を選択します。

スクリーンショット-2017-02-04-15.11.22


表示オプションを選ぶ画面が出てきますので、「ディスカッション」にチェックを入れます。

スクリーンショット-2017-02-04-15.15.34


するとコメント欄を表示するかしないかを選択するフォームが表示されますので、チェックを外し、「更新」ボタンをクリックします。これでコメント欄が表示されなくなります!

スクリーンショット-2017-02-04-15.15.49

 

PICTページを作る

それでは次に、PICTページを作っていきましょう!

TEXTの時と同じように、「投稿」>「新規投稿」で投稿ページを出します。
ここでもURLを半角英数に直し、投稿フォーマットは「画像」を選択します。

スクリーンショット-2017-01-31-22.51.46

それが終わったら、いよいよ画像を投稿してみましょう!
赤枠で囲んだ「メディアを追加」ボタンをクリックします。


すると、このような画像アップロードページが出てきます。
赤枠で囲んだ画像が並んでいる場所に、アップしたい画像をドラッグ&ドロップすることで、画像をアップロードすることが出来ます。

スクリーンショット-2017-01-31-22.52.21

右側に画像の情報を入力する箇所が出てきます。
キャプションはつけてもつけなくても自由ですが、ここでは適当に「DUMMY01画像です」と入れてみました。


さらにスクロールすると、画像の表示を設定するフォームが出てきます。
ここで画像の表示サイズを選べます。今回はフルサイズで画像を表示しようと思いますので、「フルサイズ」を選択して「投稿に挿入」ボタンを押します。

スクリーンショット-2017-01-31-22.52.29


すると、このように投稿画面に画像が挿入されました!
スクリーンショット-2017-02-04-14.47.09

URLを入力し、投稿フォーマットで「画像」を選び、カテゴリーで「PICT」を選択したら、「公開」ボタンを押しましょう!

pict


公開されたページを確認してみると、このようにイラストが投稿されました!
スクリーンショット-2017-02-04-15.41.50

ブログみたいにサッと投稿できちゃいますね!
PICTも同様に2、3とダミー画像を3つほど投稿しておきましょう。

 

OFFページを作る

それでは最後に、「OFF」のオフライン情報ページを作成してみましょう!
TEXT、PICTを作ってみてお分かりかと思いますが、ブログで記事を投稿するのとほとんど同じ感じなので、さくさく進めます!

スクリーンショット-2017-02-04-16.23

TEXT、PICTと同じように、本文を入力していきます!
「パーマリンク」で好きなURLを設定し、本の表紙を「メディアを追加」から挿入し、本の紹介文などを書いていきます。
「投稿フォーマット」は「アサイド」、「カテゴリー」では忘れずに「OFF」を選択します。

また、本文からPixivなどのサンプルページへリンクも貼る事が出来ます!
本文のリンクを貼りたい文字をドラッグして、赤枠で囲んだリンクマークをクリックします。

スクリーンショット-2017-02-04-16.29.55

するとこのように入力欄が出てくるので、ここにリンク先URLを入れればOKなのですが、Pixivなどの外部サイトに飛ばす場合は、リンクを別窓で開きたいですよね。
リンクの細かな設定をするためには、右の歯車ボタンを押します。


このようなリンク詳細画面が出てきますので、リンク先と「リンクを新しいタブで開く」にチェックを入れます。これで別窓でPixivなどのサンプルに飛ばすことができます!
また、自分のサイト内のサンプルにリンクを貼りたい場合は、下に最新記事の一覧が出てくれますので、ここから選んで簡単にリンクを貼る事が出来ます!

スクリーンショット-2017-02-04-16.30.26


公開されたページを確認してみると、このようにオフライン情報が投稿されました!

スクリーンショット-2017-02-04-16.46.12

サンプルへのリンクは、CSSをちょっと弄ることでこのようなボタンの見た目に変えることもできます!
後日に+αの記事でまとめさせていただきますね。
さて、これで無事に「TEXT」、「PICT」、「OFF」の記事を投稿することが出来ました。
「投稿」「投稿一覧」から、これまでに作ったページを確認してみましょう!

スクリーンショット-2017-01-31-22.59.32

ここで、ちゃんとそれぞれに適したカテゴリが登録できているか?を確認することが出来ます。
もし間違っていたら、クイック編集からカテゴリだけサッと変更することが出来るので便利ですね!
また、ついでに不要なデフォルトの投稿ページはここで消してしまいましょう。
固定ページの時と同様に「ゴミ箱へ移動」で簡単に消すことが出来ます。
それではこれからサイトの「メニュー」にTEXT、PICT、OFFの項目を作りましょう!
メニューを作ることで、自動的にそれぞれの「一覧ページ」が生成されますので、見ていきましょう!

 

メニューをカスタマイズする

「外観」「メニュー」から、サイトのナビゲーションメニューに表示する内容を編集できます。
このような画面が開くので、まずは1番上の赤枠の「新規メニューを作成」を押します。

スクリーンショット-2017-01-31-23.02.29

するとページの右側が触れるようになりますので、「メニュー名」に適当な名前を付けてください。この名前は管理画面内でしか見えない名前になりますので、てきとうで大丈夫です!

メニュー名を入れたら、いよいよメニューの内容を登録していきます。
まずは青枠で囲んだ「固定ページ」からTOPページを選択して、「メニューに追加」ボタンを押します。


するとこのように、メニューにTOPページが追加されます!
ページ自体の名前はサイト名(この場合は「テストサイト」)となっていますので、「ナビゲーションラベル」を「TOP」に変更しましょう!
こうすると、メニューには「TOP」という名前で表示されます。

スクリーンショット-2017-01-31-23.02.29


次に、TEXT、PICT、OFFのページを追加していきます。
左メニューの中の「カテゴリ」を選ぶと、このように全てのカテゴリが表示されます。
メニューに表示したいカテゴリ(この場合は全て)を選び、「メニューに追加」を押します。

スクリーンショット-2017-01-31-23.03.08


メニューに「TEXT」「PICT」「OFF」が追加されました!
これでメニューのリンクをクリックすれば、それぞれのカテゴリーに最初から絞られた状態で、投稿一覧画面が表示されるようになります。
メニューの位置「ナビゲーションメニュー」を選択し、「メニューを保存」をクリックしてメニューは完成です!

スクリーンショット-2017-01-31-23.03


それではさっそく、TOPページを見てみましょう!
このようにメニューが表示されていればOKです!おつかれさまです!

スクリーンショット-2017-01-31-23.17.29

では、自動的に生成された各一覧ページがちゃんと出来ているか、見てみましょう。
PICTのページ、OFFのページは問題なく一覧が表示されているはずです。

 
PICTのページ
スクリーンショット-2017-01-31-23.18.09

 
OFFのページ
スクリーンショット-2017-01-31-23.18.28

 
しかし、TEXTのページをみると、このようにズラズラ……っと、小説の本文が全部表示されてしまっていると思います。これだと一覧ページの意味が無いですね!

スクリーンショット-2017-02-04-14.54.39

そこで、一覧ページの見え方を調整します。
ページ上の黒いバーから「カスタマイズ」をクリックします。


カスタマイズページが開くので、「投稿」ページを開いてください。

スクリーンショット-2017-02-04-14.55.30


「表示する」のプルダウンメニューから、「抜粋のみを表示」を選択します。
これで小説全文ではなく、冒頭の2行目くらいまでを抜粋して表示してくれるようになります!
また、ついでに使わないので「投稿者を表示しない」にもチェックを入れておきましょう。

スクリーンショット-2017-02-04-14.55.42


TEXTページを改めて表示してみると、このように抜粋だけが表示されるようになりました!
これで「TEXT」「PICT」「OFF」ページがすべて完成です!

スクリーンショット-2017-01-31-23.17.37

 
ついでにメニューが完成したので、サイドバーウィジェットを「固定ページ」+「カテゴリ」にしてあったのを、ここで作った「カスタムメニュー」に変えておくといいと思います。
「外観」「ウィジェット」を開き、メニューから「固定ページ」「カテゴリ」を消します。

スクリーンショット-2017-02-04-22.39.11

↑このようにウィジェットから「カスタムメニュー」を選び、自分で作ったメニューの名前を選べばOKです!
(この画面ではタグを入れています。カップリングのタグをつけてソートできたら面白いかな~と思ったので……もちろん入れなくても大丈夫です!)

 

Tips:ジャンルが複数ある場合、カテゴリをさらに細分化する方法

ジャンルが複数あると、TEXTやPICTのカテゴリーの下に、もうひとつジャンル別のカテゴリーが欲しくなると思います。子カテゴリーを作れば、このような表示の仕方が可能になります!

スクリーンショット-2017-02-01-01.31.12

まずは、「投稿」「カテゴリー」で、ジャンル別のカテゴリーを作成します。
この時、「親カテゴリー」としてTEXTやPICTを選択すると、子カテゴリーとして作成することができます。

スクリーンショット-2017-02-04-22.51.20


次に「外観」「メニュー」画面を開き、メニューに子カテゴリーを追加します。
この時、先に投稿記事に子カテゴリーを付けておかないと、このカテゴリー一覧に表示されないのでご注意下さい!
追加したい子カテゴリーを選び、「メニューに追加」を押します。

スクリーンショット-2017-02-01-01.21.01


メニューの一番下に子カテゴリーが追加されますので、ドラッグ&ドロップで、このように親カテゴリーの下に入れます!
こうすると、メニューで親カテゴリーの下に子カテゴリーがツリーのようにぶら下がって表示されます。

スクリーンショット-2017-02-01-01.21.24

 

9.「固定」ページで注意書きページを作る

これでほとんどサイトが出来上がりましたね!
ふつうのサイトならこれで完成でいいのですが、我々が作っているのは同人サイト。
入り口で何も知らない人がサイト内に迷い込むのを防ぐため、「注意書き」のページを用意せねばなりません!!

「注意書き」はブログのように更新していく必要がないので、「固定」ページで作ります!
「固定ページ」「新規追加」をクリックします。

スクリーンショット-2017-02-04-23.21.08

「パーマリンク」を設定し、いにしえのサイトではお馴染みの注意事項を記載します。
また、ページ内に、TOPページへ飛ぶためのリンクを貼ります。
リンクの貼り方は、「OFF」ページの作り方で説明したとおりです。
ここでリンクを貼り忘れると、誰もサイトの中に入れないサイトになってしまいますのでお忘れなく!!!笑
また、注意書きのページに更新情報やカテゴリなどは載せたくないので、テンプレートは「全幅」を選びます。これでサイドバーが表示されなくなります!
最後にTOPページと同じように「アイキャッチ画像」からメインビジュアルを設定し、「公開」ボタンをクリックします。


「公開」ボタンを押すと、このようなページが出来上がりました!

スクリーンショット-2017-02-04-23.28.37

いい感じです!
問題は、このページにメニューが表示されてしまうと、この注意文を読まずにサイト内に入れてしまうことですね。
そこで、CSSを使って、このメニューを表示させないようにします。
(テンプレート側を弄ろうとすると、アップデート時に修正が消えてしまったり、PHPの知識が要って少し面倒なので、少し邪道ですがCSSで無理やり消すことにしました)

 
それでは、メニューを消すCSSを書くために必要な情報を調べましょう。
メニューの上辺りで右クリックをすると、Chromeブラウザーの機能で、一番下に「検証」というメニューが表示されますので、クリックして検証機能を立ち上げます。

スクリーンショット-2017-02-04-23.29.14


するとこのように、検証パネルが表示されます。
確認したいのは、赤枠で囲んだ2つの項目です。

スクリーンショット-2017-02-04-23.32

まず、「body」にWordpressが自動的に付与する、このページ固有のidを調べます。
このページのidが204であり、「page-id-240」という固有のクラスが付与されているということが分かりました。このidは記事を作成した順番や、作業の手順によって異なってきますので、必ず自分が作った「注意書き」ページのidを確認してください!

次に、消したいナビゲーションバーのclassを確認します。
ちょうど↑のスクリーンショットの青い行、「div class=”site-bar”」と付けられているところを選択すると、元の画面でナビゲーションバーがすっぽり青い色で覆われるのが確認できると思います。

つまり、CSSを使って、「page-id-240」というクラスが付けられているページ内にある、「side-bar」というクラスのついたdivを非表示にすれば良いことが分かりました!


「外観」「カスタマイズ」「追加CSS」のページを開きます。

スクリーンショット-2017-02-01-23.32.43

左側にCSSを入力する欄がありますので、ここに下記のように入力します。

●●の部分に、先ほど調べた注意書きページのidを入れると、ナビゲーションバーが消えてくれます!
右側のプレビュー画面でナビゲーションバーが消えたのを確認したら、「保存して公開」を押して下さい。
これでカスタマイズが完了しました!


最後に、この注意書きページを、サイトのフロントページに設定します。
フロントページにすると、このサイトのURLにアクセスしたとき、1番最初にこのページが表示されるようになります。

「外観」「カスタマイズ」「固定フロントページ」を選択します。

スクリーンショット-2017-02-04-23.46.24

フロントページの表示から「固定ページ」を選択し、フロントページ下のドロップダウンメニューから「! caution !(注意書きのページ)」を選択します。
「保存して公開」を押し、自分のサイトのURLにアクセスしてみましょう。
無事、注意書きのページが1番最初に表示されていれば、サイトの完成です!!

 
おつかれさまでした!!!

 


 
後編として、今回作成したこのサイトだけではシンプルすぎて足りない……という方向けに、+αで出来る下記の解説記事を書きました!

WordPressで2時間で同人サイトを作る方法② +α編
http://cthuwebdice.session.jp/wordpress/dojin_site2/

 

  • LINKページの追加
  • BLOGページの追加
  • ヘッダーメニューにpixiv、Twitter、WEB拍手など外部サイトへのリンクを付ける
  • lightbox系プラグインで画像をふわっと綺麗にポップアップさせる
  • jetpackで画像をギャラリー表示にする
  • jetpack で「気が向いたらやるリクエストボックス」を作成
  • アクセス解析をつける方法
  • デザインのおすすめカスタマイズ(CSS、ロゴの画像置換など)

 

ご興味のある方はどうぞよろしくお願いします~!
最終的にはこういうサイトになる予定です!
テストサイト→http://inoritest.wpblog.jp/

スクリーンショット-2017-02-01-22.32.41


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


  1. […] WordPressで2時間で同人サイトを作る方法【初心者向け】 wordpress使おうと思った時に一番始めに参考にさせていただいたところ。 […]

  2. なつ より:

    WordPressでブログ作成する際に参考にさせていただきました。とても分かりやすく、基本的な使い方がマスターできて良かったです。ところどころ「いにしえの同人サイト」って出てくるのツボでした!w他者の評価を気にしなくていい場所ってほんとに居心地がいいですよね。今の時代の十代などにももっと作って欲しいと願わずにはいられませんでした。私は版権ではなく一次創作メインなのですがずっと個人サイト派なので共感しながら作成しました。
    ありがとうございました!

    • いのり いのり より:

      ご返信が大変遅くなりまして申し訳ございません!!
      このページが役に立ったようで何よりです!
      いにしえの同人サイトww 個人サイトが本当に大好きだったので、とくに創作をはじめたばかりでいきなり他人に評価されるのは怖い……とお思いの初心者の方に、是非気軽に個人サイトを持っていただきたいな~と思って書きましたので、共感いただいて大変うれしく思っております!
      こちらこそコメント本当にありがとうございました!!

  3. 熊角 より:

    大変分かりやすく、かつ古の腐女子的にツボを押さえた設計になっており感動しました…!参考にさせていただきます、ありがとうございました。

    • いのり いのり より:

      熊角さま、コメントありがとうございます!
      いにしえの同人サイト、ぜひもっと増えていただきたいのでどうぞ頑張って下さい!!
      参考になれましたら幸いです〜ヽ(^0^)ノ

カテゴリ

CONTACT

管理人:いのり

何かあればこちらよりお問い合わせください。

お問い合わせ