記事装飾パーツ|カエテングラフ無料ブログ版

カエテングラフ

カエテングラフ無料ブログ版では次の 記事装飾パーツ をご用意しています。

 

 

■文字装飾

 

文字位置

 

左寄せ

テキスト

 

中央揃え

テキスト

 

右寄せ

テキスト

 

 

太字

 

テキスト

 

 

下線

 

テキスト

 

 

文字サイズ

 

12px

14px

16px

18px

20px

22px

24px

26px

28px

32px

36px

40px

 

 

文字色

 

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

ホワイト

 

 

文字背景

 

メイン
ブルー
ネイビー
レッド
グリーン
オレンジ
パープル
ピンク
ブラック
グレー

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

パディング背景角丸

 

変更例

パディング:左右余白20px ( padding-l-20px padding-r-20px ) 背景:グラデーションあり ( grada ) 角丸:10px ( radius-10px )

テキスト

 

 

蛍光マーカー

 

イエロー
ブルー
レッド
グリーン
オレンジ
ピンク

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色パディング角丸

 

変更例

文字色:白 ( kfc-white ) パディング:左右余白20px ( padding-l-20px padding-r-20px ) 角丸:10px ( radius-10px )

テキスト

 

 

蛍光ライン

 

イエロー
ブルー
レッド
グリーン
オレンジ
ピンク

 

 

罫線囲み

 

色指定なし
メイン
ブルー
ネイビー
レッド
グリーン
オレンジ
パープル
ピンク
ブラック
グレー

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色パディング角丸

 

変更例

文字色:メイン ( kfc-main ) パディング:左右余白20px ( padding-l-20px padding-r-20px ) 角丸:10px ( radius-10px )

テキスト

 

 

文字だけ見出し

 

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

 

 

■テーブル

 

上に見出しあり

項目1項目2項目3
10100
20200
30300

 

横に見出しあり

項目110100
項目220200

 

上と横に見出しあり

項目項目1項目2項目3
メニュー110200
メニュー220200

 

見出し無し

10100
20200
30300

 

 

■画像回り込み

 

画像左回り込み

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

 

画像右回り込み

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

 

 

■引用

 

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

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲みマージンパディング背景罫線角丸

 

変更例

文字色:白 ( kfc-white ) 蛍光マーカー:赤 ( kmarker-red ) 角丸:10px ( radius-10px )

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

 

 

■ボックス

 

通常ボックス

テキスト

 

注意ボックス

注意して欲しい事などの補足説明にご利用ください

 

疑問ボックス

疑問を持たれそうな事などの補足説明にご利用ください

 

補足ボックス

インフォメーションなどの補足説明にご利用ください

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲みマージンパディング背景罫線角丸

 

変更例

背景:なし ( bg-none ) 罫線囲み ( border ) 罫線:破線 ( dashed ) 角丸:10px ( radius-10px )

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

 

 

ボックスタイトル

テキスト
テキスト

 

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

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲みマージンパディング背景罫線角丸

 

変更例 1

文字背景:赤 ( kbg-red ) 罫線なし ( borderを削除 )

テキスト
テキスト

 

変更例 2

文字色:白 ( kfc-white ) 蛍光マーカー:赤 ( kmarker-red )  マージン:左右余白オート ( margin-l-auto margin-r-auto ) 角丸:10px ( radius-10px ) 罫線なし ( borderを削除 )

テキスト
テキスト

 

 

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

 

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

デフォルト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h3-01-main にしたとき
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

 

■Q&A

 

質問

質問を入力してください

 

回答

回答を入力してください

 

 

■ボタン

 

 

デザイン変更

リンクのclass属性に次の記述を追加してデザインを変更できます。

背景角丸

 

変更例

背景:グラデーション ( grada ) 角丸:10px ( radius-10px )

 

 

■記事カード

 

表示例

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

 

 

■会話コンテンツ

  • 人物画像はご自身でご用意ください

 

会話左

カエテン
名前
会話内容

 

会話右

カエテン
名前
会話内容

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲み罫線

 

変更例

文字色:白 ( kfc-white ) 蛍光マーカー:赤 ( kmarker-red )  罫線なし ( borderを削除 )

カエテン
カエテン
会話内容

 

 

■ flexbox ( 横並びボックス )

 

左側テキスト

右側テキスト

 

 

■ h2 タグ

 

スタイル1

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル2

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル3

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル4

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル5

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲みマージンパディング背景罫線角丸

 

