前回の作業でコンテンツを記入する部分を①～⑤まで作りました。現在は①、②、④までコンテンツを記入しています。
①の部分には見出しの画像をはりあいさつ文のテキストを記載しています。使用した画像は自作のものです。良かったら「フリー素材置き場」にアップする予定ですので、ご自由にお使い下さい(^^
②の部分は①と同じく見出しの画像を貼り、その下に新着記事のタイトルを5件リストアップしてあります。ソースは次のようになります。スタイルシートでリストマークや位置の指定をしてあります。
【メインページ上部の新着記事部分のソース】
<!--新着記事-->
<br>
<img alt="MTnewentry.gif" src="画像のURL"><br>
<div class="content">
<MTEntries lastn="5">
<ul>
<li><
href="<$MTEntryLink$>"><$MTEntryTitle$></a></li>
</ul>
</MTEntries>
</div>
<!--新着記事終了-->
<br>
<img alt="MTnewentry.gif" src="画像のURL"><br>
<div class="content">
<MTEntries lastn="5">
<ul>
<li><
href="<$MTEntryLink$>"><$MTEntryTitle$></a></li>
</ul>
</MTEntries>
</div>
<!--新着記事終了-->
【メインページ上部のコンテンツ部分のスタイルシート】
/*トップページ上部のコンテンツ部分*/
.content{
padding:0px 20px 0px 10px;
}
.content ul{
padding: 0px;
margin: 0px;
}
.content li{
background-image: url(画像のURL);
background-repeat: no-repeat;
list-style-type: none;
background-position: left 3px;
padding-left: 15px;
margin-top: 0px;
line-height: 150%;
text-align: left;
}
④は見出しの画像の下にアドセンスを貼り付けています。.content{
padding:0px 20px 0px 10px;
}
.content ul{
padding: 0px;
margin: 0px;
}
.content li{
background-image: url(画像のURL);
background-repeat: no-repeat;
list-style-type: none;
background-position: left 3px;
padding-left: 15px;
margin-top: 0px;
line-height: 150%;
text-align: left;
}
こんな感じでMTのテンプレートだからといってMTのデータだけを表示するのではなく、このようにHTMLでWELCOMEのような静的なコンテンツや新着記事のような動的なコンテンツを自由に配置するとデザインの幅が広がっていくと思います♪
