賢威8カスタマイズ用HTMLパーツ一覧。ボタン、アイコン等装飾タグまとめ｜チートシート

HTMLパーツとは？

ワードプレスのカスタムHTMLに特定のクラスなどを記述をすることによって呼び出すことが出来る、予めテーマで定義されているデザインパーツです。

ショートコードで呼び出せるものもいくつかありますが、ショートコードは結局HTML形式に変換して出力するので、よりダイレクトにHTMLでそのまま記述することも可能です。

ショートコードのチートシートは以下の記事。

この記事ではショートコードが用意されていないHTMLパーツも紹介しています。

賢威のHTMLパーツの使い方

当記事でデザインビューとソースコードを一挙紹介しています。

ソースコードをコピペしてテキスト部分を変更するだけで「賢威8」を適用しているサイト内では同様のデザインが反映されます。

アイコン

ソースコード

<span class="icon_point color01"></span> ポイント
<span class="icon_caution color01"></span> 注意
<span class="icon_blank color01"></span> 別ウインドウ
<span class="icon_arrow_up color01"></span> 矢印上
<span class="icon_arrow_right color01"></span> 矢印右
<span class="icon_arrow_down color01"></span>  矢印下
<span class="icon_arrow_left color01"></span> 矢印左
<span class="icon_download color01"></span> ダウンロード
<span class="icon_pdf color01"></span> PDF
<span class="icon_zip color01"></span> ZIP
<span class="icon_mail color01"></span> メール
<span class="icon_cart color01"></span> ショッピングカート
<span class="icon_search color01"></span> 虫眼鏡
<span class="icon_home color01"></span> ホーム
<span class="icon_folder color01"></span> フォルダ
<span class="icon_time color01"></span> 時計
<span class="icon_calendar color01"></span> カレンダー
<span class="icon_building color01"></span> ビル
<span class="icon_map color01"></span> マップ
<span class="icon_new color01"></span> NEW
<span class="icon_beginner color01"></span> 初心者マーク

カラー適用

ソースコード

<span class="icon_pdf red"></span> PDF
<span class="icon_zip orange"></span> ZIP
<span class="icon_mail aqua"></span> メール

SNSボタン

ソースコード

<aside class="sns-btn_wrap">
<div class="sns-btn_tw"></div>
<div class="sns-btn_fb"></div>
<div class="sns-btn_hatena"></div>
</aside>

ボタン

ソースコード

<!-- オレンジ -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

<!-- ネイビー -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

<!-- ブルーグリーン -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_bluegreen"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

<!-- ホワイト -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style01"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

<!-- グレー -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_gray"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

<!-- オフホワイト -->
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn btn_style02"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

ボタンとアイコンとの組み合わせ

ソースコード

<div class="al-c m20">
<a href="#" class="btn btn_orange"><span class="icon_mail white"></span> 送信する</a>
</div>

<div class="al-c m20">
<a href="#" class="btn btn_gray"><span class="icon_caution yellow"></span> 必須項目が入力されていません。</a>
</div>

文字色

文字色を紺色に変更することができます。
文字色を水色に変更することができます。
文字色を赤色に変更することができます。
文字色をオレンジ色に変更することができます。
文字色をピンク色に変更することができます。
文字色を紫色に変更することができます。
文字色を緑色に変更することができます。
文字色を青色に変更することができます。
文字色を黄色に変更することができます。
文字色をオリーブ色に変更することができます。
文字色をライム色に変更することができます。
文字色を黒色に変更することができます。
文字色を灰色に変更することができます。
文字色を白色に変更することができます。
文字色を茶色に変更することができます。

ソースコード

<span class="navy">文字色を紺色に変更することができます。</span>
<span class="aqua">文字色を水色に変更することができます。</span>
<span class="red">文字色を赤色に変更することができます。</span>
<span class="orange">文字色をオレンジ色に変更することができます。</span>
<span class="spanink">文字色をピンク色に変更することができます。</span>
<span class="spanurspanle">文字色を紫色に変更することができます。</span>
<span class="green">文字色を緑色に変更することができます。</span>
<span class="blue">文字色を青色に変更することができます。</span>
<span class="yellow">文字色を黄色に変更することができます。</span>
<span class="olive">文字色をオリーブ色に変更することができます。</span>
<span class="lime">文字色をライム色に変更することができます。</span>
<span class="black">文字色を黒色に変更することができます。</span>
<span class="gray">文字色を灰色に変更することができます。</span>
<span class="white"><sspanan style="background-color: #ccc;">文字色を白色に変更することができます。</sspanan></span>
<span class="brown">文字色を茶色に変更することができます。</span>

マーカー

文字に黄色の背景色をつけることができます。
文字にオレンジ色の背景色をつけることができます。
文字にピンク色の背景色をつけることができます。
文字に青色の背景色をつけることができます。
文字にライム色の背景色をつけることができます。
文字に灰色の背景色をつけることができます。

ソースコード

<span>文字に<span class="line-yellow">黄色の背景色</span>をつけることができます。</span>
<span>文字に<span class="line-orange">オレンジ色の背景色</span>をつけることができます。</span>
<span>文字に<span class="line-pink">ピンク色の背景色</span>をつけることができます。</span>
<span>文字に<span class="line-blue">青色の背景色</span>をつけることができます。</span>
<span>文字に<span class="line-lime">ライム色の背景色</span>をつけることができます。</span>
<span>文字に<span class="line-gray">灰色の背景色</span>をつけることができます。</span>

注意書き

※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。

ソースコード

<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p>

傍点