変更例:スタイル 3 の場合

文字色:メイン ( kfc-main ) 背景:グラデーションなし ( grada-none ) 罫線:破線 ( dashed ) 角丸:10px ( radius-10px )

テキスト

 

 

■ h3 タグ

 

スタイル1

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル2

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル3

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル4

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル5

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル6

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル7

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

スタイル8

メイン

ブルー

ネイビー

レッド

グリーン

オレンジ

パープル

ピンク

ブラック

グレー

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲みマージンパディング背景罫線角丸

 

変更例:スタイル 1 の場合

文字色:メイン ( kfc-main ) 罫線:破線 ( dashed ) 角丸:10px ( radius-10px )

テキスト

 

変更例:スタイル 3 の場合

文字色:メイン ( kfc-main ) 罫線:下罫線なし ( border-b-none )

テキスト

 

 

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

 

スタイル1

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル2

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル3

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル4

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル5

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル6

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル7

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル8

  • メイン
  • ブルー
  • ネイビー
  • レッド
  • グリーン
  • オレンジ
  • パープル
  • ピンク
  • ブラック
  • グレー

 

スタイル9

シンプルな米印 1 色のみ

  • テキスト

 

 

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

 

スタイル1

  1. メイン
  1. ブルー
  1. ネイビー
  1. レッド
  1. グリーン
  1. オレンジ
  1. パープル
  1. ピンク
  1. ブラック
  1. グレー

 

スタイル2

  1. メイン
  1. ブルー
  1. ネイビー
  1. レッド
  1. グリーン
  1. オレンジ
  1. パープル
  1. ピンク
  1. ブラック
  1. グレー

 

スタイル3

  1. メイン
  1. ブルー
  1. ネイビー
  1. レッド
  1. グリーン
  1. オレンジ
  1. パープル
  1. ピンク
  1. ブラック
  1. グレー

 

スタイル4

  1. メイン
  1. ブルー
  1. ネイビー
  1. レッド
  1. グリーン
  1. オレンジ
  1. パープル
  1. ピンク
  1. ブラック
  1. グレー

 

 

■バッジ

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

 

ポイント1

 

デザイン変更

class属性に次の記述を追加してデザインを変更できます。

文字色文字背景蛍光マーカー罫線囲み背景罫線

 

変更例 1

文字背景:赤 ( kbg-red ) 罫線なし ( borderを削除 )

ポイント1

 

変更例 2

文字色:白 ( kfc-white ) 蛍光マーカー:赤 ( kmarker-red )  罫線なし ( borderを削除 )

ポイント1

 

 

■その他

 

マージン

<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="margin-t-5px"> テキスト </div> マージン上余白 5 px margin-top:5px;
<div class="margin-t-10px"> テキスト </div> マージン上余白 10 px margin-top:5px;
<div class="margin-t-15px"> テキスト </div> マージン上余白 15 px margin-top:5px;
<div class="margin-t-20px"> テキスト </div> マージン上余白 20 px margin-top:20px;

 

<div class="margin-b-5px"> テキスト </div> マージン下余白 5 px margin-bottom:5px;
<div class="margin-b-10px"> テキスト </div> マージン下余白 10 px margin-bottom:5px;
<div class="margin-b-15px"> テキスト </div> マージン下余白 15 px margin-bottom:5px;
<div class="margin-b-20px"> テキスト </div> マージン下余白 20 px margin-bottom:20px;

 

<div class="margin-l-5px"> テキスト </div> マージン左余白 5 px margin-left:5px;
<div class="margin-l-10px"> テキスト </div> マージン左余白 10 px margin-left:5px;
<div class="margin-l-15px"> テキスト </div> マージン左余白 15 px margin-left:5px;
<div class="margin-l-20px"> テキスト </div> マージン左余白 20 px margin-left:20px;

 

<div class="margin-r-5px"> テキスト </div> マージン右余白 5 px margin-rigth:5px;
<div class="margin-r-10px"> テキスト </div> マージン右余白 10 px margin-rigth:5px;
<div class="margin-r-15px"> テキスト </div> マージン右余白 15 px margin-rigth:5px;
<div class="margin-r-20px"> テキスト </div> マージン右余白 20 px margin-rigth:20px;

 

パディング

