そうだ、同人サイトつくろう。～マジでｈｔｍｌが何もわからない人へ～

2014年6月3日2021年9月1日

今はSNS主流で同人活動です。
簡単に投稿できて、すぐ反応が来るので、ページを自分で作って、お客さんを迎えるサイト形式は同人では廃れてきております。

でも、

▲なんかごちゃごちゃしてるんだよなー
シンプルにイラストとか漫画だけ飾りたいんだけど。

▲交流もいいけど、仲良くしてる人に知られたくない物も公開したい。
どっか別の場所ないかな。

▲交流でお世辞言わないといけない・・・なんかつかれた。
自分の作品だけに向き合っていたい。

▲自分の作品だけで自分の城を築きたいです。
自分のお気に入りだけで空間を埋め尽くしたいです。

↑こういうかた、いませんか。

ならどうだい、個人サイトをつくってみないかい。
自分の静かなお部屋を持ちたいとは思いませんか？
SNSの作品アップのしやすさは捨てがたいけれど、それでも、サイトならちょっとだけお金出して広告でないようにすることもできるし、なにより自分の作品をイチから飾る喜びを感じてみたいなー、とは思いませんか？

「でもサイト作るのってイメージわかないんだけど…。
難しいんでしょ？」

確かに難しいです。
でも、一歩一歩簡単なところからはじめることはできます。
そういう「簡単なところから知りたい」方のために、今回はとてつもなく簡単に同人風に「サイトの作って公開するまでの流れ」をしてみたいと思います。

作品を作るときもイメージを頭の中に浮かべますよね。
サイトを作る、というのもイメージするのが大事だと思います。
というわけでたとえ話をひとつ。

　
・
・
・
　

０・準備編

まずあなたのマイキャラを１人用意します。
頭の中に浮かびましたか。
じゃ、その子マッパにしといてください。

１・服を着せよう

次にマイキャラに服を着せます。
前提は「お出かけ着」です。今日は決めてたお店に行きます。
みんなに見られますから、あまり見苦しくないほうがいいですね。

無難に済ませますか？
それとも流行最先端の服をきてっちゃうかな。

3・アクセサリ・小物・財布は持ってく？

それとも財布だけポケットに突っ込んでいくタイプかな。
最新のアクセとかみにつけちゃうタイプかな。
ファンタジーな世界で、剣と魔法も装備していくかな。
さてあなたのキャラはどのくらい装飾品を持ってくでしょうか。

４・さぁ、お店に行こう。

お店に出かける前に、鏡の前で十分チェックをしておきましょう。

５・お出かけ着のあなたのキャラは町につきました。

お店には入ることができたのですが…こんなケースもあるようです。

＊服がなんかへんだね、と言われた
＊どうやらそのお店はドレスコードがあったようで服を着替えてくれといわれる
＊アクセつけてるはずなのに、なぜかみんなには何も持ってないように見えてる

６・お店で働くことになりました。

あたなのオリキャラは、そのお店が気に入ったらしく、住み込みで働くことにしたようです。
毎日休まず、お客さんの対応をしています。
そのお店は模様替えが何度もできるし、お客さんを選ぶこともできます。
もしかしたら、看板キャラになるかもしれませんね。

　
・
・
・
　

 

以上、これはたとえ話です。サイトを作って公開するというのは上のおなはしに似ています。
今からこの文を「サイトを作る」ということに置き換え、書き直します。
今回は特に「イラストサイトを作る」に絞ってお話します。

 

　
・
・
・
　

０・準備編

まずあなたの作品を用意します。
あたなのＰＣフォルダに作品ファイルはありますか？
じゃ、その作品のファイル名を準備してください。

１・htmlタグをつけよう

作品ファイルとｈｔｍｌタグをくっつけます。もうちょっというと、ｈｔｍｌという閲覧するのに適したタグを書いて、そこに作品ファイルの名前も入れます。
前提はみんなに見てもらうため。今日は決めてたレンタルサーバーにおきます。
みんなに見られますから、あまり見苦しくないほうがいいですね。

無難なｈｔｍｌタグで済ませますか？
それとも流行最先端のhtml5タグ宣言しちゃうかな？

3・ｃｓｓファイルで装飾する？

それともｈｔｍｌタグのなかにちょっとｃｓｓタグ入れるだけですませちゃうタイプかな。
最新のｃｓｓ３とかつけちゃうタイプかな。
ｐｈｐとかｃｍｓとかも装備していくかな。
さてあなたのサイトはどのくらい飾りましょうか。

