サイト開設+移行でやったこと

自分用の備忘録です。もしこの記事を真似してやってみて上手くいかなくても責任は負えませんのでご注意ください。というかほとんどググって出てきたことをやってるだけです…。
でもまあ質問されたら答えられることなら答えると思うので、その辺はお気軽にどうぞ!

使用サービス
旧:スターサーバーフリー(サーバー)
旧:Seesaaブログ(ブログ)
新:ConoHa WING(サーバー)
  →プランはベーシック、料金タイプはWINGパック
新:WordPress(ブログ)

使用ツール
sakuraエディタ(ソースいじる用テキストエディタ)
CLIP STUDIO(画像いじる用ペイントソフト)
chrome(HTML・CSSの見栄え確認用WEBブラウザ)

1.HTMLとCSSを用意(任意)
いきなり任意なのかよ
私がやりたかったサイトというのがトップページから色んなところに飛べるだけのものだったので、WordPress駆使してやるよりわかりやすいかなと思い、作ることにしました。
WordPress、ブログを作るサービスという認識でいるので、そのサービス使ってブログっぽさを消すのって骨が折れそうだな…めんどくさいな…と思いまして。
ただWordPress産でブログっぽさ皆無のサイトもありますし、企業でも採用してるところあるみたいですし、私みたいに「メイン直下に作品は配置しないわ」という方以外は素直にWordPress駆使した方がいいと思います。
今回作ったのはメインのトップページとABOUT、LINKのページです。
いずれもテンプレートなしでググりながら作りました。1カラムデザイン…縦に割って左右や左右真ん中にそれぞれコンテンツを入れるのではなく、上から下へ要素を重ねるだけのデザインだったらテンプレなしでもどうにかなるかなーと判断しました。結構骨折れましたが…www
ヘッダー、コンテンツ、フッターの3つの要素に分かれてるだけです。トップページはボタン周りでCSSいっぱいいじりましたが、大体ググってコピペで使える部品をいただいてきて微調整したものになります。背景の色変わるやつとか、ボタンのアニメーションとか、全部CSSです。
見栄えの確認はchromeでやってます。IEは今回対応してません。IEは使うな。
レスポンシブ対応もしたのでスマホでの見栄えも一応保証してます。一応…一応ね…?
あ、あとこれから公開する予定のページにはJavaScript使ってます。ちょっとだけですが…しかもプレーンなJavaScriptだからね。Jqueryですらないという…www

2.サーバー申し込み
サーバーはConoHaWINGさんです。調べたところ業界でトップレベルの通信速度があり、なおかつWordPressの導入可能、ドメインも取得可能…とかなり都合がよかったので選択しました。
有名なさくらサーバーさんやロリポップさん?の方が料金は安いのですが、金で使い勝手を買うと考えた方が精神衛生上いいかなと思いまして。勉強コストもかからないし…楽だし…あと楽だし…(めんどくさがりや)
WINGパックというドメイン取得とWordPress導入を一緒にやってくれるめちゃくちゃ簡単なパックがあるのでそちらに申し込みしました。
ここでWordPress導入するとトップページがWordPressで作ったページになってしまうので、今回はWordPress導入は後回しにしました。ドメインだけkonagonattsu.comで取得して、1.で作ったHTMLとCSSをファイルサーバーにアップロードして、その後WordPressを「konagonattsu.com/blog」というドメイン?に設定して導入しました。

3.ブログ移行
2.で作ったページがそれぞれ動くことをなんとな~く確認して、ブログの移行です。
Seesaaブログさんはそれまで書いてきた記事・メディアデータのエクスポートができるので、そこで取得したデータをsakuraエディタでいじってWordPressに流し込める状態にします。
Seesaaブログ WordPress移行 みたいな感じで検索して一番上に出てくる解説ページを参考にしてやりました。データいじると言っても文字列置換とかそういう感じなので、もともと個人的に好きで使っていたsakuraエディタで事足りました。sakuraエディタ、めちゃくちゃ便利です。指定したフォルダ下のファイルの一斉文字列置換とかできるので…grep置換って言うんですけれども。というかこれがないと気の遠くなる作業になってたと思うからsakuraエディタは神
んで、できたデータをWordPressに突っ込んで記事の移行は完了です。特にコメントやフィードバックとかついてなかったので本当に記事とカテゴリの移行だけした感じです。
画像は一部移行できてて一部移行失敗してたので、というか失敗してたの3記事しかなかったので後から手動で直しました。もっとあったらどうしてたかな…。
この移行で何故か改行が変な詰まり方しちゃったんですが、そちらは手動で対応中です。途中で飽きたらやらないかもしれない。

4.WordPressでブログのカスタマイズ
とことんシンプルを目指しました。WordPressにはcocoonという外観編集に強いプラグイン?があって、そちらがデフォルトでついてくるよう設定したので素直にcocoon使わせてもらいました。
コメントなし、フィードバックなし、プロフィールもなし、アーカイブもなし(これは足すかも)徹底的に引き算して作りました。ほとんどいらねんだもん…
背景はシームレスパターンをフリーで配布しているサイトから、好きなのを使わせてもらっています。青と黄色の組み合わせが好きなので、目に痛くない淡いやつを選んできて使いました。可愛く見えていい感じ
あとは…文字サイズは自分好みに調節しました。Seesaa時代はスマホで見ると文字デカくてキレそうになったんで、こっちは結構小さくしてます。私が見やすいサイズです(小さいなと思った人には申し訳ない)

5.こくときサイトの移行
こくときサイトは手元にHTMLもCSSもJSもあったので、リンクをちょこちょこ手直しして新しい方のファイルサーバーにアップロードしただけです。
ちょっと不都合なところとかがあってそういうところの直しに苦しんだりしたのですが…ページ数多いので(暗天とか)全部は確認できてないんですが、もし何か見つけたりしたら教えてもらいたい(他力本願)

6.気が済むまで微調整
して、おしまい!お疲れさまでした
かかった時間はどれくらいかな…でも2~6まででトータル半日くらいな気がします。そんなに時間かからなかった

幸いお仕事でHTMLとかCSSとかそういうのを触る機会があって、自分の時間削って勉強する必要がなかったので大分冒険できました。有料サーバー…というか独自ドメインがめちゃくちゃほしかったので嬉しい!こなごなっつどっとこむ この人自分のこと好きすぎますねえ

いやでも自分のお城はいいものだなあと思ったので、ぜひ色んな人に作ってもらいたいです。サイト文化に戻って来てほしいわけじゃないけど(その時代のオタクではないと自負してるから戻るっていう言い方も正しくない)、色んな人の色んなお城が見てみたい…
私のは大分大味になってkonagonattsuっぽいな…と笑えるので気に入ってます これからも思いついたらぼちぼち更新したいなと思ってます。

まずは今月を生き抜くことからだよ…………!!!!!!!

タイトルとURLをコピーしました