　不可視生物学園

　InvisibleBeasts-Academy

学生証

学籍番号　X0000USER
氏名　不可視ふかし　太郎たろう
生年月日　■■■■年　X月XX日
有効期限　■■■■年　3月31日

この者は本学の学生であることを証明する。

不可視生物学園学長

性別　XX	クラス　0-X	元生物
身長　xxxcm	部活動　XXX	元生物の名前/URL
体重　000kg	委員会　XXX	好きなもの　XX

備考

このような学生証を作るフォーマットと使い方を説明します

※注意事項　基本的にPC表示が前提であり、スマホ上では正しく表示されません。

Step１　必要なもの

①ページのコード(ページ末尾「付録」に添付)
②カスタムCSS(ページ末尾「付録」に添付)
③カスタムJS(ページ末尾「付録」に添付)
④新しい記事ページ
⑤顔写真（あれば）
⑥バーコード（あれば）

Step2　必要なもののコピペ

①～③をコピペします。

①ページのコード
　右上の三点リーダから「コードエディター」を開き、
「テキストまたはHTMLを入力して開始」
という位置にコピペします。

②カスタムCSS

メタボックス内からカスタムCSSの項目にコピペします。(環境によって位置が多少異なる場合があります）

②カスタムJavaScript

同じくメタボックス内からカスタムJavaScriptの項目にコピペします。(環境によって位置が多少異なる場合があります）

Step３　要らないものの除去

メタボックス内のタイトル～目次を表示しない　にチェックをつけます。

Step４　必要事項の記入

右上の三点リーダからビジュアルエディターに戻し、下書きを確認しながら必要事項や顔写真を設定していきます。

Step５　下部バーの微調整

おそらく顔写真や備考を記入することで下部のラインを構成している見出しブロックの位置がずれると思うので、青色の見出し2つに対してブロックからマージンやパディングを調整する。
マージンは帯の大きさ、パディングは上下位置が変化する。
もしそれでも空間が余る場合は適当に空白や改行を入れた段落を挟んで隙間を埋めてください。

Step６　付録

ページのコード

<!-- wp:group {"className":"flip-container","layout":{"type":"constrained"}} -->
<div class="wp-block-group flip-container"><!-- wp:group {"className":"flip-inner","layout":{"type":"constrained"}} -->
<div class="wp-block-group flip-inner"><!-- wp:group {"className":"flip-front flip","layout":{"type":"constrained"}} -->
<div class="wp-block-group flip-front flip"><!-- wp:columns {"className":"equal-columns","style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns equal-columns" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"verticalAlignment":"stretch","width":"77%","className":"head","style":{"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"}},"spacing":{"blockGap":"0","padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
<div class="wp-block-column is-vertically-aligned-stretch head" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);flex-basis:77%"><!-- wp:heading {"level":1,"align":"full","className":"head"} -->
<h1 class="wp-block-heading alignfull head">　<span class="fz-24px">不可視生物学園</span></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"head"} -->
<p class="head">　<span class="fz-14px">InvisibleBeasts-Academy</span></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"3%","className":"equal-height"} -->
<div class="wp-block-column is-vertically-aligned-stretch equal-height" style="flex-basis:3%"></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"20%","className":"head","style":{"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-stretch head" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;flex-basis:20%"><!-- wp:heading {"level":1,"align":"full","className":"head","style":{"typography":{"textAlign":"center"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<h1 class="wp-block-heading has-text-align-center alignfull head" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"><span class="fz-24px">学生証</span></h1>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"40%","style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);flex-basis:40%"><!-- wp:image {"id":400,"sizeSlug":"medium","linkDestination":"none","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"anchor":"image"} -->
<figure class="wp-block-image size-medium" id="image" style="margin-top:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--40)"><img src="https://invisible-beasts.com/wp-content/uploads/2026/02/チャンネルアイコン-300x300.jpg" alt="" class="wp-image-400"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":20584,"width":"150px","height":"auto","aspectRatio":"2.8906732278516536","sizeSlug":"full","linkDestination":"none","style":{"spacing":{"margin":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}}}} -->
<figure class="wp-block-image size-full is-resized" style="margin-right:var(--wp--preset--spacing--60);margin-left:var(--wp--preset--spacing--60)"><img src="https://invisible-beasts.com/wp-content/uploads/2026/08/2602190000563.png" alt="" class="wp-image-20584" style="aspect-ratio:2.8906732278516536;width:150px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"55%","style":{"spacing":{"blockGap":"0","padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-bottom:0;flex-basis:55%"><!-- wp:paragraph {"className":"target-block2","style":{"typography":{"textAlign":"left"}}} -->
<p class="has-text-align-left target-block2"><span class="fz-18px">学籍番号</span>　<span class="fz-32px"><ruby><span class="fz-18px">X0000</span></ruby></span>USER<br><span class="fz-24px">氏名</span>　<span class="fz-32px"><ruby>不可視<rt>ふかし</rt></ruby>　<ruby>太郎<rt>たろう</rt></ruby></span><br><span class="fz-18px">生年月日</span>　<span class="fz-32px"><ruby><span class="fz-18px"><span class="fz-32px"><ruby><span class="fz-18px">■■</span></ruby></span>■■年　X月XX日</span></ruby></span><br>有効期限　<span class="fz-32px"><ruby><span class="fz-18px"><span class="fz-32px"><ruby><span class="fz-18px">■■</span></ruby></span>■■年　3月31日</span></ruby></span></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":20602,"sizeSlug":"full","linkDestination":"none","className":"overlay-image2"} -->
<figure class="wp-block-image size-full overlay-image2"><img src="https://invisible-beasts.com/wp-content/uploads/2026/08/校章.png" alt="" class="wp-image-20602" title=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"left"}}} -->
<p class="has-text-align-left">この者は本学の学生であることを証明する。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"className":"target-block","style":{"typography":{"textAlign":"left"}}} -->
<h1 class="wp-block-heading has-text-align-left target-block"><span class="fz-32px">不可視生物学園学長</span></h1>
<!-- /wp:heading -->

