What's New(リストタグを使ったシンプルなパターン)

What's New(定義タグとアイコンを使ったパターン)

2012年12月31日
ニュース
テキストが1行の時に日付部分を2行にすると崩れます。
また、カテゴリの文字数は5文字程度しか表示されませんので、文字数が多くなる場合は、CSS内の「/*カテゴリの文字数が多い場合*/」以下の指定を有効にしてください。
2010年12月12日
PR
ここにテキストが入ります。
2012年12月31日
新商品
ここにテキストが入ります。
2012年12月31日
新商品
ここにテキストが入ります。
2012年12月31日
新商品
ここにテキストが入ります。
2012年12月31日
新商品
ここにテキストが入ります。

What's New2(定義タグとアイコンを使ったパターン)

2012年12月31日
  • 新商品
  • キャンペーン
ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
  • 新商品
  • キャンペーン
  • お得情報
  • 期間限定
  • キャンペーン
  • お得情報
ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
  • PR
ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

What's New(定義タグを使ったパターン)

2012年12月31日
ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
ここにテキストが入ります。ここにテキストが入ります。
2012年12月31日
ここにテキストが入ります。ここにテキストが入ります。

H2用のテキストが入ります。

2002×2002

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

H3用のテキストが入ります。

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

H4用のテキストが入ります。

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

H5用のテキストが入ります。

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

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。

「divタグ(boxクラス)」を使って左右に並べた例

サイト制作が楽になるソフト一覧

売れ筋ベスト5

  1. 商品名1

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

  2. 商品名2

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

  3. 商品名3

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

  4. 商品名4

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

  5. 商品名5

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

「リストタグ(checklist)を使った例

  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

「テーブルタグ」を使った例

おすすめのサービス 評価(5段階) 詳細
ウォーターサーバー ★★★★★ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
サンプルバナー ★★★★☆ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
サンプルバナー ★★☆☆☆ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

「テーブルタグ」を使った例(2)

商品名:サンプルA1-001 ★★★★★ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
商品名:サンプルA2-001 ★★★★☆ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
商品名:サンプルA3-001 ★★☆☆☆ ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

本テンプレートでは「advanced.css」の中に便利なCSSの設定をご用意しています。

1、文字色を変える

  • 文字色を黒色に変更することができます。
  • 文字色を赤色に変更することができます。
  • 文字色を青色に変更することができます。
  • 文字色を緑色に変更することができます。
  • 文字色を黄色く変更することができます。
  • 文字色を紺色に変更することができます。
  • 文字色を灰色に変更することができます。
  • 文字色をオレンジに変更することができます。
  • 文字色をピンクに変更することができます。
  • 文字色を紫色に変更することができます。
  • 文字色を黄土色に変更することができます。
  • 文字色を黄緑に変更することができます。
  • 文字色を水色に変更することができます。

2、文字の大きさを変える

  1. 文字を太字にすることができます。
  2. 文字を「120%」の大きさにすることができます。
  3. 文字を「150%」の大きさにすることができます。
  4. 文字を「180%」の大きさにすることができます。
  5. 文字を「80%」の大きさにすることができます。

3、下線や取消線を引く

  • 文字に下線を引くことができます。
  • 文字に取り消し線を引くことができます。

4、文字列を「蛍光ペンのようなボックス」で囲む

  • 文字を黄色いボックスで囲むことができます。
  • 文字を水色のボックスで囲むことができます。
  • 文字を灰色のボックスで囲むことができます。
  • 文字を赤色のボックスで囲むことができます。

5、文字列の前にアイコンを付ける。

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭に注意!という画像が付いた状態で表示されます。

先頭に注意!という画像が付いた状態で表示されます。


先頭に初心者マークが付いた状態で表示されます。

先頭にメール画像が付いた状態で表示されます。

先頭にPDF画像が付いた状態で表示されます。

先頭にZIP画像が付いた状態で表示されます。

先頭にRSS画像が付いた状態で表示されます。

先頭にRSS画像が付いた状態で表示されます。


一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

Youtube動画の埋め込み

このページの先頭へ