絵文書きが個人サイトを始めた話(前編)
個人サイトはいいぞ。
しかし、周りで新しくサイトを始めるという人は多くありません。「時間がない、やり方がわからない」という人が大多数なのだと思います。
個人サイトといえば、~アナタはウン番目のお客様~（カウンター）とか想像される方もいらっしゃるかもしれませんが、サイト文化はいつのまにか、きれいなレスポンシブデザイン（PCスマホ両対応）が当たり前の時代へと、進化を遂げています!!
私も実際にやってみて思ったのですが…
「結局サーバーはどこがいいのか」
「サイトのテキストファイル編集が難しい」
など、色んな壁にぶつかりました。
そこで、「いち絵文書きがこんなふうにサイトを作ったよ！」という記録があったら、同じ悩みを持った方の参考になるのではないか？ と思い、筆をとってみた次第です。
素人ですが、いや、素人だからこその目線で！ 自身の防備録も兼ねて。
ひとまずメリットデメリットをば。
◎個人サイトをもつメリット
・自分だけの創作まとめスペースができる！
・すべてが自由！ ←管理人さんの個性が出て楽しい🥳
・今のSNSに惑わされずに済む！←SNS疲れの方の拠点には最適かも🤔
△個人サイトのデメリット
・つくるのがめんどくさい。←はい、めんどくさいです！ ですが、出来上がったときの感動もひとしお！ めんどくさ楽しい達成感が好きな人は向いています（筆者もです）。
・サイト人口は少ない。←基本孤独です！ ひとりの時間が好きだという人も向いています（筆者もです）。
・維持費用がかかる。←定期的にサイトの場所代を払う意志をもって始めましょう。
「自分向けだな！」と思った方は続きをどうぞ！
冒頭に、参考にしているサイトさま方をご紹介。
・テキストエディタで個人サイトをつくろう（やわらかhtml・css解説サイト）
お世話になっております🙏✨
余談：
サイトといえば、WiX や Jimdo 、nano なんかはどうやねん！という声もありそうです。
結論からいえば、いいと思います！ 私自身、ケータイサイト時代はnano、Alice+、Tumblrなどを触ってから、今のPC鯖に落ち着いています。
最近は、Xfolio や フォレストページ+ なども個人サイトらしく運営できるので人気です。無料でカスタマイズ性もあるので、そこから始めるのもアリです👍✨
以下はPCサーバーを使った個人サイトの作り方を案内します🌸
①レンタルサーバーを契約する！
サイトの場所を確保します。敷地みたいなものですね。
代表的なところ：
無料お試し期間があったりするので、まずは登録してみて、管理画面の使いやすさでサクッと決めるのがオススメです！
当サイトは、さくらのレンタルサーバさんを使ってます。
②ドメインを決める！
次に、『URL』を決めます！。ネット上での住所。
契約時にサーバー用ドメインがもらえるので、それで始めるのもよいです。
しかし、ここで悩むのが「独自ドメインを取るかどうか？」…です。
※独自ドメイン … 自分だけのオリジナルURLを契約して持つこと。万が一、今使ってるサーバーに何かあったとしても、URLはそのまま別サーバーに引っ越せます
レンタルサーバー各社が用意している独自ドメイン取得サービスを使うのが簡単です。
（※ロリポップ！やエックスサーバーは、プランによっては無料で独自ドメインがもらえるようです。凄い！）
独自ドメインの発行と紐付け：
〇〇（サーバー名）ドメイン （大体別ページ。検索すると出てくる）→好きなものを選んで契約。
ドメイン設定→独自ドメイン→設定→基本設定ページ●web公開フォルダ←このフォルダ名は基本どこにも載らないけど、ここのindex.html（php）がサイトのトップページ扱いになる。直下のままでもいいとは思う。
あとでDLするワードプレス等にはこのドメインを紐付けしていきます
③全体のレイアウトをつくる！
見た目のレイアウトを1から全部手打ちは、現実的でないので、『テンプレート』をお借りしましょう。
そしてここが大事なところ。
どんなテンプレートを使うか＝今後の更新スタイルを決定することにもなります。今現在、ギャラリーやブログ、小説を展示する場合は『ワードプレス』や『てがろぐ』を使うのが主流です。（併用も可）
ちなみに拙宅は、『ワードプレス』に外部テーマを入れ、コンテンツ投稿 ＋ HTML/CSS/PHP 手打ちの合わせ技で運営しています。
※ワードプレス … 有名なコンテンツ管理システム。テーマやプラグインが豊富で、基本レイアウトも簡単に作れたりします
※てがろぐ … Web上から手軽にミニブログ投稿ができるツール。拡張性が高く、今どきの個人サイトではよく使用されています
参考テンプレート（外部テーマ）一覧：
※詳しいやり方は、それぞれの配布サイトさまの説明をご覧ください
▼ワードプレスのテンプレ
・EASEL ・Cocoon ・Lightning ・yStandard ・simple kojinsite
▼てがろぐのテンプレ
・OSHATEN! ・pipi ・do テンプレート ・なんらかの配布場
特にEASELとOSHATEN!は鉄板！（見易いし、使いやすいようで、カスタマイズによって管理人さんの個性を感じられます✨）
ワードプレス.orgの導入（さくらのレンタルサーバの場合）：
さくらのレンタルサーバにはWordPressインストール機能があるので、超簡単でした！！
公式ヘルプページのガイド通りに入力すれば、ファイルマネージャー内にWordPressファイルが一式入ります。
管理ページのURLが錬成されるので、これでもうブログ、イラスト投稿などができるようになります
④外部リンクや、イラストを投稿する！
ワードプレス（外部テーマ）の場合：
私が普段使っているスマホアプリが、これ。
・ファイル … 初期から入ってるデータ管理アプリ
・LiquidLogic … テキストエディタアプリ。私はトップページ等はここから手打ちで編集する（別の小説アプリとエディタごと分けてる）
・WordPress … ブログやイラスト投稿などはここから
……え！きみスマホからやってんの!?（空耳）
そうです!! わたしはスマホがないと日々の空き時間を生きていけません!!( ﾟдﾟ )ｸﾜｯ
PC作業主体の方も、同じ機能のメモアプリやブラウザから、直接編集してくださいませね！
例えば、HTMLファイル編集でリンクを貼ります。
<a href=”ここにURL”>表示したい文字</a>
↑これが基本のリンク。更に、バナーでサムネを飾りたい場合は、文字のところに、これを挟みます。
<img src=”ここに画像のURL”>
イラストサムネや、外部リンクページもこの要領で作れます。
……どうですか。もしかしたら、この段階で急にめんどくさくなってきましたか。（私もです）
そんなときはこちらをどうぞ。
コピペで高度なHTML/CSSを実現できるという、最高に素敵なサイトさまです！お世話になっております！！
ちょっとしたデザインは、こういった解説サイトを見れば大抵解決します☺
⑤ブログや小説を投稿する！
ワードプレス（外部テーマ）の場合：
ブログはアプリからSNS感覚で書けます。すごい！
問題は小説ですね！
実は、ワードプレスの投稿フォーマットは、増やすことができます。（functionsファイルをいじることになるので多分ちょっとむずかしいです。私は気合でいじりました笑）
・カスタム投稿作成プラグインCPT UI（投稿フォームを簡単に増やす）
こういうサービスもあるようです！
また、固定ページ機能を使うのも手だと思います。ブログはともかく、短編/長編小説は固定ページ機能使用でもなんとかなる気がしています。
とりあえず、投稿枠内に文章をまるまる貼り付けてみましょう。本文ページになります。
本文とは別で、作品用のトップページとして表紙画像&もくじを表示した固定ページを作り、本文ページに対して小題などでリンクします。
本文下のほうに、nextボタンなどをHTML/CSSで手打ちしておきましょう。これでかなりいい感じです！
ここは今度の記事で詳しく書くかも…
ほかにも note，しずかなインターネットなどの別のブログサービスを併用するのもひとつの手です。すでに持ってる人は特にいいのかも。
⑥最後にひと確認！
ピックアップ項目。よければね！
あとは、サイト名🏡を考えたり、サイトバナー🖼（200×40）を作ったり、サイト内にトップのURLを明記しておいたり✍です。
楽しいですよ(*^^*)
🎉サイト完成！
普段使っているSNSや、投稿サイトなどにURLを貼ってお知らせします！
おしまいです。おつかれさまでした。
また次回の後編（そのうち書く予定）では、日々の更新作業の内容や、近年の個人サイトをとりまく小ネタについて綴ってみる予定です。
素人の覚え書きでした。読んでいただき、ありがとうございました🥰
─ TAL.