同人サイトをワードプレスで作る〜小説目次＆本文編４

ピッコマノベルズ大賞通過作品【ピッコマノベルズ】で連載中

現代ダンジョン×最強主人公快進撃
かつて英雄だった少年が再び最強に

お嬢様×ハイスペックイケメン
すれ違う二人の切ない恋のお話

こんにちは、塩羽間つづりです！

個人サイト作成も佳境に入ってまいりました。

今回でおおよその必要な機能についての解説は終わると思います！

今回は小説サイトで一番大切な、小説ページの作成です！といっても、かなーり簡単です。

参考サイトは恒例の自サイト！さくらメモリーです。

小説さくらメモリー

それでは早速作っていきましょう！

小説ページを作る

今回は、お話ごとに独立したページを作っている程で行なっていきます。

小説ページに必要なものを洗い出す

ここは人によっても違うと思いますので、参考程度のお聞きくださいませ。

基本的には、作品のタイトル・あらすじ・章・小説本文のタイトルを一覧表示・トップページに戻るくらいでしょうか？

固定ページを使って小説ページを作る

まず、参考サイトとして、自サイトの転生マーメイド！の小説ページをご覧ください。

マーメイド革命

ざっくりとしたイメージができたでしょうか？

あらすじを作る

その下に、あらすじを表示します。
この表示の仕方は、それぞれ個性が出ると思うので、自由にお作りくださいませ。

画像を使ってもいいですし、あらすじは別ページとかでもいいですし、色をつけたり・・・いろいろできます！
テーマによっては独自のカスタマイズができたりもしますので、そちらを使ったり。

章を作る

そうしたら次は、章を作ります。

章を作りますといっても、見出しブロックに「第一章」とか書くだけなので、特に大きな設定はいりません。

自動で小説話数が表示されるようにする

さて、ここが小説ページでは一番大切ですね！

ですが簡単です。前回更新履歴の表示の仕方を解説したと思いますが、同じようにブロックから『最新の投稿』を選択し、右側のカテゴリー指定をし、古い順に表示にするだけです！

上の画像のような感じです！

並び順・・・過去から

カテゴリー・・・表示したい作品指定

投稿者・・・すべて

項目数・・・100までなので、それ以上になりそうな場合はカテゴリーで区切ってください（例、第一章_2のように）

この方法で問題ないと思いますが、枠線嫌だな〜とかもっといろいろできるようにしたい、とお困りの方向けに、プラグインをご紹介します。

カスタマイズプラグイン

今回紹介するのは、無料テーマを使っていて、でもいろいろカスタマイズしたい！という方におすすめ。

Shrtcodes Ultimate

これを導入すると、さまざまな装飾が利用できるようになります。

今回は、先ほどの小説一覧の続きなので、そちらでご紹介しますね。

まず、プラグインをインストールし、有効化します。
そうしたら、使いたいページ（固定ページなど）の編集ページにいきます。

適当な文字を打って、装飾画面が出たら、その中の[]マーク（ショートコード）があるのでそれをクリックします。
（ブロックからショートコードを選んでも大丈夫です！）

すると、以下のように使えるショートコード一覧がでます。

かなりいろいろあるので、カスタマイズがはかどるはずです！

今回は一覧表示を作りたいため、真ん中の下の方にある『投稿』をクリックします。

クリックすると、なにやら設定画面が出てくるはずです。

この投稿では、投稿にあるものを出力しますよ〜というプラグインです。基本的には標準搭載の最新の投稿と同じです。

今回は、ワードプレスに投稿している作品の本文タイトルのみを出力したいので、まず、テンプレートをいじります。

下の画像のところに、『template/〜』が四つあるのがわかるでしょうか？これが、どのように表示するかのテンプレートです。今回はタイトルのみなので、一番下の『templates/list-loop.php』をクリックします。

普通にクリックして大丈夫です！そうすると、四角い箱のようなところの文字が変わるはずです。

それができたら次です。

何を出力するか設定します。

