customtemplate等のサンプル

自分用に作成しました

テンプレート名
  • customtemplate
  • valid-seo-2c
  • valid-seo-3c

制作者のサイト
カスタムテンプレート⇒http://customtemplate.blog112.fc2.com/
コピペでOK!長文作成時の各パラグラフや文章の装飾用タグ一覧

h2 中見出しサンプル

h3 小見出しサンプル

h4 プチ見出しサンプル

基本装飾

背景の装飾

bodyで装飾できる背景色一覧

  1. 装飾名 "red" #f19b9b

  2. 装飾名 "pink" #fef

  3. 装飾名 "orange" #ffe77c

  4. 装飾名 "khaki" #f0e68c

  5. 装飾名 "yellow" #ffc

  6. 装飾名 "green" #efc

  7. 装飾名 "blue" #eff

  8. 装飾名 "purple" #e7c7e8

囲いの角の装飾

  1. 囲い装飾名 "border" 角の装飾なし

  2. 囲い装飾名 "border" 角の装飾名 "maru"

  3. 囲い装飾名 "border" 角の装飾名 "round"

  4. 囲い装飾名 "border" 角の装飾名 "kake"

  5. 囲い装飾名 "border" 角の装飾名 "blunt"

文字の装飾

強弱

  1. 装飾名 "notice"

  2. 装飾名 "pale"

文字サイズ

  1. 装飾名 "huge" 大きさ500%

  2. 装飾名 "big" 大きさ200%

  3. 装飾名 "large" 大きさ140%

  4. 装飾名 "small" 小ささ70%

  5. 装飾名 "tiny" 小ささ25%

  6. 装飾名 "bold" 太字

その他 文字飾り

  1. 装飾名 "del" 打ち消し

  2. 装飾名 "uline" 下線

  3. 装飾名 "italic" 斜体

ピクトグラム

ピクトグラム一覧

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

ピクトグラム名 "memo"

ピクトグラム名"memo"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "memo"

  2. 大きさ(中) "picto" ピクトグラム名 "memo"

  3. 大きさ(小) "picto-s" ピクトグラム名 "memo"

ピクトグラム名"memo"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "check"

ピクトグラム名"check"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "check"

  2. 大きさ(中) "picto" ピクトグラム名 "check"

  3. 大きさ(小) "picto-s" ピクトグラム名 "check"

ピクトグラム名"check"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "bikkuri"

ピクトグラム名"bikkuri"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "bikkuri"

  2. 大きさ(中) "picto" ピクトグラム名 "bikkuri"

  3. 大きさ(小) "picto-s" ピクトグラム名 "bikkuri"

ピクトグラム名"bikkuri"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "inyo"

ピクトグラム名"inyo"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "inyo"

  2. 大きさ(中) "picto" ピクトグラム名 "inyo"

  3. 大きさ(小) "picto-s" ピクトグラム名 "inyo"

ピクトグラム名"inyo"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "yubi"

ピクトグラム名"yubi"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "yubi"

  2. 大きさ(中) "picto" ピクトグラム名 "yubi"

  3. 大きさ(小) "picto-s" ピクトグラム名 "yubi"

ピクトグラム名"yubi"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "vsign"

ピクトグラム名"vsign"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "vsign"

  2. 大きさ(中) "picto" ピクトグラム名 "vsign"

  3. 大きさ(小) "picto-s" ピクトグラム名 "vsign"

ピクトグラム名"visign"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "batsu"

ピクトグラム名"batsu"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "batsu"

  2. 大きさ(中) "picto" ピクトグラム名 "batsu"

  3. 大きさ(小) "picto-s" ピクトグラム名 "batsu"

ピクトグラム名"batsu"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "hone"

ピクトグラム名"hone"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "hone"

  2. 大きさ(中) "picto" ピクトグラム名 "hone"

  3. 大きさ(小) "picto-s" ピクトグラム名 "hone"

ピクトグラム名"hone"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

ピクトグラム名 "kaku"

ピクトグラム名"kaku"の大きさ比較

  1. 大きさ(大) "picto-l" ピクトグラム名 "kaku"

  2. 大きさ(中) "picto" ピクトグラム名 "kaku"

  3. 大きさ(小) "picto-s" ピクトグラム名 "kaku"

