[第3回効果的なカスタマイズをしよう]コンテンツ

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>


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

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

11.MTでのSEO対策

11-1.ブログ記事にキーワード、概要の適用
 
 SEO対策の基本であるHTMLヘッダーのmetaタグであるKeywords、Descriptionを自動で出力する。

1)アーカイブテンプレート「ブログ記事」のカスタマイズ

 ブログ記事の作成の入力項目である

 「キーワード」→ Keywords
 「概要」→ Description

 を対応させる。

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

 名前:meta-seo


 <meta name="Description" content="<$MTEntryExcerpt$>" />
 <meta name="Keywords" content="<$MTEntryKeywords$>" />

3)アーカイブテンプレート「ブログ記事」に挿入

<$mt:Include module="meta-seo"$>

</head>の前に挿入




  16-security-key.pngtips:その6:初期設定からSEO対策

<title><$mt:EntryTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title>

SEO対策に重要なタグであるtitleタグには、すでに「ブログ記事のタイトル?ブログ名」が自動的にセットされる。

その他、初期設定で高いSEO効果をもたらしている。
 

12.MTでのスパム対策

12-1.コメント、トラックバックの運用方法

 今回の講座では、コメント、トラックバックをオープンしていないが、運用方法によっては、各機能を利用することも有効になる。
 オープンにすることで、スパムコメントやスパムトラックバックが入ってくる。

 標準プラグインで、スパム対策が施されているが、それでもやはりスパムは避けられない。
 メニュー「設定」の
  ・コメント
  ・トラックバック
  ・登録/認証
  ・スパム
 で、調整しながら対策を考える必要がある。


1)MT4からのコメントスパム対策機能 - コメント認証CHAPHA画像

 メニュー「設定」 - コメント - 表示オプション:CAPTHAプロバイダ

 なし → 「Movable Type 既定」を選択。

 これで、コメント表示するものには、認証画像が表示される。

mt12.jpg

参考記事:
MTのコメント設定[CAPTCHA 認証]:その4(タスクマザー)

13.運営をしていくための注意事項

13-1.定期的なバックアップ

1)ブログまるごとバックアップ

 ・システムメニュー「ツール」 - バックアップ
  このメニューで、複数ブログ、またはブログ毎にバックアップすることが可能。

2)エクスポート
 
 ・メニュー「ツール」 - エクスポート
  基本的なデータ(記事、コメント、トラックバック)の保存。

3)FTPでのバックアップ

 ・html、画像ファイルなどをダウンロード
 ・データベースが、SQLiteの場合、そのファイルを定期的にダウンロードする。
 ・MySQLの場合は、phpMyAdminなどのツールがあるので、それを利用。

14.ちょっとだけMTスタイルシート

必ず、CSSのバックアップをとって挑戦してみて下さい。
 
テンプレート>スタイル(StyleCatcher)で選択したhikks-greenのテンプレートcssの変更例。
ヘッダー画像の入れ替え、サイズ変更に伴う各ブロックのサイズ変更についての簡単な変更です。

14-1.ヘッダー画像の変更

1)hills-green.cssの改造



 #header { 
    border-color: #5283b1;  
    background: #cdeaff url(header.png) no-repeat bottom left; 
 }

↓↓↓↓↓↓↓↓↓↓↓


 #header { 
    border-color: #5283b1;  
    background: #cdeaff 
               url(http://トップドメイン/images/変更画像ファイル名)
                  no-repeat top left; 
 }


○元画像とのサイズが、全く同じであればこれでOKですが、幅、高さが違う場合、
以下のCSS変更が最低限必要になってきます。

画像の高さ調節


 #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 116px 20px;
 }


↓↓↓↓↓↓↓↓↓↓↓


  #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 0 20px;
 }

 
  16-security-key.pngtips:その7:CSS編集できる便利なツール
   Firefoxのみで動作
   Web Developer 日本語ツール:ミナトラボ

15.MovableType4.2基礎講座のまとめ

全3回シリーズのMT基礎講座のレジメをアップしました。

この講座は、1回3時間、1人1台PCを使って自分のMTを操作するという形式のものでした。

このレジメ(ページ)は、あくまでも講座で行なう補足用のテキストなので、講義で話す内容は載せてありません。なので、非常にわかりにくいところも多々あると思いますがご了承ください。

MTのノウハウやTips、Q&Aなどは、Web上にたくさん情報がありますので、是非そちらとあわせてお役に立てればよいなぁと思っています。

MTの参考記事として、タスクマザーのプラグイン活用なども参考にしていただければ幸いです。

 

このアーカイブについて

このページには、過去に書かれたブログ記事のうち第3回効果的なカスタマイズをしようカテゴリに属しているものが含まれています。

前のカテゴリは第2回具体的なページを作ってみようです。

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