パーツサンプル


ページ作成方法

ヘッダー画像がある場合

  1. 固定ページ記事一覧の画面の「Clone」もしくは「New Draft」で「固定ページ　パーツサンプル」をコピー。
    テンプレートは「No sidebar,No page tite」
  2. meta titleやmeta descriptionの指定があれば、設定
  3. htmlやカスタムCSSをページに合わせて変更
  4. 新たにhtmlやcssを追加する場合は、レスポンシブ時の動きを要確認

ヘッダー画像がない場合

  1. 固定ページ記事一覧の画面の「Clone」もしくは「New Draft」で「固定ページ　サンプル（3rd）」をコピー
    テンプレートは「No sidebar」
  2. meta titleやmeta descriptionの指定があれば、設定
  3. htmlやカスタムCSSをページに合わせて変更
  4. 新たにhtmlやcssを追加する場合は、レスポンシブ時の動きを要確認

ヘッダー画像について

写真サイズ

テーマ上の推奨サイズ：横幅1450px、縦幅400px

画面幅によって、上下が切り取られる。

スタイルの追加について

基本的な見出し等のスタイルは作成しました。
各ページ作成時に、追加で必要なスタイルを作成。

スタイルを使用するページが1ページのみの場合

各ページのカスタムCSSに記述

スタイルを使用するページが2ページ以上の場合

/html/wp-content/themes/nextage_child/style.css　に記述

見出し・文字色・背景色

見出し3　サンプルテキスト　サンプルテキスト

見出し4　サンプルテキスト　サンプルテキスト

見出し5　サンプルテキスト　サンプルテキスト
見出し6

見出し3　サンプルテキスト　サンプルテキスト

見出し4　サンプルテキスト　サンプルテキスト

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

リンクテキスト

色つき文字　サンプルテキスト　サンプルテキスト

色つき文字　サンプルテキスト　サンプルテキスト

色つき文字　サンプルテキスト　サンプルテキスト

色つき文字　サンプルテキスト　サンプルテキスト

色つき文字　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

背景色　サンプルテキスト　サンプルテキスト

濃い色の背景色　サンプルテキスト　サンプルテキスト

濃い色の背景色　サンプルテキスト　サンプルテキスト

濃い色の背景色　サンプルテキスト　サンプルテキスト

濃い色の背景色　サンプルテキスト　サンプルテキスト

濃い色の背景色　サンプルテキスト　サンプルテキスト

上記の色は、サイトの色に合わせて調整する。

メッセージテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

ボタン

基本のボタン

サンプルボタン

アイコン

PDFリンク EXCELリンク WORDリンク 他ページへリンク 他サイトへリンク ファイルリンク

リスト

  • class指定なし　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • class=”list01″　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  1. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  2. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  1. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  2. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  3. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • class=”list02″　下線表示
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • class=”layoutPT01_m”　list02に加えて、各サイズ以下で下線表示
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • class=”list03″　間隔広め
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  • サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  1. class=”list03″　間隔広め
  2. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  3. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
  4. サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

インデックスページのフォーマット

通常パターン　menuBox01

  • トップページやセカンドページで、下層ページへのリンクに使用します。

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

2カラム　タイトル

ページ内リンクのフォーマット

リンク1

ページ内リンクのリンク先に「id=”link01″」等を指定します。

リンク2

scrollcontrol.jsで、ページ内リンクがスムーズなスクロールになるよう設定しています。
#で始まるアンカーをクリックした場合に動作します。

余白の指定

padding

classに以下のスタイルを指定します。

  • pT0～pT1024（10px刻み）：上にpadding○○px　　pT0per～pL100per（5%刻み）：上にpadding○○%
  • pB0～pB1024（10px刻み）：下にpadding○○px　　pB0per～pB100per（5%刻み）：下にpadding○○%
  • pL0～pL1024（10px刻み）：左にpadding○○px　　pT0per～pL100per（5%刻み）：左にpadding○○%
  • pR0～pR1024（10px刻み）：右にpadding○○px　　pR0per～pR100per（5%刻み）：右にpadding○○%

margin

classに以下のスタイルを指定します。

  • mT0～mT1024（10px刻み）：上にmargin○○px　　mT0per～mL100per（5%刻み）：上にmargin○○%
  • mB0～mB1024（10px刻み）：下にmargin○○px　　mB0per～mB100per（5%刻み）：下にmargin○○%
  • mL0～mL1024（10px刻み）：左にmargin○○px　　mT0per～mL100per（5%刻み）：左にmargin○○%
  • mR0～mR1024（10px刻み）：右にmargin○○px　　mR0per～mR100per（5%刻み）：右にmargin○○%

