Bloggerでお洒落ブログではなく二次創作個人サイトを作るには
しばらく前から避難所兼倉庫として個人サイトつーくろ!って思って作っていたのがいい感じになってきたのでざっくりまとめておく。ざっくりすぎて人の参考にならないかもしれん。
ちなみに自分はTwitterからネットを始めた個人サイトもhtmlもほぼなんにも知らないオタクである。
※Bloggerを個人サイトに寄せていく話なのでhtmlやcssなどの細かい話はしてないです。あらかじめご了承ください。
そもそもなんでBloggerにしたの?
ここは自分がBloggerを選んだ理由を書き連ねてるところなので「いいからやり方教えて」という人は飛ばしてほしい。
まずどうして数あるホームページ作成サービスから見るからに創作オタク向けではなさそうなBloggerを選んだかというと、できることが多いからである。
ページごとにhtmlを書けるBloggerは、htmlがどのくらいできるかでやれることがそれは大きく変わってくる。
まぁhtmlの書き方とかはネットに転がっているので検索すれば大体出る。未だに文字色の変え方も覚えてない自分でもコピペを駆使して角丸正方形サムネが並ぶインスタ風イラストギャラリーとか作れたのでその辺は安心してほしい。
内容が成人向けでも、設定をちょいっと変える(ワンクッション挟まる)だけでOK。不安ならhtmlが書ければページごとにパスワードをかけることも可能。これはありがたい。
そして、データ容量が多い。BloggerはGoogleのアカウントでログインしてサイトを作る(身バレ防止に複垢使用中)が、そのアカウントのGoogleドライブの容量、15GBがそのままブログの容量になる。無料で。は?????
その中にはGmailやGoogle photosの分も含まれているが、作ったばかりの複垢にはそんな容量圧迫データはないだろう。参考までにWix(無料)のデータ容量は8MB、FC2(無料)のデータ容量は1GB。
正直容量いっぱいになる日が来るのかもちょっと怪しい。
そして広告がない。どこ開いても広告がない。アフィリエイト機能はあるが、二次創作する個人サイトでアフィリエイトなんざまずしないので、ずーっと広告がない。信じられるか、これ、無料なんだぜ……
それから、表示速度が早い、検索避けも簡単、Google提供、デフォルトで揃ってるお洒落なテンプレート……
ここまで来るとデメリットの方が気になってくるが、今のところBloggerを使ってみてのデメリットは仕様がちょっと複雑なことと解説サイトが少ないこと、iOS非対応なことくらいである。
iOS使いはスマホから使えんがそれ以外はそのうち慣れるので大した問題では……
じゃあ作ってみよう!
というわけで、早速作り方を解説していく。最終目標は【無料版でトップページと小説、ギャラリー、ブログ、404のページを作る】。順番的には、
0.(Googleアカウントを増やす)
1.Bloggerにログイン、サイトを作る
2.トップページを作る
3.小説ページを作る
4.ギャラリーページを作る
5.ブログのページを作る
6.404ページを作る
といったところ。もちろんいくつか飛ばしてもいいし、もっと増やしてもいい。
０.(Googleアカウントを増やす)
BloggerはGoogleのサービスなので、サイトを作るのにアカウントがいる。手持ちのものを使ってもいいが、「私のGoogleアカウント本名なんだが!!?」という人は増やしてから作った方がいい。
1.Bloggerにログイン、サイトを作る
たぶんここ見るのが一番早いと思います 基本的なこと全部書いてあってありがてぇ
2.トップページを作る
自分のサイトが用意できたら、ここからはhtmlやらcssやらをいじっていく。簡単に言うとhtmlはそのページ内に表示する文字や画像の設定で、cssはサイト全体の書式設定のこと。ざっくりで大丈夫。
まずサイトのトップページだが、どのテンプレートでもブログが来るようになっている。そりゃBloggerって名前だものね……ブログがメインだもんね……
しかしこっちは作品置き場がメインの個人サイトを作りたいので自分語りをいきなり載せたくはないのよな、そう、ヘッダーにタイトルがあって、その下にgalleryとかnovelなんかのメニューバーがあって、ブログではなくaboutから始まるサイトの説明が続いて……というのがBloggerならできちゃうんですね。有能か?
使うのは左側メニュー内のページ。Bloggerには文章を投稿するツールとしてブログとページがあるけど、使うのは主にページ。ブログはあくまでブログだけを投稿するツールで、イラストや小説なんかは全部ページに投稿していく。
右下のボタンから新規ページを開いたら、ここにトップページに載せたいものを書き込んでいく。上でいうaboutから下のところを、好きな他サイトを参考にしてhtmlと格闘しつつ組み上げていく。
サイトの説明、自己紹介、snsや匿名感想ツールなどなど……プレビューボタンもあるのでこまめに確認しながら頑張って作ろう。
ちなみにタイトルはページのurlに関係しており、アルファベットや数字で入れるとその文字列がそのままurlの一部となる(日本語だとランダムに数字が入る)。なんかindexにするとそれっぽいらしい。
urlは公開するまで決まらず、公開すると変えらえなくなるのでよく考えてつけたりつけなかったりしよう。
あっ公開してからページのタイトルを日本語に直すのはできるゾ。
それからもう一つ、ページやブログにはデフォルトでコメント欄が表示される。トップページにそんなんいらない……とかｱｯ私はコメントや感想はwaveboxにほしいな……って人は、編集画面のメニューの一番右端にあるページ設定＞オプションからコメント欄を非表示にしとこう。
ページが完成したら公開。すると公開せず保存したときには出てこなかった共有マークがあるので、そこからリンクをコピー。
左側メニューの設定から、エラーとリダイレクト＞カスタムリダイレクトを開く。これはサイトのトップ(ブログが載ってる方)のリンクが踏まれたら別なリンク先に飛ばしますよ、という設定。追加を選択し、上段には/を、下段にはさっきのリンクをコピペして、リンクの/pより前の部分を消す(例:/p.index.html など)。永続はよくわからんけどいいえで大丈夫。
これでサイトを表示するとトップページがさっき作ったページになっていることだろう。やったぜ。
3.小説ページを作る
続いて小説ページ。といっても文章なので基本はコピペでok。ルビや文字のサイズ･色替えがある場合はhtmlで追加し、連載の目次なんかを作る場合は一話ずつページに分けてリンクを貼ろう。
自分が引っ掛かったところとしては、デフォルトの文字が段落(ちょっとでかい)になってたせいで改行する度に行間広くね……?ってなってたくらいか。標準にしてから小説をコピペすると楽。
4.ギャラリーページを作る
ギャラリーページも大体コピペ。そのまま画像挿入もできるが、たくさんの画像をお洒落に見せたいときは「フォトギャラリー 作り方 html」なんかで検索かけると色々出てくる。自分のサイトはこれを参考にしてる。
ちなみに一度投稿した画像はメディアマネージャーってところにまとまってるから、同じのを投稿する場合や載せ直す場合は画像＞Bloggerから呼び出せる。
ギャラリー作るのに画像のリンクがほしいときもメディアマネージャーからコピペしよう。
5.ブログのページを作る
小説コーナーヨシ!ギャラリーコーナーヨシ!でも雑記とか書くことあるからブログ置き場もほしいよね……ってなったら、ブログのページを作ろう。
現在公開されてるのは新しいトップページなので、自分以外がブログを見る術はない……と思いきや、これまでに書いたブログ一覧をリンクで呼び出すことはできる。これをトップページに置いたり、メニューバーに置いたりすれば自分以外も見に来れるってワケ。
んで、そのリンクがこれ。
【https://www.○○○○.com/search/label/】
○○○○には自分のurlを入れると、自分がこれまで書いたブログの一覧が表示される。ちなみに書いた記事がいっぱいあると下まで表示するのはちょっと……ってなる場合は、上のリンクの後ろに【?&max-results=5】ってつけると指定した数(この場合は5個)だけ記事が表示される。
6.404ページを作る
404ページは、リンクが間違ってたりページが消されてたりするとき「このページは存在しません」とエラーメッセージを表示するページである。ぶっちゃけ普通はわざわざ探さない。
でもさ……細かいとこまで……凝りたいじゃん……?
凝れるんですよBloggerなら。有能か?(二回目)
作り方はトップページと大体同じで、新しいページに表示する内容(404とかNot foundとかイラスト置いたりとか)を書いたら一度ここでストップ。公開はしてもしなくてもいいので、編集画面をhtmlモードに変えて、全文をコピーする。
自分とこでは仕様なのかよくわからんがいっぺんに全部はコピーできなかったので、最初の<以外をコピー。
そしたら、さっきトップページを設定したのと同じとこにあるカスタム404に貼りつける。今回はリンクではなくhtmlを貼るので注意。忘れずに<を足したら404でそのhtmlが表示される。
なお故意に404を出したいときは、urlの後ろに適当な文字を足して確定すると出る。
完成!
ここまででBloggerで作ったサイトがだいぶ個人サイトになってきたと思う。あとはテンプレートをいじったり、色を変えたり、新しいページを作ったりと好きなようにいじくっていければ、サイトはもっと楽しくなってくるはず。
さぁ、これから個人サイトを作る予定があるオタク達～!Bloggerも候補に入れてくれ～!