テキスト上に傍点を打ちます。

ソースコード

<p>テキスト上に<span class="dot">傍</span><span class="dot">点</span>を打ちます。</p>

回り込み(モバイル非解除)

ソースコード

<div class="fl-l">
<img src="https://lets-hack.tech/wp-content/uploads/2019/03/logo-150x150.png" alt="" width="150" height="150" />
</div>
クラスを付けたタグが左側に移動します。

<div class="fl-r">
<img src="https://lets-hack.tech/wp-content/uploads/2019/03/logo-150x150.png" alt="" width="150" height="150" />
</div>
クラスを付けたタグが右側に移動します。

回り込み(モバイル解除)

ソースコード

<div class="left">
<img src="https://lets-hack.tech/wp-content/uploads/2019/03/logo-150x150.png" alt="" width="150" height="150" />
</div>
クラスを付けたタグが左側に移動します。

<div class="right">
<img src="https://lets-hack.tech/wp-content/uploads/2019/03/logo-150x150.png" alt="" width="150" height="150" />
</div>
クラスを付けたタグが右側に移動します。

テキストや画像の右寄せ・左寄せ・中央寄せ

テキストの左寄せ

テキストの右寄せ

テキストの中央寄せ

ソースコード

<p class="al-l">テキストの左寄せ</p>
<p class="al-r">テキストの右寄せ</p>
<p class="al-c">テキストの中央寄せ</p>

テーブル内要素の上寄せ・下寄せ・中央寄せ

テキストの上寄せ

テキストの中央寄せ

テキストの下寄せ

ソースコード

<table>
   <tr>
      <td class="vl-t" style="height: 100px;">
         テキストの上寄せ
      </td>
      <td class="vl-m">
         テキストの中央寄せ
      </td>
      <td class="vl-b">
         テキストの下寄せ
      </td>
   </tr>
</table>

リスト横並び

• リストが入ります。
• リストが入ります。

ソースコード

<ul class="inline">
   <li>リストが入ります。</li>
   <li>リストが入ります。</li>
</ul>

リストの先頭に表示するマーカー文字を非表示

• リストが入ります。
• リストが入ります。

ソースコード

<ul class="none">
   <li>リストが入ります。</li>
   <li>リストが入ります。</li>
</ul>

リスト装飾(サークル)

1. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
2. テキストが入ります。
3. テキストが入ります。
4. テキストが入ります。
5. テキストが入ります。
6. テキストが入ります。
7. テキストが入ります。
8. テキストが入ります。
9. テキストが入ります。
10. テキストが入ります。

ソースコード

<ol class="list_style02">
   <li>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
   <li>テキストが入ります。</li>
</ol>

リスト装飾(チェック)

• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。

ソースコード

<ul class="check-list">
   <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
   <li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
   <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
   <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
   <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

Q&Aリスト

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ソースコード

<dl class="qa-list">
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>

<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

画像の装飾

ソースコード

<!--影付き1-->
<figure>
   <img class="shadow" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

<!--影付き2-->
<figure>
   <img class="shadow02" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

<!--囲み線-->
<figure>
   <img class="outline" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

<!--丸角-->
<figure>
   <img class="rc12" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

<!--丸-->
<figure>
   <img class="circle" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

<!--フレーム-->
<figure>
<img class="frame" src="/wp-content/themes/keni8-child/images/sample012_off.jpg" alt="サンプル" width="240" height="240">
</figure>

ボックス

ソースコード

<div class="box_style box_style01">
<div class="box_inner">
<p>青斜線の装飾ボックスです。ここにテキストが入ります。</p>
</div>
</div>

<div class="box_style box_style02">
<div class="box_inner">
<p>黒斜の線装飾ボックスです。ここにテキストが入ります。</p>
</div>
</div>

<div class="box_style box_style03">
<p>黒色背景の装飾ボックスです。ここにテキストが入ります。</p>
</div>

<div class="box_style box_style04">
<p>灰色背景の装飾ボックスです。ここにテキストが入ります。</p>
</div>

<div class="box_style box_style05">
<p>黒色背景の装飾ボックスです。ここにテキストが入ります。</p>
</div>

<div class="box_style box_style06">
<p>オフホワイト</p>
</div>

<div class="box_style box_style07">
<div class="box_inner">
<p>背景画像</p>
</div>
</div>

<div class="box_style box_style07" style="background-image: url(https://support-keni.rider-store.jp/support/members/download/keni8/manual/wp-content/uploads/2018/09/bg-sample.jpg)">
<div class="box_inner">
<p>背景画像パターン2</p>
</div>
</div>

<div class="box_style box_style_blue">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/ブルー</p>
</div>
</div>

<div class="box_style box_style_green">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/グリーン</p>
</div>
</div>

<div class="box_style box_style_orange">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/オレンジ</p>
</div>
</div>

<div class="box_style box_style_red">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/レッド</p>
</div>
</div>

<div class="box_style box_style_pink">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/ピンク</p>
</div>
</div>

<div class="box_style box_style_yellow">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/イエロー</p>
</div>
</div>

<div class="box_style box_style_gray">
<div class="box_inner">
<div class="box_style_title"><span>タイトルが入ります。</span></div>
<p>ボックス/グレー</p>
</div>
</div>

まとめ

こうやってみるとかなりパーツは豊富ですね。

クラス付与が不要の超基本的なHTMLのタグだけのコードは紹介せずに端折っていますが、このボリュームです。

他にも賢威のカスタマイズを紹介する記事を書いていますので、興味がある方は覗いてみてください。