幅の指定

classに以下のスタイルを指定します。

  • w0～w1020（10px刻み）：width○○px　　w0per～w100per（0～10%は1%刻み、それ以降は5%刻み）：width○○%

画像関係

画像左寄せ（回り込みあり）・画像右寄せ（回り込みあり）

画像左寄せ（回り込みあり）

sample画像を囲むタグのclassに「cf」を指定します。
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像右寄せ（回り込みあり）

sample画像を囲むタグのclassに「cf」を指定します。
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像のキャプション

sample
画像のキャプション

画像の使い分け

特に指定がない場合は、倍サイズの画像を1つ作成し、サイズ指定で縮小して使用する。

使い分けパターン
コンテンツ内で使用する写真が少ない・小さい場合（5枚以下など）
  1. 表示サイズの倍の大きさの画像を1枚用意
  2. imgタグのwidthやheightで、表示サイズの値を指定する

Lサイズ時の表示サイズが、Sサイズ以下での表示サイズの倍以上になる場合は、Sサイズ以下の高解像度ブラウザで表示が縮小され見た目が気にならないので、1倍の画像を利用しても良い。

コンテンツ内で使用する写真が多い・大きい場合
  1. 画面幅や解像度に合った画像を複数枚用意
  2. pictureタグで切り替えをする

方法は「画像の切り替え方法」参照。

画像の切り替え方法
同じ内容で、ピクセル密度で画像を切り替えたい

Mサイズ以下の時、幅100%表示にしない画像向け。
ロゴやインデックスページのフォーマットも同じ方法。
レスポンシブ対応には、最低でもこちらを用意する。

  • ピクセル密度が「1」：青緑色の画像
  • ピクセル密度が「2」以上：オレンジ色の画像
sample
同じ内容や違う画像で、幅とピクセル密度で画像を切り替えたい

メインビジュアルやコンテンツ画像

  • ピクセル密度が「1」：青緑色＋サイズ表示の画像
  • ピクセル密度が「2」以上：オレンジ色＋サイズ表示の画像
sample
背景画像を、幅とピクセル密度で画像を切り替えたい

ページタイトルの背景画像などの装飾系
cssに独自に記述する必要がある。

画像表示の仕様

下記に該当するのは#contents内のみ。
headerやfooterは該当しない。

M～Lサイズ 指定サイズで表示。最大幅100％
SS～Sサイズ 幅100％で表示
classに「noResize」 全サイズで画像が指定サイズで表示。幅100％にならない。
最大幅は100％
classに「w100per」 全サイズで画像が幅100％で表示。

※class名やファイル名に「ico」が含まれている場合は、自動的に幅100%表示にしなくなります。

noResizeの例
sample sample sample

1カラムレイアウト

テキスト等をそのまま書く

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像を1カラム幅いっぱいに表示したい場合は、classに「w100per」を指定

2カラムレイアウト（左右違う幅のもの）

  • 幅や余白は調整可能
  • それぞれの幅は%で指定する。classの「w48per」等の指定を変えて調整。
    幅の計算は「カラムの幅÷全体のコンテンツ幅（1000px）×100%」
  • 画像は、SSサイズ以下で画面幅に合わせて自動縮小
    詳細は「画像表示の仕様」参照
  • 画像はそのままだとSサイズのときに左寄せになる。
    左右中央に配置する場合は、親要素のclassに「taC」を指定する。
    Sサイズのときも幅100％で表示する場合は、imgタグのclassに「w100per」を指定する。

基本：左右の幅が480px（48%）、余白が20px（2%）
Sサイズ以下は1カラムとするため、classに「layoutPT01_s」をつけること

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像を左右中央に配置する

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像をSサイズのときも幅100％で表示する

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

左の幅が320px（32%）、右の幅が660px（66%）、余白が20px（2%）

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

画像とテキストの組み合わせ、位置調整

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

classに「taC」等を指定して、左右中央寄せの位置調整が可能。
画像だけ位置調整をする場合は、span class=”dispB taC”等で指定する。

Youtube

class「youtubeBox」で囲む。
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

1カラムにしないバージョン

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

各サイズ以下は1カラム

Mサイズ以下は1カラム
＜左＞Mサイズ以下は1カラムで表示したい場合は、classに「layoutPT01_m」を指定します。
＜右＞1カラムの時の幅を調整したい場合は、cssを変更する
Sサイズ以下は1カラム
＜左＞Sサイズ以下は1カラムで表示したい場合は、classに「layoutPT01_s」を指定します。
＜右＞1カラムの時の幅を調整したい場合は、cssを変更する
SSサイズ以下は1カラム
＜左＞SSサイズ以下は1カラムで表示したい場合は、classに「layoutPT01_ss」を指定します。
＜右＞1カラムの時の幅を調整したい場合は、cssを変更する

