#サイト作成新たにサイトを開設するまでの道のりを書いてみる（1)
1 データのサルベージ閉鎖直前のログは残っていなかったので、EaseUS Date RecoveryでPCの削除データを復元。
１Gまでは無料復元できるのかな？
ともあれこれで2014年のサイトデータが抽出できました。この頃から記述をXTMLからHTML5に変えていたので、それも都合がよかった。
ちょうどこのデザイン（
https://etre.lix.jp/aksm/cssgallary/cssl...）の頃。
これをベースに今の形式に変えていくことにしました。といっても既にスマホ・タブレット対応もしていたのですが……
2 画像編集ソフト(photoshop)の導入 & 素材探し昔のphotoshopは購入したにもかかわらずライセンス認証ができなくなっているので（adobe死すべし）フォトプランを登録。
GIMPとか使えば無料で編集できるのかな…でも過去に使い方がわからず挫折した覚えがあったので素直にフォトショ。
素材探しとかが時間かかるようにも思うんですが、Woodland Ravens Watercolor Kit
https://pixelbuddha.net/textures/woodlan... が
案外すぐに見つかったのでラッキーでした。グレイッシュで、水彩画で、鳥で…と私の好みにぴったりでした。
しかも見本画像にデザイン用のカラースキームまである。親切すぎる。
アダルト不可の規約はなさそうに思えたのでありがたく採用。（Pixelbuddha —
https://pixelbuddha.net/）
3 同人サイト制作支援サイトを巡る。最近の流行などもあると思うので、do | 創作・同人サイト制作支援サイト
https://do.gt-gt.org/ さんなどの支援サイト・テンプレサイトを巡る。
中でも「【2020年版】個人の創作・同人サイト制作に役立つ無料htmlテンプレートサイト７選（＋２） | do
https://do.gt-gt.org/web-material/#toc-3」の記事にはお世話になりました。紹介されているのはどれもHTML5(Living Standard）、CSS装飾のところばかりなので、参考にするにはいいと思います。
Web拍手のお礼ページに空蝉｜WEBサイトテンプレート配布サイト
https://hiroec.com/さんの作品を利用させていただいた。
4 デザイン（PC）PCの基本デザインは画像が魅力的なおかげでさくさく進みました。
photoshopでカンプを作って…という手順を踏んでない、いきなりの直書きです。
松サイトのCSS(kira kira night)が形を変えてfc2アダルトでのサイトCSSに残っていたので、文字装飾などはそれをベースにすることに。
ただグローバルメニューをどうするか等は悩みました。なんか結局、過去のを流用してしまいました。
スマホ主流の現在、本当はモバイルファーストでデザインした方が楽なのは分かり切っているんですが、見た目っていう意味ではPCファーストにどうしてもなってしまうのが困りものです。
つまづいたのは定義リスト（dl,dt,dd）の横並びデザインですかね……
flexboxを理解できておらず、また幅設定なども従来の指定とカチあってしまって、延々と時間がかかった。
5 デザイン（スマホ）大変でした。
基本、スマホへの対応って、HTML5以上で書かれていてCSSレイアウトならあんまり特別なことをしなくてもいいはずなんです。
まずviewポートの設定をして（※head要素内に書く記述で、スマホ側がPCサイトのデザインをそのまま補正することを避けるもの。
仕様もちゃんとあるけど「<meta name="viewport" content="width=device-width,initial-scale=1">」って呪文をコピペで大体動く）
その後はCSS側でメディアクエリを幅ごとに切り替える。
うちはなぜかタブレットのデザインも用意しているのですが……基本はスマホ⇔PCでいいと思います。
PCデザインのCSSの下にメディアクエリを追加したら、今度はスマホ用のデザインを書いていきます。
文章主体サイトということもあって1カラムのシンプルレイアウトなので、ほとんどすべての要素のmarginやpaddingを小さめに上書きし、
狭い画面全体にコンテンツが表示できるようにします。
コンテンツ部分はこれで大丈夫なのですが、問題はメニューなどのナビゲーション。
とくにグローバルメニューは狭い幅のデバイスではもてあましがちなので、ハンバーガーメニューにしました。
これが大変だった……jquery使わなきゃいけないのでさらに。
結局【レスポンシブ対応】ハンバーガーメニューの作り方解説（jQuery） | PENGIN BLOG
https://crestadesign.org/hamburgermenu/ を参考にしました。
というかほとんどコピペしてしまいました。本当に大変だった（何度も言う）
本当はHTML側にパンくずリストをページ上部・下部の二か所に記述しているため（PC表示時は上部のナビのみ表示オフになっている）
グローバルメニューなんかトップページだけにあればいいだろ感もあったのですが、やはりちょっとは技術を使ってみたい。
でも立ちふさがるのはHTMLファイルの総数……相対パス記述だからフォルダが違えば記述も差があるし。
グローバルメニューを切り分けてphp埋め込みにすることが、今後のサイト改造での目標ですね…。
ハンバーガーメニューが完成したら、後はいらない要素を非表示（display : noneを指定）にしたり。
ナビゲーションさえ妥協できればスマホ対応は速いと思います。
6 HTMLの修正地味に大変だった。
複数行置換ソフト grepreplaceを使って変えていくのですが、入力文字が小さすぎて疲れ目に非常につらい。
でもこれがなかったら本当に手打ち不可能なんで、やはりありがたいご長寿ソフト。Win10でも動いてくれました。
あと、HTMLになってない小説というのも多かったので、pbrs insertionというソフトを使ってHTML化します。
空行ごとにpタグやbrタグを自動挿入してくれるのですが、何だか長い文章だと尻切れになっちゃって苦労でした。
要するに
https://html-css-javascript.com/insert-p... でやってることです。
この場合、テキストファイルは
…
地の文だよ。（改行）
（空行）
「台詞だよ！」（改行）
「格好いい台詞だよ」（改行）
（空行）
（全角空白）地の文だよ。いろいろな情報を書いていくよ。（改行）
（空行）
「またもや台詞だよ」（改行）
…
という風に整形しなくてはならないので、秀丸で置換。
「（改行）（行頭全角空白）」を「（改行）（改行）（行頭全角空白）」にして、”」（改行）（行頭空白）”を」”」（改行）（改行）（行頭空白）”にすればＯＫだけだったので正規表現はあまり必要ありませんでした。
秀丸も置換ダイアログの文字が小さすぎてキツイ。
段落の先頭に全角空白を入れるクセをつけておいてよかった。小説を同人誌で出すときもいつも思っています。
2014年以降に更新した小説もけっこう多くて作業量が多かった。マジでここが山場。
長くなったので次回に続きます。
新たにサイトを開設するまでの道のりを書いてみる（1)
1 データのサルベージ
閉鎖直前のログは残っていなかったので、EaseUS Date RecoveryでPCの削除データを復元。
１Gまでは無料復元できるのかな？
ともあれこれで2014年のサイトデータが抽出できました。この頃から記述をXTMLからHTML5に変えていたので、それも都合がよかった。
ちょうどこのデザイン（https://etre.lix.jp/aksm/cssgallary/cssl...）の頃。
これをベースに今の形式に変えていくことにしました。といっても既にスマホ・タブレット対応もしていたのですが……
2 画像編集ソフト(photoshop)の導入 & 素材探し
昔のphotoshopは購入したにもかかわらずライセンス認証ができなくなっているので（adobe死すべし）フォトプランを登録。
GIMPとか使えば無料で編集できるのかな…でも過去に使い方がわからず挫折した覚えがあったので素直にフォトショ。
素材探しとかが時間かかるようにも思うんですが、Woodland Ravens Watercolor Kit https://pixelbuddha.net/textures/woodlan... が
案外すぐに見つかったのでラッキーでした。グレイッシュで、水彩画で、鳥で…と私の好みにぴったりでした。
しかも見本画像にデザイン用のカラースキームまである。親切すぎる。
アダルト不可の規約はなさそうに思えたのでありがたく採用。（Pixelbuddha — https://pixelbuddha.net/）
3 同人サイト制作支援サイトを巡る。
最近の流行などもあると思うので、do | 創作・同人サイト制作支援サイト https://do.gt-gt.org/ さんなどの支援サイト・テンプレサイトを巡る。
中でも「【2020年版】個人の創作・同人サイト制作に役立つ無料htmlテンプレートサイト７選（＋２） | do https://do.gt-gt.org/web-material/#toc-3」の記事にはお世話になりました。紹介されているのはどれもHTML5(Living Standard）、CSS装飾のところばかりなので、参考にするにはいいと思います。
Web拍手のお礼ページに空蝉｜WEBサイトテンプレート配布サイト https://hiroec.com/さんの作品を利用させていただいた。
4 デザイン（PC）
PCの基本デザインは画像が魅力的なおかげでさくさく進みました。
photoshopでカンプを作って…という手順を踏んでない、いきなりの直書きです。
松サイトのCSS(kira kira night)が形を変えてfc2アダルトでのサイトCSSに残っていたので、文字装飾などはそれをベースにすることに。
ただグローバルメニューをどうするか等は悩みました。なんか結局、過去のを流用してしまいました。
スマホ主流の現在、本当はモバイルファーストでデザインした方が楽なのは分かり切っているんですが、見た目っていう意味ではPCファーストにどうしてもなってしまうのが困りものです。
つまづいたのは定義リスト（dl,dt,dd）の横並びデザインですかね……
flexboxを理解できておらず、また幅設定なども従来の指定とカチあってしまって、延々と時間がかかった。
5 デザイン（スマホ）
大変でした。
基本、スマホへの対応って、HTML5以上で書かれていてCSSレイアウトならあんまり特別なことをしなくてもいいはずなんです。
まずviewポートの設定をして（※head要素内に書く記述で、スマホ側がPCサイトのデザインをそのまま補正することを避けるもの。
仕様もちゃんとあるけど「<meta name="viewport" content="width=device-width,initial-scale=1">」って呪文をコピペで大体動く）
その後はCSS側でメディアクエリを幅ごとに切り替える。
うちはなぜかタブレットのデザインも用意しているのですが……基本はスマホ⇔PCでいいと思います。
PCデザインのCSSの下にメディアクエリを追加したら、今度はスマホ用のデザインを書いていきます。
文章主体サイトということもあって1カラムのシンプルレイアウトなので、ほとんどすべての要素のmarginやpaddingを小さめに上書きし、
狭い画面全体にコンテンツが表示できるようにします。
コンテンツ部分はこれで大丈夫なのですが、問題はメニューなどのナビゲーション。
とくにグローバルメニューは狭い幅のデバイスではもてあましがちなので、ハンバーガーメニューにしました。
これが大変だった……jquery使わなきゃいけないのでさらに。
結局【レスポンシブ対応】ハンバーガーメニューの作り方解説（jQuery） | PENGIN BLOG https://crestadesign.org/hamburgermenu/ を参考にしました。
というかほとんどコピペしてしまいました。本当に大変だった（何度も言う）
本当はHTML側にパンくずリストをページ上部・下部の二か所に記述しているため（PC表示時は上部のナビのみ表示オフになっている）
グローバルメニューなんかトップページだけにあればいいだろ感もあったのですが、やはりちょっとは技術を使ってみたい。
でも立ちふさがるのはHTMLファイルの総数……相対パス記述だからフォルダが違えば記述も差があるし。
グローバルメニューを切り分けてphp埋め込みにすることが、今後のサイト改造での目標ですね…。
ハンバーガーメニューが完成したら、後はいらない要素を非表示（display : noneを指定）にしたり。
ナビゲーションさえ妥協できればスマホ対応は速いと思います。
6 HTMLの修正
地味に大変だった。
複数行置換ソフト grepreplaceを使って変えていくのですが、入力文字が小さすぎて疲れ目に非常につらい。
でもこれがなかったら本当に手打ち不可能なんで、やはりありがたいご長寿ソフト。Win10でも動いてくれました。
あと、HTMLになってない小説というのも多かったので、pbrs insertionというソフトを使ってHTML化します。
空行ごとにpタグやbrタグを自動挿入してくれるのですが、何だか長い文章だと尻切れになっちゃって苦労でした。
要するにhttps://html-css-javascript.com/insert-p... でやってることです。
この場合、テキストファイルは
…
地の文だよ。（改行）
（空行）
「台詞だよ！」（改行）
「格好いい台詞だよ」（改行）
（空行）
（全角空白）地の文だよ。いろいろな情報を書いていくよ。（改行）
（空行）
「またもや台詞だよ」（改行）
…
という風に整形しなくてはならないので、秀丸で置換。
「（改行）（行頭全角空白）」を「（改行）（改行）（行頭全角空白）」にして、”」（改行）（行頭空白）”を」”」（改行）（改行）（行頭空白）”にすればＯＫだけだったので正規表現はあまり必要ありませんでした。
秀丸も置換ダイアログの文字が小さすぎてキツイ。
段落の先頭に全角空白を入れるクセをつけておいてよかった。小説を同人誌で出すときもいつも思っています。
2014年以降に更新した小説もけっこう多くて作業量が多かった。マジでここが山場。
長くなったので次回に続きます。