slick

最終更新：2022/03/08

下層用に作成したスリックです。jsは下記に置いています。

C:\Users\USER\有限会社エムジーエム Dropbox\プロジェクト\MGM自社サイト\基本テンプレート

2021/07/19 以降に作成するテーマは最初から読み込んでおく予定ですが、それ以前に作成したテーマでは読み込んでいません。
footerに読み込むよう記述して使用してください。

// 固定ページだけで読み込み
if (is_page()) {
wp_enqueue_script('js_mgm_page'   , mgm_js_path('page.js')       , array('jquery'), '20170827');
}

// 固定ページだけで読み込み

if (is_page()) {

wp_enqueue_script('js_mgm_page' , mgm_js_path('page.js') , array('jquery'), '20170827');

}

アイリス連動スリック

テンプレート/アイリス用に作成した連動スリックです。

html

<div class="res_mb">
<ul class="slider ti-item">
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0002.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0003.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0004.jpg" alt="" /></li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="slider ti-item-nav">
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0002.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0003.jpg" alt="" /></li>
<li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0004.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
</div>

</ul>

</ul>

</div>

css

/*メイン*/
.ti-item{
	width: 100%;
	margin-bottom: 1rem;
}
@media screen and (min-width: 576px){
	.ti-item{
		margin-bottom: 2rem;
	}
	.ti-item li{
		margin-right: 1rem;
		margin-left: 1rem;
		-webkit-filter: grayscale(100%);
				filter: grayscale(100%);
	}
	.ti-item li.slick-center{
		-webkit-filter: grayscale(0);
				filter: grayscale(0);
	}
}
@media screen and (min-width: 1200px){
	.ti-item{
		margin-bottom: 2.5rem;
	}
	.ti-item li{
		margin-right: 2.5rem;
		margin-left: 2.5rem;
	}
}
/*サムネイル*/
.ti-item-nav li{
	margin-right: 0.5rem;
	margin-left: 0.5rem;
}
@media screen and (min-width: 768px){
	.ti-item-nav li{
		margin-right: 0.8rem;
		margin-bottom: 0.8rem;
	}
}

/*メイン*/

.ti-item{

width: 100%;

margin-bottom: 1rem;

}

