#サイト作成

新たにサイトを開設するまでの道のりを書いてみる（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年以降に更新した小説もけっこう多くて作業量が多かった。マジでここが山場。


長くなったので次回に続きます。

twitterアカウントのプロフィールにもサイトのURLを追加しました。
鍵垢のほうでは宣伝もさせていただいた。
拍手くださった方々ありがとうございます！　ご祝儀嬉しい！

SNSでの紹介などについてですが、「よろずりんく」さんから他ジャンルの創作サイト様をサーフィン（死語）させていただくと、禁止にされている方々が多いよう。
私もたしかに晒しのような参照は困るんですが、良識を守った紹介なら構わないかな…
「隆元」でTwitter検索して出てきてしまっていいんかい、って感じもしますが…作品URLをパス・IDと合わせて直貼りとかじゃなければ興味のない人は読まないだろうし。（こういうのは悪意ありの晒しだからそもそも論外）BOT系（それぞれ楽しませていただいています！）の創作ツイもけっこう多いし。最近では力士さんの情報も出てきますね！
pixivに小説を上げちゃってるのも「R18作品なので検索エンジンからはワンクッションある」という要因が大きいです。実在した人物名なので、それなりに隠す必要があるというのは同意。

この時代にサイトでの活動を選ぶ人は、何かしら理由もあると思うので、やっぱり相変わらず慎重ではいなくちゃならないなーと思いました。

同人系のサーチさんに登録させていただきました。

・同人系サイト総合検索サーチ　よろずりんく http://kn1.x0.to/
・女性向け戦国検索 http://jss.mints.ne.jp/jss/
・検索廻廊【JIN】 http://jin3.net/
・PLAYMANiAX http://playmaniax.s205.xrea.com/

登録作業が手動の場合は承認にも時間がかかるかもしれませんが…
特定ジャンル用サーチエンジンは個人の二次創作サイト存続のための命綱です。
しかしサーバー負荷もかかるため有料サーバー契約が必須。
今もサーチを維持してくださる管理人さんたちには本当に感謝です。

唯一困ったのはサイト内（/aksm/）をSSL化したので、バナーが表示されなくなってしまった件。
自サイト→他サイトへのリンクについては直リンを諦め、自身の鯖にアップすることで対応しました。
自サイトについては、まあ直リンできないと困るのでサーバーのトップにバナーを置いてhttp//の形で参照できるようにしました。
200 * 40のミニミニな大きさで綺麗なバナーが作れる方々すごい。

#サイト作成
一番困ったのはWeb拍手のCGIがのきなみ使用できなくなってることかな…
今はgoogle フォームを改造して拍手にしていますが、できれば乗り換えたい…

平成生まれのヤングに説明しておくと、「Web拍手」はだんでぃさんの提唱されたサイト管理者応援サービスです。
Web2.0が一般的になる前の個人サイト時代は典型的なメッセージツールでした。
今は「いいね」「お題箱」「マシュマロ」などに移り変わっていますね。
拍手は空送信それ自体が「応援回数」としてカウントされるので、管理人へのポジティブな気持ちを気軽に伝えることができます。
ポイピクの絵文字スタンプに感覚が近いかも。何度送っても大丈夫です。いたずらではなく、拍手として捉えてもらえます。
今はもうすたれたかと思いきや、個人の創作サイトさんを巡ってみると今も「いいね」や「マシュマロ」等外部サービスに移行しておらず、応援ツールは拍手が中心だったんですよね。たしかに「いいね」は押された回数が誰からもまる見えです。SNSじゃないのに評価数を気にしなきゃならなくなってしまい、運営側としてはやりづらそうです。
「マシュマロ」はtwitter連携しないとダメなんでしたっけ。ＡＩが悪意ある投稿をはじいてくれるのはいいのですが、うちは18禁サイトなので、好意で書いてくれたメッセージが規制されたらいやだなあ…と思ってしまいます。twitterアカウントとサイトの運営を切り分けたい人もいそうなので、そこもデメリットかなあ。

