Post
Entries
#Hugo #ぼやき #サイト作成
このサイトも二次を合同していよいよファイル数が多くなってしまい、静的サイトジェネレータやWordpressなどの自動生成に移行すべきかとおもってHugoを触ってみたんですが、ブログ用なためかテンプレートもサイト構成もうまく噛み合いませんね…
SEOに特化したフィードやsitemap.xmlなどは個人の同人サイトでは利用者が少なそうだし、ひっそりやりたい向きには相性も悪い。
静的HTMLの生成だけに使うなら手軽かなって思ったのだけど、デザイン的に結局統一できない部分も多いんだよな……その場合、Markdownファイルにも直接HTML書くことになるしその時点でメンテの容易さは吹っ飛んじゃうなぁ。
タグ一覧とかは面白い感じもするんだけど…
小説ファイルのディレクトリにパスワードかけるのは、18禁を扱う以上仕方ないし。
楽し気な一覧閲覧やカテゴリやタグ機能も使えない。
せっかく自分なりにはセマンティックに書いたつもりのHTMLも、Markdownに変えるとSectionなどのブロック要素内では効かないんで、セクショニング削除しなきゃならなくなってるし。マジこの仕様意味不明
うーんやっぱりPHPのインクルードとかでいいですかね。
ブログ機能も正直大がかりなものはいらなくて、てがろぐくらいのシンプルさで十分だしな。
このサイトも二次を合同していよいよファイル数が多くなってしまい、静的サイトジェネレータやWordpressなどの自動生成に移行すべきかとおもってHugoを触ってみたんですが、ブログ用なためかテンプレートもサイト構成もうまく噛み合いませんね…
SEOに特化したフィードやsitemap.xmlなどは個人の同人サイトでは利用者が少なそうだし、ひっそりやりたい向きには相性も悪い。
静的HTMLの生成だけに使うなら手軽かなって思ったのだけど、デザイン的に結局統一できない部分も多いんだよな……その場合、Markdownファイルにも直接HTML書くことになるしその時点でメンテの容易さは吹っ飛んじゃうなぁ。
タグ一覧とかは面白い感じもするんだけど…
小説ファイルのディレクトリにパスワードかけるのは、18禁を扱う以上仕方ないし。
楽し気な一覧閲覧やカテゴリやタグ機能も使えない。
せっかく自分なりにはセマンティックに書いたつもりのHTMLも、Markdownに変えるとSectionなどのブロック要素内では効かないんで、セクショニング削除しなきゃならなくなってるし。マジこの仕様意味不明
うーんやっぱりPHPのインクルードとかでいいですかね。
ブログ機能も正直大がかりなものはいらなくて、てがろぐくらいのシンプルさで十分だしな。
#返信
メッセージなしの拍手も嬉しいです！ 健康の素。
返信いきます。
今回まではトップページの更新情報に載せてますが、煩雑になるので今後はてがろぐだけで返信していく感じにしようと思ってます。
＞Barometzさん
お忙しいところ訪問してくださって誠にありがとうございます！
そうか、「みどりのサカナ」は趣味すぎてpixivに載せていませんでしたね…！
ハッカ色の鱗、後にはさぞ希少な宝物になったことでしょう。
師禅、楽しんでいただけて何よりです。師お兄ちゃんは自らが完璧なだけにストライクゾーンも狭そう。
だからこそ、身内（弟さん）や気に入った人には手厚く報いそうです。
女体化なので姫姫にはかなげにできて楽しいですねｗｗ でも今後は普通に男性の劉禅さまも書きたい。
昭ちゃんは、他の禅様関連ＣＰだとちょっとライバル気味になってしまいますが、
お兄様攻めだとナイスなサブキャラって立ち位置になれるのでイイ感じです。
読んでくださってありがとうございました。ツイッターのほうで漫画の感想もかかせていただいてます！
＞感激です…！（後略） の方
メッセージありがとうございます！ 私も感激です！
字数だけはたくさんあるので、お時間のある時にでもゆっくり読んでいただければと思います。睡眠時間削るのはダメ絶対（←最近寝不足）
メッセージなしの拍手も嬉しいです！ 健康の素。
返信いきます。
今回まではトップページの更新情報に載せてますが、煩雑になるので今後はてがろぐだけで返信していく感じにしようと思ってます。
＞Barometzさん
お忙しいところ訪問してくださって誠にありがとうございます！
そうか、「みどりのサカナ」は趣味すぎてpixivに載せていませんでしたね…！
ハッカ色の鱗、後にはさぞ希少な宝物になったことでしょう。
師禅、楽しんでいただけて何よりです。師お兄ちゃんは自らが完璧なだけにストライクゾーンも狭そう。
だからこそ、身内（弟さん）や気に入った人には手厚く報いそうです。
女体化なので姫姫にはかなげにできて楽しいですねｗｗ でも今後は普通に男性の劉禅さまも書きたい。
昭ちゃんは、他の禅様関連ＣＰだとちょっとライバル気味になってしまいますが、
お兄様攻めだとナイスなサブキャラって立ち位置になれるのでイイ感じです。
読んでくださってありがとうございました。ツイッターのほうで漫画の感想もかかせていただいてます！
＞感激です…！（後略） の方
メッセージありがとうございます！ 私も感激です！
字数だけはたくさんあるので、お時間のある時にでもゆっくり読んでいただければと思います。睡眠時間削るのはダメ絶対（←最近寝不足）
これから月末まですごく集中しなきゃならないことがあるので、表垢のTL眺める時間を節約したく、また削除してきた。一か月たてば終わっているはず。こっちも低浮上になります。そのころにはエンパも発売してるはずだしプレイできてることを祈る。（※ツイッター裏垢転載）
一月三日に表垢を復活させることを忘れないようにしなければ…
一月三日に表垢を復活させることを忘れないようにしなければ…
サイト再開設ご祝儀拍手ありがとうございます！！
たくさんポチポチしてくださって本当にうれしいです！
たくさんポチポチしてくださって本当にうれしいです！
#サイト作成
新たにサイトを開設するまでの道のりを書いてみる（2)
7 Web拍手（googleフォーム利用）
マジで大変だった。サイト用のgoogleアカウントを取得して、googleフォームを作るところから開始だし、解説サイトを理解するところからして鳥頭には苦痛だった。
・Googleフォームをサイトに埋め込んで拍手を作る｜い｜note https://note.com/kasiwamochi/n/n86f47757...
・同人女、googleフォームでweb拍手を作ってみる｜早瀬｜note https://note.com/s_hayase/n/n7728338a9dc...
・Googleフォーム送信後のサンクスページ【こまりメモ】 - Qiita https://qiita.com/komarimayuko/items/df4...
今はWeb拍手の配布スクリプトが古すぎたり消えてたりなので、どうしようもないんだけど……
よろずりんくさんで他ジャンルの個人創作サイトを回ったところ、現在もマシュマロやお題箱でなく、
拍手という応援ツールが稼働していることが大半なので拍手続行に至ったけど高い壁でした。
googleフォームの仕様が変われば今の記述は通用しなくなりそうだし、
データも拍手スクリプトほどきめ細やかに解析されないし、
何よりHTMLファイルがあまり綺麗じゃありません。
あくまで代用って感じです。
新しいスクリプトの誕生が待たれます。
8 サーバー契約とアップロード
Just-size Networksのサブドメインプランに出戻ることにしました。創作アダルト関係の規約が明確なのと、以前のアカウントを使うことができたのが決め手。
運営会社が以前toktokを運営していたところに変わったというのが不安要素なんですけど、閉鎖前のURLを使うことができるのは大きすぎる。
今だと安さ主体だとリトルサーバーやスターサーバー、古参がよければロリポかさくら が主流なんでしょうかね。
アップロードは古き良きFFFTP。
SSLを標準にして、.htaccessとかrobots.txtとかも以前のまま再設置した。このへんの技術はあまり変化なくてありがたいですね。
小説ファイルは以前と同じく年齢認証や検索よけもかねて全部まとめてBasic認証（パス明記）
なぜかindex.htmlがダウンロードになったりしてたんですが、再アップロードで解決。
9 てがろぐの設置
拍手にくらべたら秒で終わりました。神すぎた。
デザインを全然調整していないんだけど、デフォのが充分綺麗な気も。
本格的に全部弄ろうと思ったらまた大変な時間がかかってしまいそう。
そんなこんなで構築が終わりました。一週間くらいかな…でも徹夜ぎみになったりもした。
サイト全体をWordpressなどのCMSにするって手もあるんですが、小説サイトなので１ファイルずつの文字数が多すぎなので躊躇しているうちにphpのバージョンも上がり続けてる……
グローバルメニューだけでも切り分けられたら楽そうではあります。今後の課題。
というわけで令和の時代のサイト作成メモでした。
新たにサイトを開設するまでの道のりを書いてみる（2)
7 Web拍手（googleフォーム利用）
マジで大変だった。サイト用のgoogleアカウントを取得して、googleフォームを作るところから開始だし、解説サイトを理解するところからして鳥頭には苦痛だった。
・Googleフォームをサイトに埋め込んで拍手を作る｜い｜note https://note.com/kasiwamochi/n/n86f47757...
・同人女、googleフォームでweb拍手を作ってみる｜早瀬｜note https://note.com/s_hayase/n/n7728338a9dc...
・Googleフォーム送信後のサンクスページ【こまりメモ】 - Qiita https://qiita.com/komarimayuko/items/df4...
今はWeb拍手の配布スクリプトが古すぎたり消えてたりなので、どうしようもないんだけど……
よろずりんくさんで他ジャンルの個人創作サイトを回ったところ、現在もマシュマロやお題箱でなく、
拍手という応援ツールが稼働していることが大半なので拍手続行に至ったけど高い壁でした。
googleフォームの仕様が変われば今の記述は通用しなくなりそうだし、
データも拍手スクリプトほどきめ細やかに解析されないし、
何よりHTMLファイルがあまり綺麗じゃありません。
あくまで代用って感じです。
新しいスクリプトの誕生が待たれます。
8 サーバー契約とアップロード
Just-size Networksのサブドメインプランに出戻ることにしました。創作アダルト関係の規約が明確なのと、以前のアカウントを使うことができたのが決め手。
運営会社が以前toktokを運営していたところに変わったというのが不安要素なんですけど、閉鎖前のURLを使うことができるのは大きすぎる。
今だと安さ主体だとリトルサーバーやスターサーバー、古参がよければロリポかさくら が主流なんでしょうかね。
アップロードは古き良きFFFTP。
SSLを標準にして、.htaccessとかrobots.txtとかも以前のまま再設置した。このへんの技術はあまり変化なくてありがたいですね。
小説ファイルは以前と同じく年齢認証や検索よけもかねて全部まとめてBasic認証（パス明記）
なぜかindex.htmlがダウンロードになったりしてたんですが、再アップロードで解決。
9 てがろぐの設置
拍手にくらべたら秒で終わりました。神すぎた。
デザインを全然調整していないんだけど、デフォのが充分綺麗な気も。
本格的に全部弄ろうと思ったらまた大変な時間がかかってしまいそう。
そんなこんなで構築が終わりました。一週間くらいかな…でも徹夜ぎみになったりもした。
サイト全体をWordpressなどのCMSにするって手もあるんですが、小説サイトなので１ファイルずつの文字数が多すぎなので躊躇しているうちにphpのバージョンも上がり続けてる……
グローバルメニューだけでも切り分けられたら楽そうではあります。今後の課題。
というわけで令和の時代のサイト作成メモでした。
#サイト作成
新たにサイトを開設するまでの道のりを書いてみる（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年以降に更新した小説もけっこう多くて作業量が多かった。マジでここが山場。
長くなったので次回に続きます。
でもHTMLの構造や記述を変えたいときにはやっぱり必要かもなぁ。小説ファイルの数の多さは本当にしんどい。生成にだけ使えばいいって割り切ろう。
ファイル管理がかえってずさんになっちゃいそうだけど、たくさんのhtmlファイルをmdに直さないといけないしいったんストップしよう。