<!-- wp:image {"id":20564,"sizeSlug":"thumbnail","linkDestination":"none","className":"overlay-image"} -->
<figure class="wp-block-image size-thumbnail overlay-image"><img src="https://invisible-beasts.com/wp-content/uploads/2026/08/学校印-150x150.png" alt="" class="wp-image-20564"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"5%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:5%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"align":"full","style":{"color":{"background":"#4b6584"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"},"margin":{"top":"var:preset|spacing|70","bottom":"0"}}}} -->
<h2 class="wp-block-heading alignfull has-background" style="background-color:#4b6584;margin-top:var(--wp--preset--spacing--70);margin-bottom:0;padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"></h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"flip-back flip","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group flip-back flip" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"extraBottomMargin":"0"} -->
<div class="wp-block-columns is-style-bottom-margin-0em has-bottom-margin"><!-- wp:column {"width":"3%"} -->
<div class="wp-block-column" style="flex-basis:3%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"97%"} -->
<div class="wp-block-column" style="flex-basis:97%"><!-- wp:image {"id":20624,"width":"73px","height":"auto","aspectRatio":"1.5625753096831307","sizeSlug":"thumbnail","linkDestination":"none","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"0","right":"0"}}}} -->
<figure class="wp-block-image size-thumbnail is-resized" style="margin-top:var(--wp--preset--spacing--30);margin-right:0;margin-bottom:var(--wp--preset--spacing--30);margin-left:0"><img src="https://invisible-beasts.com/wp-content/uploads/2026/08/L_triangle-150x96.png" alt="" class="wp-image-20624" style="aspect-ratio:1.5625753096831307;width:73px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:table {"extraBottomMargin":"0","className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular is-style-bottom-margin-0em has-bottom-margin"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center">性別　XX</td><td class="has-text-align-center" data-align="center">クラス　0-X</td><td class="has-text-align-center" data-align="center">元生物</td></tr><tr><td class="has-text-align-center" data-align="center">身長　xxxcm</td><td class="has-text-align-center" data-align="center">部活動　XXX</td><td class="has-text-align-center" data-align="center">元生物の名前/URL</td></tr><tr><td class="has-text-align-center" data-align="center">体重　000kg</td><td class="has-text-align-center" data-align="center">委員会　XXX</td><td class="has-text-align-center" data-align="center">好きなもの　XX</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading {"level":1,"extraBottomMargin":"0","style":{"typography":{"textAlign":"center"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<h1 class="wp-block-heading has-text-align-center is-style-bottom-margin-0em has-bottom-margin" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)">備考</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"extraBottomMargin":"0","className":"remarks","style":{"typography":{"textAlign":"left"}}} -->
<p class="has-text-align-left remarks is-style-bottom-margin-0em has-bottom-margin">　<br>　<br>　<br>　</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"align":"full","style":{"color":{"background":"#4b6584"},"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}}}} -->
<h2 class="wp-block-heading alignfull has-background" style="background-color:#4b6584;margin-top:var(--wp--preset--spacing--50);margin-bottom:0"></h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

カスタムCSS

.flip-container {
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.flip-inner {
    position: relative;
    width: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.flip-container.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-back {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
}

.flip {
    background-color: white;
    width: 100%;
    aspect-ratio: 85.6 / 54;

    border: 4px solid #4b6584;
    border-radius: 64px;

    box-sizing: border-box;
    overflow: hidden;
}

.head{
    background-color: #4b6584;
    color: white;
    align-items: center;
}

.target-block {
    position: relative;
}

.overlay-image {
    position: absolute;
    right: 130px;
    bottom: 80px;

    width: 100px;
    height: auto;

    z-index: 0;
}

.target-block2 {
    position: relative;
}

.overlay-image2 {
    position: absolute;
    right: 10px;
    bottom: -80px;

    width: 70%;
    height: auto;

    opacity: 0.1;

    z-index: 0;
}

.remarks {
    line-height: 2;
    background-image: linear-gradient(
        to bottom,
        transparent calc(100% - 1px),
        #ddd calc(100% - 1px)
    );
    background-size: 100% 2em;
}

カスタムJavaScript

document.querySelectorAll('.flip-container').forEach(container => {
    container.addEventListener('click', () => {
        container.classList.toggle('flipped');
    });
});

不可視生物学園学生証フォーマット

不可視生物学園

学生証

不可視生物学園学長

備考

このような学生証を作るフォーマットと使い方を説明します

Step１　必要なもの

Step2　必要なもののコピペ

Step３　要らないものの除去

Step４　必要事項の記入

Step５　下部バーの微調整

Step６　付録

コメント

不可視生物学園

学生証

不可視生物学園学長

備考

このような学生証を作るフォーマットと使い方を説明します

Step１ 必要なもの

Step2 必要なもののコピペ

Step３ 要らないものの除去

Step４ 必要事項の記入

Step５ 下部バーの微調整

Step６ 付録

コメント

　不可視生物学園

Step１　必要なもの

Step2　必要なもののコピペ

Step３　要らないものの除去

Step４　必要事項の記入

Step５　下部バーの微調整

Step６　付録