片隅舎
アンカーリンク ジャンプ
<a href="#align">並列</a>
ジャンプ先は、IDで指定「id="align"」
<!-- 外ページからのジャンプリンクは、パラメーターid指定 例:?id=●●● -->
コンテンツ コード
<div class="contents">
<div class="contents-inner">
<div class="normal_title normal_title-icon">
<span class="normal_title_text">タイトル</span>
<span>サブタイトル</span>
</div>

<div class="contents-inner-inner">
<p>
コンテンツボックスごとに記述するといい感じにマージン取れます
</p>
</div>

</div>
</div>
メニュー ヘッダー他
PC版親要素に「Navilist」
モバイル版親要素に「NavilistMo」
フッター要素に以下を設定
ビックサイズ:「footerm_b」
ノーマルサイズ:「footerm_n」
スモールサイズ:「footerm_s」

CSS class(オプション)に設定します。表示がない場合は、表示オプションから表示させて下さい。いずれも、子要素はブランクでOK。管理画面でぶら下げるように設定して下さい。

色&フォント表現 デザイン
FBF7EA
F7EFD5
E8DBB8
D1C19B
B39F76
998156
80653B
674B25
553816
D5FDD6
ABFCB6
80F89D
60F291
2EEA80
21C97B
17A873
0E8767
08705F
CFF2FE
A0E1FE
70CAFD
4DB3FB
138EF9
0D6ED6
0952B3
063A90
032877
FEFAD3
FEF5A8
FCED7C
FAE55C
F7D827
D4B61C
B19513
8F750C
765F07
FFE2DB
FFBFB7
FF9593
FF7882
FF4C6A
DB3762
B72659
93184F
7A0E49
white
black
dimgray
gray
darkgray
silver
blue
mediumblue
darkblue
navy
green
darkgreen
forestgreen
mediumseagreen
yellow
gold
orange
orangered
red
crimson
tomato
coral
hotpink
deeppink
mediumvioletred
palegoldenrod
cornsilk
honeydew
azure
mintcream
.bg_color_ (カラーコード)
.font_color_ (カラーコード)
.border_ (カラーコード)

.font_color_main
.font_color_ADADAD
.bg_color_main
.bg_color_ADADAD
.border_main
.border_ADADAD

.font_weight_b
.font_weight_n

.margincenter
.aligncenter
.alignleft
.alignright
.fltl
.fltr
.block
.inline-block

.border_black
.border_red

.nowrap //折返し
.wordbreak //英語折返し

.blockquote //引用タグ
.cite //作品タイトル

.no_icon //外部リンクアイコン

テストフォントです。rft12

テストフォントです。rft13

テストフォントです。rft14

テストフォントです。rft15

テストフォントです。rft16

テストフォントです。rft17

テストフォントです。ノーマル

テストフォントです。rft18

テストフォントです。rft19

テストフォントです。rft20

テストフォントです。rft21

テストフォントです。rft22

テストフォントです。rft23

テストフォントです。rft24

テストフォントです。rft25

テストフォントです。rft30

テストフォントです。rft35

テストフォントです。rft40

テストフォントです。rft45

テストフォントです。rft50

テストフォントです。rft55

テストフォントです。rft60

テストフォントです。引用しておりますが何を引用しているかと申しますと引用するべきものを探すのが億劫で億劫で仕方がなかったのでその思いを綴っております。これは引用文のつもりです。草枕

