widesliderによるスライドコンテンツ×MT

movable-type widesliderによるスライドコンテンツ×MT
最終更新日: 2023年4月15日

トップページなどで要素をスライドさせる要素にエントリー内容を抽出。カテゴリやなんだかんだ分岐するのは別途とし、基本的な部分。

metaタグ内

<script type="text/javascript" src="<MTBlogURL>js/contentsSlider.js"></script>

スクリプト記載。

<div id="concept-wrapper">
<div class="wideslider">
<ul>
<!--Topics-->
<MTEntries lastn="5">
<li style="background:URL(<MTEntryAssets sort_by="file_name" sort_order="ascend" lastn="1"><$MTAssetURL$></MTEntryAssets>) no-repeat left center;background-size:cover;">
<div class="hoge">
<div class="foo">
<h2>
<a href="<MTEntryPermaLink>">
<MTEntryTitle>
</a>
</h2>
<p>
<$mt:EntryExcerpt mteval="1" remove_html="1" trim="1" strip_linefeeds="1" trim_to="70"$>
</p>
</div>
</div>
</li>
</mt:Entries>
<!--Topics-->
</ul>
</div>
</div>

最新5件の記事、エントリ―中最初の画像をスライドの背景画像とし、EntryTitleとEntryExcerptを表示。

CSS
.wideslider {
width: 100%;
height: 550px;
margin:0 auto 0 auto;
text-align: center;
position: relative;
overflow: hidden;
background-color:#FFF;
}
.wideslider ul,
.wideslider ul li {
float: left;
display: inline;
overflow: hidden;
background-size: cover;
-webkit-background-size: cover; /* Safari 3.0 */
-moz-background-size: cover; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: cover; /* Opera 9.5 */
background-size: cover; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
}
.wideslider_base {
top: 0px;
position: absolute;
}
.wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden;
}
.slider_prev,
.slider_next {
top: 0;
overflow: hidden;
position: absolute;
z-index: 9;
cursor: pointer;
display:block;
}
.slider_prev {
background: #fff url(object/prev.jpg) no-repeat right center;
}
.slider_next {
background: #fff url(object/next.jpg) no-repeat left center;
}
.pagination {
bottom: 5px;
left: 0;
width: 100%;
height: 7px;
text-align: center;
position: absolute;
z-index: 9;
}
.pagination a,
.pagination a:link,
.pagination a:hover {
margin: 0 5px;
width: 50px;
height: 5px;
display:inline-block;
overflow: hidden;
background: #2A1803;
border:1px solid #FFF;
}
/*ナビのうちコマ指定本邦長方形だが、MTタグなどで整えサムネール化も*/
.pagination a.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
.wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.wideslider ul {
display: inline-block;
overflow: hidden;
}

.foo a {
font-weight:bold;
color:#333;
z-index:7;
}

実際に使用したものから抜粋しサンプル化したので、htmlタグCSS適せん加減マークアップする。