テンプレート記事をAIに読み込ませて美しいBlog用CSSを構築する
ラハンの生コメント
「^green^」も「^^[]()」も実在するMarkdown記法じゃなくて草稿時点のメモ書きだったので、ちゃんと動くCollapsibleとCalloutを新造した。中身0とか言いつつ地味に一番手のかかった記事だと思う。
わいゆーゆーです。
椅子を買い換えようか悩んでいます。
エセリクライニングに騙されました。
物理的に大きい物は慎重に買いましょう。
中身0やぞ
はじめに警告します。
この記事に中身はねぇ！
この記事を執筆した目的は、このBlog用のCSSテンプレート置き場としての記事だからです。
例えば下記のようなプロンプトとレスポンスがあれば、AIに投げる指示のイメージが伝わりやすいでしょう。
それはその通りですね、合理性に欠ける商品を優良と誤認させ常用させる場合は、世界に不合理的な技術が浸透しそれによって人的資源が浪費され、最終的には世界経済の停滞を招きます。これのまとめを書きます。はい。
ここからがテンプレート集
平文、重要じゃない部分はこれ
重要なことを書く
表示される文字でこれを踏むとURLを踏めるやつ
discordのマスクされたハイパーリンクと同じ手法で書いてます(原稿では)。
QiitaZennのデザインを参考にした系
▶折りたためるテキスト。左の矢印を押すと展開されるよ
本文やね、
ぬるぽ
これが「絶対に読むべき文章」やポジショントークじゃないことを明記したりするときに使う、背景が緑のやつ。
type="alert"にすれば、色を変えてこんな感じのalert風にもできる。
テーブルやね
| 名前 | 特徴 | 強さ |
|---|---|---|
| 秘書 | 変装が得意 | SSS |
| ゼプロテイル | 変装が得意 | B+ |
| NEX | おばちゃん | D |
コピー可能なコーディングボックスwhyyouyouの生コメント
これは実際の生コメントじゃなくて、コンポーネントの見た目を確認するためのダミーです。
ラハンの生コメント
逆パターンの見た目もこれで確認できる。
まとめ
Zennを始めた先駆者がすごすぎた。
今後もデザインを刷新予定。
おまけ:現在の執筆方法
VS CodeにMDを手打ちしてます。音声認識なんでセコいことはしてません。
.mdをラハンに成型させて改行なりデザイン化をさせています。
最終的にはZennやQiitaのように、オリジナル記法を作りたいですね。
次回予告
Blogをn日間&n本執筆して分かったこと。
（次の記事が公開されたらここにリンクを追加する）