とある夢女の雑記ブログ

随時更新:京アニへの支援方法一覧

2018/07/30

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

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

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

スポンサーリンク

レンタルサーバー

自分で一からHPを作る場合、レンタルサーバーが必要になります。

無料のものと有料のものがあるので、お好みで選んでください。

(R18などの創作内容についても規約があるのでご注意)

スポンサーリンク

HTML/CSSの基礎

コードを使ってホームページを作ります

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

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

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

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

個人サイトを一から作りながら覚えたい

サルワカさんは基礎の基礎ですが、「HTMLには触れてきた…その先じゃ…」という方、とてもわかりやすかったので「同人女向け個人サイト作成の手引き」をどうぞ!

テンプレートも一緒に配布されているので、触りながら覚えることができると思います。レスポンシブデザイン対応。

ある程度作り方はわかっている方

スマホ対応のやり方(レスポンシブデザイン)

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

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

検索避けのやり方

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

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

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

夢小説の名前変換のやり方

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

※参考までに、上の画像をクリックすると当ブログで配布しているテンプレートに飛ぶので名前変換の入力フォームを試してみてください。

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

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

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

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

お役立ちリンク

Webクリエイターボックス」さんで、CSSの小技集を書かれています。

複数のclassを指定する方法やCSSのみで画像を丸く表示させる方法など、小説ページでも使えそうなテクニックばかりなのでぜひご覧ください。

FTPクライアントソフト

FFFTPの起動画面

レンタルサーバーによっては、管理画面から編集できるものもありますが、直接アップロード・更新ができるFTPクライアントソフトが大変便利です。(画面はFFFTPのもの)

こちらのFFFTPはWin専用のソフトになります。Macの方はサルワカさんでご紹介されているFTPソフトをご利用ください。

スポンサーリンク

ページの装飾関係

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

小説ページの背景など

昔使っていた背景固定のコードだと、スマホでみた場合使えません。

なので、最近の固定コードなどを書いているのでこちらを参考にしてください。

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

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

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

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

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

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

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

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

googlefontでおしゃれな文字を実装

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

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

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

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

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

 

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

 

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

メニュー系

かんたんにメニューやアイコンを横並びにする

メニューやイラストのアイコンを横並びに表示させるときに便利なのがFlexbox。

今までFloatなどを使っていたのですが、Flexboxのおかげでかなりデザインの幅も広がりやりやすくなりました。

Webクリエイターボックスさんでとてもわかり易く説明されています。

ただ、表示をセンターにすると2行目の1つ目がセンターに寄ってしまうので、jQueryなどで無理やり左寄せにしたりする必要があるのですが…。

収納系

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

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

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

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

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

グラデーション背景

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

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

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

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

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

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

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

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

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

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

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

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

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

 

当ブログでも二次創作向けテンプレートの配布をはじめました。(夢小説の名前変換フォームにも対応しています)

スポンサーリンク

随時更新:京アニへの支援方法一覧

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