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

ささらメモ

同人サイトを構築する

WordPressで同人サイトを構築する(2)【構想編その2】

投稿日:2018年11月24日 更新日:

私事ですが、このブログのサーバー移転に伴って開店休業中な自分の同人サイトも移転の必要が出てきました。こんにちは、ささお(@sasao_blog)です。

さて、「こんなサイトを作りたいな~」とふんわり構想をしたところで止まっておりました同人サイト構築のカテゴリですが、上記の理由によりバリバリ進めていきたいと思います!

前回記事
WordPressで同人サイトを構築する【構想編】

私はそれなりな年数の書き手系のオタクしてます。最近はちょっとサボり気味で、昔から運営しているサイトも最近では全然更新できていないのですが、もう少し更新しやすく、かつ更新する気になるようにWordpre ...

続きを見る

やりたい事をもう少し具体的に考える

それでは、前回決めたやりたい事を実現するにはどうしたら良いか、もうすこし具体的に考えて決めていきたいと思います。

やりたい事:作品ページとブログ記事は別々に分けたい

私が思いつく範囲での実現方法は2種類あります。

  • カテゴリーで分けて、表示方法を工夫する。
  • カスタム投稿タイプを使用して、作品ページとブログ記事はそれぞれ別な投稿にする。

管理画面の投稿一覧で、作品ページとブログ記事がごちゃまぜになってしまうのが嫌ので、できれば後者のカスタム投稿タイプを使用するパターンで行きたいです。

が!

この記事を書く前に実際にカスタマイズにチャレンジして色々弄った結果、後者のカスタム投稿タイプで分けるパターンは非常にハードルが高いと判断しました。

分かりやすく言えば難しくて心が折れました(笑)

初心者に毛が生えた程度のHTML・CSS知識で、なおかつプログラミング言語も初心者の私には難易度が高かったです…。

というわけで、「カテゴリーで分けて表示方法を工夫する」方法で実現していきたいと思います。

やりたい事:レスポンシブでスマホでも同じように見られるようにしたい

これはもうレスポンシブ対応のテーマを使うという事でほぼ解決ですね。

私はすっかりこのブログでAFFINGERの便利さを気に入ってしまったので、同人サイトの構築も「AFFINGER5(WING)」をベーステーマとして使用していきます。

無料版の「STINGER PLUS2+」でも似たような事が出来るかもしれませんが、今後の記事は「AFFINGER5(WING)」でのカスタマイズ事例になる事をご了承いただければ幸いです。

前回の記事に追加でやりたい事

さて、前回のふんわりとした構成編では考えていなかった細かい部分のやりたい事がでてきたので、下記にまとめていきます。

作品ページの一覧画面は「イラスト」と「小説」でデザインを分けたい

やりたい事まとめ

イラスト一覧画面のやりたい事


イラストを一覧で表示するにあたって、必要なものは最低限サムネイルだけです。

個人的にはサムネイルの画像がズラーッと並んでいる画面が好きなので、そういった画面にしたいです。

もしくはカード型で2列以上で表示したいですね。とにかく普通のブログの状態の一行ずつ表示という一覧表示はイラスト向けじゃないかなと思っています

小説一覧画面のやりたい事


イラストとは違ってサムネイルは不要です。NoImageの画像が表示されてしまうのは避けたいです。

さらに、作品の説明文などは投稿ページに移動する前に見てもらいたいです。

と、このように一覧画面の機能に求めている要求が違うのでデザインをテンプレートで分けるようにしたいと思います。

なお、イラスト一覧でよくある「サムネイルをクリックすると画像だけポップアップ表示」というのは個人的に好みじゃないのでやりません。普通に投稿ページに移動するようにします。

いにしえのオタクなので、作品に言い訳文を添えたいタイプなんですよね(笑)

投稿ページの「前ページ」「次ページ」はカテゴリー毎で移動したい

デフォルトの設定のままだと、「ジャンルAの作品を見ていて、次ページをクリックしたら普通のブログ記事になった」という事が起こってしまうので、カテゴリー毎で移動できるようにしたいです。

その方が「同一ジャンルの作品を次々見たい」という場合にも便利かなと思うので。

「男性ファンは作家買い、女性ファンはジャンル買い」なんて言葉を耳にしたりしますが、私も例にもれず知らないジャンルの作品はあまり興味がないですからね…。

サンプル用サイト作りました

カスタマイズのテストを兼ねてあれやこれやと試したサイトが、一通りカスタマイズ完了したのでサンプルとして一足お先に公開します!

デモサイトはコチラ

最終的にこのような形で落ち着きました。

やりたいと思う事はほぼ網羅出来て、我ながら意外と良い出来で満足です!! sampleの文言とかはクオリティ低くてすみません…。

記事を書きながら調整することもあると思うので、

前見たときと様子が違うな?

と思った場合はそのうち公開されるであろう記事をお待ち下さい。

今日のひとこと

ささお
カスタマイズした内容を忘れないうちに記事に書きとめていきたいと思います。

平成が終わる前に自分の個人サイトを移転完了して、こちらの記事も書き終えたいですね(笑)

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

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

続きを見る

 

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

ささお

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

人気記事

1

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

2

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

3

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

4

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

-同人サイトを構築する

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