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

１０．トップページのカスタマイズ

taskmother (2009年11月 6日 09:46) | コメント(0) | トラックバック(0)
いよいよ最終章、第3回です。
Webショップらしくなるように、カスタマイズを行なっていきます。

１０-１．新着情報カテゴリの最新記事を３件表示しよう。

１）モジュールを流用・変更

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

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">　ブログ記事、最新１０件を表示

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


２）テンプレートモジュールの作成

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

名前：top-news

　上記テンプレートの変更内容
　　　・カテゴリ「新着情報」の最新記事を３件
　　　→　<mt:Entries category="<100>新着情報" lastn="3">
　　　・タイトルの変更　→　○○ショップ新着情報
　　　・出力内容：日付、本文の頭の２０文字表示
　　　→　<$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>
「保存」ボタンで新規作成、保存。

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

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

 　・<mt:Entries>の上に挿入

２１行目あたり 


       <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>

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

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

続きを読む: １０．トップページのカスタマイズ
このページのトップへ▲

１１．ＭＴでのＳＥＯ対策

taskmother (2009年11月 5日 10:40) | コメント(0) | トラックバック(0)
１１-１．ブログ記事にキーワード、概要の適用
 
　ＳＥＯ対策の基本であるHTMLヘッダーのmetaタグであるKeywords、Descriptionを自動で出力する。

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

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

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

　を対応させる。

２）テンプレートモジュールの作成

　名前：meta-seo


 <meta name="Description" content="<$MTEntryExcerpt$>" />
 <meta name="Keywords" content="<$MTEntryKeywords$>" />
３）アーカイブテンプレート「ブログ記事」に挿入

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

・ </head>の前に挿入




  16-security-key.pngtips：その６：初期設定からＳＥＯ対策

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

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

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

続きを読む: １１．ＭＴでのＳＥＯ対策
このページのトップへ▲

１２．ＭＴでのスパム対策

taskmother (2009年11月 4日 10:48) | コメント(0) | トラックバック(0)
１２-１．コメント、トラックバックの運用方法

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

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


１）ＭＴ４からのコメントスパム対策機能 - コメント認証CHAPHA画像

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

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

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

mt12.jpg

参考記事：
MTのコメント設定[CAPTCHA 認証]：その４（タスクマザー）

このページのトップへ▲

１３．運営をしていくための注意事項

taskmother (2009年11月 3日 10:51) | コメント(0) | トラックバック(0)
１３-１．定期的なバックアップ

１）ブログまるごとバックアップ

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

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

３）ＦＴＰでのバックアップ

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

続きを読む: １３．運営をしていくための注意事項
このページのトップへ▲

１４．ちょっとだけＭＴスタイルシート

taskmother (2009年11月 2日 10:55) | コメント(0) | トラックバック(0)
※ 必ず、CSSのバックアップをとって挑戦してみて下さい。
 
テンプレート＞スタイル(StyleCatcher）で選択したhikks-greenのテンプレートcssの変更例。
ヘッダー画像の入れ替え、サイズ変更に伴う各ブロックのサイズ変更についての簡単な変更です。

１４-１．ヘッダー画像の変更

１）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：その７：CSS編集できる便利なツール
 　　Firefoxのみで動作
 　　Web Developer 日本語ツール：ミナトラボ
続きを読む: １４．ちょっとだけＭＴスタイルシート
このページのトップへ▲

１５．MovableType4.2基礎講座のまとめ

taskmother (2009年11月 1日 15:19) | コメント(0) | トラックバック(0)

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

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

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

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

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

 

このページのトップへ▲
« 第2回具体的なページを作ってみよう | メインページ | アーカイブ

検索

このアーカイブについて

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

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

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