灰色の枠の中はコードです。これを記事に貼り付けると、
<strong class="r_l">直下のピンク枠のように表示されます。</strong>
灰色の枠の中はコードです。これを記事に貼り付けると、
直下のピンク枠のように表示されます。
shop.eqbo.jpのテーマ オリジナルのcss (main.css) 記事で使うものだけ抜粋
hタグの装飾
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h3 class="subtitle" style="width:100%;"><span>h3.subtitle>span width:100%;</span></h3>
<h1 class="deco00">h1.deco00</h1>
<h2 class="deco01">h2.deco01</h2>
<h3 class="deco02">h3.deco02</h3>
<h4 class="deco03">h4.deco03</h4>
<h5 class="deco04">h5.deco04</h5>
<h5 class="deco05">h5.deco05</h5>
h1
h2
h3
h4
h5
h3.subtitle>span width:100%;
h1.deco00
h2.deco01
h3.deco02
h4.deco03
h5.deco04
h5.deco05
※ これらのクラスはh1-h5全てに使用できるが、文字の大きさは統一されてしまう
span
<span>span (no class)</span>
<span class="l_k">span.l_k</span> <span class="l_b">span.l_b</span>
<br> <span class="l_g">span.l_g</span> <span class="l_r">span.l_r</span>
<br> <span class="n_k">span.n_k</span> <span class="n_b">span.n_b</span>
<br> <span class="n_g">span.n_g</span> <span class="n_r">span.n_r</span> <span class="n_o">span.n_o</span>
<br> <span class="s_k">span.s_k</span> <span class="s_b">span.s_b</span>
<br> <span class="s_g">span.s_g</span> <span class="s_r">span.s_r</span> <span class="s_o">span.s_o</span>
span (no class)
span.l_k span.l_b
span.l_g span.l_r
span.n_k span.n_b
span.n_g span.n_r span.n_o
span.s_k span.s_b
span.s_g span.s_r span.s_o
b
<b class="b">b.b :#0068b7</b>
<br> <b class="n">b.n :#00a1e9</b>
<br> <b class="g">b.g :#69821b</b>
<br> <b class="r">b.r :#c9171e</b>
<br> <b class="o">b.o :#abb1b5</b>
<br> <strong class="r">strong.r</strong>
b.b :#0068b7
b.n :#00a1e9
b.g :#69821b
b.r :#c9171e
b.o :#abb1b5
strong.r
※ これらはbタグの代わりに、strongタグでも利用できる。
<b class="k_l">b.k_l :#333333</b>
<br> <b class="b_l">b.b_l :#0068b7</b>
<br> <b class="n_l">b.n_l :#00a1e9</b>
<br> <b class="g_l">b.g_l :#69821b</b>
<br> <b class="r_l">b.r_l :#c9171e</b>
<br> <b class="o_l">b.o_l :#abb1b5</b>
<br> <strong class="r_l">strong.r_l</strong>
b.k_l :#333333
b.b_l :#0068b7
b.n_l :#00a1e9
b.g_l :#69821b
b.r_l :#c9171e
b.o_l :#abb1b5
strong.r_l
※ これらはbタグの代わりに、strongタグでも利用できる。
p
<p class="b">p.b</p>
<p class="n">p.n</p>
<p class="g">p.g</p>
p.b
p.n
p.g
※ マウスオーバーで装飾が変わる
記事内で使用する全画面画像(1440pxを720pxにする)
<span class="l_b">↓「メディアの追加」から、フルサイズで1440pxを埋め込んだデフォルトの状態</span>
<img src="http://shop.eqbo.jp/wp-content/uploads/2018/06/css_img_sample.jpg" alt="" width="1440" height="778" class="aligncenter size-full wp-image-29179" />
<br><br>
<span class="l_r">↓上記タグを加工し、このサイトの横幅いっぱいに合わせるクラスを指定した状態</span>
<div class="img-720x2"><img src="http://shop.eqbo.jp/wp-content/uploads/2018/06/css_img_sample.jpg" class="" /></div>
↓「メディアの追加」から、フルサイズで1440pxを埋め込んだデフォルトの状態
↓上記タグを加工し、このサイトの横幅いっぱいに合わせるクラスを指定した状態
dl
<dl>
<dt>dt.dl01</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体+ランプ)</dd>
</dl>
<dl class="dl01">
<dt>dt.dl01</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体+ランプ)</dd>
</dl>
<dl class="dl02">
<dt>dt.dl02</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体+ランプ)</dd>
</dl>
- dt.dl01
- 幅32cm、奥行32cm、全高38cm
- 総重量
- 約 5kg (本体+ランプ)
- dt.dl01
- 幅32cm、奥行32cm、全高38cm
- 総重量
- 約 5kg (本体+ランプ)
- dt.dl02
- 幅32cm、奥行32cm、全高38cm
- 総重量
- 約 5kg (本体+ランプ)
ol
<ol>
<li>ol</li>
<li>テスト</li>
</ol>
<ol class="nm01">
<li>ol.nm01</li>
<li>テスト</li>
</ol>
ul
<ul>
<li>ul</li>
<li>テスト</li>
</ul>
<ul class="blg">
<li>ul.blg</li>
<li>テスト</li>
</ul>
table
<table>
<tbody>
<tr>
<th>素</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>素</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl001">
<tbody>
<tr>
<th>tbl001</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl001</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl002">
<tbody>
<tr>
<th>tbl002</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl002</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl003">
<tbody>
<tr>
<th>tbl003</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl003</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl004">
<tbody>
<tr>
<th>tbl004</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl004</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
tbl001 |
見出し |
見出し |
tbl001 |
内容 |
内容 |
tbl002 |
見出し |
見出し |
tbl002 |
内容 |
内容 |
tbl003 |
見出し |
見出し |
tbl003 |
内容 |
内容 |
tbl004 |
見出し |
見出し |
tbl004 |
内容 |
内容 |
liner
p.liner_s
<p class="liner_s"> </p>
p.liner_d
<p class="liner_d"> </p>
p.liner_w
<p class="liner_w"> </p>
p.liner_s
<p class="liner_g"> </p>
hr
<hr>
hr.liner_s
<hr class="liner_s">
hr.liner_d
<hr class="liner_d">
hr.liner_w
<hr class="liner_w">
hr.liner_g
<hr class="liner_g">
p.liner_s
p.liner_d
p.liner_w
p.liner_g
hr
hr.liner_s
hr.liner_d
hr.liner_w
hr.liner_g
申し込み系ボタン
<div class="button-contact">
<a class="pure-button pure-button-goto" href="#"><i class="fa fa-envelope"></i> div.button-contact>a.pure-button.pure-button-goto </a>
</div>
注文フォームに移動するボタン(cssではないが、各注文フォーム入り口のリンクで使用)
<h5 class="deco03"><a name="buy"></a>
<span>購入方法--例ではブレスライトのフォーム(order_blyg.html)に移動</span>
</h5>
[order_link pdname="order_blyg"]
<br class="clr">
購入方法–例ではブレスライト注文フォーム(order_blyg.html)に移動
CSSライブラリ pure css
公式サイト・詳細なサマリーは こちら(英語)
日本語紹介記事:Yahoo Pure を使ってみる
ボタン
<a class="pure-button" href="#">a.pure-button</a>
<button class="pure-button">button.pure-button</button>
<br>
<a class="pure-button pure-button-primary" href="#">a.pure-button.pure-button-primary</a>
<a class="pure-button" href="#" style="font-size:150%;">フォントサイズで大きいボタンも作成可能</a>
a.pure-button
a.pure-button.pure-button-primary
フォントサイズで大きいボタンも作成可能
隠したいものをかんたんに隠す(応募フォームの受付期間外に多用していた)
<div class="button-contact">
<a class="pure-button pure-button-goto" href="#"> 見えている </a>
<a class="pure-button pure-button-goto" href="#" hidden> 見えない </a>
</div>
グリッドレイアウト(divの箱を並べてレイアウトを決める)
<style>
.pure-g div{text-align: center; background-color: seashell;}
</style>
<div class="pure-g">
<div class="pure-u-1-3"><p>1/3 3等分</p></div>
<div class="pure-u-1-3"><p>1/3 3等分</p></div>
<div class="pure-u-1-3"><p>1/3 3等分</p></div>
</div>
<br>
<div class="pure-g">
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-3"><p>2/6 6等分*2</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
</div>
テーブル
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
</table>
# |
Make |
Model |
Year |
1 |
Honda |
Accord |
2009 |
1 |
Honda |
Accord |
2009 |
フォームをきれいに表示する(記事の中ではほとんど使わない)
<form class="">
<input type="email" placeholder="メール">
<input type="password" placeholder="パスワード">
<br>
<label for="remember"><input id="remember" type="checkbox"> チェックを入れる</label>
<button type="submit" class="">ボタン</button>
</form>
<br>
<form class="pure-form">
<input type="email" placeholder="メール">
<input type="password" placeholder="パスワード">
<br>
<label for="remember"><input id="remember" type="checkbox"> チェックを入れる</label>
<button type="submit" class="pure-button pure-button-primary">ボタン</button>
</form>
アイコンフォントライブラリ font awesome
アイコンを探すには こちら
アイコンをクリックするとタグがコピーされる。それを記事に貼り付けるだけ
日本語紹介記事:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
<style>
.shoukai {font-size: 240%;}
</style>
<pre class="shoukai">
<i class="fa fa-address-book"></i> "fa fa-address-book"
<i class="fa fa-comment" style="color:hotpink;"></i> "fa fa-comment"
<i class="fa fa-spinner fa-spin"></i> "fa fa-spinner fa-spin"
<i class="fa fa-bus fa-rotate-90"></i> "fa fa-bus fa-rotate-90"
</pre>
"fa fa-address-book"
"fa fa-comment"
"fa fa-spinner fa-spin"
"fa fa-bus fa-rotate-90"
便利なスクリプト
<script type="text/javascript">
jQuery(function () {
//jQueryのスクリプトを挿入したい場合は、この中に記述する。
//また、ネットで紹介されている$("#test") などのように、$から始める記法は、
//WordPressとの兼ね合い上、使用できない。
//「$」の部分を「jQuery」と書き直し、使用すること。 jQuery("#test")
});
</script>
<div class="check_reg">
<input type="checkbox" id="input_reg">
<label for="input_reg">チェックを入れると下の要素が現れます</label>
</div>
<div class="toggle_reg">
<a class="pure-button pure-button-goto" href="#"> div.toggle_reg内の要素が現れました </a>
</div>
<script type="text/javascript">
jQuery(function(){
jQuery('div.toggle_reg').css('display','none');
jQuery('div.check_reg input').change(function(){
jQuery('div.toggle_reg').stop(true, true).slideToggle('slow');
});
});
</script>
<script type="text/javascript">
jQuery(function () {
jQuery('#pay_daibiki').remove(); //注文フォームから、代金引換を消す
jQuery('#pay_credit').remove(); //注文フォームから、クレジットカード決済を消す
jQuery('#other_send').attr('hidden','hidden'); //注文フォームから、「別の発送先」を消す
//ページ下部↓にあるはずの青いtwitter,facebookボタンが消える
jQuery('#footer_sns_button').remove(); //フッターのSNSボタン(twitter,fb)を消す
});
</script>