とある夢女の雑記ブログ

2018/07/30

古の同人・二次創作サイトを作りたい人向けのお役立ちリンク集

夢女の世界からこんにちは、ゆぱんだ(@marr1gae)です。

PixivやTumblrじゃなくて自分で二次創作サイトを自作したい!持ちたい!という方がこちらの記事にたどり着くことも多いみたいなので、HTMLの基礎やCSSについて教えているサイトを貼ってみました。

同人向けレンタルサーバーのまとめはこちらからどうぞ。

スポンサーリンク

HTML/CSSの基礎

一から同人サイトを作りたい!という方向けのHTML&CSS入門編。

サルワカさんではイラストなどの図解付きで作り方を教えてくれています。とてもわかりやすい。

基礎を教えてくれる本もありますが、Webというのは日々進化していくのでご注意を。

基礎の基礎を知りたい!という場合は問題ないだろうと思いますが…。

PCとスマホ、それぞれページに合うように表示させたい!(レスポンシブ対応)

PC用に作ったサイトはスマホで見るとかなり小さく表示されたりします。

また、ページも幅が横に伸びていたり、画像のサイズが大きすぎるとスマホの画面からはみ出したりするのですが、viewportタグやスタイルシート(CSS)で調整ができます。

他にも参考になりそうなリンク先はこちら。

二次創作サイトの検索避けのやり方

ページ全体で検索避けをしたいという方向けの方法です。

借りているサーバーなどでは後者のrobots.txtは利用できないのでご注意ください。

(モバイル向けサーバーだと、大本のHTMLは弄れませんが、設定などの項目で検索避けに関する記述があればできる場合もあります)

スポンサーリンク

夢小説(名前変換)サイトを作りたい!

名前変換ができるのは、小説投稿サイトではピクモフドリームノベル、スマホ向けではnanoなどでその機能が簡単につけられるのですが、自分で一から作ったサイトではDreamMakerというスクリプトを使用することで夢小説をサイトに掲載することができます。

初心者の方は、設定もそこまで難しくないDreamMakerを使用することをオススメします。

PHPに挑戦したい!という方は、aleviritaさんで配布されているdream.phpもあります。

慣れるまではDreamMaker、PHPにちょっとチャレンジしてみたいなという方はdream.phpを導入してみるとよいでしょう。

 

DreamMakerの設定方法をこのブログでも説明してみたので、参考にどうぞ。(今後dream.phpも説明予定です)

スポンサーリンク

ページの装飾関係

アイコンフォントやGoogleフォント、jQueryを使ってイラストをかっこよく表示させたい!という、HTMLにちょっと慣れてきましたよという人向けのリンク。

画像を使わずアイコン表示『Font Awesome』

このブログ(こちらは2018年ごろのデザイン)でもpick upという記事の一覧で表示されているアイコンで『Font Awesome』を使っているのですが、

fontawesomeを使った記事一覧のデザイン

創作サイトでのメニューなどでも、簡単にメニューアイコンが作れるのでおすすめです。

これまではアイコンを画像として使っていましたが、タグで張り替えられるので楽チン!

TwitterやInstagramなどのアイコンも表示してくれます。

 

バージョンや無料・有料などがあるので、表示できるアイコンは限られます。

かっこいい筆記体や明朝体をページに表示できるようになる『Google Fonts』

使っているPCやスマホによって、ページで表示されているフォントがかわっているのですが、それを統一させることができる『Google Fonts』。

日本語版も正式にリリースしたので、雰囲気にあったフォントを選べるようになります。

イラストをかっこよく表示させる『Lightbox』

イラストの表示の仕方をスタイリッシュにしたい…!という方はjQueryというものを利用した『Lightbox』がおすすめです。

公式サイトでも表示サンプルはありますが、このブログでもページの下でInstagramの画像を表示させるときに使っています。

 

インスタを表示させるときに使用しているLightbox

 

こんな感じでサイト内でイラストを表示させたいときに便利です。

メニュー収納系

ハンバーガーメニューやアコーディオンメニューなど。

ハンバーガーメニューはスマホページの上部などで「≡」みたいなマークを押すとにゅーんと出てくるサイトがあると思うんですが、あれです。

アコーディオンメニューはメニュー以外でもこの部分隠したい!というときにも使えるので便利です。(「もっとみる」とか「more」みたいな)

背景を贅沢にみせながらスクロールよりちょっと遅めについてくる『パララックス』

メインページ(小説など)ではちょっと難しいですが、トップページなどでスクロールしていく時に面白い動きを付けてくれます。

グラデーション背景

このブログでもグラデーションを使っているのですが、ページの背景やボックス要素などでも簡単に作れます。

また、画像と一緒にグラデーションを個別で設定できたりもするので、小説ページなどではかなりおしゃれになると思います。

おしゃれな見出し(タイトル)を装飾

サイトのタイトルやAboutなどの見出し、小説のタイトルなどで使えるおしゃれなデザインリンク集。

どこでその装飾をしたいかによって、[ h1 ]などの部分を[ h2 ]や[ .title ]などに変更して使います。

おしゃれなボックスデザイン

その部分だけ背景を付けたい!枠線をいれたい!というときに使えます。

最近はCSSだけでドットやストライプが作れるので便利になりました。

ここでご紹介したもの以外にもサルワカさんのところのデザイン集がすごいので、こちらもぜひみてください。

とりあえずあれこれチャレンジしてみて使い方を覚えるのが早いような気がします(アイボリッジさんで修行してきた感想)

WordPressで同人サイトを作りたい!

正直、メンテナンスも大変なので手放しでオススメはできません…(定期的にアップデートが行われるので、不具合があれば自分で修正をしないといけないので)

また、ページをいじるものがHTMLはもちろん、PHPとなるので上級者向けになります。

functionをいじってページが真っ白になるという場合もあるので、自作テーマを作りたい時は慎重に…、です。

小説ごとに背景を変更したい!などの場合は、WordPressよりベタ打ちで編集した方が楽かなぁとも思います。(私の二次創作サイトはWordPressを使っていません)

参考までに、私がこのブログを一から作った際にお世話になったサイトをご紹介します。

イラストサイトならWordPressを利用するより、TumblrOwndを利用した方がテンプレートも豊富かと思います。(Wixやjimdoよりはよさげ…?たぶん)

スポンサーリンク

二次創作向けテンプレート配布サイト

レスポンシブ対応のテンプレサイト様。見つけたら随時追加したい…と思います。

本当にテンプレート配布サイトも減りましたね……(私も作るので頑張りたい)

当ブログでも二次創作向けテンプレートの配布をはじめました。

  • ブログランキング・にほんブログ村へ
スポンサーリンク スポンサーリンク