カラムレイアウト（同じ幅のものが複数）

  • 画像は、Sサイズ以下で画面幅に合わせて自動縮小
    詳細は「画像表示の仕様」参照
  • 画像はそのままだと左寄せになる。
    左右中央に配置する場合は、親要素のclassに「taC」を指定する。
    全サイズ幅100％で表示する場合は、imgタグのclassに「w100per」を指定する。

基本：Sサイズ以下は1カラムとするため、classに「layoutPT01_s」をつけること

2カラムレイアウト
＜左上＞2カラムレイアウト　サンプルテキスト　サンプルテキスト
＜右上＞2カラムレイアウト　サンプルテキスト
＜左下＞2カラムレイアウト
＜右下＞2カラムレイアウト　サンプルテキスト　サンプルテキスト
3カラムレイアウト
＜左上＞3カラムレイアウト　サンプルテキスト　サンプルテキスト
＜中央上＞3カラムレイアウト　サンプルテキスト
＜右上＞3カラムレイアウト
＜左下＞3カラムレイアウト　サンプルテキスト　サンプルテキスト

1カラムにしないバージョン

2カラムレイアウト
2カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
2カラムレイアウト　サンプルテキスト
2カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
2カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
3カラムレイアウト
3カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
3カラムレイアウト　サンプルテキスト
3カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
3カラムレイアウト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

各サイズ以下は1カラム

class名は「2カラムレイアウト（左右違う幅のもの）」参照

下記はMサイズ以下は1カラムの例

2カラムレイアウト
＜左上＞2カラムレイアウト　サンプルテキスト　サンプルテキスト
＜右上＞2カラムレイアウト　サンプルテキスト
＜左下＞2カラムレイアウト
＜右下＞2カラムレイアウト　サンプルテキスト　サンプルテキスト
3カラムレイアウト
＜左上＞3カラムレイアウト　サンプルテキスト　サンプルテキスト
＜中央上＞3カラムレイアウト　サンプルテキスト
＜右上＞3カラムレイアウト
＜左下＞3カラムレイアウト　サンプルテキスト　サンプルテキスト

カラムレイアウト（高さを揃えたい場合）

基本：Sサイズ以下は1カラムとするため、classに「layoutPT01_s」をつけること

2カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
カラムに間隔をあける場合も同様
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
3カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
4カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

1カラムにしないバージョン

2カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
2カラムレイアウト（カラムに間隔をあける場合）
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
3カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
3カラムレイアウト（カラムに間隔をあける場合）
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
4カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
4カラムレイアウト（カラムに間隔をあける場合）
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

各サイズ以下は1カラム

class名は「2カラムレイアウト（左右違う幅のもの）」参照

下記はMサイズ以下は1カラムの例

2カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
カラムに間隔をあける場合も同様
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　
サンプルテキスト　サンプルテキスト
3カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
4カラムレイアウト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト

テーブル

罫線の有り

見出し テキスト　テキスト
見出し テキスト　テキスト
見出し thの文字の太さをnormalにする場合
見出し tableのclassに「thFwNormal」を指定

罫線の無し

見出し テキスト　テキスト
見出し テキスト　テキスト

囲みケイだけ

見出し テキスト　テキスト
見出し テキスト　テキスト

下線だけ

見出し テキスト　テキスト
見出し テキスト　テキスト

色つき見出し

見出し classに「thAllPT01Dark」～「thAllPT05Dark」指定
見出し テキスト　テキスト

レスポンシブテーブル（Mサイズ以下）

上下レイアウトに変更
単語 品詞 意味 用例
responsive 形容詞 すぐ応答[反応]する，敏感な We must be responsive to the needs of society.
adaptive 形容詞 適応性の(ある) social facilitation is an adaptive condition
elastic 形容詞 弾力のある，伸縮自在の Rubber is very elastic.
横スクロール

normalTable01と相性が良いです。

見出し1 見出し2 見出し3 見出し4 見出し5
テキスト　テキスト テキスト　テキスト テキスト　テキスト テキスト　テキスト テキスト　テキスト
テキスト　テキスト テキスト　テキスト テキスト　テキスト テキスト　テキスト テキスト　テキスト
テキスト　テキスト　テキスト テキスト　テキスト　テキスト テキスト　テキスト　テキスト テキスト　テキスト　テキスト テキスト　テキスト　テキスト