タクソノミーをカテゴリーにし、（ジャンルとかで出したければ、タグにしたり）ターム（作ったカテゴリーが一覧で出ます）を〜の第一章とか選択します。

順序を昇順・並び順を日付にすると、日付が古いものから並べられます。

プレビューで見て問題なければ、そのまま適用を押します。

編集画面上では以下のように表示されます。プレビューで見て、問題なければ完了です！

話数表示はどちらを使っても大丈夫です。

投稿のときに、カテゴリー指定さえ忘れなければ、更新履歴も作品ページも自動で更新されていくので、一度作れば触る必要はありません。

小説本文ページ

正直、解説することはあまりありません。笑

文字の装飾などは自由ですし、気をつけるのはコピペと改行くらいでしょうか。

ワードプレスは複数改行ができません。どうしても空白を開けたい時は、スペーサーブロックを使います。

ここの装飾がやや面倒なくらいですね。

あとは実際に文字を入力していっていじっていけばなんとなくわかると思います。

注意することは、パーマリンクくらいでしょうか？これも設定しなくても特に問題はないので、興味があれば。

同じカテゴリーだけページ移動できるようにする

投稿でガツガツ入れていると、作品がごちゃ混ぜになります。

ですので、次のページ・前のページを同じカテゴリー内のみ適用できるようにすることが必要です。
そうすることで、同じ作品の中だけでリンクができるようになります。

こちらも調べたらたくさん出てきますね。

このあたりがわかりやすいかなぁと思ったのでリンクを貼っておきますね。
ご参考くださいませ。

注意することは、基本的にファイルをいじることになるので、バックアップをとっておくことです。失敗するとサイトが真っ白になったりします。
真っ白になった原因の箇所がわかるのでしたら、サーバーからファイルを選択し、問題のコードを削除します。わからないのなら、バックアップから元に戻します。

これは本当に大事ですので、大丈夫だろ〜と思わない方がいいです！特に初心者はよくやらかします！

最悪、困った時はワードプレスの公式サポート掲示板を利用しましょう！

さて、以上で基本的な解説は終了です！

あとは好みの領域になってきますので、解説というほど解説はいらないかなぁと思います。

カスタマイズの方法は、『ワードプレス+ 〇〇』で検索すると無限に出てきますので、お好きなものをサイトに取り入れていただくのが一番だと思います。

ほかには、『外観』→『メニュー』でお好きなメニューが作れますよ〜とかでしょうか？

おすすめカスタマイズ

スライダー・・・画像をスライド表示できる

ハンバーガーメニュー・・・スマホ用のスライドメニュー。テーマによっては最初からついている

アコーディオン・・・クリックしたら文章が出てくる。QAとかでよくみかける

右クリック禁止・・・これはプラグインで可能です。（WP Content Copy Protection & No Right Click (WP 記事コピー保護 & 右クリック禁止）というプラグインです

ルビ・・・プラグインで導入可能です。ただ、更新が古かったりするので要注意

お問い合わせ・・・これもプラグインです。Contact Form 7を私は利用しています

スマホヘッダー固定・・・さくらメモリーで使っています。上スクロールでヘッダーが出てきます

行間・・・文字上下の空間を調整できます

段落行間・・・段落ごとの行間です。marginを使って指定します。

ツイッター埋め込み・・・ツイッターをサイトに直接埋め込むことができます

タブ・・・ページ移動せずに表示を切り替えれます。（テーマについていたり、ショートコードのプラグインを入れていたら利用できるはずです）

以上です！

ほかにもあると思いますが、その際は検索して探してみててくださいませ。

それではこれまでのを振り返れるように、リンク載せておきますね！

またカスタマイズとかあったら随時更新していきますが、基本構造はこれで大丈夫だと思います！

もしサイトを作成し、オリジナル小説だった場合相互リンクしてくださるとうれしいです！

それでは、ここまでお読みくださり、ありがとうございました！

よい創作ライフをお送りくださいませ！