サンプルページ
class="single_h2"
関数
?scroll="ブロックID"で遷移スクロール
echo_ord_tag($tag, $content, $class = '')でタグ生成
allHeightFix
all_height_fix-wrapper
target : all_height_fix-target
shBox
sh_box-wrapper
row : sh_box-row
target : sh_box-target
リンク設定
get_anchor_data(){
$data = array(
'url' => get_sub_field('type') != '4' ? get_sub_field('url'.get_sub_field('type')) : get_category_link(get_sub_field('url4')),
'tgt' => get_sub_field('target') ? ' target="_blank"' : '',
'txt' => get_sub_field('txt')
);
return $data;
}
画像用関数
$img = wp_get_attachment_image_src( get_sub_field('img') , 'large' );
thumbnail => 150x150
medium => 600x600
medium_large => 768x768
large => 1080x1080
post-thumbnail => 1920x1920
戻り値
[0] => url
[1] => width
[2] => height
[3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false
my_date_format($date)
my_date_format($date){
$value['w'] = $w;
$value['week'] = $week[$w];
$value['eweek'] = $eweek[$w];
$value['now'] = date_i18n('Y-m-d');
$value['datetime'] = $datetime -> format('Y-m-d');
$value['timestamp'] = $datetime -> format('U');
$value['y'] = $datetime -> format('Y');
$value['n'] = $datetime -> format('n');
$value['j'] = $datetime -> format('j');
$value[0] = $dateArgs[0].'年'.$dateArgs[1].'月'.$dateArgs[2].'日('.$week[$w].')';
$value[1] = $dateArgs[1].'月'.$dateArgs[2].'日('.$week[$w].')';
$value[2] = $dateArgs[0].'/'.$dateArgs[1].'/'.$dateArgs[2].'('.$week[$w].')';
$value[3] = $dateArgs[1].'/'.$dateArgs[2].'('.$week[$w].')';
$value[4] = $dateArgs[1].'/'.$dateArgs[2];
$value[5] = $dateArgs[0].'年'.$dateArgs[1].'月'.$dateArgs[2].'日';
$value[6] = '<span class="w'.$w.'">('.$week[$w].')</span>';
return $value;
}
ブロックラッパー blockWrapper
blockWrapper blockWrapper40 sp_blockWrapper40
class="blockWrapper"で囲まれた要素のfirst-childとlast-childはそれぞれmargin-top,margin-bottomが0になります。
class="blockWrapper40"で上下に40pxのmarginができます
h2 セクション見出し
h3 見出し見出し
h3.bg-title 見出し見出し
h4 見出し見出し見出し
h5 見出し見出し見出し見出し
h5.sub 見出し見出し見出し見出し
h6 見出し見出し見出し見出し見出し
カラー
class="bgc_key"
class="fc_key"
class="fc_wht"
class="bgi_dot_lightblue"
font-family
family_mincho
family_yugo
サンプルサンプル
文字色#4d4d4d rgba(77,77,77,1)
サンプルサンプル
サンプルサンプル
キーカラー #0097e0 rgba(0, 151, 224, 1)
さぶカラー #1f5ab2 rgba(31, 90, 178, 1)
さぶカラー2 #c2eded rgba(194, 237, 237, 1)
さぶカラー3 #f38f1e rgba(243, 143, 30, 1)
背景色
背景色1#eeeeee rgba(238, 238, 238, 1)
CSS
img-caption
bg-cover
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display-table
.display-table {
display: table;
border-collapse: collapse;
}
.display-table-cell {
display: table-cell;
}
.table-layout-fixed {
width: 100%;
table-layout: fixed;
}
display-flex
.display-flex {
-js-display: flex;
display: flex;
}
リスト
- サンサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルプル
- サンプル
- サンプル
- サンプル
- サンプル
- class="caution"
- サンサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- サンプル
- class="num_caution"
- サンプル
- サンプル
- サンプル
ボタン
テーブル
サンプル | サンプル | サンプル |
---|---|---|
サンプル | サンプル | サンプル |
table class="table_layout_fix" |
|
サンプル |
---|---|---|
サンプル | サンプル | サンプル |
table class="table_smp_block" | サンプル | |
---|---|---|
サンプル | サンプル | サンプル |
flexbox
見出し
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
見出し
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章