<div class="padding-0"> テキスト </div> パディング余白なし padding:0;
<div class="padding-t-0"> テキスト </div> パディング上余白なし padding-top:0;
<div class="padding-b-0"> テキスト </div> パディング下余白なし padding-bottom:0;
<div class="padding-l-0"> テキスト </div> パディング左余白なし padding-left:0;
<div class="padding-r-0"> テキスト </div> パディング右余白なし padding-right:0;

 

<div class="padding-t-5px"> テキスト </div> パディング上余白 5 px padding-top:5px;
<div class="padding-t-10px"> テキスト </div> パディング上余白 10 px padding-top:5px;
<div class="padding-t-15px"> テキスト </div> パディング上余白 15 px padding-top:5px;
<div class="padding-t-20px"> テキスト </div> パディング上余白 20 px padding-top:20px;

 

<div class="padding-b-5px"> テキスト </div> パディング下余白 5 px padding-bottom:5px;
<div class="padding-b-10px"> テキスト </div> パディング下余白 10 px padding-bottom:5px;
<div class="padding-b-15px"> テキスト </div> パディング下余白 15 px padding-bottom:5px;
<div class="padding-b-20px"> テキスト </div> パディング下余白 20 px padding-bottom:20px;

 

<div class="padding-l-5px"> テキスト </div> パディング左余白 5 px padding-left:5px;
<div class="padding-l-10px"> テキスト </div> パディング左余白 10 px padding-left:5px;
<div class="padding-l-15px"> テキスト </div> パディング左余白 15 px padding-left:5px;
<div class="padding-l-20px"> テキスト </div> パディング左余白 20 px padding-left:20px;

 

<div class="padding-r-5px"> テキスト </div> パディング右余白 5 px padding-rigth:5px;
<div class="padding-r-10px"> テキスト </div> パディング右余白 10 px padding-rigth:5px;
<div class="padding-r-15px"> テキスト </div> パディング右余白 15 px padding-rigth:5px;
<div class="padding-r-20px"> テキスト </div> パディング右余白 20 px padding-rigth:20px;

 

角丸

<div class="radius-0"> テキスト </div> 角丸なし border-radius:0;
<div class="radius-4px"> テキスト </div> 角丸 4 px border-radius:4px;
<div class="radius-6px"> テキスト </div> 角丸 6 px border-radius:6px;
<div class="radius-8px"> テキスト </div> 角丸 8 px border-radius:8px;
<div class="radius-10px"> テキスト </div> 角丸 10 px border-radius:10px;
<div class="radius-round"> テキスト </div> 角丸 50 % ( 円形 ) border-radius:50%;

 

横幅

<div class="width-full"> テキスト </div> 余白・線を除いて親要素の幅になる width:100%;
<div class="width-auto"> テキスト </div> 余白・線を含めて親要素の幅になる width:auto;

 

罫線

<div class="border-none"> テキスト </div> 罫線なし border:none;
<div class="border-t-none"> テキスト </div> 上罫線なし border-top:none;
<div class="border-b-none"> テキスト </div> 下罫線なし border-bottom:none;
<div class="border-l-none"> テキスト </div> 左罫線なし border-left:none;
<div class="border-r-none"> テキスト </div> 右罫線なし border-right:none;
<div class="dashed"> テキスト </div> 罫線スタイル:破線 border-style:dashed;
<div class="dotted"> テキスト </div> 罫線スタイル:点線 border-style:dotted;
<div class="double"> テキスト </div> 罫線スタイル:二重線 border-style:double;

 

背景

<div class="bg-none"> テキスト </div> 背景なし background:none;
<div class="grada-none"> テキスト </div> グラデーションなし background-image:none;
<div class="grada"> テキスト </div> グラデーションあり background-image:グラデ記述

 

表示

<div class="block"> テキスト </div> ブロック要素 display:block;
<div class="inline-block"> テキスト </div> インラインブロック要素 display:inline-block;
<div class="table"> テキスト </div> テーブル要素 display:table;
<div class="break-all"> テキスト </div> 禁則処理解除 word-break:break-all;
<div class="font-weight-normal"> テキスト </div> 文字太さ通常 font-weight:normal;
<div class="line-height-normal"> テキスト </div> 行の高さ通常 line-height:inherit;
<div class="decoration-none"> テキスト </div> リンク下線なし text-decoration:none;
<span class="code"><code> テキスト </code></span> ソースコード

 

 

■クラス属性無し h2 / h3 / ul / ol タグ

 

h2 タグ

テキスト

 

h3 タグ

テキスト

 

ul タグ

  • テキスト

 

ol タグ

  1. テキスト
記事タイトルとURLをコピーする