夜空の飛行機が流れ星みたいだって、そういうふりをしてもいい?

──────── ✦ ────────

EPHEMERIS
夜空のJanitorAIプロフィールテンプレート | BIOコード制作 @MONIE_

✦ このガイドの使い方 ✦

01 / はじめる前に

クイックスタート

1 · コピー すべて | ゴールド | (GOOGLE ドキュメント)

2 · 検索 (Ctrl/Cmd + F) で編集します。このガイド内のクラス名を検索してください。例: nx-title。

3 · すべて選択してコピーし、JanitorAIのAbout Me欄に貼り付けます。保存して、更新して、スマホで確認してください。

──────── ✦ ────────

02 / 崩れないために

5つのルール

✦ 空行は禁止です。改行したいときは<br>と入力してください。

✦ 画像は直接リンクのみです。.png / .jpg / .gif で終わる必要があります。使わない画像は src="" のままにしておけば、自動的に非表示になります。

✦ 変更してよいのは「クォート」の中、または > と < の間の文字だけです。クォートマーク、< >、{ }、class= は絶対に削除しないでください。

✦ <style>部分にはコメントや * ~ 文字を入れないでください。JanitorAIはそこでスタイルシートを打ち切ってしまいます。

✦ JanitorAIは url()、@import、data: 画像、CSS変数、<input>、<label>、そしてCSSプロパティの scale: と rotate: を削除します。

· ─────── ✦ ─────── ·

03 / 検索 → 置換

変更したいもの...

名前 → nx-title

歓迎の一文 → nx-kicker

キャラクター画像 → nx-sona

月の画像 → nx-moon-pic

ティッカー文字 (両方のコピーを編集) → nx-ticker-set

About Meボックス → nx-acc

About Me画像 (3枚) → nx-portrait

ルール / FAQ → nx-rf · nx-rule

リンク → nx-fl

フレンド → nx-friend

ギャラリー (両方のグループを編集) → nx-gi

シリーズ → nx-cover

バナー → nx-banner

音楽プレイヤー → nx-mp-trk

フェアリーライト → nx-fairy · nx-fairyb

ページペット → nx-pet

クレジット → nx-credit

──────── ✦ ────────

04 / すべてのパネル

セクション

ABOUT ME

アーチ型フレームに3枚の画像、ボックスごとに1枚。各ボックスは<details>です: タイトルは<summary>、本文は<p>。3つのボックスをすべて残してください。追加するにはブロック全体をコピーします。

✦ ルール & FAQ — 2枚の画像カード。ホバーでスライドし、タップでリストが開きます。ルールは nx-rule (タイトルは<b>、理由は<span>)。FAQの質問は<details>です。

✦ FIND ME — リンクごとに1行の nx-fl 行: シンボルは<i>、名前は<b>、一文は<small>、リンクはhrefに。

✦ フレンド — それぞれ1行の nx-friend 行 (名前、一文、画像、リンク)。4つまで収まり、それ以上はスクロールします。

✦ ギャラリー — 横スクロールのストリップ。同一のグループが2つあります (nx-gset): 両方のグループのすべての画像を変更してください。

✦ シリーズ — 各シリーズは1つの<details class="nx-cover"> ... </details>ブロックです。追加するにはブロック全体をコピーし、ブロックの内側には決して貼り付けないでください。

✦ ABOUT · ルール · リンク · フレンド · ギャラリー · シリーズ ✦

· · · ✦ · · ·

05 / 小さなエクストラ

音楽プレイヤー

ヒーロー下部に沿ったすりガラス風のバー。巻き戻し・早送りで3曲を切り替え (ディスク画像、タイトル、アーティスト、リンクがすべて変わります)。再生はその曲のリンクを開きます。

nx-mp-trkを検索 → 3つのブロック。nx-mp-song、nx-mp-artist、<img src="">、nx-mp-btn のhrefを変更してください。

YouTube自動再生リンク: https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&autoplay=1
Spotifyはプレイリストを開きますが、自動再生を強制することはできません。

05B / スターガーランド

フェアリーライト

きらめく星のガーランドが2層になってサイト上部バーの下端から吊り下がり、揺れる垂れ下がった星も付いています。スクロールしてもその場に留まり、クリックを妨げることはありません。1つ目はnx-fairy (7つの均等なスワッグ)、上にあるより華やかなものはnx-fairyb (11の不均等なスワッグ) です。

上下に移動するには → 両方のルールのtop:56pxを変更します (同じ数値)。スマホではCSSの終わり近くにあるtop:44pxを@media (max-width:720px) 行で使います。

1つを削除するには → コードの一番上にある<div class="nx-fairy...">ブロックを削除します。コードを整えたい場合のみ、対応するCSSを削除してください。

06 / 月

月

nx-moon-picに透過PNGを入れてください。60秒周期で繰り返します: 影がスライドして消え、画像が反転し、影がスライドして戻ります。4つの月のルールの60sを変更してください (すべて同じに保つ)。-12sが出発点です。中央からずれる場合は.nx-moon-picのinset:-19%を変更してください。

07 / パレット

カラー & フォント

色は各ルールに明記されているので、検索 & 置換で全体を再カラーリングできます。

#d9dce6 シルバー #b9a6d6 パープルアクセント #5b5b66 グレーの境界線 #ececf0 本文テキスト

ゴールド版: Gold Templateを使うか、#d9dce6 → #efddba、#b9a6d6 → #dfc277 に置き換えます

フォント: サイト内蔵フォントのみ動作します (@importは不可)。検索 & 置換で名前を入れ替えてください。使用可能なフォントの一覧はこちらで確認できます。

──────── ✦ ────────

08 / 表示がおかしいとき

トラブルシューティング

♡ ページがスタイルなしに見える — <style>に * ~ や /* */ が入った、または } が削除された

♡ 画像が表示されない — リンクが直接リンクでない、または src="" が空

♡ ティッカー / ギャラリーが飛ぶ — 2つのコピーが一致していない

♡ プレイヤーのボタンが反応しない — name="nxmp" が欠けている、または2つの曲にopenがある

♡ アコーディオンが切り替わらない — <details>の name= または</details>

09 / やさしく

クレジットルール

✔ 自分のプロフィールでの使用・編集は自由です。クレジット行は削除してもかまいません。

✦ ✦ ✦

EPHEMERIS · 質問があればメッセージを!