SteamerLaneStudio
Steamer Lane Studio技術備忘録Movable Type

MovableType×wideSliderでページネーション/ナビをカスタマイズ

movable-type MovableType×wideSliderでページネーション/ナビをカスタマイズ
最終更新日: 2023年4月15日

100％width表示の中で要素をスライドするwideSlider、自動生成されるページネーション/ナビが良くないのでカスタマイズ。
スクリプトをいじるのが一番だが、スクリプトの加工が難しいので別の方法でアプローチ。

—html—

<div class="wideslider" style="text-align:center">
<ul class="clearfix">
<MTEntries categories="お奨め OR キャンペーン">
<li>
<div class="wideslider-content-wrap" style="background-image:URL(<MTEntryAssets sort_by="file_name" sort_order="ascend" lastn="1"><$MTAssetURL$></MTEntryAssets>) ">
<div class="wideslider-content">
<p>
<mt:SetVarBlock name="entry-cat"><mt:EntryCategories><MTTopLevelParent><mt:Unless tag="CategoryLabel" like="店舗情報"><mt:CategoryLabel></mt:Unless></MTTopLevelParent></mt:EntryCategories></mt:SetVarBlock>
<mt:If name="entry-cat" like="お奨め">
Recommend<br />
<span>お奨め
<mt:ElseIf name="entry-cat" eq="キャンペーン">
Campaign<br />
<span>只今開催中の
</mt:If>
<MTTopLevelParent><mt:CategoryLabel></MTTopLevelParent></span>
</p>
<h2>
<a href="<MTEntryPermaLink>">
<MTEntryTitle>
</a>
</h2>
</div>
</div>
</li>
</mt:Entries>
</ul>
</div>

—CSS—

div.wideslider {
width:100%;
height:440px;
margin: 0 auto 0 auto;
text-align: center;/*
position: relative;*/
overflow: hidden;
}

/*
.wideslider ul {
display: inline-block;
width:100%;
height:350px;
text-align:center;
overflow: hidden;
}

.wideslider ul li {
width:980px;
height:350px;
margin:0 auto 0 auto;
display: block;
overflow: hidden;
text-align:right;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
.wideslider ul,
.wideslider ul li {
float: left;
display: inline;
overflow: hidden;
}

.wideslider ul {
width:980px;
}

.wideslider ul li {
width:980px;
height:350px;
margin:0 auto;
text-align:right;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.wideslider_base {
top: 0px;
position: absolute;
height:350px;
}

.wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden;
}

.wideslider-content-wrap {
width:979px;
height:350px;
margin:0 1px 0 0;
background-image:url(../object/p_13.png);
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.wideslider-content {
float:right;
width:330px;
height:350px;
background-image:url(../object/p_13.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.wideslider-content h2 {
width:290px;
height:110px;
padding:0 20px 20px 20px;
line-height: 1.4;
text-align:left;
vertical-align:middle;
color:#FFF;
}

.wideslider-content p {
display:table-cell;
width:290px;
height:160px;
padding:0 20px;
font-size:24px;
font-size:1.75rem;
line-height: 1.4;
text-align:center;
vertical-align:middle;
color:#FFF;
font-family: 'Nixie One', cursive,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
}

.wideslider-content p span {
font-size:14px;
font-size:0.88rem;
}

.wideslider-content span {
display:block;
margin:0 0 50px 0;
font-size:14px;
text-align:center;
color:#FFF;
}

.wideslider-content h2 a {
color:#FFF;
}

.slider_prev,
.slider_next {
position:static;
top:379px;
width:50px!important;
height:50px!important;
cursor: pointer;
display:inline-block;
border:1px solid #aaa;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
color:#aaa;
font-family: 'Poiret One', cursive,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
font-size:48px;
font-size:3rem;
z-index:4;
}

.slider_prev {
float:left;
margin:379px 10px 0 0;
}

.slider_prev:before {
content:"<";
}

.slider_next {
float:right;
margin:379px 0 0 10px;
}

.slider_next:before {
content:">";
}

.pagination {
position:static;
top:348px;
left:0;
display:block;;
width: 856px;
height: 70px;
margin:370px auto 0 auto;
text-align: center;
z-index:4;
}

.pagination a,
.pagination a:link,
.pagination a:hover {
display:block;
float:left;
margin: 0 10px 0 0;
width: 205px;
width : calc(25% - 10px) ;
height: 68px;
overflow: hidden;
border:1px solid #CCC;
}

.pagination a:nth-child(4) {
margin:0 auto;
}

.pagination a.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}

.pagination a:before {
position:relative;
top:20px;
left:auto;
margin:0;
display: inline;
font-size:14px;
font-size:0.88rem;
}

—CSS（MovableType生成）—

<style>
<$mt:SetVar name="cnt" value="1"$>
<mt:Entries categories="お奨め OR キャンペーン">
.pagination a.pn<$mt:GetVar name="cnt"$>:before {
content: "<mt:EntryTitle>";
}
<$mt:SetVar name="cnt" op="++"$>
</mt:Entries>
</style>

要はページネーション/ナビを疑似クラスでコンテンツ表示させる。