配布ページ！！

↓HEAD編集にコピペしてね↓
<style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Zen+Kaku+Gothic+New&family=Yomogi&display=swap'); *,::after,::before{box-sizing:border-box} *{margin: 0; padding: 0;} ol,ul{list-style:none} img{max-width:100%} table{border-collapse:collapse} textarea{white-space:revert} :root{ --one-color: #d3d3d3; /* 一人目カラー */ --two-color: #000000; /* 二人目カラー */ } body{ background-image: radial-gradient( var(--one-color) 2px, transparent 2px), radial-gradient( var(--two-color) 2px, #ffffff 2px); background-size: 40px 40px; background-position: 0 0,20px 20px; background-color: #fff; font-family: 'Quicksand','Zen Kaku Gothic New', sans-serif; font-size:0.85em; line-height:1.5; margin: 0; padding: 0; } a{ text-decoration:none; color: #999; } .wrp{ background: #fff; width: 90%; max-width: 600px; margin: 0 auto 10px; padding: 10px; } header{ background: #fff; font-family: 'Yomogi'; font-size:2.2em; text-align: center ; font-weight: bold; height: 150px; margin: 30px auto; padding: 15px; } .hitorime{ color: var(--one-color); } .hutarime{ color: var(--two-color); } .hitorime, .hutarime{ display: inline-block; position: relative; width: 100px; height: 100px; } .hitorime::before, .hutarime::before { content: ""; position: absolute; display: inline-block; background-image: url(); top: 0; left: 0; width: 100px; height: 100px; } .hitorime::after, .hutarime::after { content: "Talk!"; position: absolute; display: inline-block; top: 45px; left: 0; width: 100px; height: 100px; } .cross { position: relative; display: inline-block; width: 100px; height: 2px; background: #333; transform: rotate(45deg); vertical-align: middle; margin-top: -60px; } .cross::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; transform: rotate(90deg); } hr { height: 8px; border: none; border-top: dotted 2px #000; margin:30px auto; } h1{ font-family: 'Yomogi'; font-size:1.5em; color: #000; text-shadow: 2px 2px 0px #fff, 4px 4px 0px var(--main-color); font-weight:400;} header a { background: var(--main-color); color: #000; box-shadow: 0px 0px 0px 3px var(--main-color); border: dashed 1px #fff; margin: 10px; padding: 0.2em 0.5em; width: 100px; } h3{ font-family: 'Yomogi'; font-size:1.2em; } h2{ font-family: 'Quicksand','Zen Kaku Gothic New', sans-serif; font-size:1.2em; } h2::before, h2::after{ content: '×××'; } .waku { position: relative; margin: 2em auto; padding: 1.2em; width: 90%; border: 2px solid #999; background-color: #fff; border-radius: 8px; } .waku-name { position: absolute; left: 20px; top: -15px; padding: 0 .5em; font-weight: bold; font-size: 1.1em; color: #333; background-color: #fff; } p{ margin: 10px 5px; } .right{ text-align: right; font-size: 0.7em; } footer{ font-family: 'Yomogi'; text-align: center ; margin: 50px auto 20px; } input, textarea { width: 85%; border: solid 1px #333; background: #fff; padding: 2px; } </style>

↓ページ編集にコピペしてね↓
<header> <span class="hitorime"></span><span class="cross"></span><span class="hutarime"></span> </header> <div class="wrp"> <h2>Information</h2> <p>ろくがつのいべんとはー！？対談いべんとー！！<br> あーでこーでそーなイベントです。<br> たくさんしゃべりましょう！</p> <h2>Scedule</h2> <p><b>～7月14日</b>　願い事募集</p> <p><b>7月15日</b>　願い事一覧発表<br> 皆さんから届いた願い事を一覧にして発表します</p> <p><b>7月15日～7月17日 </b>　叶えられる願い事選択<br> 願い事一覧から自分が叶えられそうなものを選び管理DMまでご連絡ください。叶えられそうなものは複数選んで頂けると助かります。</p> <p><b>7月18日</b>　叶えてもらう願い事連絡<br> どの願い事を叶えて頂くかをDMにてご連絡します</p> <p><b>～7月30日</b>　願い事を叶えましょう<br> どのタイミングでも構いません、叶える相手のDMにて願い事を叶えてあげましょう。もしも期間中に願い事が叶わなかった！と言う場合は管理DMまでご連絡ください。</p> <h2>Attention</h2> <p>注意事項とかその他もろもろ。</p> <p>注意事項とかその他もろもろ。</p> <footer> <a href="戻り先URL">Back</a> </footer> </div>

ここから下は確認用！！

Information

ろくがつのいべんとはー！？対談いべんとー！！
あーでこーでそーなイベントです。
たくさんしゃべりましょう！

Scedule

～7月14日　願い事募集

7月15日　願い事一覧発表
皆さんから届いた願い事を一覧にして発表します

7月15日～7月17日 　叶えられる願い事選択
願い事一覧から自分が叶えられそうなものを選び管理DMまでご連絡ください。叶えられそうなものは複数選んで頂けると助かります。

7月18日　叶えてもらう願い事連絡
どの願い事を叶えて頂くかをDMにてご連絡します

～7月30日　願い事を叶えましょう
どのタイミングでも構いません、叶える相手のDMにて願い事を叶えてあげましょう。もしも期間中に願い事が叶わなかった！と言う場合は管理DMまでご連絡ください。

Attention

注意事項とかその他もろもろ。