タイトル表現 出力確認
Company Profile1 装飾タイトルです。背景イメージは外部スタイルで
Company Profile2 装飾タイトルです。背景イメージは外部スタイルで
Company Profile3 装飾タイトルです。背景イメージは外部スタイルで
Company Profile2 装飾タイトルです。ランダムに切り替わっています。
<!--
背景画像設定は外部CSSのみ稼働します(多分CSSの読込順番の問題?)
-001の数字を変更して使用して下さい。ランダムに変えたい場合は1をclassに追加
-->
<div class="design_title_area-001 mb45">
<div class="design_title rft35">
<span class="en rft13">Company Profile</span>装飾タイトルです。背景イメージは外部スタイルで
</div>
</div>
決め打ちタイトル表現です。長めのタイトル ノーマルタイプ。長めのサブタイトルです。
<div class="normal_title normal_title-icon">
<span class="normal_title_text">決め打ちタイトル表現です。長めのタイトル</span>
<span class="rft13">ノーマルタイプ。長めのサブタイトルです。</span>
</div>
決め打ちタイトル表現です。長めのタイトル 全下線。長めのサブタイトルです。
<div class="normal_title normal_title-icon rft20">
<span class="normal_title02_text">決め打ちタイトル表現です。長めのタイトル</span>
<span class="rft13">全下線。長めのサブタイトルです。</span>
</div>
決め打ちタイトル表現です。長めのタイトル 下線ストレッチ。長めのサブタイトルです。
<div class="normal_title03 normal_title-icon rft20">
<span class="normal_title03_text">決め打ちタイトル表現です。長めのタイトル</span>
<span class="rft13">下線ストレッチ。長めのサブタイトルです。</span>
</div>
決め打ちタイトル表現です。長めのタイトル 全下線太い。長めのサブタイトルです。
<div class="normal_title04 normal_title-icon rft20">
<span class="normal_title04_text">決め打ちタイトル表現です。長めのタイトル</span>
<span class="rft13">全下線太い。長めのサブタイトルです。</span>
</div>
決め打ちタイトル表現です。長めのタイトル 下線ストレッチ太い。長めのサブタイトルです。
<div class="normal_title05 normal_title-icon rft20">
<span class="normal_title05_text">決め打ちタイトル表現です。長めのタイトル</span>
<span class="rft13">下線ストレッチ太い。長めのサブタイトルです。</span>
</div>
アイコンチェンジ表現です。長めのタイトル アイコン部分を変更することができます
<style>
.main-article .normal_title-icon01 : before{
font-family: "Font Awesome 5 Free";position: absolute;font-weight: 900;margin-top: 5px;margin-right: 8px;
content: "\f0f3";/*ICON*/
color:#FFC412;
}
</style>
title01です。長めのタイトル アイコン部分を変更することができます
<!--アイコンを追加することも出来ます-->
<div class="title01 rft20">
<span class="title01_text"><i class="fas fa-bell"></i> title01です。長めのタイトル</span>
<span class="rft13">アイコン部分を変更することができます</span>
</div>
title11です。長めのタイトル 長めのサブタイトルです。
<div class="title11 rft20">
<span class="title11_text">title11です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title12です。長めのタイトル 長めのサブタイトルです。
<div class="title11 rft20">
<span class="title11_text">title11です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title02です。長めのタイトル 長めのサブタイトルです。
<div class="title02 rft20">
<span class="title02_text">title02です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title03です。長めのタイトル 長めのサブタイトルです。
<div class="title03 rft20 mb25">
<span class="title03_text">title03です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title04です。長めのタイトル 長めのサブタイトルです。
title04です。長めのタイトル 長めのサブタイトルです。
<!--バックグラウンドカラーの上書き可能です-->
<div class="title04 rft20 mb25">
<span class="title04_text">title04です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>

<div class="title04 bg_color_black rft20">
<span class="title04_text">title04です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title05です。長めのタイトル 長めのサブタイトルです。
<div class="title05 rft20">
<span class="title05_text">title05です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title06です。サブタイトルより長めにして長めのサブタイトルです。
<div class="title06 rft20">
<span class="title06_text">title06です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title07です。長めのタイトル 長めのサブタイトルです。
<style>
.main-article .title07-icon-001:before{
font-family: "Font Awesome 5 Free"; text-align: center;display: block;font-weight: 900; margin-bottom: 15px;
content: "\f4ad";
color:#FFC412;
}
</style>
<div class="title07 title07-icon-001 rft20">
<span class="title07_text">title07です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title08です。長めのタイトル 長めのサブタイトルです。
<div class="title08 rft20">
<span class="title08_text">title08です。長めのタイトル</span>
<span class="rft13">長めのサブタイトルです。</span>
</div>
title09です。長めのタイトル 長めのサブタイトルです。
<div class="title09 rft20">
<span class="title09_text">title09です。長めのタイトル</span>
<span class="title09_border rft13">長めのサブタイトルです。</span>
</div>
title10ですアイコンは自由に設定できます

