カエテンＷＰワードプレステーマ

※クリックすると該当箇所を表示します

• ■文字装飾

  クリックで項目表示

  • ・文字位置
  • ・太字
  • ・下線
  • ・文字サイズ
  • ・文字色
  • ・文字背景
  • ・蛍光マーカー
  • ・蛍光ライン
  • ・罫線囲み
  • ・文字だけ見出し
• ■引用
• ■テーブル
• ■画像回り込み
• ■ボックス
• ■アコーディオン ( 開閉式コンテンツ )
• ■Ｑ＆Ａ
• ■ボタン
• ■記事カード
• ■会話コンテンツ
• ■ h2 タグ
• ■ h3 タグ
• ■ ul タグ ( 番号なしリスト )
• ■ ol タグ ( 番号ありリスト )
• ■パーツ
• ■その他

  クリックで項目表示

  • ・マージン余白
  • ・角丸
  • ・横幅
  • ・表示関連

■直接入力するとき

■文字装飾

文字位置

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 左寄せ ] [ 中央揃え ] [ 左寄せ ]

●左寄せ

<div class="left"> テキスト </div>

●中央揃え

<div class="center"> テキスト </div>

●右寄せ

<div class="rigth"> テキスト </div>

太字

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 太字 ]

<span class="bold"> テキスト </span>

テキスト

下線

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 下線 ]

<span class="underline"> テキスト </span>

テキスト

文字サイズ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 文字サイズ ]

<span class="font12"> テキスト </span>

12px

<span class="font14"> テキスト </span>

14px

<span class="font16"> テキスト </span>

16px

<span class="font18"> テキスト </span>

18px

<span class="font20"> テキスト </span>

20px

<span class="font22"> テキスト </span>

22px

<span class="font24"> テキスト </span>

24px

<span class="font26"> テキスト </span>

26px

<span class="font28"> テキスト </span>

28px

<span class="font32"> テキスト </span>

32px

<span class="font36"> テキスト </span>

36px

<span class="font40"> テキスト </span>

40px

文字色

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 文字色 ]

• デザイン ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します　→　設定方法

<span class="t-main"> テキスト </span>

メイン

<span class="t-blue"> テキスト </span>

ブルー

<span class="t-navy"> テキスト </span>

ネイビー

<span class="t-red"> テキスト </span>

レッド

<span class="t-green"> テキスト </span>

グリーン

<span class="t-orange"> テキスト </span>

オレンジ

<span class="t-purple"> テキスト </span>

パープル

<span class="t-pink"> テキスト </span>

ピンク

<span class="t-black"> テキスト </span>

ブラック

<span class="t-grey"> テキスト </span>

グレー

<span class="t-white"> テキスト </span>

文字背景

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 文字背景 ]

• デザイン ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します　→　設定方法

<span class="b-main"> テキスト </span>

<span class="b-blue"> テキスト </span>

<span class="b-navy"> テキスト </span>

<span class="b-red"> テキスト </span>

<span class="b-green"> テキスト </span>

<span class="b-orange"> テキスト </span>

<span class="b-purple"> テキスト </span>

<span class="b-pink"> テキスト </span>

<span class="b-black"> テキスト </span>

<span class="b-grey"> テキスト </span>

蛍光マーカー

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 蛍光マーカー ]

• デザイン ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します　→　設定方法

<span class="m-yellow"> テキスト </span>

<span class="m-blue"> テキスト </span>

<span class="m-red"> テキスト </span>

<span class="m-green"> テキスト </span>

<span class="m-orange"> テキスト </span>

<span class="m-pink"> テキスト </span>

蛍光ライン

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 蛍光ライン ]

• デザイン ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します　→　設定方法

<span class="l-yellow"> テキスト </span>

<span class="l-blue"> テキスト </span>

<span class="l-red"> テキスト </span>

<span class="l-green"> テキスト </span>

<span class="l-orange"> テキスト </span>

<span class="l-pink"> テキスト </span>

罫線囲み

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 罫線囲み ]

• デザイン ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します　→　設定方法

<span class="border"> テキスト </span>

<span class="border border-main"> テキスト </span>

<span class="border border-blue"> テキスト </span>

<span class="border border-navy"> テキスト </span>

<span class="border border-red"> テキスト </span>