「web拍手」はメッセージ送信用途で考えると空送信が必要なので冗長ですが、そのぶん文章を考えずとも連打すれば応援できるという身もふたもない便利さもあります。その回数がやる気に繋がったりもして。誰が送ったか特定しづらいのも気楽です。当サイトにもデザイン的観点から全頁に設置してしまってるので、押してくださると素直に嬉しいです。googleフォーム利用なので簡易なものではありますが。無論メッセージもＯＫですよ。

個人サイトをこの令和の時代に復活させるにあたってさまざまな技術的変化もありました。
参考サイトとかまとめたいな。

今までサイトとして利用していた https://summerlime.x.fc2.com/torinohane/ですが、やはりアダルト可無料サバということで、広告が気になってしまって…
またjust-size networkさんのお世話になることにしました。あちらはしばらく残しておく予定ですが、そのうち消えます。
just-size networkさんでは、以前のアカウントが取れて一安心しました。もう最初に「あきかぜすみか」というサイトを作ってから10年が経つのですね…
閉鎖してしまったのは気の迷いでした。そのせいで失った作品などもいくつかあり、悔やまれます。
ともあれ心機一転よろしくお願いいたします。
隆景×隆元は時系列シリーズの続きを年始にでも書けたらと思います。
また、門外漢に加えて不勉強で恐縮なのですがふたりの基本的萌え情報などについてもまとめられたらなと思います

マシュマロから頂いたコメントについて、サイト上で返信しているのですが、やがて消えてしまうのでこちらで保管。
ほんとうにありがとうございました。#返信


21/11/27にマシュマロ下さった方に返信
創作戦国の小説に感想を下さり、ありがとうございます！　pixivに再掲したら何だか過去の情熱が戻ってきてしまい、もう一度サイトを開設することにしました。反応をくださった皆さまのおかげです。
「デッドエンドループ」「液化してゆく（略」は「隆景×隆元いいかも…」と
思った本当の最初期に書いた作品です。身体の関係は深くとも心は互いに傷つけあうという私なりの二人の解釈が凝縮されている話です。
「おなじみどりにかえる夏まで」は二人の年齢差を縮めたくて書きました。うちでは景様は攻めなんですが、『陰徳太平記』通りに愛でられる対象としても魅力的な景様です。大内義隆さまはBL解釈で物腰は優しいものの鬼畜ですｗ 春兄と隆房については、実はカプ萌えしているので短編があったりします。
「燐雪幻燈」末尾の藤原良経の歌は、春の夢→冬のうつつの転換でこの人の歌にありがちな絶望感がくっきりと書かれていてわかりやすく、好きな作品です。うまく話とかみ合っていたならよかった。このサイトの名前も「手にならす夏の扇とおもへどもただ秋風のすみかなりけり」という良経の歌からとっています。
「俺のスマホ（ｒｙ」はギャグが書きたくて書きました。昔、人型スマホのＣＭがあったんですよ。「これは恋ではなくって……」はラストから逆算して読むとひやひやしますね。お兄ちゃん死なないで…
お読みくださりありがとうございました。本当に励まされました。

21/11/13にマシュマロ下さった方に返信
創作戦国への感想誠にありがとうございます！ 主だった作品すべてに触れてくださり、感動しています。基本的に隆元兄上が自罰的で破戒にも感じいってしまう
マゾヒスティックなキャラにしてます。隆景様のほうは昭和のスーパー攻め様を意識しております……攻めが甘えたなのが好きなのでちょいその辺は強引です。
ご感想の中の「アラサー隆景」っていう語がなんだかパワーワードすぎて…！十代とか二十代の時点でスーパー攻め様なのにこれ以上カッコよくならないでほしいｗ
「燐雪幻燈」はちょっと普通のＢＬの萌えとはかけ離れたほの昏さなので、気に入っていただけて本当に嬉しいです。これからもまだ過去作を再録し、時系列で書いていた
本シリーズの方を再開させる予定ですので、またお手すきの際にでも目を通していただければと思います。