TICKETS HERE

information

シンプルな色合いの一体型トップページです。改変については多少慣れてる人向けです。

リンクと強調はこんな感じです。→ソースまでジャンプ

ちょっと図に乗ってフッターを設置してみました。邪魔にならないようでしたらfooterのdisplay:noneを削除して表示していただけると嬉しいです。※非表示のまま、htmlごと削除ももちろんOKです。

日本語見出し

見出しの文字サイズは英字フォント用に大きめに設定しています。日本語を使う場合はh2にNihongoのクラスを追加して文字サイズを調整してください。

about mobile design

モバイル用のナビゲーションは上から出現するバージョン（前のページで使用）と左から出現するバージョン（このページで使用）があります。広告が上部に表示されるサイト向けに二種類作成しました。

source&image

PC

ZIPファイルをダウンロード

head

body

<header> <div class="mainNav_wrap"> <nav class="mainNav_frame"> <div class="siteName"> <h1>サイト名</h1> <div class="siteInfo">こんなものを置いてます。詳しくはinfoをご覧ください。</div> </div>  <ul class="mainNav"> <li><a href="URL">info</a></li> <li><a href="URL">main</a></li> <li><a href="URL">log</a></li> <li><a href="URL">source</a></li> </ul> <a class="click"><div class="trigger">▼</div></a>  </nav> </div> </header>  <div class="wrap">  <main> <section id="info"> <h2>info</h2> <p>ここはこんなものを取り扱うこんなサイトです。作品にはこんな要素が含まれるので苦手な方は注意してください。</p> </section> <div class="novelList" id="main"> <h2>main contents</h2> <ul class="novelLong"> <li class="linkBox_1"> <a href=""> <div class="serialInfo"> <span class="serialTitle">タイトル１</span> <div><span>説明</span></div> </div> </a> </li> <li class="linkBox_2"> <a href=""> <div class="serialInfo"> <span class="serialTitle">ここの説明は</span> <div><span>長くなるとPC版で高さが違う分の空白ができるのでちょっと注意。<br> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span></div> </div> </a> <li class="linkBox_3"> <a href=""> <div class="serialInfo"> <span class="serialTitle">タイトル２</span> <div><span>説明</span></div> </div> </a> </li> <li class="linkBox_4"> <a href="URL"> <div class="serialInfo"> <span class="serialTitle">タイトル３</span> <div><span>説明</span></div> </div> </a> </li> </ul> </div> <section> <h2>sample</h2> <p><a href="">リンク</a>と<em>強調</em></p> <p><textarea>テキストボックス</textarea></p> <p><input type="submit" value="送信ボタン"></p> </section> </main>  </div>  <nav class="back"> <a href="">↑</a> </nav>   <footer> <p>designed by <a href="https://ragusnon.wwww.jp/">無糖</a></p> </footer>   <script> $(function() { $('.click').click(function() { $('.mainNav_wrap').toggleClass('active'); }); $('.mainNav a[href^="#"]').click(function() { $('.click').click(); }); }) </script>

nav

左から出現するバージョンを使用する際は上記モバイル用CSSの/*メニュー開閉*/内の項目を以下に差し替えてください。

/* メニュー開閉 */ .mainNav { display: flex; justify-content: center; align-items: center; position: fixed; left: -90vw; top: 0; padding: 0vw; width: 90vw; height: 15vmin; background: #2b3a7b; font-family: 'Teko', sans-serif; transition: 0.1s; z-index: 4; } .mainNav li { margin: 0 1em; } .mainNav li a { padding: 0.5em 0.5em; color: #ffffff; font-size: 1.5em; } .mainNav,.click,.trigger { transition: 0.5s; } .click { display: block; position: fixed; left: 0; top: 0; padding: 0 1em 0 1em; height: 15vmin; background: #2b3a7b; border-top-right-radius: 1em; border-bottom-right-radius: 1em; color: #ffffff; line-height: 15vmin; z-index: 4; } .trigger { width: 1em; transform: rotate(-90deg); } .active .click { position: fixed; left: 90vw; } .active .trigger { transform: rotate(90deg); } .active .mainNav { position: fixed; left: 0vw; top: 0; } /* /メニュー開閉 */

image

画像はこちらからお持ち帰りください。※縮小表示しています。

元画像をダウンロード（Unsplash）

ピース、ドーナツ

その他の画像（コスメ、空）はサイトから削除されてしまい、20年6月現在元画像のダウンロードができません。
こちらのページ（外部サイト・英語）下部の「Please note」によると継続使用自体は禁止されていないようですが、念のため加工前の画像の掲載は差し控えたいと思います。

about PC design

PC版はリンクボックスの背景色がA→B→B→Aの順で繰り返されるようになっています。