<span class="border border-green"> テキスト </span>

<span class="border border-orange"> テキスト </span>

<span class="border border-purple"> テキスト </span>

<span class="border border-pink"> テキスト </span>

<span class="border border-black"> テキスト </span>

<span class="border border-grey"> テキスト </span>

文字だけ見出し

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ 文字だけ見出し ]

<p class="copy"> テキスト </p>

テキストテキストテキスト

■引用

• 新エディタ：クラシックブロック：ビジュアル [ 引用 ]
• 旧エディタ：ビジュアル [ 引用 ]
• 旧エディタ：テキスト　 [ 引用 ]

<blockquote> テキスト </blockquote>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■テーブル

• 新エディタ：クラシックブロック：ビジュアル [ テーブル ] から選択
• 旧エディタ：ビジュアル [ テーブル ] から選択
• 旧エディタ：テキスト　[ table上 ] [ table横 ] [ table上横 ] [ table無 ]
• サンプルソースが入力されます

• テーブル見出しは 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法

• 1行目　table-00　→　table-01　に変更すると行の背景色が全て白色になります
• 1行目　margin-0　→　margin-auto　に変更するとテーブルが中央揃えになります
• 1行目　width-auto　→　width-full　に変更するとテーブルが記事の横幅いっぱいに広がります

上に見出しあり

項目１
項目２
１
１０
２
２０
３
３０

横に見出しあり

項目１
１
１０
１００
項目２
２
２０
２００

上と横に見出しあり

項目
項目１
項目２
項目３
メニュー１
１
１０
２００
メニュー２
２
２０
２００

見出し無し

１
１０
１００
２
２０
２００
３
３０
３００

■画像回り込み

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　 [ 画像左回込 ] [ 画像右回込 ]

• レスポンシブ時 ( 画面横幅 666 px 以下のスマホ等 ) は 回り込みは解除 されて自動的に文章の上に中央揃えになります

• 1 行目　imgl　→　imgl2　に変更するとレスポンシブ時でも横並びになります

画像左回り込み

テキスト

画像右回り込み

テキスト

■ボックス

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　 [ box1 ] [ box2 ] [ box3 ] [ box4 ] [ box注意 ] [ box疑問 ] [ box補足 ] [ boxタイトル ]

●スタイル1

<div class="box-01"> テキスト </div>

●スタイル2

<div class="box-02"> テキスト </div>

●スタイル3

<div class="box-03"> テキスト </div>

●スタイル4

<div class="box-04"> テキスト </div>

●注意

<div class="box-alert"> テキスト </div>

●疑問

<div class="box-que"> テキスト </div>

●補足インフォ

<div class="box-info"> テキスト </div>

●ボックスタイトル

• ボックスに重なって表示する見出しです
• 記事カードにも利用できます

■アコーディオン ( 開閉式コンテンツ )

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　 [ アコーディオン ]

• タイトルは記事装飾パーツ h2・h3 に変更もできます

  1 行目　default　→　h3-01-main　などに変更してください

• アコーディオンは JavaScript 利用のため AMP ページでは利用不可です

タイトル

<div class="acordion">
コンテンツ
</div>

表示例 クリックで開きます

■Ｑ＆Ａ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　 [ 質問 ] [ 回答 ]

●質問

<div class="que"> テキスト </div>

●回答

<div class="ans"> テキスト </div>

