好きなことを好きなように綴っているブログ

ささらメモ

Wordpressで同人サイト

WordPress(AFFINGER5)で同人サイトを構築する(4)【小説一覧編】

投稿日:

さて、Wordpressで同人サイトを構築するシリーズ第4回、今回は小説一覧編となります。

こんにちは、ささお(sasao_blog)です。

今回カスタマイズする小説一覧画面はイラスト一覧画面とほとんど同じカスタマイズを行っているため説明などはアッサリとしていますので、前回記事と合わせてご覧ください!

前回記事
WordPress(AFFINGER5)で同人サイトを構築する(3)【イラスト一覧編】

さて、Wordpressで同人サイトを構築するシリーズ第3回、今回から早速カスタマイズに入って行きたいと思います。 こんにちは、ささお(sasao_blog)です。 WordPressで、といいつつA ...

続きを見る

小説一覧画面の完成形

PC表示のサンプルです

デモサイトの該当ページへ

ブログ記事の一覧画面と差別化を図るためにイラスト一覧画面と同じくカード型にしています。

イラスト一覧画面と異なる部分は、

  1. サムネイル表示なし
  2. カテゴリーとタグの表示を一番最初に表示
  3. カードの高さを変更

3か所です。

サムネイル表示以外は個人の好みが出るところかな、と思っているので好きにカスタマイズしてもらえれば良いかなぁと思っています。

カスタマイズ実施

1.編集するテンプレートデータ

今回のカスタマイズで編集するテーマファイルは下記です。

  1. category.php
  2. itiran-thumbnail-off.php

前回のイラスト一覧画面とほぼ一緒です。

違う所はサムネイルなし用のテンプレートファイルを修正してカスタマイズするという所ですね。

とはいえ、この記事ではテンプレートファイルの中身を置き換える事を想定しているので、②の「itiran-thumbnail-off.php」については特に意識することは無いです!(笑)

興味のある方は元のPHPファイルと中身を見比べてみてください。

2.「category.php」を編集する

2-1.「category.php」を「category-スラッグ名.php」に変更する

前回と同じように今回は「ジャンルA」の小説一覧(カテゴリーのスラッグ名:novel-a)を変更する事にしたいと思うので、ファイル名を「category-novel-a.php」にリネームします。

2-2.コードを修正する

101行目の以下のコード

ここを下記のように変更します。

イラスト一覧画面と同じくcategory.phpの編集箇所はここのみです。

STINGER PLUS 2の場合

81行目に同じコードがあるのでそこを修正します。

3.「itiran-thumbnail-off.php」を編集する

3-1.「itiran-thumbnail-off.php」を「itiran-thumbnail-off-novel.php」に変更する

イラスト一覧画面と同じく、サムネイルなしのテンプレートファイルを複製して、末尾に「-novel」を付けたものを作成します。

3-2.コードを修正する

作成した「itiran-thumbnail-off-novel.php」の中身を以下のソースに置き換えます。

小説一覧画面はイラストと異なり、カスタムフィールド「note」の表示をすべて表示する記述にしています。

説明文は沢山書きたかったりすることもあるかな? と思いまして…。

その場合PC表示ではボックスの高さによっては文章が途切れてしまう事があるため、CSSで高さを調整できるようにクラスを追加しています。

4.「st-single-category.php」を編集する(編集済みの場合は不要)

既にイラスト一覧画面でカスタマイズを実施した人は不要です。

「イラストは描かないし、小説だけだよ~」という方は前回記事を参考に「st-single-category.php」の編集を行ってください。

5.テンプレートファイルをアップロードする

前回記事と同様、テンプレートファイルを子テーマのフォルダにアップロードしてください。

 6.CSSを調整する

表示のCSSは以下の通りです。

前回のイラスト一覧のCSSとほぼ同じなのですが、小説はPC表示でのボックス高さを変更する用黄色いハイライト部分を追記しています。

まるっと置き換えでも、該当箇所のみ追加でも、お好きな方でどうぞ。

もちろん、「ボックスの高さはイラストも小説も同じでいいや~」という場合は今回追加した記述はなくてOKです!

完成!

これで小説の一覧画面は完成です。

イラスト一覧とあまり変わり映えはないですが、同じ「NoImage」のサムネイルがズラッと並ぶよりは良いかな? という感じですね。

今日のひとこと

ささお
小説の方もほとんどイラスト一覧と同じカスタマイズなので今回は楽チンでしたね!

次回は他ジャンルのカテゴリー一覧を見た場合にも同じ見た目になるカスタマイズについて紹介する予定です。

AFFINGERのというよりは、Wordpressのカスタマイズが中心です。

WordPressテーマ 「WING(AFFINGER5)」

詳しく見る

このカスタマイズ記事は有料テーマ「WING(AFFINGER5)」を使用しています。

ブログランキング・にほんブログ村へ
▲ランキング参加中▲
良かった! 役に立った! と思ったら押してくれると嬉しいです(^○^)
  • この記事を書いた人
ささお

ささお

ゲームやお絵かき、新しいもの、文房具が好きなどこにでもいるオタクです。 やりたい事が色々とありすぎてどれも中途半端になってしまうのが悩みのタネ。

人気記事

1

折角入会しているんだし! と、最近はTTFCでせっせと戦隊過去作品を視聴している笹生(@sasao_blog)です、こんにちは! TTFCは通信環境が安定していれば画質もすごくキレイなので、テレビで見 ...

2

どうもこんにちは。ゲームも好きですが文房具もなかなか好きなささおです。 ジブン手帳は「トモエリバー」という紙を使っています。これはほぼ日にも使用されている手帳用の紙で、薄いのに裏移りしない紙だそうです ...

3

ふと、ブログのダッシュボードを見ていたら「エマーソン 先祖」とかその手の検索結果で足を運んできてくれてる方がいらっしゃるようですね。 SO5でシリーズ初プレイという方なんでしょうか…? というわけで、 ...

4

その存在を知って以降気になってはいたのですが、ついに先日カキモリのローラーボールを入手しました。こんばんは、笹生です。 本当はインクスタンドでオリジナルインクを作って、それと一緒に買いたいなと思ってい ...

-Wordpressで同人サイト

Copyright© ささらメモ , 2019 All Rights Reserved.