title10ですフォントサイズも自由です
<style>
.main-article .title10-icon01::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f7a5";
color: #E71F3B;
margin-right: 5px;
}
</style>
<div class="title10 title10-icon-01 rft15">
title10です<span class="">小さい文字サブタイトル</span>
</div>
ボタン表現 デザイン
.link_box_colorfree
.link_box_nohover
.link_box_nohover_s
.link_box_nohover_r
.link_box_nohover_s_r
.link_box
.link_box_s
.link_box_r
.link_box_r_s
.link_box_blue
.link_box_blue_s
.link_box_blue_r
.link_box_blue_r_s
.link_box_green
.link_box_green_s
.link_box_green_r
.link_box_green_r_s
.link_box_purple
.link_box_purple_s
.link_box_purple_r
.link_box_purple_r_s
.link_box_pink
.link_box_pink_s
.link_box_pink_r
.link_box_pink_r_s
.link_box_maybe
.link_box_maybe_s
.link_box_maybe_r
.link_box_maybe_r_s
.link_box_emerald
.link_box_emerald_r
.link_box_emerald_r_s
.link_box_orange
.link_box_orange_r
.link_box_orange_r_s
.link_box_anime
.link_box_anime_slash

<!-- link_box_colorfree加工例 -->
<a href="" class="
link_box_colorfree 
bg_color_red 
font_weight_b 
font_color_white 
pt8 
pb5 
block">link_box_colorfree <i class="fas fa-angle-right"></i>
</a>

link_box_colorfreeは、背景やアイコンを別途指定することで自由にリンクボタンの体裁をいじることが可能です。

リスト表現 出力確認
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
<ul class="list_no">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
<ul class="list_circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
並列 自動並列
.list-item-box 左詰め
.list-item-box-fend 右詰め
.list-item-box-center 上下左右中央
.list-item-box-start 上詰め
.list-item 最大10列(折返しナシ)
.list-item2 2列で自動折返し
.list-item3 3列で自動折返し
.list-item4 4列で自動折返し
.list-item5 5列で自動折返し
.list-item2-none (スマホでも折返しナシ)
.list-item3-none (スマホでも折返しナシ)
.list-item4-none (スマホでも折返しナシ)
.list-item5-none (スマホでも折返しナシ)

並列は2~5列まで決め打ち折返し設定があります。指定がない場合は、最大10列まで横幅に準じて縮小します。

アニメーション 出力確認
フェード 出力確認
.fade
.fade.show
.fade--lr
.fade--rl
.fade--up
.fade--down
.fade--scaleUp
.fade--scaleDown
.fade--rotateL
.fade--rotateR

同時に表示させたい場合は、表示の基準にしたい要素にIDを振って、それと同時に表示させる要素に「data-fade_trigger」でIDを指定する
id="gr01"
data-fade_trigger = "#gr01"

起動タイミングを変える場合は、「data-fade_margin」で数値を指定。この数値は、画面下部から●●●pxになったら起動するという意味。
data-fade_margin = "100"

起動をズラす場合、「data-fade_delay」でミリ秒指定します。通常0秒で起動しますが、指定することでタイミングをずらすことが出来ます
data-fade_delay = "200"
開閉表現 デザイン
これが隠れているということだよ( ー`дー´)キリッ


直接マージン指定を「contents_close」にするとカクつくのでDivを新設して、そっちにマージンつけてね!
後から隠れるつもりだよ( ー`дー´)キリッ上のボタンを押しなさいよ!


