10.トップページのカスタマイズ

いよいよ最終章、第3回です。
Webショップらしくなるように、カスタマイズを行なっていきます。

10-1.新着情報カテゴリの最新記事を3件表示しよう。

1)モジュールを流用・変更

 ・ウィジェットテンプレート「最近のブログ記事」を参考にします。
  メニュー「デザイン」?ウィジェット?ウィジェットテンプレート一覧

mt10-1.jpg
最近のブログ記事:


 <mt:If tag="BlogEntryCount">
   <mt:Entries lastn="10">
      <mt:EntriesHeader>
 <div class="widget-recent-entries widget-archives widget">
   <h3 class="widget-header">最近のブログ記事</h3>
   <div class="widget-content">
     <ul>
     </mt:EntriesHeader>
       <li><a href="<$mt:EntryPermalink$>">
                              <$mt:EntryTitle$></a></li> 
     <mt:EntriesFooter>
     </ul>
   </div>
 </div>
    </mt:EntriesFooter>
    </mt:Entries>
 </mt:If>


解説:
 ・ <mt:If tag="BlogEntryCount"> ブログ記事が存在している場合

 ・ <mt:Entries lastn="10"> ブログ記事、最新10件を表示

 ・ <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> エントリータイトル表示、その記事へのリンク


2)テンプレートモジュールの作成

メニュー「デザイン」?テンプレート?テンプレートモジュールの作成

名前:top-news

 上記テンプレートの変更内容
   ・カテゴリ「新着情報」の最新記事を3件
   → <mt:Entries category="<100>新着情報" lastn="3">
   ・タイトルの変更 → ○○ショップ新着情報
   ・出力内容:日付、本文の頭の20文字表示
   → <$mt:EntryBody words="40"$> <$mt:EntryDate format="%x">

top-news テンプレートモジュール

 <mt:If tag="BlogEntryCount">
    <mt:Entries category="<100>新着情報" lastn="3">
        <mt:EntriesHeader>
 <div class="widget-recent-entries widget-archives widget">
  <h3 class="widget-header">○○ショップ新着情報</h3>
  <div class="widget-content">
    <ul>
    </mt:EntriesHeader>
  <li><$mt:EntryDate format="%x"$>:
 <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a><br />
      <$mt:EntryBody words="40"$> 
 </li>
    <mt:EntriesFooter>
    </ul>
  </div>
 </div>
    </mt:EntriesFooter>
    </mt:Entries>
 </mt:If>

「保存」ボタンで新規作成、保存。

 
3)「メインページ」テンプレートへモジュールを挿入

 <$mt:Include module="top-news"$> 

  ・<mt:Entries>の上に挿入

21行目あたり


       <div id="alpha">
          <div id="alpha-inner">
 
 <mt:Entries>
 <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
                            
   <$mt:Include module="ブログ記事の概要"$>
                            
 </mt:Entries>


 ・「保存と再構築」ボタンで、ページを再構築する。

  新着情報カテゴリが、右コンテンツ上部に表示される。


 「○○ショップ新着情報」(画像では、2件の新着情報が表示されている)

mt10-14.jpg
 16-security-key.pngtips:その5:MTタグの一覧

MTタグの一覧、使い方が紹介されているサイト

  ・ 日付のフォーマット(モディファイアリファレンス)

10-2.メインイメージ画像を表示させよう

1)10-1と同様に、モジュールテンプレートを作成

 画像を表示させるためのhtmlタグは、imgタグ
 例)
 <img src="画像パス/画像ファイル名" alt="画像の名前" width="幅" height="高さ" />

 アップロードしたメイン画像名が、「main_banner.jpg」でサイズが550×300の場合

 <img src="http://hrm-tsk.web6.jp/works/images/main_banner.jpg" width="550" hight="300" alt="○○ショップへようこそ" border="0" />

