イラストのページを作った
このサイトを立ち上げた当初と比べ、大分単純化とシステム化をした。具体的には、機能やコンテンツ、コード上の無駄を削除し、HTMLをテンプレート化してスマホから更新するのも余裕にしている。
生まれた余裕で、シンプルなイラスト羅列ページを作った。大枠はこのブログページと同じである。
コンテンツを縦横何列に並べる（display: grid;）という設定があって、絵を横２行とか３行で並べている。この設定めっちゃ便利〜デザインのいいサイトとかでこれが使われていたので、使い方を調べてやった。
サムネイル画像ファイルの作り方ですが、
iPhoneの写真アプリで5:7の横位置にして
Procreate（イラスト描くアプリ）で縮小し
ファイルというiPhone純正アプリで「〇〇.png」みたいなわかりやすい名前に名称変更することで均一なものをiPadで作ります。
記事ページは見た目は同じだけど、イラストの方は画像をクリックすると大きいサイズの画像が閲覧できるようになっている。
デザインをほぼ同じにしてるので、ちょっとデザイン修正しようと思ったときに一括変更が楽です。
ブログとイラストで背景色が違う理由
最近お気に入りの写真を何枚かプリントアウトしてノートに貼ってみたのですが、ピンクと水色を同時に含んだ画像が多かったんです。ピンクと水色の組み合わせを嗜好しているという自覚がなかったので新たな発見でした。試しに自分のサイトにこれらの色を配色しています。
かんたんHTML
ときどきHTMLはPCがないと更新が大変っていう話を目にしますが、それほどでもないです。簡潔に私の更新手順を書きます。
- 記事ページなど、更新したいページのテンプレートをNotion（多機能メモアプリ）とかに作っておく
- そのテンプレートで記事ページを書く
- ファイルをサーバー（GitHub）にアップロードするときに「〇〇.html」って名前を付ける
Notionには記事ページのHTMLをコピペし、編集すべき部分を「赤い#」にしたテンプレートを作った。
こんな感じです。HTMLはいいぞ。NotionもGitHubもいいぞ。
サーバーのセキュリティとか、詳しい部分は知りません。利便性の話であります。