アイコン付きリンク

回り込み有りのアイコン付きリンク

PDFファイルはこちら EXCELファイルはこちら(.xls形式)

PDFファイルはこちら　長い文章　長い文章　長い文章　長い文章　長い文章　長い文章　長い文章　長い文章　長い文章　長い文章

電話番号

メール

回り込み無しのアイコン付きリンク

PDFファイルはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

他ページへの移動するリンクはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

他サイトへ移動するリンクはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

EXCELファイルはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

WORDファイルはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

ファイルはこちら　背景画像にアイコンを入れることで、回り込みをさせない。　長い文章　長い文章　長い文章　長い文章　長い文章

※注意書きなど。左側に「※」等を入れて、回り込みをさせたくない場合に使用。左側は一文字とする。　長い文章　長い文章　長い文章　長い文章

タイトル　タイトル　タイトル

文章　文章　文章　文章　文章　文章

文章　文章　文章　文章　文章　文章

横配置・縦配置

横位置

左配置

中央配置

右配置

各サイズでの横配置指定

class名は、それぞれ、左配置：taL、中央配置：taC、右配置：taR　を変更して使用してください。
下記はすべて中央配置の例です。

1サイズのみ
  • Lサイズのみ　classに「taC_LsizeOnly」
  • Mサイズのみ　classに「taC_MsizeOnly」
  • Sサイズのみ　classに「taC_SsizeOnly」
  • SSサイズのみ　classに「taC_SSsizeOnly」

以下、各サンプルです。

Lサイズのみ
Mサイズのみ
Sサイズのみ
SSサイズのみ
○○以上のサイズのみ
  • Mサイズ以上（M、L）　classに「taC_MsizeAndMore」
  • Sサイズ以上（S、M、L）　classに「taC_SsizeAndMore」

以下、各サンプルです。

Mサイズ以上（M、L）
Sサイズ以上（S、M、L）
○○以下のサイズのみ
  • Mサイズ以下（M、S、SS）　classに「taC_MsizeAndLess」
  • Sサイズ以下（S、SS）　classに「taC_SsizeAndLess」

以下、各サンプルです。

Mサイズ以下（M、S、SS）
Sサイズ以下（S、SS）

縦位置

サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
上配置　classに「vlineT」
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
中央配置　classに「vlineM」
サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト　サンプルテキスト
下配置　classに「vlineB」

その他

float要素のclearfix

classに「cf」を追加する。
overflow:hiddenは使用しない。

文字の改行設定

英数字などを自動で改行

xlassに「wordBreak01」を追加する。

自動で改行させない

xlassに「nowrap」を追加する。

各サイズで表示・非表示にしたいコンテンツ

1サイズのみ

  • Lサイズのみ　classに「LsizeOnly」
  • Mサイズのみ　classに「MsizeOnly」
  • Sサイズのみ　classに「SsizeOnly」
  • SSサイズのみ　classに「SSsizeOnly」

以下、各サンプルです。

Lサイズのみ　classに「LsizeOnly」
Mサイズのみ　classに「MsizeOnly」
Sサイズのみ　classに「SsizeOnly」
SSサイズのみ　classに「SSsizeOnly」

○○以上のサイズのみ

  • Mサイズ以上（M、L）　classに「MsizeAndMore」
  • Sサイズ以上（S、M、L）　classに「SsizeAndMore」

以下、各サンプルです。

Mサイズ以上（M、L）　classに「MsizeAndMore」
Sサイズ以上（S、M、L）　classに「SsizeAndMore」

○○以下のサイズのみ

  • Mサイズ以下（M、S、SS）　classに「MsizeAndLess」
  • Sサイズ以下（S、SS）　classに「SsizeAndLess」

以下、各サンプルです。

Mサイズ以下（M、S、SS）　classに「MsizeAndLess」
Sサイズ以下（S、SS）　classに「SsizeAndLess」

Mサイズ以上で画像、Sサイズ以下でテキスト

imgタグを囲むタグのclassに「viewChangeImg」を指定します。
テキストの内容は、「data-title」に指定します。

sample

Googleマップ埋め込み

  • iframeを囲むdivに「class=”mapArea”」を指定。
  • さらにそのdivを囲むdivに「class=”mapAreaWrap”」を指定。
  • 独自のスタイルを指定したい場合は、.mapAreaを囲むdivに「id=”○○”」等の独自idを指定し、各cssにスタイルを追加。
    下記の例の場合は、LサイズMサイズとSサイズSSサイズで高さを変更しています。