４・さぁ、レンタルサーバーに作品を置こう

レンタルサーバーに作品を置く前に、自分のパソコン画面で十分チェックをしておきましょう。

５・ｈｔｍｌをレンタルサ　バーに置きました！

レンタルサーバーにアップはできたのですが…こんなケースもあるようです。

＊htmlの書き方がへんだね、と言われた
→４０４エラーとかが出てリンクがうまくつながっていないことも。
＊どうやらそのレンタルサーバー仕様と自分の準備したhtmlは違うようで、サイトを見たら文字が変。
→かりているサーバーによってルールがあるよ。作るときはレンタルサーバーにあわせてね（特にcgi・phpなど）
＊ｃｓｓつけてるはずなのに、サイトを確認したら何も装飾が反映されていない
→ｃｓｓの書き方、くっつけ方がまちがっているかも。

６・レンタルサーバーを使ってサイトを開設しました。

あなたの作品はレンタルサーバーで２４時間世界中の人に公開されている状態になります。
サイトのデザインは何度でも変更できますし、レンタルサーバーによっては閲覧者を制限することもできます（閲覧制限は有料のレンタルサーバーのほうが充実してます）
がんばって更新していたら、もしかしたら、人気サイトになるかもしれませんね。

　
・
・
・
　

 

以上、「サイトを作る流れ」をせつめいしてみました。
一次・二次同人サイト作りたい方向けに、初心者用に、かなりすっ飛ばしてお話してますがいかがでしたでしょうか。

この話を読んで「なんかわかったきがする」とおもったら、「創作サイトの作り方」で検索をしてみてください。
また、読んでみて「やっぱわからん！」という方も、「創作サイトの作り方」で検索お願いします。ごめんね、説明下手でごめんね。でもハマル人はマジでにサイト作りはまるよ、楽しいよ。

参考になるhtml初心者のためのリンク

1時間で作るホームページ

まりなの超初心者講座

#001｜ホームページってなに？

さくらインターネット株式会社が運営する、レンタルサーバ初心者向けの情報サイト。久々にログインしたらこんなこと初めていたようです。
まりなちゃんかわいい。

関連記事

• cPanel 編・Yandexやcompute.amazonaws.comをブロックする方法
• フリーソフトAviUtlでサイト用動画を作ってみた。
• 自分でできる無料ホームページWebnodeを使った感想。
• wordpressで困った！を解決するために見た場所まとめ
• さくらインターネットを解約した話
• さくらインターネットでサイト全体のバックアップを作る
• wordpressの不正アクセスをﾍﾞｯｷﾍﾞｷに防ぐ方法を探してみた。
• ブラウザで公開するWebコミックビューワスクリプト特集
• さくらインターネットでも無料ｓｓｌ証明書が導入されたので自サイトに適用した
• wordpressプラグイン不要、1個の記事内でページ量産するnextタグを使ってみる
• さくらインターネットのレンタルサーバーで困ってること・2018年～2020年までの軌跡
• wordpress利用者がレベルアップするための気になる記事
• さくらのレンタルサーバーが重いので、自分のサイトの負荷状況を調べた。
• wordpressで漫画サイトを立ち上げるためにやったこと
• さくらインターネット（スタンダード）にサイトを移転した過程を書いてゆくよ
• wordpressのプラグイン更新したらデータ壊れたのでここで実況してました。
• wordpressのコネタ。メディアを「タイトル」でラベリングして管理する
• スマートフォン・タブレットのホームアイコンを作るためのファイル名のメモ
• テキストで作った小説に改行を自動で入れるツール「HTML変換機」
• Bootstrapで同人サイトは簡単に作れるの？やってみたよ。
• ＷＥＢ拍手を改造したい人へのリンクまとめ
• 今だからこそ個人サイトを作りたい方へ、参考リンクまとめです。
• 30分で作る広告なしの同人サイトブログ～ロリポップ体験版～
• そうだ、同人サイトつくろう。～マジでｈｔｍｌが何もわからない人へ～
• wordpressで同人サイト作ったあと、更に色々いじってみた
• 忍者ブログ無料版で創作サイトっぽくする方法　テンプレートの紹介
• WEB漫画をwordpressで掲載のための埋め込み・プラグイン情報
• いまさらきけない。初心者のための有料レンタルサーバー色々メモ。
• wordpressプラグイン　ＷＰ－ＢＡＮについてのメモ
• wordpressで同人サイト作ってみた（旧）