賢威7に予め用意されている装飾用CSSは賢威6までのものとは異なります。

 

2016年12月9日追加分

賢威公式サイトで公開された賢威7用CSSで、ここに記載していなかったものがあったので追記しました。

WordPress版 賢威7 スタイルガイド公開について

 

 

文字装飾

文字色

文字色を水色に変更することができます。

 

文字色を赤色に変更することができます。

 

文字色をオレンジ色に変更することができます。

 

文字色をピンク色に変更することができます。

 

文字色を紫色に変更することができます。

 

文字色を緑色に変更することができます。

 

文字色を青色に変更することができます。

 

文字色を黄色に変更することができます。

 

文字色をオリーブ色に変更することができます。

 

文字色をライム色に変更することができます。

 

文字色を黒色に変更することができます。

 

文字色を灰色に変更することができます。

 

文字背景色装飾

オレンジ色の背景色

ピンク色の背景色

黄色の背景色

ライム色の背景色

灰色の背景色

 

記述リスト(dl dt dd) その1

記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。

 

 

記述リスト(dl dt dd) その2

記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。

 

透過ボックス

サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。

 

テーブルレイアウト

標準テーブル

  項目名 項目名
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容

 

比較テーブル

  項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容

 

チェックリスト

小さいチェックリスト

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

 

 

大きいチェックリスト

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

 

ランキング

王冠ランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

 

 

メダルランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

 

シンプルなランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

 

画像+ランキング番号のリスト

  1. 猫1

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 猫2

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 猫3

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

 

情報比較エリア

商品掲載例(王冠)

  1. 商品名が入ります(メーカー名)

    商品1

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品名が入ります(メーカー名)

    商品2

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品名が入ります(メーカー名)

    商品3

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

 

商品掲載例(画像にアイコンを重ねる場合)

  1. 商品1

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品2

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品3

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

 

 

アイコン

小さいアイコン

ポイント

注意

NEW

初心者

別ウインドウ

矢印上

矢印右

矢印下

矢印左

ダウンロード

PDF

ZIP

メール

ショッピングカート

ホーム

フォルダ

時計

カレンダー

ビル

マップ

 

 

大きいアイコン

ポイント

注意

NEW

初心者

別ウインドウ

矢印上

矢印右

矢印下

矢印左

ダウンロード

PDF

ZIP

メール

ショッピングカート

虫眼鏡

ホーム

フォルダ

時計

カレンダー

ビル

マップ

 

 

カラム段組み(横並び)

4カラム

テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。

 

3カラム

テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。

 

2カラム

テキストが入ります。
テキストが入ります。

 

 

 

画像とテキストの組み合わせ

画像の上にテキストを配置

背景画像の上にテキストを配置

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

 

 

Q&A

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

 

 

フローチャート図

  1. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  2. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  3. 手続きの流れに関する文章が入ります

 

画像の装飾

猫4
ノーマル
猫4
影付き
猫4
影付き2
猫4
囲み線(1px)
猫4
角丸
猫4
猫4
写真風

 

 

登場人物紹介

登場人物A
登場人物A
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物B
登場人物B
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物C
登場人物C
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。

 

 

 

次回予告

次回のキャッチコピーが入ります。

次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。

次回、サイトタイトル
「次回のタイトルが入ります」

 

 

 

動画埋め込み

Youtube

 

 

コンバージョンボタン

 

 

最新ネットビジネス速報をいち早くお届け!

有益な情報を最新で配信しています。

メルマガ登録