■ボタン

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　 [ ボタン ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法
• ホバー時の色は #dddddd で固定です
• ボタンですのでリンク文字でないとデザインは表示されません

<div class="kbtn-main"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-blue"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-navy"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-red"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-green"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-orange"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-purple"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-pink"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-black"><a class="" href="URL" target="_blank"> テキスト </a></div>

<div class="kbtn-grey"><a class="" href="URL" target="_blank"> テキスト </a></div>

■記事カード

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　[ 記事カード内部 ] [ 記事カード外部 ]
• ショートコードが入力されます
• ショートコードそのものが表示されてイメージは確認できません

内部リンク用

[card url="リンク先URL" class=""]

表示例

カエテンWPとは

カエテンWP-JOY（ジョイ）はサイト構築とデザインの多彩なカスタマイズが簡単にできるワードプレステーマテンプレートです...

2019/06/012019/06/02

設定方法

外部リンク用

[ext-card url="リンク先URL" ttl="タイトル" desc="" date="" img="" class=""]

表示例

• サムネイル画像はスクリーンショットが自動表示されます ( WordPress 提供の WP REST API を利用 )

カエテンWP-JOY

レスポンシブ対応・多彩なカスタマイズが簡単にできるWordPressテーマ「カエテンWP-JOY」

http://kaeten-wp.com/joy/

2019/06/01

設定方法

• 次の項目を外部リンク先の内容に合わせて設定してください

■会話コンテンツ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：ビジュアル [ スタイル 2 ] から選択
• 旧エディタ：テキスト　[ 会話左 ] [ 会話右 ]
• ショートコードが入力されます
• ショートコードそのものが表示されてイメージは確認できません

●会話左

[talk-l url="" name="" width="" height="" radius="" bg="" border="" color=""]
テキスト
[/talk-l]

●会話右

[talk-r url="" name="" width="" height="" radius="" bg="" border="" color=""]
テキスト
[/talk-r]

デフォルト表示

• 画像：横幅 60 px・縦幅 60 px・円形 ／ 吹き出し：白背景・グレー罫線
• 画像サイズや吹き出しの色は自由に変更できます

ひで蔵

テキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

ひで蔵

設定方法

• 画像 URL url="" の記述は必須入力、それ以外は任意入力です。
• AMP ページでは変更は反映せずデフォルト表示になります

■ h2 タグ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ h2 ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法
• p タグでの記述もできます　<p class="h2-01-main"> テキスト </p>

●スタイル1

<h2 class="h2-01-main"> テキスト </h2>

メイン

<h2 class="h2-01-blue"> テキスト </h2>

ブルー

<h2 class="h2-01-navy"> テキスト </h2>

ネイビー

<h2 class="h2-01-red"> テキスト </h2>

レッド

<h2 class="h2-01-green"> テキスト </h2>

グリーン

<h2 class="h2-01-orange"> テキスト </h2>

オレンジ

<h2 class="h2-01-purple"> テキスト </h2>

パープル

<h2 class="h2-01-pink"> テキスト </h2>

ピンク

<h2 class="h2-01-black"> テキスト </h2>

ブラック

<h2 class="h2-01-grey"> テキスト </h2>

グレー

●スタイル2

<h2 class="h2-02-main"> テキスト </h2>

メイン

<h2 class="h2-02-blue"> テキスト </h2>

ブルー

<h2 class="h2-02-navy"> テキスト </h2>

ネイビー

<h2 class="h2-02-red"> テキスト </h2>

レッド

<h2 class="h2-02-green"> テキスト </h2>

グリーン

<h2 class="h2-02-orange"> テキスト </h2>

オレンジ

<h2 class="h2-02-purple"> テキスト </h2>

パープル

<h2 class="h2-02-pink"> テキスト </h2>

ピンク

<h2 class="h2-02-black"> テキスト </h2>

ブラック

<h2 class="h2-02-grey"> テキスト </h2>

グレー

●スタイル3

<h2 class="h2-03-main"> テキスト </h2>

メイン

<h2 class="h2-03-blue"> テキスト </h2>

ブルー

<h2 class="h2-03-navy"> テキスト </h2>

ネイビー

<h2 class="h2-03-red"> テキスト </h2>

レッド

<h2 class="h2-03-green"> テキスト </h2>

グリーン

<h2 class="h2-03-orange"> テキスト </h2>

オレンジ

<h2 class="h2-03-purple"> テキスト </h2>

パープル

<h2 class="h2-03-pink"> テキスト </h2>

ピンク

<h2 class="h2-03-black"> テキスト </h2>

ブラック

<h2 class="h2-03-grey"> テキスト </h2>

グレー

●スタイル4

<h2 class="h2-04-main"> テキスト </h2>

メイン

<h2 class="h2-04-blue"> テキスト </h2>

ブルー

<h2 class="h2-04-navy"> テキスト </h2>

ネイビー

<h2 class="h2-04-red"> テキスト </h2>

レッド

<h2 class="h2-04-green"> テキスト </h2>

グリーン

<h2 class="h2-04-orange"> テキスト </h2>

オレンジ

<h2 class="h2-04-purple"> テキスト </h2>

パープル

<h2 class="h2-04-pink"> テキスト </h2>

ピンク

<h2 class="h2-04-black"> テキスト </h2>

ブラック

<h2 class="h2-04-grey"> テキスト </h2>

グレー

●スタイル5

<h2 class="h2-05-main"> テキスト </h2>

メイン

<h2 class="h2-05-blue"> テキスト </h2>

ブルー

<h2 class="h2-05-navy"> テキスト </h2>

ネイビー

<h2 class="h2-05-red"> テキスト </h2>

レッド

<h2 class="h2-05-green"> テキスト </h2>

グリーン

<h2 class="h2-05-orange"> テキスト </h2>

オレンジ

<h2 class="h2-05-purple"> テキスト </h2>

パープル

<h2 class="h2-05-pink"> テキスト </h2>

ピンク

<h2 class="h2-05-black"> テキスト </h2>

ブラック

<h2 class="h2-05-grey"> テキスト </h2>

グレー

■ h3 タグ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ h3 ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法
• p タグでの記述もできます　<p class="h3-01-main"> テキスト </p>

●スタイル1

<h3 class="h3-01-main"> テキスト </h3>

メイン

<h3 class="h3-01-blue"> テキスト </h3>

ブルー

<h3 class="h3-01-navy"> テキスト </h3>

ネイビー

<h3 class="h3-01-red"> テキスト </h3>

レッド

<h3 class="h3-01-green"> テキスト </h3>

グリーン

<h3 class="h3-01-orange"> テキスト </h3>

オレンジ

<h3 class="h3-01-purple"> テキスト </h3>

パープル

<h3 class="h3-01-pink"> テキスト </h3>

ピンク

<h3 class="h3-01-black"> テキスト </h3>

ブラック

<h3 class="h3-01-grey"> テキスト </h3>

グレー

●スタイル2

<h3 class="h3-02-main"> テキスト </h3>

メイン

<h3 class="h3-02-blue"> テキスト </h3>

ブルー

<h3 class="h3-02-navy"> テキスト </h3>

ネイビー

<h3 class="h3-02-red"> テキスト </h3>

レッド

<h3 class="h3-02-green"> テキスト </h3>

グリーン

<h3 class="h3-02-orange"> テキスト </h3>

オレンジ

<h3 class="h3-02-purple"> テキスト </h3>

パープル

<h3 class="h3-02-pink"> テキスト </h3>

ピンク

<h3 class="h3-02-black"> テキスト </h3>

ブラック

<h3 class="h3-02-grey"> テキスト </h3>

グレー

●スタイル3

<h3 class="h3-03-main"> テキスト </h3>

メイン

<h3 class="h3-03-blue"> テキスト </h3>

ブルー

<h3 class="h3-03-navy"> テキスト </h3>

ネイビー

<h3 class="h3-03-red"> テキスト </h3>

レッド

<h3 class="h3-03-green"> テキスト </h3>

グリーン

<h3 class="h3-03-orange"> テキスト </h3>

オレンジ

<h3 class="h3-03-purple"> テキスト </h3>

パープル

<h3 class="h3-03-pink"> テキスト </h3>

ピンク

<h3 class="h3-03-black"> テキスト </h3>

ブラック

<h3 class="h3-03-grey"> テキスト </h3>

グレー

●スタイル4

<h3 class="h3-04-main"> テキスト </h3>

メイン

<h3 class="h3-04-blue"> テキスト </h3>

ブルー

<h3 class="h3-04-navy"> テキスト </h3>

ネイビー

<h3 class="h3-04-red"> テキスト </h3>

レッド

<h3 class="h3-04-green"> テキスト </h3>

グリーン

<h3 class="h3-04-orange"> テキスト </h3>

オレンジ

<h3 class="h3-04-purple"> テキスト </h3>

パープル

<h3 class="h3-04-pink"> テキスト </h3>

ピンク

<h3 class="h3-04-black"> テキスト </h3>

ブラック

<h3 class="h3-04-grey"> テキスト </h3>

グレー

●スタイル5

<h3 class="h3-05-main"> テキスト </h3>

メイン

<h3 class="h3-05-blue"> テキスト </h3>

ブルー

<h3 class="h3-05-navy"> テキスト </h3>

ネイビー

<h3 class="h3-05-red"> テキスト </h3>

レッド

<h3 class="h3-05-green"> テキスト </h3>

グリーン

<h3 class="h3-05-orange"> テキスト </h3>

オレンジ

<h3 class="h3-05-purple"> テキスト </h3>

パープル

<h3 class="h3-05-pink"> テキスト </h3>

ピンク

<h3 class="h3-05-black"> テキスト </h3>

ブラック

<h3 class="h3-05-grey"> テキスト </h3>

グレー

●スタイル6

<h3 class="h3-06-main"> テキスト </h3>

メイン

<h3 class="h3-06-blue"> テキスト </h3>

ブルー

<h3 class="h3-06-navy"> テキスト </h3>

ネイビー

<h3 class="h3-06-red"> テキスト </h3>

レッド

<h3 class="h3-06-green"> テキスト </h3>

グリーン

<h3 class="h3-06-orange"> テキスト </h3>

オレンジ

<h3 class="h3-06-purple"> テキスト </h3>

パープル

<h3 class="h3-06-pink"> テキスト </h3>

ピンク

<h3 class="h3-06-black"> テキスト </h3>

ブラック

<h3 class="h3-06-grey"> テキスト </h3>

グレー

●スタイル7

<h3 class="h3-07-main"> テキスト </h3>

メイン

<h3 class="h3-07-blue"> テキスト </h3>

ブルー

<h3 class="h3-07-navy"> テキスト </h3>

ネイビー

<h3 class="h3-07-red"> テキスト </h3>

レッド

<h3 class="h3-07-green"> テキスト </h3>

グリーン

<h3 class="h3-07-orange"> テキスト </h3>

オレンジ

<h3 class="h3-07-purple"> テキスト </h3>

パープル

<h3 class="h3-07-pink"> テキスト </h3>

ピンク

<h3 class="h3-07-black"> テキスト </h3>

ブラック

<h3 class="h3-07-grey"> テキスト </h3>

グレー

●スタイル8

<h3 class="h3-08-main"> テキスト </h3>

メイン

<h3 class="h3-08-blue"> テキスト </h3>

ブルー

<h3 class="h3-08-navy"> テキスト </h3>

ネイビー

<h3 class="h3-08-red"> テキスト </h3>

レッド

<h3 class="h3-08-green"> テキスト </h3>

グリーン

<h3 class="h3-08-orange"> テキスト </h3>

オレンジ

<h3 class="h3-08-purple"> テキスト </h3>

パープル

<h3 class="h3-08-pink"> テキスト </h3>

ピンク

<h3 class="h3-08-black"> テキスト </h3>

ブラック

<h3 class="h3-08-grey"> テキスト </h3>

グレー

●スタイル9

<h3 class="h3-09-main"> テキスト </h3>

<h3 class="h3-09-blue"> テキスト </h3>

<h3 class="h3-09-navy"> テキスト </h3>

<h3 class="h3-09-red"> テキスト </h3>

<h3 class="h3-09-green"> テキスト </h3>

<h3 class="h3-09-orange"> テキスト </h3>

<h3 class="h3-09-purple"> テキスト </h3>

<h3 class="h3-09-pink"> テキスト </h3>

<h3 class="h3-09-black"> テキスト </h3>

<h3 class="h3-09-grey"> テキスト </h3>

■ ul タグ ( 番号なしリスト )

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ ul ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法

ビジュアルエディタでは次の作業手順になります。

1. 文字列をドラッグして
2. ボタン [ 番号なしリスト ] を押す
3. そのまま続けて [ スタイル ] から選択する

●スタイル1

<ul class="ul-01-main"><li> リスト </li></ul>

• メイン

<ul class="ul-01-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-01-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-01-red"><li> リスト </li></ul>

• レッド

<ul class="ul-01-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-01-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-01-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-01-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-01-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-01-grey"><li> リスト </li></ul>

• グレー

●スタイル2

<ul class="ul-02-main"><li> リスト </li></ul>

• メイン

<ul class="ul-02-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-02-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-02-red"><li> リスト </li></ul>

• レッド

<ul class="ul-02-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-02-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-02-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-02-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-02-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-02-grey"><li> リスト </li></ul>

• グレー

●スタイル3

<ul class="ul-03-main"><li> リスト </li></ul>

• メイン

<ul class="ul-03-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-03-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-03-red"><li> リスト </li></ul>

• レッド

<ul class="ul-03-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-03-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-03-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-03-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-03-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-03-grey"><li> リスト </li></ul>

• グレー

●スタイル4

<ul class="ul-04-main"><li> リスト </li></ul>

• メイン

<ul class="ul-04-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-04-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-04-red"><li> リスト </li></ul>

• レッド

<ul class="ul-04-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-04-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-04-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-04-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-04-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-04-grey"><li> リスト </li></ul>

• グレー

●スタイル5

<ul class="ul-05-main"><li> リスト </li></ul>

• メイン

<ul class="ul-05-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-05-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-05-red"><li> リスト </li></ul>

• レッド

<ul class="ul-05-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-05-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-05-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-05-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-05-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-05-grey"><li> リスト </li></ul>

• グレー

●スタイル6

<ul class="ul-06-main"><li> リスト </li></ul>

• メイン

<ul class="ul-06-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-06-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-06-red"><li> リスト </li></ul>

• レッド

<ul class="ul-06-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-06-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-06-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-06-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-06-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-06-grey"><li> リスト </li></ul>

• グレー

●スタイル7

<ul class="ul-07-main"><li> リスト </li></ul>

• メイン

<ul class="ul-07-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-07-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-07-red"><li> リスト </li></ul>

• レッド

<ul class="ul-07-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-07-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-07-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-07-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-07-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-07-grey"><li> リスト </li></ul>

• グレー

●スタイル8

<ul class="ul-08-main"><li> リスト </li></ul>

• メイン

<ul class="ul-08-blue"><li> リスト </li></ul>

• ブルー

<ul class="ul-08-navy"><li> リスト </li></ul>

• ネイビー

<ul class="ul-08-red"><li> リスト </li></ul>

• レッド

<ul class="ul-08-green"><li> リスト </li></ul>

• グリーン

<ul class="ul-08-orange"><li> リスト </li></ul>

• オレンジ

<ul class="ul-08-purple"><li> リスト </li></ul>

• パープル

<ul class="ul-08-pink"><li> リスト </li></ul>

• ピンク

<ul class="ul-08-black"><li> リスト </li></ul>

• ブラック

<ul class="ul-08-grey"><li> リスト </li></ul>

• グレー

●スタイル9

シンプルな米印　1 色のみ

<ul class="ul-09"><li> リスト </li></ul>

• テキスト

■ ol タグ ( 番号ありリスト )

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ ol ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法

ビジュアルエディタでは次の作業手順になります。

1. 文字列をドラッグして
2. ボタン [ 番号ありリスト ] を押す
3. そのまま続けて [ スタイル ] から選択する

●スタイル1

<ol class="ol-01-main"><li> リスト </li></ol>

1. メイン

<ol class="ol-01-blue"><li> リスト </li></ol>

1. ブルー

<ol class="ol-01-navy"><li> リスト </li></ol>

1. ネイビー

<ol class="ol-01-red"><li> リスト </li></ol>

1. レッド

<ol class="ol-01-green"><li> リスト </li></ol>

1. グリーン

<ol class="ol-01-orange"><li> リスト </li></ol>

1. オレンジ

<ol class="ol-01-purple"><li> リスト </li></ol>

1. パープル

<ol class="ol-01-pink"><li> リスト </li></ol>

1. ピンク

<ol class="ol-01-black"><li> リスト </li></ol>

1. ブラック

<ol class="ol-01-grey"><li> リスト </li></ol>

1. グレー

●スタイル2

<ol class="ol-02-main"><li> リスト </li></ol>

1. メイン

<ol class="ol-02-blue"><li> リスト </li></ol>

1. ブルー

<ol class="ol-02-navy"><li> リスト </li></ol>

1. ネイビー

<ol class="ol-02-red"><li> リスト </li></ol>

1. レッド

<ol class="ol-02-green"><li> リスト </li></ol>

1. グリーン

<ol class="ol-02-orange"><li> リスト </li></ol>

1. オレンジ

<ol class="ol-02-purple"><li> リスト </li></ol>

1. パープル

<ol class="ol-02-pink"><li> リスト </li></ol>

1. ピンク

<ol class="ol-02-black"><li> リスト </li></ol>

1. ブラック

<ol class="ol-02-grey"><li> リスト </li></ol>

1. グレー

●スタイル3

<ol class="ol-03-main"><li> リスト </li></ol>

1. メイン

<ol class="ol-03-blue"><li> リスト </li></ol>

1. ブルー

<ol class="ol-03-navy"><li> リスト </li></ol>

1. ネイビー

<ol class="ol-03-red"><li> リスト </li></ol>

1. レッド

<ol class="ol-03-green"><li> リスト </li></ol>

1. グリーン

<ol class="ol-03-orange"><li> リスト </li></ol>

1. オレンジ

<ol class="ol-03-purple"><li> リスト </li></ol>

1. パープル

<ol class="ol-03-pink"><li> リスト </li></ol>

1. ピンク

<ol class="ol-03-black"><li> リスト </li></ol>

1. ブラック

<ol class="ol-03-grey"><li> リスト </li></ol>

1. グレー

●スタイル4

<ol class="ol-04-main"><li> リスト </li></ol>

1. メイン

<ol class="ol-04-blue"><li> リスト </li></ol>

1. ブルー

<ol class="ol-04-navy"><li> リスト </li></ol>

1. ネイビー

<ol class="ol-04-red"><li> リスト </li></ol>

1. レッド

<ol class="ol-04-green"><li> リスト </li></ol>

1. グリーン

<ol class="ol-04-orange"><li> リスト </li></ol>

1. オレンジ

<ol class="ol-04-purple"><li> リスト </li></ol>

1. パープル

<ol class="ol-04-pink"><li> リスト </li></ol>

1. ピンク

<ol class="ol-04-black"><li> リスト </li></ol>

1. ブラック

<ol class="ol-04-grey"><li> リスト </li></ol>

1. グレー

■パーツ

• 新エディタ：クラシックブロック：ビジュアル [ スタイル ] から選択
• 旧エディタ：ビジュアル [ スタイル ] から選択
• 旧エディタ：テキスト　 [ パーツ1 ] [ パーツ2 ] [ パーツ3 ] [ パーツ4 ] [ パーツ5 ]

• 色 ＞ ベースカラー ＞ 記事装飾パーツ で設定した色が反映します → 設定方法

●スタイル1

文字数で横幅が自動調整します。続けて文章を書いたときは回り込みになります。

<span class="parts-01-main"> ポイント </span>

メイン

<span class="parts-01-blue"> ポイント </span>

ブルー

<span class="parts-01-navy"> ポイント </span>

ネイビー

<span class="parts-01-red"> ポイント </span>

レッド

<span class="parts-01-green"> ポイント </span>

グリーン

<span class="parts-01-orange"> ポイント </span>

オレンジ

<span class="parts-01-purple"> ポイント </span>

パープル

<span class="parts-01-pink"> ポイント </span>

ピンク

<span class="parts-01-black"> ポイント </span>

ブラック

<span class="parts-01-grey"> ポイント </span>

グレー

●スタイル2

文字数で横幅が自動調整します。続けて文章を書いたときは回り込みになります。

<span class="parts-02-main"> ポイント </span>

メイン

<span class="parts-02-blue"> ポイント </span>

ブルー

<span class="parts-02-navy"> ポイント </span>

ネイビー

<span class="parts-02-red"> ポイント </span>

レッド

<span class="parts-02-green"> ポイント </span>

グリーン

<span class="parts-02-orange"> ポイント </span>

オレンジ

<span class="parts-02-purple"> ポイント </span>

パープル

<span class="parts-02-pink"> ポイント </span>

ピンク

<span class="parts-02-black"> ポイント </span>

ブラック

<span class="parts-02-grey"> ポイント </span>

グレー

●スタイル3

文字列の横幅 100 px で固定・文字は中央揃えです。文字数が多いときは自動で縦に伸びます。続けて文章を書いた時は改行されます。

<p class="parts-03-main"> ポイント </p>

メイン

<p class="parts-03-blue"> ポイント </p>

ブルー

<p class="parts-03-navy"> ポイント </p>

ネイビー

<p class="parts-03-red"> ポイント </p>

レッド

<p class="parts-03-green"> ポイント </p>

グリーン

<p class="parts-03-orange"> ポイント </p>

オレンジ

<p class="parts-03-purple"> ポイント </p>

パープル

<p class="parts-03-pink"> ポイント </p>

ピンク

<p class="parts-03-black"> ポイント </p>

ブラック

<p class="parts-03-grey"> ポイント </p>

グレー

ポイント１


テキスト

ポイント１


テキスト

●スタイル4

文字列の横幅 100 px で固定・文字は中央揃えです。文字数が多いときは自動で縦に伸びます。続けて文章を書いた時は改行されます。

<p class="parts-04-main"> ポイント </p>

メイン

<p class="parts-04-blue"> ポイント </p>

ブルー

<p class="parts-04-navy"> ポイント </p>

ネイビー

<p class="parts-04-red"> ポイント </p>

レッド

<p class="parts-04-green"> ポイント </p>

グリーン

<p class="parts-04-orange"> ポイント </p>

オレンジ

<p class="parts-04-purple"> ポイント </p>

パープル

<p class="parts-04-pink"> ポイント </p>

ピンク

<p class="parts-04-black"> ポイント </p>

ブラック

<p class="parts-04-grey"> ポイント </p>

グレー

ポイント１


テキスト

ポイント１


テキスト テキスト テキスト

●スタイル5

文字列の横幅 70 px × 縦幅 70 px で固定・文字は中央揃えです。文字数が多いときは折り返しますがはみ出します。

<p class="parts-05-main"> ポイント </p>

メイン

<p class="parts-05-blue"> ポイント </p>

ブルー

<p class="parts-05-navy"> ポイント </p>

ネイビー

<p class="parts-05-red"> ポイント </p>

レッド

<p class="parts-05-green"> ポイント </p>

グリーン

<p class="parts-05-orange"> ポイント </p>

オレンジ

<p class="parts-05-purple"> ポイント </p>

パープル

<p class="parts-05-pink"> ポイント </p>

ピンク

<p class="parts-05-black"> ポイント </p>

ブラック

<p class="parts-05-grey"> ポイント </p>

グレー

特典１


テキスト

特典１


テキスト テキスト テキスト

■その他

• ボタン登録なし
• 旧エディタ：テキストで直接記述してください

マージン余白

<div class="margin-auto"> テキスト </div>

margin:auto;　マージン余白オート

<div class="margin-l-auto"> テキスト </div>

margin-left:auto;　マージン左オート

<div class="margin-r-auto"> テキスト </div>

margin-right:auto;　マージン右オート

<div class="margin-0"> テキスト </div>

margin:0;　マージン余白なし

<div class="margin-t-0"> テキスト </div>

margin-top:0;　マージン上余白なし

<div class="margin-b-0"> テキスト </div>

margin-bottom:0;　マージン下余白なし

<div class="margin-l-0"> テキスト </div>

margin-left:0;　マージン左余白なし

<div class="margin-r-0"> テキスト </div>

margin-right:0;　マージン右余白なし

角丸

<div class="radius-0"> テキスト </div>

border-radius:0;　角丸なし

<div class="radius-4px"> テキスト </div>

border-radius:4px;　角丸 4 px

<div class="radius-6px> テキスト </div>

border-radius:6px;　角丸 6 px

<div class="radius-8px"> テキスト </div>

border-radius:8px;　角丸 8 px

<div class="radius-10px"> テキスト </div>

border-radius:10px;　角丸 10px

<div class="radius-round"> テキスト </div>

border-radius:50%;　角丸 50 % ( 円形 )

横幅

<div class="width-full"> テキスト </div>

width:100%;　余白・線を除いた親要素の幅になる

<div class="width-auto"> テキスト </div>

width:auto;　余白・線を含めた親要素の幅になる

表示関連

<div class="block"> テキスト </div>

display:block;　ブロック要素

<div class="table"> テキスト </div>

display:table;　テーブル要素

<span class="code"><code> テキスト </code></span>

デザイン処理されたソースコードを表示します

→　広告を2つ横並びにする

→　PCとスマホで広告を区分する

→　AMPページでコンテンツの [ 表示・非表示 ] を区分する

→　スポンサーリンクを入力する

→　レスポンシブ対応：YouTube / GoogleMap / その他 iframe

→　記事タイトルと URL コピーボタン