花シリーズSeries Title
ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。
ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。
ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。
ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。
ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。
<!--▼▼▼▼▼ここから「新作メニュー」--> <section class="logo-kazari padding-lr0" id="brand"> <div class="title-bg blur"> <h2><span class="tate order1">新作メニュー</span><span class="yoko">New Arrivals</span></h2> </div> <div class="list1 image1 up"> <div class="text"> <h3><span class="large">花</span>シリーズ<span>Series Title</span></h3> <p>(テキスト省略)</p> <p class="btn2"><a href="#">View More</a></p> </div> </div> <!--/.list1.image1--> <div class="list1 image2 up"> <div class="text reverse"> <h3><span class="large">鳥</span>シリーズ<span>Series Title</span></h3> <p>(テキスト省略)</p> <p class="btn2"><a href="#">View More</a></p> </div> </div> <!--/.list1.image2--> <div class="list1 image3 up"> <div class="text"> <h3><span class="large">風</span>シリーズ<span>Series Title</span></h3> <p>(テキスト省略)</p> <p class="btn2"><a href="#">View More</a></p> </div> </div> <!--/.list1.image3--> <div class="list1 image4 up"> <div class="text reverse"> <h3><span class="large">月</span>シリーズ<span>Series Title</span></h3> <p>(テキスト省略)</p> <p class="btn2"><a href="#">View More</a></p> </div> </div> <!--/.list1.image4--> </section> <!--▲▲▲▲▲ここまで「新作メニュー」-->
cssフォルダのstyle.cssから「list1」でテキスト検索してみて下さい。詳しい解説もあります。
メニューのリンク先の目印です。
メニュー側は、
<a href="#brand">新作メニュー</a>
などになっています。
トップページ以外からだと、別ページへのリンクになるのでindex.html#brandと書きます。
<section class="logo-kazari padding-lr0" id="brand">
のlogo-kazari部分で設定されています。これを省くと(<section class="padding-lr0" id="brand">)ロゴは出なくなります。
サイズなどの指定は、style.cssから「logo-kazari」でテキスト検索をかけてみて下さい。説明もあります。
<div class="title-bg blur">
<h2><span class="tate order1">新作メニュー</span><span class="yoko">New Arrivals</span></h2>
</div>
英語表記と縦書き見出しをセットにする場合は必ず外側を<div class="title-bg">で囲みます。
tateというのが縦書きのスタイル指示です。order1といういのは、日本語表記を英語の下にする為の指示です。日本語を先頭にしたいならorder1を削除すればOKです。
yokoは文字通り横向きのスタイルです。h2本体が縦書きになっているので、その中で横向きに戻す為にスタイルを指定しています。
blurはぼやけながら出現するスタイルです。汎用的にどこにでも使うことができます。
<div class="list1 image1 up">
<div class="text">
<h3><span class="large">花</span>シリーズ<span>Series Title</span></h3>
<p>(テキスト)</p>
<p class="btn2"><a href="#">View More</a></p>
</div>
</div>
上記コードは1つ目の「花」ボックスのコードですがこれで解説します。
list1がこのボックス本体のスタイルです。必ず入れて下さい。
image1は、背景画像の指定箇所です。4つのボックスそれぞれに別々の名前(image1〜image4)をつけています。
upは少し下からフェードインしてくるスタイルです。汎用的にどこにでも使うことができます。
textは文字を入れているボックスです。この中にテキスト情報は全て詰め込んで下さい。
h3は見出し。spanのlargeは大きな文字に、spanのみは見出し右上の小さな装飾文字になります。
btn2はボタンのスタイルです。
<div class="text reverse">
上記は2つ目と4つ目のボックスに追加されているスタイルです。
これがあるとテキストボックスの左右が逆になります。
全部同じ左側テキストがいいなら2つ目と4つ目のこのreverseスタイルを削除すればOK。お好みで使って下さい。