2)画像位置等のデザインを調整するためのスタイルシートを設定して作成

 名前:main-banner


 <div id="main-header">
 <img src="http://ドメイン名/works/images/main_banner.jpg"
   width="550" hight="300"alt="○○ショップへようこそ" border="0" />
 </div>

3)メインページへモジュールを挿入

 <$mt:Include module="main-banner"$>
  ↓
 前回挿入した <$mt:Include module="top-news"$> の上に追加

 ・「保存と再構築」ボタンで、ページを再構築する。

 4)スタイルシートを設定

  以下のスタイルシートを、hills-green.cssに設定することで、画像の位置を調整する。

  画像の上、右、下、左の間隔設定 


 #main-header {
     margin: 10px 10px 10px 0;
 }
 
  画像の位置をスタイルシートで調整する。
  現状の全体サイズ940pxで、コンテンツ幅は750px。
  なので、もしこのサイズで運用する場合は、画像は右コンテンツの740px以下のサイズでもOK。
 今回は、全体幅を縮小することを前提で550pxサイズ画像を挿入した。

  mt10-2.jpg
10-3.人の見えるショップにしよう

 第1回講座「0.インストール設定の確認>0-2.システムメニュー-「設定」」でアップロードしたプロフィール画像を、Webショップオーナーとしてサイドバーに表示します。

1)プロフィール画像のモジュールを作成

 グローバルテンプレートのテンプレートモジュール「プロフィール画像」を参考。

 グローバルテンプレートとは?

 複数ブログに共通なテンプレート
 複数ブログで構築する場合、デザインの統一性が図れる。
 また、独立したブログでも、共通モジュールが利用できる利点がある。

mt10-3.jpg


 左上リンク → 「システムメニュー」?デザイン ?テンプレート

 または、

 右上リンク(ブログタイトルをクリック) → 「システムメニュー」?グローバルテンプレート
 テンプレートモジュール ? 「プロフィール画像」を参照

※このモジュールは、主にブログ記事テンプレートで使用するものなので、
 今回は、サイドメニュー用として新規に作成する。

2)ウィジェットテンプレートを作成

 「2カラムのサイドバー」ウィジェットセットに追加するためにウィジェットテンプレートを新規作成
 (メニュー「デザイン」- ウィジェット - 「2カラムのサイドバー」)

 ・メニュー「デザイン」- ウィジェット - ウィジェットテンプレートを作成

 名前:profile-menu

 <MTAuthors>
 <div class="userpic">
    <h3 class="widget-header">ショップマスター</h3>
    <div class="widget-content">

    <MTIf tag="AuthorUserpicURL">
    <MTIgnore>登録ユーザー (プロフィール画像登録あり)</MTIgnore>
    <MTAuthorUserpicAsset>
    <img alt="" src="<mt:AssetThumbnailURL 
                width="$userpic_size">" width="80" />
    </MTAuthorUserpicAsset>
    <p><$MTAuthorDisplayName$></p>
    <MTElse>
    <MTIgnore>登録ユーザー (プロフィール画像登録なし)、
                                           未登録ユーザー</MTIgnore>
    <img alt="" src="<mt:StaticWebPath>images/
                         default-userpic-90.jpg" width="80" />
    </MTIf>
 </div>
 </div>
 </MTAuthors>

「保存」で profile-menu が新規作成される。 

 3)ウィジェットセット「2カラムのサイドバー」にセット

  利用可能の一覧に「profile-menu」が表示されているので、インストール済み一覧の中の表示したい箇所に、つまんで移動する。

 
mt10-33.jpg
4)各種テンプレートを再構築

 サイドバーはすべてのテンプレートの共通に使われているので、それぞれのテンプレートを更新する。

5)スタイルシートの設定

 画像位置の調整


 .userpic {
     margin: 10px 10px 0 30px;
 }
 
このページのトップへ▲

このブログ記事について

このページは、taskmotherが2009年11月 6日 09:46に書いたブログ記事です。

ひとつ前のブログ記事は「11.MTでのSEO対策 」です。

次のブログ記事は「9.第3回講座の宿題! 」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。