直接マージン指定を「contents_close」にするとカクつくのでDivを新設して、そっちにマージンつけてね!
<div class="mb15">
<div class="link_box_maybe block contents_clickdo">開くわよ</div>
<div class="contents_close">
<div class="pt35 pb35">
これが隠れているということだよ( ー`дー´)キリッ「contents_close」要素が隠れていました<br>
</div>
</div>
</div>

<!--デフォルトは開-->
<div class="mb15">
<div class="link_box_maybe block contents_clickdo">閉じるわよ</div>
<div class="contents_defaultopen">
<div class="pt35 pb35">
後から隠れるつもりだよ( ー`дー´)キリッ上のボタンを押しなさいよ!「contents_close」要素を隠します
</div>
</div>
</div>
ツールチップ表現 出力確認
ショートコード 投稿画面用
url:https://www.katasumisha.com
t_url:https://www.katasumisha.com/wp-content/themes/OneColumn_template
ct_url:https://www.katasumisha.com/wp-content/themes/OneColumn_template_Child
thumnail_url:
オリジナルPHP出力: 
<!-- 以下の要素を[]で囲うと出力してくれる -->
<!-- サイトURL -->
url
<!-- 親テンプレートURL -->
t_url
<!-- 子テンプレートURL設定されていないと親が出力 -->
ct_url
<!-- サムネイルURL設定されていないとブランク -->
thumnail_url
<!-- includeファイルからphpを読み込む -->
myphp file='test_phpfile' 
<!-- randomな数値を取得する 最小値最大値を指定 -->
random_count 1 3

投稿画面で使用するショートコードです。

マージン表現 レイアウト

.contents-inner
.contents-inner-inner
.contents-inner-both
.contents-inner-top
.contents-inner-bottom

/*======================マージン設定======================*/
.contents-inner{
padding: 25px 25px 25px 25px;
}
/*インナーの中のインナー要素*/
.contents-inner-inner{
padding: 0px 25px 0px 25px;
}
/*上マージン最大*/
.contents-inner-top{
padding: 90px 25px 25px 25px;
}
/*下マージン最大*/
.contents-inner-bottom{
padding: 25px 25px 90px 25px;
}
/*上下マージン最大*/
.contents-inner-both{
padding: 90px 25px 90px 25px;
}
テーブル表現 出力確認
テーブル左 テーブル右
テーブル左 テーブル右
テーブル左 注意 テーブル右01 テーブル右02
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="tabele_style">
<tbody>
<tr>
<th width="20%" class="tabele_style_left">テーブル左</th>
<td colspan="2" width="80%" class="tabele_style_right_box01">テーブル右</td>
</tr>
<tr>
<th class="tabele_style_left"><span class="ft17 font_weight_b">テーブル左</span></th>
<td colspan="2" colspan="2" class="tabele_style_right_box01">テーブル右</td>
</tr>
<tr>
<th width="20%" class="tabele_style_left">テーブル左 <span class="bg_color_red font_color_white ft11 pt2 pr5 pb2 pl5">注意</span></th>
<td width="40%" class="tabele_style_right_box01">テーブル右01</td>
<td width="40%" class="tabele_style_right_box01">テーブル右02</td>
</tr>
</tbody>
</table>
フォームテーブル表現 出力確認
テーブル左
テーブル左
テーブル左 注意
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="form_tabele_style form_css">
<tbody>
<tr>
<th width="20%" class="form_tabele_style_left">テーブル左</th>
<td colspan="2" width="80%" class="form_tabele_style_right_box01"><input type="text" name="name" placeholder="テーブル右" class="form_style_text" size="40"></td>
</tr>
<tr>
<th width="20%" class="form_tabele_style_left"><span class="ft17 form_requiredmode">テーブル左</span></th>
<td colspan="2" colspan="2" class="form_tabele_style_right_box01"><input type="text" name="name" placeholder="テーブル右" class="form_style_text" size="40"></td>
</tr>
<tr>
<th width="20%" class="form_tabele_style_left">テーブル左 <span class="bg_color_red font_color_white ft11 pt2 pr5 pb2 pl5">注意</span></th>
<td width="40%" class="form_tabele_style_right_box01"><input type="text" name="name" placeholder="テーブル右" class="form_style_text" size="40"></td>
<td width="40%" class="form_tabele_style_right_box01"><input type="text" name="name" placeholder="テーブル右" class="form_style_text" size="40"></td>
</tr>
</tbody>
地図 出力確認
<!--マップのコードに幅%と高さを指定して下さい。Gmapで埋め込みコードを取得します。-->
<!--遅延処理のため、classの追加とsrcの変更をして下さい「class="lazyload"」「data-src」-->
<div class="google-mymap">
<iframe class="lazyload" data-src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d103669.6905795822!2d139.68355683175054!3d35.70954487766457!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1582876630305!5m2!1sja!2sjp" frameborder="0" style="border:0; width:100%;" height="480" allowfullscreen=""></iframe>
</div>
動画 出力確認
<!--遅延処理のため、classの追加とsrcの変更をして下さい「class="lazyload"」「data-src」-->
<div class="video mb35">
<iframe width="560" height="315" class="lazyload" data-src="https://www.youtube.com/embed/BuU2bocSfDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<!--動画サイズはwidth25で設定 センタリングはマージンセンターに注意-->
<!--遅延処理のため、classの追加とsrcの変更をして下さい「class="lazyload"」「data-src」-->
<div class="width25 margincenter mb35">
<div class="video">
<iframe width="560" height="315" class="lazyload" data-src="https://www.youtube.com/embed/BuU2bocSfDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
画像表現 出力確認

おにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しい

<div class="" data-imgr>
<div class="imgr">
<div class="text" >
<p>おにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しい</p>
</div>
<div class="image">
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" width="1240" height="827" class="alignnone size-full wp-image-44" />
</div>
</div>
</div>

おにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しい

<div class="" data-imgl>
<div class="imgl">
<div class="image">
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" width="1240" height="827" class="alignnone size-full wp-image-44" />
</div>
<div class="text" >
<p>おにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しいおにぎり美味しい</p>
</div>
</div>
</div>
<div class="mb25" data-imglr>
<div class="imglr">
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/header_kouyama_25.jpg" alt="" class="alignnone size-full" />
</div>
</div>

<div class="mb25" data-imglcr>
<div class="imglcr">
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/header_kouyama_25.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" class="alignnone size-full" />
</div>
</div>

<div class="mb25" data-imglcrr>
<div class="imglcrr">
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/header_kouyama_25.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/4b31f83de077bcd06b13959da4de391e_l.jpg" alt="" class="alignnone size-full" />
<img src="/wp-content/uploads/header_kouyama_25.jpg" alt="" class="alignnone size-full" />
</div>
</div>
アイキャッチ表現 出力確認
<!--画像の設定-->
<style>
.lazyloaded.bg-img-namae:before {
background: url("/wp-content/uploads/header_kouyama_25.jpg");
background-size: cover;
background-position: 50% 50%;
}
</style>
<!--background-position:横位置0%で左詰め 縦位置0%で上詰め-->

background-positionは、背景画像の横基準、縦基準を指定しています。50%50%にすると縦横中央で表示され、50%0%とすると横は中央、縦は上詰めで表示されます。画像に合わせて設定すると良いでしょう。

タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

テストリンク
<section class="lazyload bg-img-001 img-contents_wrap_normal mb90">
<div class="img-contents_box_normal">
<div class="title01">タイトル文字です<span class="font_color_red">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
<a href="" class="link_box_r">テストリンク</a>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

テストリンク
<section class="lazyload bg-img-001 img-contents_wrap_f mb90">
<div class="img-contents_box_f">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
<a href="" class="link_box_r">テストリンク</a>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

