*サンプルページ – フルワイズ用パーツ - 外国人雇用支援センター山口 | 特定技能制度における外国人雇用支援サービス

*サンプルページ – フルワイズ用パーツ

使い方

1.トップページで使う場合

基本情報カラム比率を「フルワイズ」に設定したエリアで、
ウィジェットを100%表示にする。

2.投稿、固定ページ、モジュールページで使う場合

テンプレートを「10/10テンプレート(フルワイズ)」にする

3.ページ全体ではなく、特定のパーツのみフルワイズにしたい場合(※非推奨)

親コンテナーがフルワイズでなくても、<div class=”full-width-container”>で囲ってあればフルワイズになります。

4.カラム比率「1カラム」で使用したい場合(※非推奨)

基本情報カラム比率を「1カラム」に設定したエリアで、ウィジェットを100%表示にする。

※フルワイズパーツは、フルワイズ(.colfull)か1カラム(.col10)内でのみ有効です。
ただし、親コンテナーに左右マージンがある状態では、左右マージンの打ち消しのために100vwから計算したマイナスマージンを用いるため、左右にスクロールバー分のはみ出しがでます。

チームメンバー(フルワイズ):team_member

チームメンバー(3個まで)

代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="full-width-container">
<div class="team_member col3">
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
</div>

チームメンバー(4個以上)

代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="full-width-container">
<div class="team_member col4">
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
</div>

パネル型リンク

パネル型リンク(1個)

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel">
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">About Us</span><span class="panel-txt">読む</span></a></p>
</div>

パネル型リンク(2個)

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel">
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">About Us</span><span class="panel-txt">読む</span></a></p>
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Catalog</span><span class="panel-txt">ダウンロード</span></a></p>
</div>

パネル型リンク(複数個)

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel">
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Featured</span><span class="panel-txt">読む</span></a></p>
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Services</span><span class="panel-txt">読む</span></a></p>
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">About Us</span><span class="panel-txt">読む</span></a></p>
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Catalog</span><span class="panel-txt">ダウンロード</span></a></p>
</div>

画像+ショートディスクリプションのパネル型リンク(2個)

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel panel-with-box">
<div class="stretch-panel"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/hm_ec02-1.jpg" alt="" />
<div class="stretch-panel-txtarea">
<div>
<p class="stretch-panel-ttl">タイトル1</p>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
</div>
</div>
</a></div>
<div class="stretch-panel"><a href="#"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/hm_ec01-1.jpg" alt="" />
<div class="stretch-panel-txtarea">
<div>
<p class="stretch-panel-ttl">タイトル2</p>
<p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div>
</div>
</a></div>
</div>
</div>

画像+重ね文章

画像+重ね文章とリンク(画像右)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap overwrap-basic img-r">
<div class="img-box"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/cc0_949610-pxhere-e1605155854442.jpg" alt="" /></div>
<div class="txt-box">
<p class="imgtxt-ttl">吾輩は猫である。名前はまだ無い。</p>
<p class="imgtxt-txt">どこで生れたかとんと見当がつかぬ。<br />
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<div class="blk"><a href="#">詳細はこちら</a></div>
</div>
</section>
</div>

画像+重ね文章とリンク(画像左)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap overwrap-basic img-l">
<div class="img-box"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/cc0_4669-pxhere-e1605155937572.jpg" alt="" /></div>
<div class="txt-box">
<p class="imgtxt-ttl">吾輩は猫である。名前はまだ無い。</p>
<p class="imgtxt-txt">どこで生れたかとんと見当がつかぬ。<br />
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<div class="blk"><a href="#">詳細はこちら</a></div>
</div>
</section>
</div>

画像+重ねボックス(画像右)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で
一番獰悪な種族であったそうだ。

 HTMLコード<div class="contact">
<div class="contact_in">
<p class="lead">〇〇〇〇〇〇〇〇に関することはお気軽にお問い合わせください!</p>
<div class="telarea">
<p class="tel"><a href="tel:000-000-0000">000-000-0000</a></p>
<p class="tel-ex">平日 9:00 - 17:30 土曜 9:00 - 12:00<br>(第2・4土曜は休み)</p>
</div>
<div class="mailarea">
<p class="mail"><a href="http://yamaguchi-gaikokujin.com/wp/contact/">お問い合わせ・資料請求</a></p>
<p class="mail-ex">メールは24時間受け付けております。</p>
</div>
</div>
</div>

画像+重ねボックス(画像左)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で
一番獰悪な種族であったそうだ。

 HTMLコード
<div class="full-width-container">
<section class="imgtxt-overwrap overwrap-box img-l">
<div class="img-box"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/cc0_4669-pxhere-e1605155937572.jpg" alt="" /></div>
<div class="txt-box txt-centering">
<p class="imgtxt-ttl txt-smaller">吾輩は猫である。名前はまだ無い。</p>
<p class="imgtxt-txt">どこで生れたかとんと見当がつかぬ。<br />
何でも薄暗いじめじめした所で<br />
ニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で<br />
一番獰悪な種族であったそうだ。</p>
<ul class="img-list">
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
</ul>
</div>
</section>
</div>

フルワイズ画像+重ね文章と画像(左よせ)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap img-full txt-l">
<div class="img-box"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/cc0_949610-pxhere-e1605155854442.jpg" alt="" /></div>
<div class="txt-box sp-txt-bg">
<p class="imgtxt-ttl txt-smaller">吾輩は猫である。名前はまだ無い。</p>
<p class="imgtxt-txt">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<ul class="img-list">
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
</ul>
</div>
</section>
</div>

フルワイズ画像+重ね文章と画像(右よせ)

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap img-full txt-r">
<div class="img-box"><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/cc0_4669-pxhere-e1605155937572.jpg" alt="" /></div>
<div class="txt-box sp-txt-bg">
<p class="imgtxt-ttl txt-smaller">吾輩は猫である。名前はまだ無い。</p>
<p class="imgtxt-txt">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<ul class="img-list">
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
	<li><img src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
</ul>
</div>
</section>
</div>

※技能実習生をご希望の方は関連団体 ヒューマン・グローバル事業協同組合をご紹介いたします。

お問い合わせ先

083-941-0135

平日 9:00 – 17:00

お問い合わせ・資料請求

メールは24時間受け付けております。

PAGE TOP