2025年
こんなの作ってみました
SpriteStudioに少し興味があったので早速触ってみた。
手繋ぎ絵がフワフワ動いたら可愛いかなーと思ったんですが、ちょっと動かしすぎ＆硬いですね
メッシュ分割してボーンとか入れられるみたいなんですけどそういうのはやってないです。拡大縮小、移動、回転のみでゴリ押し。
SpriteStudioの画面はこんな感じです
パーツごとに分ける→並べて1枚の画像にする（専用ツール使用）→1個ずつ切り抜いて左のリストに追加→右側の画面で組み立てる→動かす という感じ。めんどくさい
もちろん元から動かす予定で描いた絵じゃなかったので
これを
こうして
こう‼️🖊️
って感じでゴリ押しました。無駄に細分化したら完成まで4時間以上かかっちゃった。
マーデン動かしたい欲で頑張ったけど、なんというかイラスト脳と立体脳と動画脳が全部必要ですごい疲れますね～。分かっちゃいたけど「動かす」は自分の得意な作業じゃないなあと感じました。慣れなんだろうけど。あわよくばリーやんも動かして並べたいけど、いったん満足したのでまた今度。
畳む
#絵 #動画
SpriteStudioに少し興味があったので早速触ってみた。
手繋ぎ絵がフワフワ動いたら可愛いかなーと思ったんですが、ちょっと動かしすぎ＆硬いですね
メッシュ分割してボーンとか入れられるみたいなんですけどそういうのはやってないです。拡大縮小、移動、回転のみでゴリ押し。
SpriteStudioの画面はこんな感じです
パーツごとに分ける→並べて1枚の画像にする（専用ツール使用）→1個ずつ切り抜いて左のリストに追加→右側の画面で組み立てる→動かす という感じ。めんどくさい
もちろん元から動かす予定で描いた絵じゃなかったので
これを
こうして
こう‼️🖊️
って感じでゴリ押しました。無駄に細分化したら完成まで4時間以上かかっちゃった。
マーデン動かしたい欲で頑張ったけど、なんというかイラスト脳と立体脳と動画脳が全部必要ですごい疲れますね～。分かっちゃいたけど「動かす」は自分の得意な作業じゃないなあと感じました。慣れなんだろうけど。あわよくばリーやんも動かして並べたいけど、いったん満足したのでまた今度。
畳む
#絵 #動画
こちら の記事を参考に、「テキスト」にメモ帳ベタ打ちの文章をそのまんま流し込めるようにした。今のところ「SS置き場」のみ新スタイルを適用していますが、改行が反映されない場合は強制リロード（Win:Ctrl + Shift + R）やキャッシュの削除をお試しください。
ちょっと調べたら出るし本当に大したことじゃないんだけど、未来の自分が忘れてそうなのと、見てる人がいつかテキスト主体の個人サイトを作りたくなった時に引っかかるかもしれないので書いておきます。
結論：white-space(:pre-wrap)だよ。
HTMLわかる人はご存じだと思いますが、HTMLでは文章の一つの段落は<p></p>というタグで囲うルールがあります。そして基本的にEnterを用いた改行は反映してくれません。じゃあどうやって改行するかというと、<br>というタグを改行したい場所に入れてやる必要があります。つまり
あいう
え
お
とブラウザ上で表示したければ「<p>あいう<br>え<br>お</p>」とか、もしくは「あいう」「え」「お」をそれぞれ<p>で括って書いてやる必要があるんですね。
小説なんかはメモ帳をはじめとする執筆ソフトやアプリで書くわけですが、サイトに載せたいなーと思ったらいちいちそれを原文とにらめっこしながら<p>で囲ったり<br>で改行する必要があるのです。冒頭で引用した記事にも書かれている通りこれが超面倒くさいこの記事を見つけた時はわかりすぎて首がもげるかと思った。
しかも<br>を連続で使うなとか、そもそもあまり改行すること自体が非推奨とかそういう「美しい・正しい記法」がちゃんと存在する。これが小説やブログの「本文」というものとめちゃくちゃ相性が悪くて、まあ詳細が気になる人には冒頭の記事を読んでいただいて。この前提だけ分かってれば読める記事なので。
ブログとか小説を置くのに特化したサービスは無数にあるんだからそれを使えば解決するんですが、じゃあ何のためのHPだよって感じで。そもそも外部サービスにあまり依存したくない気持ちを原動力に作ったHPですし。
でまあ、自分は今のところまれに短文しか書かないから手打ちで何とかなってるけど、まれにしか書かないからこそ億劫、それにいつか何かの気まぐれで長編なんて書こうものなら地獄が確定している。どうにかせねば。めんどくさいというのを先月末にうだうだ言っていたわけですね。
肝心の解決法も記事読んでもらった方がよっぽど詳しくて分かりやすいのですがいつか消える可能性を考えて一応書いておくか……
🌟任意のpにwhite-space: pre-wrapのスタイルを指定することで、スペース（半角/全角）や改行を反映したうえで自動折り返しもしてくれるようになります。
自分の場合は「main-text」というクラスに指定してみた。
<p class="main-text">ここにテキストを流し込めば改行も空白もそのまんま反映されるぞ！</p>という感じ。Tabによるインデントも反映されるのでそこだけ注意。スペースの統合とか折り返しの有無も他の値で指定できるので調べればいいと思う。
以上です。これでかなり文章載せやすくなったのでまた何か書きたいな。
畳む
#サイト #テキスト
ちょっと調べたら出るし本当に大したことじゃないんだけど、未来の自分が忘れてそうなのと、見てる人がいつかテキスト主体の個人サイトを作りたくなった時に引っかかるかもしれないので書いておきます。
結論：white-space(:pre-wrap)だよ。
HTMLわかる人はご存じだと思いますが、HTMLでは文章の一つの段落は<p></p>というタグで囲うルールがあります。そして基本的にEnterを用いた改行は反映してくれません。じゃあどうやって改行するかというと、<br>というタグを改行したい場所に入れてやる必要があります。つまり
あいう
え
お
とブラウザ上で表示したければ「<p>あいう<br>え<br>お</p>」とか、もしくは「あいう」「え」「お」をそれぞれ<p>で括って書いてやる必要があるんですね。
小説なんかはメモ帳をはじめとする執筆ソフトやアプリで書くわけですが、サイトに載せたいなーと思ったらいちいちそれを原文とにらめっこしながら<p>で囲ったり<br>で改行する必要があるのです。冒頭で引用した記事にも書かれている通りこれが超面倒くさい
この記事を見つけた時はわかりすぎて首がもげるかと思った。しかも<br>を連続で使うなとか、そもそもあまり改行すること自体が非推奨とかそういう「美しい・正しい記法」がちゃんと存在する。これが小説やブログの「本文」というものとめちゃくちゃ相性が悪くて、まあ詳細が気になる人には冒頭の記事を読んでいただいて。この前提だけ分かってれば読める記事なので。
ブログとか小説を置くのに特化したサービスは無数にあるんだからそれを使えば解決するんですが、じゃあ何のためのHPだよって感じで。そもそも外部サービスにあまり依存したくない気持ちを原動力に作ったHPですし。
でまあ、自分は今のところまれに短文しか書かないから手打ちで何とかなってるけど、まれにしか書かないからこそ億劫、それにいつか何かの気まぐれで長編なんて書こうものなら地獄が確定している。どうにかせねば。
肝心の解決法も記事読んでもらった方がよっぽど詳しくて分かりやすいのですがいつか消える可能性を考えて一応書いておくか……🌟任意のpにwhite-space: pre-wrapのスタイルを指定することで、スペース（半角/全角）や改行を反映したうえで自動折り返しもしてくれるようになります。
自分の場合は「main-text」というクラスに指定してみた。
<p class="main-text">ここにテキストを流し込めば改行も空白もそのまんま反映されるぞ！</p>という感じ。Tabによるインデントも反映されるのでそこだけ注意。スペースの統合とか折り返しの有無も他の値で指定できるので調べればいいと思う。
以上です。これでかなり文章載せやすくなったのでまた何か書きたいな。
畳む
#サイト #テキスト
公開してしばらく経ち、ようやく「これ分かりにくいなあ」とかが見えてきたのでプロフなどの文言を若干いじったりしている。本当に若干なのでわざわざ探さなくて大丈夫。
モーダル(ホーム右下のアバウト、更新履歴、連絡)の挙動が割と不安定で、どうしたものかなあ。でも手を加えるなら流石にJavaScriptを勉強しなきゃいけない予感……。そもそも公式で非推奨の使い方をしてるし、モーダルに拘らなければいいだけなんだけど。うーん。レイアウトももうちょっとなんとかしたい。画像にするとか。
「メモ」は星見の図鑑意識なのでハッシュタグを一番下にまとめているのですが、投稿が増えていくと下部にアクセスしづらい。やっぱり上部にもカテゴリを置くか？ それにボタンで最上部/最下部に移動できた方がいいんだけどなあ
テキストもまだ量が少なくて短文しか無いからいちいち<p>で括ってるけどこれを続けるのはだいぶ厳しい、と思ったらプレーンテキストをそのまんま流し込めるプロパティがあるらしくて、そうなるとcss書き換えて今載せてるテキストも全部修正しないと〜あ〜全然簡単だしやれば良いんだけど程よくめんどくさい〜〜
……みたいなことを考えはしつつ、まだエネルギー切れ。焦らずいきます畳む
この「メモ」は元々Twitterがダメになった時の避難場所にでも〜という感覚だったのだけれど、長文癖の自分にマッチしていてなおかつ手軽(ブラウザから更新できちゃう！)なので更新するのがすごく楽しいです。いいねを押してくれてる人がいるのも嬉しい……誰かが読みに来てくれているんだなあ……じーん
今は作りたてで色々気になるのでサイトのことばかり言ってるけどワーフリや
の話もしたいぞ。するぞ。ウキウキ！
#サイト
モーダル(ホーム右下のアバウト、更新履歴、連絡)の挙動が割と不安定で、どうしたものかなあ。でも手を加えるなら流石にJavaScriptを勉強しなきゃいけない予感……。そもそも公式で非推奨の使い方をしてるし、モーダルに拘らなければいいだけなんだけど。うーん。レイアウトももうちょっとなんとかしたい。画像にするとか。
「メモ」は星見の図鑑意識なのでハッシュタグを一番下にまとめているのですが、投稿が増えていくと下部にアクセスしづらい。やっぱり上部にもカテゴリを置くか？ それにボタンで最上部/最下部に移動できた方がいいんだけどなあ
テキストもまだ量が少なくて短文しか無いからいちいち<p>で括ってるけどこれを続けるのはだいぶ厳しい、と思ったらプレーンテキストをそのまんま流し込めるプロパティがあるらしくて、そうなるとcss書き換えて今載せてるテキストも全部修正しないと〜あ〜全然簡単だしやれば良いんだけど程よくめんどくさい〜〜
……みたいなことを考えはしつつ、まだエネルギー切れ。焦らずいきます
畳むこの「メモ」は元々Twitterがダメになった時の避難場所にでも〜という感覚だったのだけれど、長文癖の自分にマッチしていてなおかつ手軽(ブラウザから更新できちゃう！)なので更新するのがすごく楽しいです。いいねを押してくれてる人がいるのも嬉しい……誰かが読みに来てくれているんだなあ……じーん
今は作りたてで色々気になるのでサイトのことばかり言ってるけどワーフリや
の話もしたいぞ。するぞ。ウキウキ！#サイト
03/28＞フォームから返信不要のメッセージありがとうございました！💞
#お返事
カスタム絵文字を使ってみたくてドット絵を打ちました
GIFもある結構かわいいかも！ でもノリで打ったから使い道は……？
Asepriteで16x16サイズで打ってます。まだ不慣れですが本当にアニメーションが作りやすい！
以前はEDGEを使っていたのですが、EDGEはキャンバスに置いた色とパレットが紐づいてる（それが良い）けどAsepriteはあまりパレットに縛られていないというか、ペイントソフトに近い感覚で色選びができるので、ワーフリのドット絵に向いてるのかも～って気がしました。線の自動補正機能とかもあるらしい、今度使ってみよ。
#サイト #ドット絵
#お返事
カスタム絵文字を使ってみたくてドット絵を打ちました
GIFもある
結構かわいいかも！ でもノリで打ったから使い道は……？Asepriteで16x16サイズで打ってます。まだ不慣れですが本当にアニメーションが作りやすい！
以前はEDGEを使っていたのですが、EDGEはキャンバスに置いた色とパレットが紐づいてる（それが良い）けどAsepriteはあまりパレットに縛られていないというか、ペイントソフトに近い感覚で色選びができるので、ワーフリのドット絵に向いてるのかも～って気がしました。線の自動補正機能とかもあるらしい、今度使ってみよ。
#サイト #ドット絵
リーやんがロストと仲良くなっていてほしい気持ちと、ちょっとビビっていてほしい気持ちがあります
#絵