@media screen and (min-width: 576px){

.ti-item{

margin-bottom: 2rem;

}

.ti-item li{

margin-right: 1rem;

margin-left: 1rem;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

.ti-item li.slick-center{

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

@media screen and (min-width: 1200px){

.ti-item{

margin-bottom: 2.5rem;

}

.ti-item li{

margin-right: 2.5rem;

margin-left: 2.5rem;

}

/*サムネイル*/

.ti-item-nav li{

margin-right: 0.5rem;

margin-left: 0.5rem;

}

@media screen and (min-width: 768px){

.ti-item-nav li{

margin-right: 0.8rem;

margin-bottom: 0.8rem;

}

リグ連動スリック

テンプレート/リグ用に作成した連動スリックです。

CLEAR
SMOKE
LATTE
R GRAY

html

<div class="tl_linkage_slider res_mb">
  <ul class="slider tl_thumb-item">
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
  </ul>
<ul class="slider tl_thumb-item-nav">
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear2.jpg" alt="">
	<p>CLEAR</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke2.jpg" alt="">
	<p>SMOKE</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte2.jpg" alt="">
	<p>LATTE</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray2.jpg" alt="">
	<p>R GRAY</p></li>
</ul>
</div>

</ul>

<p>CLEAR</p></li>

<p>SMOKE</p></li>

<p>LATTE</p></li>

</ul>

</div>

css

.tl_linkage_slider{
	width: 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
/*メイン*/	
.tl_thumb-item{
	margin-bottom: 2rem;
}
.tl_thumb-item li{
	margin-right: 1rem;
	margin-left: 1rem;
}
.tl_thumb-item li{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
@media screen and (min-width: 992px){
	.tl_thumb-item{
		margin-bottom: 3rem;
	}
	.tl_thumb-item li{
		margin-right: 1.5rem;
		margin-left: 1.5rem;
	}
}
/*サムネイル*/
.tl_thumb-item-nav{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
.tl_thumb-item-nav li{
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.tl_thumb-item-nav li.slick-current{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
@media screen and (min-width: 992px){
	.tl_thumb-item-nav li{
		margin-right: 1rem;
		margin-left: 1rem;
	}
}

.tl_linkage_slider{

width: 100%;

max-width: 1000px;

margin-right: auto;

margin-left: auto;

}

/*メイン*/

.tl_thumb-item{

margin-bottom: 2rem;

}

.tl_thumb-item li{

margin-right: 1rem;

margin-left: 1rem;

}

.tl_thumb-item li{

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

@media screen and (min-width: 992px){

.tl_thumb-item{

margin-bottom: 3rem;

}

.tl_thumb-item li{

margin-right: 1.5rem;

margin-left: 1.5rem;

}

/*サムネイル*/

.tl_thumb-item-nav{

width: 80%;

margin-right: auto;

margin-left: auto;

}

.tl_thumb-item-nav li{

margin-right: 0.5rem;

margin-left: 0.5rem;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

.tl_thumb-item-nav li.slick-current{

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

@media screen and (min-width: 992px){

.tl_thumb-item-nav li{

margin-right: 1rem;

margin-left: 1rem;

}

スクロールスリック

ずっとスクロールし続けるスリックです。

html

        <ul class="scroll-slider">
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
        </ul>

</ul>

css

.scroll-slider{
	margin-bottom: 0;
	width: 100%;
}
.scroll-slider li img{
	max-width: 100%;
	height: auto;
}

.scroll-slider{

margin-bottom: 0;

width: 100%;

}

.scroll-slider li img{

max-width: 100%;

height: auto;

}

センタースリック

CENTER SLICK

liが中央を基準に揃い、その左右に前のli・次のliが見えるスリックです。

html

<div class="page_hl_debgco">
	<div class="container">
		<div class="row">
			<div class="col-12 txt-center">
	<p class="page_hl-bfont">CENTER SLICK</p>
	<p>liが中央を基準に揃い、その左右に前のli・次のliが見えるスリックです。</p>
			</div>
		</div>
	</div>
        <ul class="design-item">
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
        </ul>
</div>

<p class="page_hl-bfont">CENTER SLICK</p>

<p>liが中央を基準に揃い、その左右に前のli・次のliが見えるスリックです。</p>

</div>

</ul>

</div>

css

/*design*/
.page_hl_debgco{
	background-color: #1a1a1a;
	padding-top: 35px;
	padding-bottom: 40px;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 60px;
}
.page_hl-bfont{
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 2.5rem;
}
.page_hl_debgco .page_hl-bfont+p{
	display: inline-block;
	text-align: left;
	line-height: 2;
	margin-bottom: 20px;
}
.design-item li{
	margin-right: 10px;
	margin-left: 10px;
}
.design-item li img{
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 768px){
	.page_hl_debgco{
		padding-bottom: 55px;
		margin-bottom: 60px;
		margin-top: 30px;
	}
	.page_hl-bfont{
		font-size: 3.5rem;
	}
	.page_hl_debgco .page_hl-bfont+p{
		margin-bottom: 40px;
	}
}
@media screen and (min-width: 992px){
	.page_hl_debgco {
		margin-top: 70px;
		padding-top: 60px;
		padding-bottom: 110px;
		margin-bottom: 110px;
	}
	.page_hl_debgco .page_hl-bfont+p{
		font-size: 1.3rem;
		letter-spacing: 0.1rem;
		margin-bottom: 60px;
		margin-top: 10px;
	}
}

/*design*/

.page_hl_debgco{

background-color: #1a1a1a;

padding-top: 35px;

padding-bottom: 40px;

color: #fff;

margin-top: 20px;

margin-bottom: 60px;

}

.page_hl-bfont{

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 2.5rem;

}

.page_hl_debgco .page_hl-bfont+p{

display: inline-block;

text-align: left;

line-height: 2;

margin-bottom: 20px;

}

.design-item li{

margin-right: 10px;

margin-left: 10px;

}

.design-item li img{

max-width: 100%;

height: auto;

}

@media screen and (min-width: 768px){

.page_hl_debgco{

padding-bottom: 55px;

margin-bottom: 60px;

margin-top: 30px;

}

.page_hl-bfont{

font-size: 3.5rem;

}

.page_hl_debgco .page_hl-bfont+p{

margin-bottom: 40px;

}

@media screen and (min-width: 992px){

.page_hl_debgco {

margin-top: 70px;

padding-top: 60px;

padding-bottom: 110px;

margin-bottom: 110px;

}

.page_hl_debgco .page_hl-bfont+p{

font-size: 1.3rem;

letter-spacing: 0.1rem;

margin-bottom: 60px;

margin-top: 10px;

}

トップのスリックと同じような

画像は背景画像で指定しています。
幅、高さが画面いっぱいになります。

991px以下、992px以上で画像を切り替えています。

html

<div class="page_sd_slick">
  <ul class="page-fv-slider">
      <li></li>
      <li></li>
      <li></li>
  </ul>
  </div>

</ul>

</div>

css

.page_sd_slick{
	width: 100%;
	height: 100vh;
	position: relative;
	min-height: 400px;
}
.page_sd_slick .page-fv-slider,.page_sd_slick .page-fv-slider div{
	width: 100%;
	height: 100%;
}
.page_sd_slick .page-fv-slider li{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.page_sd_slick .page-fv-slider li:first-child{
	background-image: url("../images/bg1sp.jpg");
}
.page_sd_slick .page-fv-slider li:nth-child(2){
	background-image: url("../images/bg2sp.jpg");
}
.page_sd_slick .page-fv-slider li:last-child{
	background-image: url("../images/bg3sp.jpg");
}
@media screen and (min-width: 992px){
.page_sd_slick .page-fv-slider li:first-child{
	background-image: url("../images/bg1.jpg");
}
.page_sd_slick .page-fv-slider li:nth-child(2){
	background-image: url("../images/bg2.jpg");
}
.page_sd_slick .page-fv-slider li:last-child{
	background-image: url("../images/bg3.jpg");
}
}

.page_sd_slick{

width: 100%;

height: 100vh;

position: relative;

min-height: 400px;

}

.page_sd_slick .page-fv-slider,.page_sd_slick .page-fv-slider div{

width: 100%;

height: 100%;

}

.page_sd_slick .page-fv-slider li{

width: 100%;

height: 100%;

background-size: cover;

background-repeat: no-repeat;

background-position: center;

}

.page_sd_slick .page-fv-slider li:first-child{

}

.page_sd_slick .page-fv-slider li:nth-child(2){

}

.page_sd_slick .page-fv-slider li:last-child{

}

@media screen and (min-width: 992px){

.page_sd_slick .page-fv-slider li:first-child{

}

.page_sd_slick .page-fv-slider li:nth-child(2){

}

.page_sd_slick .page-fv-slider li:last-child{

}

片側が見切れる

右側が見切れます。

html

<div class="cutoff_box">
  <ul class="cutoff-item">
	  <li>
		  <a href="">
			  <div class="ig_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></div>
			  <p class="ig_date_cat"><span class="ig_date">0000.00.00</span><span class="ig_cat1">新築</span></p>
			  <p>タイトル1</p>
		  </a>
	  </li>
	  <li>
		  <a href="">
			  <div class="ig_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></div>
			  <p class="ig_date_cat"><span class="ig_date">0000.00.00</span><span class="ig_cat1">新築</span></p>
			  <p>タイトル2</p>
		  </a>
	  </li>
	  <li>
		  <a href="">
			  <div class="ig_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></div>
			  <p class="ig_date_cat"><span class="ig_date">0000.00.00</span><span class="ig_cat1">新築</span></p>
			  <p>タイトル3</p>
		  </a>
	  </li>
	  <li>
		  <a href="">
			  <div class="ig_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></div>
			  <p class="ig_date_cat"><span class="ig_date">0000.00.00</span><span class="ig_cat1">新築</span></p>
			  <p>タイトル4</p>
		  </a>
	  </li>
	  <li>
		  <a href="">
			  <div class="ig_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></div>
			  <p class="ig_date_cat"><span class="ig_date">0000.00.00</span><span class="ig_cat1">新築</span></p>
			  <p>タイトル5</p>
		  </a>
	  </li>
  </ul>
</div>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

css

.cutoff_box{
	padding-left: 5%;
	position: relative;
}
.cutoff-item {
    width: 100%;
	margin-bottom: 0;
	padding-bottom: 2.5rem;
}
.cutoff-item .slick-list {
  padding: 0 30% 0 0!important;
}
@media screen and (min-width: 768px){
	.cutoff_box{
		padding-top: 1rem;
	}
	.cutoff-item .slick-list{
		padding: 0 40% 0 0!important;
	}
}
@media screen and (min-width: 992px){
	.cutoff_box{
		padding-left: 10%;
	}
	.cutoff-item{
		padding-bottom: 5rem;
	}
	.cutoff-item .slick-list{
		padding: 0 15% 0 0!important;
	}
}
@media screen and (min-width: 1200px){
	.cutoff_box{
		padding-top: 5rem;
	}
}
/*li*/
.cutoff-item li {
  margin: 0 1rem 0 0;
}
.cutoff-item li a{
	color: #000;
}
.cutoff-item li a:hover{
	text-decoration: none;
}
a .ig_img{
	overflow: hidden;
}
a .ig_img img {
	max-width: 100%;
	transition: .5s;
}
a:hover .ig_img img{
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}
/*p*/
.cutoff-item li a p{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.ig_date_cat{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.8rem;
	margin-bottom: 0.2rem;
}
.ig_date_cat span{
	display: block;
	line-height: 1.4;
}
.ig_date{
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 0.9rem;
}
.ig_cat1{
	background-color: #2193d2;
	color: #fff;
	padding: 0.2rem 1rem;
	font-size: 0.8rem;
}
.ig_cat2{
	background-color: #58b6df;
	color: #fff;
	padding: 0.2rem 1rem;
	font-size: 0.8rem;
}
.ig_date_cat+p{
	font-weight: bold;
}
@media screen and (min-width: 1200px){
	.cutoff-item li a p{
		padding-right: 0.8rem;
		padding-left: 0.8rem;
	}
	.ig_date_cat+p{
		font-size: 1.2rem;
	}
}
/*.cutoff-item .slick-prev-next*/
.cutoff-item .slick-prev, .cutoff-item .slick-next{
	top: auto;
	bottom: 0;
	background: #1a1a1a;
	-webkit-transform: translate(0, 0);
	        transform: translate(0, 0);
}
.cutoff-item .slick-prev{
	left: 0;
	transition: .3s;
}
.cutoff-item .slick-prev:hover{
	-webkit-transform: translateX(-10px);
	        transform: translateX(-10px);
}
.cutoff-item .slick-next{
	right: auto;
	left: 40px;
	transition: .3s;
}
.cutoff-item .slick-next:hover{
	-webkit-transform: translateX(10px);
	        transform: translateX(10px);
}
@media screen and (min-width: 992px){
	.cutoff-item .slick-prev, .cutoff-item .slick-next{
		width: 50px;
		height: 50px;
	}
	.cutoff-item .slick-prev{
		left: 16%;
	}
	.cutoff-item .slick-next{
		left: calc(16% + 60px);
	}
	.slick-prev::before, .slick-next::before{
		font-size: 1.4rem;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

.cutoff_box{

padding-left: 5%;

position: relative;

}

.cutoff-item {

width: 100%;

margin-bottom: 0;

padding-bottom: 2.5rem;

}

.cutoff-item .slick-list {

padding: 0 30% 0 0!important;

}

@media screen and (min-width: 768px){

.cutoff_box{

padding-top: 1rem;

}

.cutoff-item .slick-list{

padding: 0 40% 0 0!important;

}

@media screen and (min-width: 992px){

.cutoff_box{

padding-left: 10%;

}

.cutoff-item{

padding-bottom: 5rem;

}

.cutoff-item .slick-list{

padding: 0 15% 0 0!important;

}

@media screen and (min-width: 1200px){

.cutoff_box{

padding-top: 5rem;

}

/*li*/

.cutoff-item li {

margin: 0 1rem 0 0;

}

.cutoff-item li a{

color: #000;

}

.cutoff-item li a:hover{

text-decoration: none;

}

a .ig_img{

overflow: hidden;

}

a .ig_img img {

max-width: 100%;

transition: .5s;

}

a:hover .ig_img img{

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

/*p*/

.cutoff-item li a p{

padding-left: 0.5rem;

padding-right: 0.5rem;

}

.ig_date_cat{

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 0.8rem;

margin-bottom: 0.2rem;

}

.ig_date_cat span{

display: block;

line-height: 1.4;

}

.ig_date{

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 0.9rem;

}

.ig_cat1{

background-color: #2193d2;

color: #fff;

padding: 0.2rem 1rem;

font-size: 0.8rem;

}

.ig_cat2{

background-color: #58b6df;

color: #fff;

padding: 0.2rem 1rem;

font-size: 0.8rem;

}

.ig_date_cat+p{

font-weight: bold;

}

@media screen and (min-width: 1200px){

.cutoff-item li a p{

padding-right: 0.8rem;

padding-left: 0.8rem;

}

.ig_date_cat+p{

font-size: 1.2rem;

}

/*.cutoff-item .slick-prev-next*/

.cutoff-item .slick-prev, .cutoff-item .slick-next{

top: auto;

bottom: 0;

background: #1a1a1a;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

.cutoff-item .slick-prev{

left: 0;

transition: .3s;

}

.cutoff-item .slick-prev:hover{

-webkit-transform: translateX(-10px);

transform: translateX(-10px);

}

.cutoff-item .slick-next{

right: auto;

left: 40px;

transition: .3s;

}

.cutoff-item .slick-next:hover{

-webkit-transform: translateX(10px);

transform: translateX(10px);

}

@media screen and (min-width: 992px){

.cutoff-item .slick-prev, .cutoff-item .slick-next{

width: 50px;

height: 50px;

}

.cutoff-item .slick-prev{

left: 16%;

}

.cutoff-item .slick-next{

left: calc(16% + 60px);

}

.slick-prev::before, .slick-next::before{

font-size: 1.4rem;

}

Instagram Feed

参考：https://kaminarimagazine.com/web/2019/04/26/%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7%E7%B0%A1%E5%8D%98%EF%BC%81instagram-feed%E3%81%A7%E3%82%AB%E3%83%AB%E3%83%BC%E3%82%BB%E3%83%AB%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92%E5%AE%9F/

Instagram Feedをスリックにします。「.page-Insta-slick」のクラスを付けた「div」の中にInstagram Feedのショートコードを入力してください。

※注意
Instagram Feedをスリックにするjsは、プラグインが自動で吐き出すidを利用しています。
ショートコードの外に付けているクラスに関係なく、そのjsが読み込まれているテンプレート内のInstagram Feed全てに適用されます。
このjsの読み込みはスリックにしたいInstagram Feedがあるページのみで読み込んでください。

※注意
プラグインの元々の仕様を力技で無理矢理スリックにしているようなものなので、画像がうまく正方形に切り抜けなかったり、jsで指定する画像表示枚数によっては途中から画像が表示されない状態でスクロールしたりする場合があります。
その場合は状況に合わせてcss、jsを調整してください。
他ページでインスタの表示確認をするため、今はcssとjsをコメントアウトにしています。

webcoco_mgm

自己紹介文を表示します。

.

ダウンフロアのリビングがある、インダストリアルなお家。

#川堀工務店（栃木）
https://www.kawahori.com/
@kliving1922

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#インダストリアル
#アクセントクロス
#ダウンフロア
#キッチン
#キッチン収納
#ダイニング
#ダイニングテーブル
#リビングインテリア
#リビング階段
#鉄骨階段
#吹抜け
#ペンダントライト

. ナチュラル木カラー × グレー × ニ

. ホームページ制作実績のご紹介 ■

.

シンプルtripを象徴する大きな連窓はそのままに、
北面ファサードはグレーの塗り壁でシックに仕上げた外観デザイン。

#リグスタイルカンパニー（岐阜）
@ligstyle
https://www.ligstyle.com/

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#キッチン
#グラフテクトキッチン
#グラフテクト
#graftekt
#吹抜け
#リビング
#リビング階段
#スケルトン階段
#ダイニング
#インテリア
#LDK
#デザイン照明
#オーク
#フローリング

.

素材感を楽しみながらトーンを抑えて
静かな落ち着くテイストにまとめた
チル・ナチュラルな家。

#菱和ホーム（滋賀）
https://www.ryowahome.com/
@ryowa_home_design

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#ヌック
#格子窓
#ダイニング
#ダイニングキッチン
#キッチン
#キッチンインテリア
#グラフテクトキッチン
#グラフテクト
#graftekt
#LDK
#デッキスペース

.

「英と縁の家」

リビングから愛車を眺めることのできる家。

メインのクロスはグレーで統一。
大人の上質空間に。

#ウィンウィンホーム（愛媛）
https://msk-k.cc/
@winwinhome

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#新築マイホーム
#新築一戸建て
#一戸建て
#マイホーム

#ビルトインガレージのある家
#ビルトインガレージ
#キッチン
#グラフテクトキッチン
#グラフテクト
#graftekt
#海外インテリア
#ホテルライク
#kmew
#外観
#外観デザイン

.

黒ガルバリウムのスタイリッシュな平屋

開放感のあるLDK
無垢フローリングから繋がるモダンな和室
家事動線の良い間取りなど、
暮らしやすくオシャレなお家

#プラスハウス（茨城）
https://www.plushaus.co.jp/
@plus_haus

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅

#平屋
#リビング
#ダイニング
#キッチン
#LDK
#リビングインテリア
#無垢フローリング
#和室
#インテリア
#ダイニング
#家具
#家づくり
#家づくりアイデア

.

リビングの中央のグレーの壁は
壁掛けテレビ用と、水廻りの目隠し

グレーの漆喰を塗っており、
壁紙とは違った素材感を楽しめる

#あすなろ工房（宮城）
https://asunarokoubou.co.jp/
@asunaro_koubou_official

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン
#キッチン
#LDK

#吹抜け
#リビング
#キッチン
#グラフテクトキッチン
#グラフテクト
#graftekt
#オーダー住宅
#リビング階段
#スケルトン階段
#北欧インテリア
#無垢床

.

ストレスフリーな平屋の家。
共働きご夫婦の家事を楽に。

畳リビングは、家族が集うくつろげる空間に。

#フェアホーム（滋賀）
https://www.fair-home.jp/
@fairhome_marui

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#新築マイホーム
#新築一戸建て
#一戸建て
#マイホーム

#平屋
#平屋内観
#畳リビング
#LDK
#リビング
#ダイニング
#キッチン
#スタディスペース
#レッドシダー
#珊瑚の塗り壁
#和モダン

. シンプルで美しい、四角い家。写

.

全部屋快適に造られた住みやすい家。

#ホームランディック（愛知）
https://www.homelandick.com/
@homelandick

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#アイアン
#オーク床材
#ガルバリウム鋼板
#ガルバリウム
#外壁
#外観
#外観デザイン
#キッチン
#リビング
#LDK
#デザイン照明
#グラフテクト
#グラフテクトキッチン
#graftekt

. みせたい家正面玄関は木製サッシ

.

リビングから愛車を眺められるビルトインガレージが魅力。
ガレージ側からも見える家族の存在が、ぬくもりを感じさせてくれるお家。

#sotte 三友建設（鹿児島）
https://sotte.jp/
@_sotte

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#ガレージ
#ガレージハウス
#ガレージライフ
#ガレージのある家
#ガレージのある暮らし
#ビルトインガレージ
#LDK
#リビング
#キッチン
#平屋
#平屋外観
#フリースペース
#パブリックスペース
#プライベートスペース

. 家族がつながるセンターリビングの

.

ソファをはじめダイニングテーブルセット、照明、ラグやフロアランプ、アートにいたるまで建築デザイナーによりトータルプロデュースされたデザイナーズ住宅。

#タイセイホーム
https://www.taiseihome.net/
@taisei_home

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#外観
#外観デザイン

#企画住宅
#規格住宅
#テント
#tent
#アンバーレッドの外観
#赤い外観
#コンセプトハウス
#コンセプトデザインハウス
#デザイナーズ住宅
#デザイナーズハウス
#建築家とつくる家
#設計士とつくる家

.

”高級感”と”住み心地”の良さを愉しむ家

段下がりのリビング。
居心地の良さを作る効果的な空間のお家。

#鈴木建設株式会社 (千葉県)
https://suzukikennsetu.jp/
@chibatousou

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#おしゃれな工務店
#デザイン住宅
#工務店がつくる家
#内装デザイン

#段下がりリビング
#掘り込みリビング
#キッチン下がり天井
#下がり天井キッチン
#家事導線
#飾り格子
#リビング
#リビングインテリア
#インテリア
#インテリアコーディネート

.

"自分たちにちょうどいい"
コンセプトハウスtrip

#ジャストプラス(愛媛)
https://justplus.jp/
@just__plus

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅
#おしゃれな工務店
#デザイン住宅
#工務店がつくる家
#内装デザイン

#外観
#外観デザイン
#駐車スペース
#玄関土間
#グラフテクトキッチン
#グラフテクト
#graftekt
#リビング
#リビングインテリア
#2階リビング

.

ナチュラルモダンな1.5階建てのお家。

#川堀工務店（栃木）
https://www.kawahori.com/
@kliving1922

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#おしゃれな家
#注文住宅

#インダストリアル
#LDK
#リビング
#キッチン
#キッチン収納
#キッチン収納棚
#ダイニング
#ダイニングキッチン
#ダイニングテーブル
#リビングインテリア
#アイアン階段
#アイアン手摺
#リビング階段
#鉄骨階段
#吹抜け
#ペンダントライト

.

家族と猫と楽しむ、
ビルトインガレージのあるカッコいいお家

#コーヨーテック(兵庫)
https://koyo-tec.com
@koyo_tec

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#新築マイホーム
#新築一戸建て
#一戸建て

#ガレージ
#ガレージハウス
#ガレージライフ
#ガレージのある家
#ガレージのある暮らし
#ビルトインガレージ
#キャットウォーク
#キャットステップ
#キャットタワー
#吹抜け
#インナーガレージ
#外観デザイン
#ねこのいる暮らし
#ねこのいる生活
#猫と暮らす家

.

空をとり込むプライベート空間のある家

プライバシーを守りながらも、
中庭や窓によって景観を取り組むことが出来る。
計算された最高計画で抜群の日当たりと開放感を実現。

#井上建設（広島）
https://www.inouekensetu.jp/
@inouekensetu

------------------------------------

全国の「おしゃれ」で「かっこいい」家を建てる工務店様の施工事例をご紹介します。
これから家づくりをされる方の参考になればと思います。

------------------------------------

工務店様専門のホームページ制作会社
～webcoco（ウェブココ）～

web制作・リニューアル制作・web集客マーケティングなどを提案します。

詳細は、下記から公式HPへ
→→→@webcoco_mgm

どんなことでも、お気軽にご相談ください。
Instagramメッセージでも、お気軽にお問い合わせください。

------------------------------------

#webcoco
#ウェブココ
#工務店集客
#ホームページ制作
#ホームページ制作会社
#ホームページ集客
#ウェブ制作会社
#web制作会社
#ウェブサイト制作

#工務店
#施工事例
#新築マイホーム
#新築一戸建て
#一戸建て
#工務店選び
#おしゃれな家
#かっこいい家
#規格住宅

#平屋
#中庭
#中庭のある家
#アプローチ
#グラフテクトキッチン
#グラフテクト
#graftekt
#キッチン
#LDK
#リビング
#リビングインテリア

さらに読み込む... Instagram でフォロー

html

<div class="page-Insta-slick">[instagram-feed feed=1]</div>

1	<div class="page-Insta-slick">[instagram-feed feed=1]</div>

css

.page-Insta-slick {
  width: 100%;
  overflow: hidden;
}
.page-Insta-slick .bx-viewport {
  overflow: visible !important;
}
.page-Insta-slick #sb_instagram {
  max-width: 100% !important;
  width: 100% !important;
}
.page-Insta-slick .sbi_item {
  width: 100px !important;
  max-width: 55.3333333333vw !important;
}
.page-Insta-slick .sbi_photo {
  height: 100px !important;
  max-height: 76vw !important;
}
@media screen and (min-width: 768px){
	.page-Insta-slick .sbi_item{
		width: 200px!important;
	}
	.page-Insta-slick .sbi_photo{
		height: 200px!important;
	}
}

.page-Insta-slick {

width: 100%;

overflow: hidden;

}

.page-Insta-slick .bx-viewport {

overflow: visible !important;

}

.page-Insta-slick #sb_instagram {

max-width: 100% !important;

width: 100% !important;

}

.page-Insta-slick .sbi_item {

width: 100px !important;

max-width: 55.3333333333vw !important;

}

.page-Insta-slick .sbi_photo {

height: 100px !important;

max-height: 76vw !important;

}

@media screen and (min-width: 768px){

.page-Insta-slick .sbi_item{

width: 200px!important;

}

.page-Insta-slick .sbi_photo{

height: 200px!important;

}

特殊な仕様のjsですので、使用する際はこちらからコピペしてください。

※注意
page.jsに入れている他のスリック用のコードと同じように $(function() の中に入れてください。

//Instagram
var $sbiLoad = $('#sbi_load');
if($sbiLoad.length){
        $('#sbi_images').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 0,
            speed: 36000,
            arrows: false,
            cssEase: 'linear',
            responsive: [{
            breakpoint: 1000,
            settings: {
            slidesToShow: 2,
            slidesToScroll: 2
            }
        }]
        });
}

//Instagram

var $sbiLoad = $('#sbi_load');

if($sbiLoad.length){

$('#sbi_images').slick({

slidesToShow: 4,

slidesToScroll: 1,

autoplay: true,

autoplaySpeed: 0,

speed: 36000,

arrows: false,

cssEase: 'linear',

responsive: [{

breakpoint: 1000,

settings: {

slidesToShow: 2,

slidesToScroll: 2

}

}]

});

}

トップへ戻る