ピクトグラム名"kaku"の配色比較

  1. 青系 配色名 "point"

  2. ピンク系 配色名 "hint"

  3. 緑系 配色名 "rei"

  4. 黒系 配色名 "ginga"

  5. 黄系 配色名 "chui"

  6. オレンジ系 配色名 "keikoku"

  7. 赤系 配色名 "kiken"

  8. その他 配色名 "valid"

  9. その他 配色名 "invalid"

  10. その他 配色名 "reverse"

  11. その他 配色名 "border"

囲い配色

囲い配色一覧

  1. 青系 配色名 "point"
    .point{background-color:#eff;border:1px outset #9cf;}
    .point .pictogram{color:#9cf;}

  2. ピンク系 配色名 "hint"
    .hint{background-color:#fef;border:1px outset #f9f;}
    .hint .pictogram{color:#f9f;}

  3. 緑系 配色名 "rei"
    .rei{background-color:#efc;border:1px outset #7f7;}
    .rei .pictogram{color:#7f7;}

  4. 黒系 配色名 "ginga"
    .ginga{background-color:#010101;border:3px dotted #ff5;color:#ff5;}
    .ginga .pictogram{color:#ff0;}

  5. 黄系 配色名 "chui"
    .chui{background-color:#ff5;border:3px dashed #222;}

  6. オレンジ系 配色名 "keikoku"
    .keikoku{background-color:#fa5;border:3px outset #f03;text-shadow:1px 1px 15px #fff;font-weight:bold;}
    .keikoku .pictogram{color:#f03;}

  7. 赤系 配色名 "kiken"
    .kiken{background-color:#f02;border:5px double #ff0;color:#ff1;}
    .kiken .pictogram{color:#ff0;text-decoration:blink;}

  8. その他 配色名 "valid"
    .valid,.valid .pictogram{background-color:#55B05A;color:#fff;}

  9. その他 配色名 "invalid"
    .invalid, .invalid .pictogram{background-color:#D23D24;color:#fff;}

  10. その他 配色名 "reverse"
    .reverse,.reverse .pictogram{background:#000080;color:#fff;}

  11. その他 配色名 "border"
    .border{border:1px solid #bbb;}

囲い配色詳細

青系 配色名 "point" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

ピンク系 配色名 "hint" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

緑系 配色名 "rei" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

黒系 配色名 "ginga" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

黄系 配色名 "chui" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

オレンジ系 配色名 "keikoku" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

赤系 配色名 "kiken" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

その他 配色名 "valid" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

その他 配色名 "invalid" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

その他 配色名 "reverse" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

その他 配色名 "border" のピクトグラム比較

  1. ピクトグラム名 "memo"

  2. ピクトグラム名 "check"

  3. ピクトグラム名 "bikkuri"

  4. ピクトグラム名 "inyo"

  5. ピクトグラム名 "yubi"

  6. ピクトグラム名 "vsign"

  7. ピクトグラム名 "batsu"

  8. ピクトグラム名 "hone"

  9. ピクトグラム名 "kaku"

各種組み合わせテスト

  1. 使用装飾 "picto-s memo" "point" "maru" "notice"

  2. 使用装飾 "picto check" "hint" "kake" "pale"

  3. 使用装飾
    "picto yubi"
    "rei"
    "round"

  4. 使用装飾 "picto-l hone" "ginga" "uline"
    二行目
    三行目
    四行目
    五行目
    六行目
    七行目
    八行目

  5. "blockquote" 使用装飾 "picto inyo" "chui" "italic"

  6. 使用装飾
    "picto-s bikkuri"
    "keikoku"
    "del"

  7. 使用装飾 "picto-l kaku" "kiken" "huge"

  8. "picto batsu" "valid" "kake" "big"

  9. 使用装飾 "picto-s vsign" "invalid" "blunt" "small""

  10. 使用装飾 "picto check" "reverse" "notice"
    ピクトグラムは2個以上並べられません
    noticeの効果が出ないものもあります

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m
ページ下部までご覧いただきありがとうございました。