kaguyadepth のウェブサイトは 2021 年から静的サイトジェネレーター 「Catalpa」 で作っていますが、 2025 年 1 月 23 日に公開された Version 2.0.7 からサイト内のサブディレクトリにブログを配置できるようになりました。
kaguyadepth では 2017 年からはてなブログ、 2020 年から note を利用してきましたが、 今後は外部ブログを利用しないで、 サイト内ブログに日記などを書いていくことにしました。今後ともよろしくお願いいたします。
ブログの設置方法
blog フォルダに type: blog を定義した設定ファイル （config.yml） を配置することでブログが使えるようになります。
blog フォルダを作っただけでは blog フォルダにアクセスしても Not Found になってしまうけど、 記事 URL には直接アクセスすることができて、 そこからカテゴリ一覧は表示できているので、 どうやったら blog フォルダにアクセスできるようになるんだろう？ と小一時間苦戦しました。
記事のサムネイルは横長 （16:10） で 480×300px や 928×580px の画像を用意します。
段組み用クラスの使い方
2025 年 2 月 1 日に公開された Version 2.0.8 から markdown.css に段組み用のクラス column-2, column-3, column-4 が追加されました。
<div class="column-2"><div>
アイテム1
</div><div>
アイテム2
</div></div>
このように記述するとアイテム 1 とアイテム 2 が横並びになります。
kaguyadepth では 2024 年 6 月 12 日に Version 0.9.3 に移行してサイトリニューアルした時から ASCII.jp のソースを参考に次のような CSS Grid を使っていました。
ASCII.jp ： CSS Grid と Flexbox で驚くほど簡単にレスポンシブレイアウトを実装する方法
.cssgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 2em;
}
.cssgrid > div {
overflow: auto;
min-width: 0;
}
これと段組み用のクラスが全く同じ使い方だったので私はすんなり移行できたのですが、 Markdown の中に直接 HTML を記述することになるので、 使い方がわからないと思われた方も多いかもしれません。
ASCII.jp のソースは空の div 要素が 2 つだと 2 段組みに、 3 つだと自動的に 3 段組みになるのですが、 スマホの画面を回転させたときに無駄な余白が生じやすいという欠点がありました。
ASCII.jp と Catalpa ではブレイクポイントが違うので全く同じ挙動にはなりませんが、 無駄な余白が生じにくく使いやすくなっていると感じました。