テストリンク
<section class="lazyload bg-img-001 img-contents_wrap_fc mb90">
<div class="img-contents_box_fc">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
<a href="" class="link_box_r block">テストリンク</a>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

テストリンク
<section class="lazyload bg-img-001 img-contents_wrap_fc mb90">
<div class="img-contents_box_fc">
<div class="title01 rft20 font_color_white">タイトル文字です<span class="rft13 font_color_white">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
<a href="" class="link_box_r block">テストリンク</a>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_f50r mb90">
<div class="img-contents_box_f50r">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_f50l mb90">
<div class="img-contents_box_f50l">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_l mb90">
<div class="img-contents_box_l">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_r mb90">
<div class="img-contents_box_r">
<div class="title01 rft20 font_color_white">タイトル文字です<span class="rft13 font_color_white">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_rnone50 mb90">
<div class="img-contents_box_rnone50">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_lnone50 mb90">
<div class="img-contents_box_lnone50">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_rnone50_h50 mb90">
<div class="img-contents_box_rnone50_h50">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_lnone50_h50 mb90">
<div class="img-contents_box_lnone50_h50">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_rnone80 mb90">
<div class="img-contents_box_rnone80">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

<section class="lazyload bg-img-001 img-contents_wrap_lnone80 mb90">
<div class="img-contents_box_lnone80">
<div class="title01 rft20"><span class="title01_text">タイトル文字です</span><span class="rft13">小さい文字サブタイトル</span></div>
<p>
文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。
</p>
</div>
</section>
タイトル文字です小さい文字サブタイトル

文は列作家を引用しprojectうませ中、引用従っられ文を表示権可能の回避複数にされては認めた、プロジェクトの文献も、明示しコンテンツが引用守らこととして出所同様あるでているありあれ。ないし、下の削除作は、一つの利用あたり引用必要たコードが出所する、その記事をして文で執筆とどめことを説明満たされるあっ。

テストリンク
画像回り込み 出力確認

alignleftを設定。画面30%&縦サイズは250pxまで表示します。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。

alignrightfを設定。画面30%&縦サイズは制限なし。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。

alignright50を設定。画面50%&縦サイズは300pxまで表示します。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。
俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音が

alignleft50fを設定。画面50%&縦サイズは制限なし。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。
俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。
俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音が

フォーム 出力確認

名前:

性別:

血液型:

チェックボックス:

ご感想:

<form action="" method="post" class="form_css">

名前:<input type="text" name="name" class="form_style_text" size="40">
性別:
<input type="radio" name="your-sex" value="male" id="your-sex-men">
<label class="" for="your-sex-men">男性</label>
<input type="radio" name="your-sex" value="female" id="your-sex-women">
<label class="" for="your-sex-women">女性</label>

血液型:
<select name="blood" class="form_style_select_full">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
チェックボックス:
<input id="box1" type="checkbox" />
<label for="box1">Checkbox 1</label>
<input id="box2" type="checkbox" />
<label for="box2">Checkbox 2</label>
<input id="box3" type="checkbox" />
<label for="box3">Checkbox 3</label>
ご感想:
<textarea name="kanso" class="form_style_text textarea" rows="8" cols="40"></textarea>
送信ボタン:
<button type="submit" class="link_box_emerald_r">ボタンで送信</button>
</form>
背景画像設定 出力確認
<!--
コンテンツの最下部に設置して画像ごとにtop left right などの位置を設定して下さい。
.main-articleでrelativeを設定しています。
-->
<style>
.saba01 {
position: absolute;
top: 450px;
right: -150px;
z-index: -1;
}
.saba02 {
position: absolute;
top: 900px;
left: -100px;
z-index: -1;
}
.imgsaba img {width: 100%;height: auto;}
</style>
<div class="saba01 imgsaba"><img src="/wp-content/uploads/bgimg001.png" alt=""></div>
<div class="saba02 imgsaba"><img src="/wp-content/uploads/bgimg002.png" alt=""></div>