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



HTMLパーツとは?

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

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

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

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

賢威のHTMLパーツの使い方

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

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

アイコン

ポイント
注意
別ウインドウ
矢印上
矢印右
矢印下
矢印左
ダウンロード
PDF
ZIP
メール
ショッピングカート
虫眼鏡
ホーム
フォルダ
時計
カレンダー
ビル
マップ
NEW
初心者マーク

ソースコード

カラー適用

PDF
ZIP
メール

ソースコード

SNSボタン

ソースコード

ボタン

ソースコード

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

ソースコード

文字色

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

ソースコード

マーカー

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

ソースコード

注意書き

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

ソースコード

傍点

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

ソースコード

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

クラスを付けたタグが左側に移動します。
クラスを付けたタグが右側に移動します。

ソースコード

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

ソースコード

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

テキストの左寄せ

テキストの右寄せ

テキストの中央寄せ

ソースコード

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

テキストの上寄せ テキストの中央寄せ テキストの下寄せ

ソースコード

リスト横並び

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

ソースコード

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

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

ソースコード

リスト装飾(サークル)

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

ソースコード

リスト装飾(チェック)

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

ソースコード

Q&Aリスト

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

ソースコード

画像の装飾

サンプル
サンプル
サンプル
サンプル
サンプル
サンプル

ソースコード

ボックス

青斜線の装飾ボックスです。ここにテキストが入ります。

黒斜の線装飾ボックスです。ここにテキストが入ります。

黒色背景の装飾ボックスです。ここにテキストが入ります。

灰色背景の装飾ボックスです。ここにテキストが入ります。

黒色背景の装飾ボックスです。ここにテキストが入ります。

オフホワイト

背景画像

背景画像パターン2

タイトルが入ります。

ボックス/ブルー

タイトルが入ります。

ボックス/グリーン

タイトルが入ります。

ボックス/オレンジ

タイトルが入ります。

ボックス/レッド

タイトルが入ります。

ボックス/ピンク

タイトルが入ります。

ボックス/イエロー

タイトルが入ります。

ボックス/グレー

ソースコード

まとめ

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

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

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