一通りサイトができました

2024-10-20

やったー!

丸2日くらいかけてこのサイトを作りました。
もともとは制作中のタロットカードを一覧で見られる場所が欲しかったというのが動機です。
最初はNotionに掲載していたんですが、サムネイルを縦長に表示することがどうやらできなさそうだったので、全部自分でカスタマイズできる個人サイトにしちゃえという運びになりました。

最近に限らないですがSNSは規約がどうのとかで移動するのしないのとなんだか息苦しいということもあり、こういうスタイルであれば最悪置く場所がなくなってもそのまま移転できて楽ですし、最悪自分でサーバー立てちゃえばいいので。

追加したいものを追加したいように追加でき、形式が一切ない……なんと素晴らしいのでしょう。
htmlもcssもほとんどベタ打ちしております。一応Jekyllという静的サイトジェネレータは使用していますが。

作成し始めた当初はいわゆるポートフォリオサイトを目指していましたが、趣味のTRPGの立ち絵を掲載しようと思ってキャラ説明をコピペし始めたあたりで、「これは本当に趣味の個人サイトになってしまうな」と諦めました。
ポートフォリオサイトを名乗るのであればもっとビジネスライクにやるべきだと思いますが、あまり向いていないようです。

一応色合いなどはこだわっておりまして、なるべくタロットカードの方でも意識して頻繁に使用している色を使いました。
青系統の暗い色、明るくて発色のいいオレンジ。そして明るいクリーム色。
バンド・デシネというフランスの続き物漫画のアートスタイルが好きで、画風にもそれを反映しているのですが、このサイトの色使いもなんとなくそれに近づけています。

Jekyllを使用することで部品の再利用も簡単、そしてブログ記事をズラッと並べるのも簡単のようだったので、ならばと思い日記をつけてみました。
noteもまた別でやっているので役割がやや被っています。こっちが全然更新されないかnoteを徐々にやめていくかどっちかでしょうね。
Fanboxの方は絵の進捗に絞っているので被りません。大丈夫です。

サイトの作成にあたってはChatGPTの支援を多分に受けました。
本当に知識のない人間が利用しても多分めちゃくちゃになるだろうな~という感じではありつつ(何度かお願いしていくうちに前の方の記述がコードから消えてしまったり、命名が場当たり的なので衝突したり、筋の悪い実装だったりする)、文脈に沿った実例を出してくれるおかげで普通に読める人ならめっちゃ簡単になりますね。

しばらく見ないうちにhtmlもcssも随分様変わりしていて驚きました。なんですかflexって? 最後に触ったときにはそんな方法でレイアウトしてなかったような気がします。
以前はもっとレイアウトの調整が大変だったように思うんですが、flexのおかげかかなり簡単にレイアウトできました。

そのうちTRPGのPCの詳細記事みたいなのも作りたいですね。
Works……ではない気がするので、Othersとか作って雑多なものはそこに突っ込んじゃうか。
Worksの一番下にラクガキとか上げる場所作ってもいいですね。本当にひたすらダラ~っと落書きを並べるページ。

Liquidを使って簡便に記述できるっぽいのでメモしておきます。

    <ul class="image-gallery">
    {% assign images = site.static_files | where: "path", "{{ site.baseurl }}/assets/rakugaki" %}
    {% for image in images %}
        <li>
        <img src="{{ image.path }}" alt="{{ image.name }}">
        </li>
    {% endfor %}
    </ul>

後日落書きをざっと投げたくなったらこれを使います。

ところで最近抹茶にハマっておりまして、毎日1服は点てています。
一度友人に点ててもらったのがきっかけなんですが、コーヒー的なものが飲みたいけど優しい味がほしいときにぴったりですね。
作法的なところは一人なのであまり考えずカジュアルにやっています。道具は大事にしますけどね。

最小限茶筅と手頃な器さえあれば点てられるので、やってみてはいかがでしょうか。おすすめです。

P.S. なんかiPhoneから見た時にタロットの拡大表示がデカすぎて崩れてるので直します。日記ページの横幅も狭すぎなので直します。

追記の追記: 対応しました。