JFマリンバンク長崎しんぎょれん公式ページです。店舗情報・ATM案内・お知らせなどを公開しております。

design-sample

  • HOME »
  • design-sample

Text-Color

classに次のワードを指定することで、色を付けることができます。

text-red

text-blue

text-green

text-yellow

text-white

text-glay

text-red-light

text-blue-light

text-green-light

text-yellow-light

text-glay-light

Code

Head

classを与えることなく、次のデザインで表示されます。

h1

h2

h3

h4

h5
h6

Code

Background-Color

classに次のワードを指定することで、背景の色を変えることができます。

bg-red

bg-blue

bg-green

bg-yellow

bg-white

bg-glay

bg-red-light

bg-blue-light

bg-green-light

bg-yellow-light

bg-glay-light

bg-grad-red

bg-grad-blue

bg-grad-green

bg-grad-yellow

bg-grad-glay

Code

Table

classに次のワードを指定することで、テーブルをデザインできます。
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value
Header1 Header2 Header3 Header4
Row1 Value Value Value
Row2 Value Value Value

Code

Width

classに次のワードを指定することで、コンテンツのサイズを変更することができます。

width-10

width-20

width-30

width-40

width-50

width-60

width-70

width-80

width-90

width-100

Code

List-items

classに次のワードを指定することで、リストのアイコンを変更できます。
fish arrow pen check
icon-1
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
icon-2
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.
  • List item.

Code

Text-alignment

classに次のワードを指定することで、ラインマーカーを引くことができます。

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

Here the line is drawn.

Code

Text-alignment

classに次のワードを指定することで、文字の位置を変更できます。

text-center

text-right

text-left

Code

Hover

classに次のワードを指定することで、マウスホバー時の動作を制御できます。

hover-translate

hover-shadow

hover-spin

Code

Button

classに次のワードを指定することで、ボタンとして表示することができます。

button

inline-button like this.

Code

Padding

classに次のワードを指定することで、余白の大きさを変えることができます。

none small middle pad-large

Code

Margin

classに次のワードを指定することで、要素の幅を変えることができます。

Margin bottom

Margin top

Margin right

Margin left

Code

Label

classに次のワードを指定することで、ラベルを作ることができます。

labellabel

Code

Min Width

classに次のワードを指定することで、幅の最小値を指定することができます。

anone

amin-width-5

abcdefmin-width-5

abcdefghijklmnomin-width-5

samplemin-width-10

samplemin-width-15

samplemin-width-20

samplemin-width-25

samplemin-width-30

samplemin-width-35

samplemin-width-40

samplemin-width-45

samplemin-width-50

Code

Border

classに次のワードを指定することで、線を引くことができます。

bdr-all

bdr-all

bdr-bottom

bdr-top

Code

Glaphic-icon

アイコンをグラフィックとして挿入することができます。

Rainbo pointing Rainbo raising fin Rainbo aspect Rainbo frontal inclination Rainbo front

Code

サイズを変更することもできます。

minimum small middle large maximum Specify size from style

Code

左右を反転することもできます。

normal horizontal Flip horizontal

Code

Animation

アニメーション効果を与えることができます。

Rotate clockwise Rotate anti-clockwise Enlarge Reduce

Code

Vertical-align

垂直方向を指定することができます。

This message is displayed in middle.

This message is displayed in top.

This message is displayed in bottom.

table-middle

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4

table-top

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4

table-bottom

Header1 Header2 Header3
Row1

Value1

Value1

Value1

Value2
Row2 Value3 Value4

Code

Others

classに次のワードを指定することで、様々な効果をつけることができます。

round

shadow

text-large

text-small

What do you think of Happy?

Code

Sample

組み合わせてテストしてみます。

SatSaturday

SunSunday

Link

This is a test message.

For example, if you want to annotate, you can bold it like this and color it like this.

Code

ShortCode

WordPressにはショートコードと呼ばれる便利な機能があります。

TablePress

予め作成したテーブルを埋め込むコード。

head1head2
body1body2
Options
この機能を利用した場合、他のクラスを使用することはできません。

独自コード:jf-other-page

他のページを擬似的にモーダルウィンドウとして読み込むコード。

Open-modal
Options

長崎しんぎょれん_のページ以外を表示することはできません。

リンク先が見つからない場合、トップページが表示されます。

使用するページ内の行頭に必ず[jf-other-page-template /]を記述してください。一度で構いません。

独自コード:jf-modal

ボタンクリック時にモーダルウィンドウを表示させるコード。

open-modal

Modal-sample

This is modal-message.

Options
PAGETOP
Copyright © JF長崎しんぎょれん All Rights Reserved.