SANGO のショートコード・カラーコード・css定義

ウェブサイト作成

SANGO のショートコードやスタイルの覚書です。数が多く混乱するので、よく使うものを自分用にメモしたもの。読みにくいですが、役に立てばと思い公開にしました。

 

カラー

 

メインカラー main, main-c
アクセントカラー accent, acc
下地色 pastel
強調 strong

 

リスト (li)

[list class=”ol-circle”[/list]の、class 内でリストボックスの 背景・ボーダー・影・ステッチ・リストマークアイコン・番号の色やスタイルを指定

スタイル全般

リストのスタイル(装飾)を無しにする
list-raw

番号付き
ol-circle

ボーダー色

接尾辞:bdr

li-mainbdr

li-accentbdr

ボーダースタイル

点線 :li-dashed

二重線:li-double

上下線:li-tandb

ボーダーに影:shadow

ボーダーなし:nobdr

背景色

li-pastelbc

li-beige

疑似要素before文字色

文字色 -c-before

main-c-before

疑似要素beforeバックグラウンド色

バックグラウンド色 -bc-before

acc-bc-before

 

ボーダー内ステッチ

背景色+枠内ステッチ

stitch-red

stitch-blue

stitch-orange

アイコン(Font awesome)

li-chevron

li-check

li-yubi

li-niku

 

画像中央にテキストを被せる(乗せる)

[texton img=”画像のURL” title=”画像上にのせる文字”]

 

アコーディオン

開閉トグルをつける。

[open title=’ここにタイトル’]隠したいコンテンツをここに記載[/open]

クラス
アコーディオン外観:accordion
アコーディオン内容:accordion_content

 

タイムライン

タイムライン形式にする。

[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[tl label='STEP.4' title='タイトル4'] 中身4 [/tl]
[tl label='STEP.5' title='タイトル5'] 中身5 [/tl]
[/timeline]

 

モバイルでのみ・PCでのみ表示

[mobile]ここにモバイルでのみ表示させるもの[/mobile] [pc]ここにPCでのみ表示させるもの[/pc]

 

SANGOのショートコード一覧 | SANGOカスタマイズガイド

 

スタイル

何もしなくても見栄えがいい反面、いじる時は面倒です。

インプット関連

セレクタはタイプ [type] が使われているので、input だけではコントロールできません。block になっているので、並べて使いたい時は display:inline-block にします。

input[type=”text”], input[type=”password”], input[type=”datetime”], input[type=”datetime-local”], input[type=”date”], input[type=”month”], input[type=”time”], input[type=”week”], input[type=”number”], input[type=”email”], input[type=”url”], input[type=”search”], input[type=”tel”], input[type=”color”], select, textarea, .field

スタイル

display: block;
width: 100%;
height: 45px;
margin-bottom: 14px;
padding: 0 12px;
border: 0;
border-radius: 3px;
background-color: #eaedf2;
box-shadow: none;
color: #5c6b80;
font-size: 1em;
vertical-align: middle;
line-height: 45px;
-webkit-transition: background-color .24s ease-in-out;
transition: background-color .24s ease-in-out;
}