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

2020年9月16日

使い方

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

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

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

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

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

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

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

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

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

説明入パネル – フルワイズ

肩書説明入パネル×1(.panelex_link)

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="panelex_link col3">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

肩書説明入パネル – フルワイズ×2(.panelex_link)

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="panelex_link col3">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

肩書説明入パネル – フルワイズ×3(.panelex_link)

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="panelex_link col3">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

肩書説明入パネル – フルワイズ×4(.panelex_link)

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

肩書

タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

 HTMLコード<div class="panelex_link col4">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

パネル型リンク

パネル型リンク（1個）

About Us読む

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

パネル型リンク（2個）

About Us読む

Catalogダウンロード

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel">
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://shopi-lead.com/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://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Catalog</span><span class="panel-txt">ダウンロード</span></a></p>
</div>
<!--/.full-panel-link--></div>

パネル型リンク（複数個）

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel">
<p class="stretch-panel img-cover-like"><a href="#"><img src="http://shopi-lead.com/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://shopi-lead.com/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://shopi-lead.com/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://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /><span class="panel-ttl">Catalog</span><span class="panel-txt">ダウンロード</span></a></p>
</div>
<!--/.full-panel-link--></div>

画像＋ショートディスクリプションのパネル型リンク（2個）

タイトル1

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

タイトル2

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<div class="full-width-container">
<div class="full-stretch-panel panel-with-box">
<div class="stretch-panel"><a href="#"><img src="http://shopi-lead.com/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://shopi-lead.com/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>

画像＋重ね文章

画像の高さを自動調整するjQuery

以下サンプルの1,2については、画像エリアがposition:absolute指定のため、親コンテナーが画像の高さを考慮できない。
そのため、画像縦幅が文章エリアより長い場合、その下のコンテンツが画像と重なってしまうので、section.imgtxt-overwrapに直接高さ指定をするか、以下の縦幅調整jsコードをページ内に追加する。

 jQueryコード<script>
$(function() {
  //デザインパーツ「画像＋重ね文章」の高さ調整
  $(window).on('load resize',function(){
    if( window.innerWidth > 768 ){
      $('.overwrap-basic .img-box, .overwrap-box .img-box').each(function(){
        var imgBlockHeight = $(this).outerHeight();
        var textBlockHeight = $(this).siblings('.txt-box').outerHeight();
        if ( imgBlockHeight > textBlockHeight ) {
          $(this).parent('.imgtxt-overwrap').outerHeight(imgBlockHeight);
          console.log( imgBlockHeight );
        }else{
          $(this).parent('.imgtxt-overwrap').outerHeight(textBlockHeight);
        }
      });
    }else{
      $('.imgtxt-overwrap').removeAttr('style');
    }
  });

});
</script>

1.画像＋重ね文章とリンク（画像右）

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

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

詳細はこちら

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

1.画像＋重ね文章とリンク（画像左）

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

詳細はこちら

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

2.画像＋重ねボックス（画像右）

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

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap overwrap-box img-r">
<div class="img-box"><img src="http://shopi-lead.com/wp-content/uploads/cc0_949610-pxhere-e1605155854442-1.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://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
  <li><img src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
</ul>
</div>
</section>
</div>

2.画像＋重ねボックス（画像左）

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

 HTMLコード<div class="full-width-container">
<section class="imgtxt-overwrap overwrap-box img-l">
<div class="img-box"><img src="http://shopi-lead.com/wp-content/uploads/iphone-smartphone-hand-beach-sea-coast-4669-pxhere.com_.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://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
  <li><img src="http://shopi-lead.com/wp-content/uploads/noimage-mid-300x200.png" alt="" /></li>
</ul>
</div>
</section>
</div>

3.フルワイズ画像＋重ね文章と画像（左よせ）

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

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

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

3.フルワイズ画像＋重ね文章と画像（右よせ）

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

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

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

前後の記事

前の記事: *サンプルページ – メインビジュアル用パーツ

URL	https://shopi-lead.com/
TEL	083-976-0980
FAX	000-000-000
Email	info@shopi-lead.com
住所	〒1234 山口県山口市□丁目□番地
営業時間	平日 10:00 - 18:00

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

#04関連投稿

こちらの記事も読まれています。

前後の記事