Movable Type　超カスタマイズ術 http://mt.atmaru.com/ 初心者でもできる！ムーバブルタイプの簡単カスタマイズ ja Copyright 2007 Thu, 31 Dec 2020 23:59:59 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss ようこそ、Movable Typeカスタマイズ初心者の皆さん ＜目指すMovable Typeカスタマイズの姿＞ ◎ブログなのにブログっぽくない情報サイトを作る ◎ブログシステムを応用して会社ホームページを作る ゴールは主に上記２つ。 試行錯誤しながらサイトを作っていますが、その過程で得たMovable Typeカスタマイズ ノウハウ等をストック・公開していきます。 あまり難しい専門用語は使いません（･･･使えません）。高度な技術を必要とするものも、 基本的には扱いません（･･･はい、扱えません）。 同じようなMovable Typeカスタマイズ目標を持つ方や、そうでなくても、Movable Typeを 導入してみて、ちょっとしたカスタマイズをしたいと思い始めた方に、少しでも参考になる 情報を提供できれば幸いです。 ◆◆　ご案内　◆◆ ここで扱っているMovable Typeは、ver3.3です。 他のバージョンでの動作確認は一切行っていませんのでご了承ください。 ＜免責事項＞ 当サイト記載の記事によって何らかのトラブルが生じたとしても、 当サイトおよび運営者では責任を負いかねます。 バックアップをとるなど、ご自身の責任と準備の下に作業を行ってください。]]> http://mt.atmaru.com/000019.html http://mt.atmaru.com/000019.html Thu, 31 Dec 2020 23:59:59 +0900 エラーが起きたときはチェックしてみよう ・タグのミス 色々と修正していると、タグの細かいミスが起きがちです。 開始タグに対応する終了タグ(<div>を使うなら</div>)がきちんと存在しているか確認してください。 また『<、>、"』などの記号が余計に重複していたり、必要なところが消えてたりすることはないか確認してみましょう。 ・モジュールの作り忘れ ページテンプレートを更新するときに、そこで使用を指示しているモジュールが存在していないとエラーになります。 更新をかける前に、該当するモジュールテンプレートを作成・保存してください。 ・アクセス権限の変更漏れ プラグインを入れた後に起きるエラーはこれが多いです。 プラグインではｃｇｉ(拡張子が.cgiになっているシステムファイル)を使うことが多いのですが、ｃｇｉをサーバーにアップロードしたときはそのファイルのアクセス権限を755等に変更する必要があります。 アクセス権限の変更を忘れていませんか？ ・<head>～</head>にありがちなミス モジュール等にするのはかまわないですが、他のページのheadをつけてしまっていませんか？ メインページと各アーカイブページでは、若干記載してある内容が異なります。 何を変えるといけないのかはよくわかりませんが、できるだけオリジナルのものをそのまま使い、必要最低限の部分だけを変更するようにしましょう。 ・コメント・トラックバック・メール送信に関するエラー コメントやトラックバックが受け付けられなかったり、メール送信がエラーになるケースがあります。 Movable Type3.3ではスパムチェック機能が強化されていて、そのチェックにより、はじかれている可能性が高いです。 標準プラグインの『SpamLookup』に関する設定を変更して試してみましょう。 ]]> http://mt.atmaru.com/80/000062.html http://mt.atmaru.com/80/000062.html 080参考になるサイト・情報 Tue, 21 Aug 2007 22:28:03 +0900 TinyMCE⇒ワープロ感覚でエントリー記事が作れる 『TinyMCE』プラグインがとても便利です。 このプラグインを導入すると、エントリー画面に、ワード(Microsoft Word)のようなツールバーが表示されるようになります。ワードを使ったことがある方なら、感覚的に文字装飾ができるようになります。 ■『TinyMCE』プラグインの設置方法 　１．Toshihiro Gamoさんのページよりダウンロード・解凍 　　　⇒　TinyMCEダウンロードページへ 　２．Movable Typeをインストールしているサーバーに、 　　　mt-staticフォルダ、phpフォルダ、pluginsフォルダをアップロード 　　　(フォルダの中身を、同一名称のフォルダ下にアップロードしてもＯＫ) 以上で設置完了です。 次に新規エントリー画面を開いたときには、便利なツールバーが表示されているはずです。 ※補足：six apart社のサイトでも紹介しているプラグインです。こちらも参考にしてください。 　⇒　TinyMCEプラグイン 　　(six apart社の登録プラグインページへリンクしています) ]]> http://mt.atmaru.com/50/000061.html http://mt.atmaru.com/50/000061.html 050入れておきたいプラグイン Tue, 21 Aug 2007 21:55:06 +0900 カテゴリーページにも最新エントリー一覧を表示する 最近のエントリー一覧を表示する でもこの方法で、カテゴリーページ(カテゴリーアーカイブ)にも表示しようとすると、該当するカテゴリーのエントリーしか表示されません。 これはどうやら、Movable Typeの仕様で、勝手にフィルターがかかるようになっているようです。 でも解決策は意外と簡単です。 以下のように、MTEntriesタグで指定していたところを、MTArchiveListタグに変更すれば、どういうわけか、表示されるようになります。 もともとのエントリー一覧は、こんな風になっていると思います。
<MTEntries lastn="5"> <$MTEntryDate format="%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br /> </MTEntries>
それを、このように変更します。
<MTArchiveList lastn="5"> <$MTArchiveDate format="%m/%d"$> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br /> </MTArchiveList>
これで、カテゴリーページでも、全エントリーの一覧が表示されると思います。試してみてください。 ]]> http://mt.atmaru.com/30/000053.html http://mt.atmaru.com/30/000053.html 030表示内容のカスタマイズ Mon, 20 Aug 2007 12:44:52 +0900 カテゴリー一覧にエントリーも表示する サイドバーに表示する要素を変更する ただ、これだけだとリンク数が少なくて多少さみしい気もします。 ホームページとして見せるMovable Typeのサイトであれば、いわゆる日記としてのブログと違って、エントリー記事の数はさほど多くならないと思います。それならいっそ、すべての記事へのリンクをメニューに表示してしまった方が、アクセスしやすくなっておすすめです。 Movable Typeなら、新しい記事を追加したときに、自動的にメニューにも追加されるようになり、とても便利です。つまり、新しい記事を投稿して再構築するだけで、ホームページの更新作業が完了してしまうのです。 ちなみに当サイトが実際にそうしてありますので、左サイドバーのメニューのところを参考にしてください。以下のように、カテゴリー名と、各記事のタイトルを表示しています。 ･･･ま、当サイトは記事数が多いので、ちょっとゴチャゴチャしてしまっていますが、あくまで参考までに。
カテゴリーＡ
　└記事Ａ－１
　└記事Ａ－２
カテゴリーＢ
　└記事Ｂ－１
　└記事Ｂ－２
　└記事Ｂ－３
カテゴリーＣ
　└記事Ｃ－１
　　：
　　：
このように表示するには、サイドバーを表示する各テンプレート(メインページ、各アーカイブ、検索ページ、等)の、サイドバーの「カテゴリー一覧」部分を変更します。 それではやってみましょう。 メインページ等の、サイドバーに表示する「カテゴリー一覧」部分を探してください。下記の部分です。 ※サイドバー部分がわからない方はこちらを先に確認ください。 　⇒　サイドバーに表示する要素を変更する
<MTIfArchiveTypeEnabled archive_type="Category"> <div class="module-categories module"> <h2 class="module-header">カテゴリー</h2> <div class="module-content"> <MTTopLevelCategories> <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst> 　　（～省略～） <MTSubCatIsLast></ul></MTSubCatIsLast> </MTTopLevelCategories> </div> </div> </MTIfArchiveTypeEnabled>
これを、以下のように書き替えてください。
<MTIfArchiveTypeEnabled archive_type="Category"> <div class="module-categories module"> <MTCategories> <h2 class="module-header"> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> </h2> <MTEntries sort_order="ascend"> <p>└<a href="<$MTEntryLink$>"><$MTEntryTitle$></a></p> </MTEntries> </MTCategories> </div> </MTIfArchiveTypeEnabled>
<MTCategories>タグを加えることで、すべてのカテゴリー名が表示されるようになります。記事のないカテゴリー名を表示したくない場合は、<MTCategories>　と　</MTCategories>　を削除してしまってかまいません。 カテゴリー名を表示している　<$MTCategoryLabel$>　の部分は、cutfirstcharプラグインを使ってカテゴリーの順序を変更している場合は、<$MTCategoryLabel cutfirstchar="3"$>　のように修正してください。 ※カテゴリー順序変更の詳細はこちらを参照ください。 　⇒　カテゴリーの並び順序を変更する また、エントリーの順序についても変更可能です。上記例では、<MTEntries sort_order="ascend">　というように更新日の昇順(ascend)を指定していますが、他の並び順がよければ修正してください。 ※エントリー順序変更の詳細はこちらを参照ください。 　⇒　エントリーの並び順序を変更する なお、ここではエントリータイトル行を「<p>└　～　</p>」で表示していますが、「└」を別の記号に変えたり、箇条書き風（<ul>や<li>を使ったリスト表示)にしてもＯＫです。 必要な修正を加えたら、保存＆再構築してください。他のテンプレートも同様に修正します。これで、新しい記事をエントリーするたびに、メニューにエントリータイトルのリンクが追加されるようになります。 なお、エントリー時に自動で更新されるのはそのエントリーが関係しているページだけですので、他の記事ページや他のカテゴリーページのメニューにもリンクが追加されるようにしたい場合は、管理メニューの＜サイトを再構築＞で＜すべてを再構築＞してください。 ]]> http://mt.atmaru.com/30/000052.html http://mt.atmaru.com/30/000052.html 030表示内容のカスタマイズ Sun, 19 Aug 2007 23:29:09 +0900 サイドバーに表示する要素を変更する テンプレートの基本的な構成
<div id="beta"> <div id="beta-inner" class="pkg"> ： ： </div> </div>
サイドバーに表示する各コンテンツ(Movable Typeではwidgetと呼びます)は、基本的には、『class="module-○○ module"』というようなスタイル指定がなされているdivタグで囲まれています。例えば、検索widgetなら、下記の部分です。
<div class="module-search module"> <h2 class="module-header">検索</h2> <div class="module-content"> <form method="get" action="<$MTCGIPath$><$MTSearchScript$>"> <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /> <label for="search" accesskey="4">ブログを検索: </label> <br /> <input id="search" name="search" size="20" /> <input type="submit" value="検索" /> </form> </div> </div>
表示したくないwidgetは、テンプレートの中の　<div class="module-○○ module">～該当する<div>　までをごっそり削除してしまえばＯＫです。 widgetの表示順序を変更するには、<div class="module-○○ module">～該当する<div>　を記載する順序を入れ替えるだけです。 なお、中には『class="module-○○ module"』の外側(前と後)に別のタグがついているwidgetもあります。そのときは、その外側のタグまでがそのwidgetに含まれますので注意してください。例えば、カテゴリー一覧を表示するwidgetは、<MTIfArchiveTypeEnabled archive_type="Category">～</MTIfArchiveTypeEnabled>　で囲まれた部分が該当します。削除や順序変更のときは、これらのMTIfArchiveTypeEnabledタグもあわせて削除・移動します。 ちなみに、いわゆるホームページっぽく見せるのであれば、カテゴリー一覧widgetと検索widgetのみにしてしまうと、すっきりしてそれっぽくなります。試してみてください。 なお、サイドバーなど、複数のテンプレートで共通に使うコンテンツは、モジュール化してしまうととても便利です。<div id="beta">から該当する</div>までを、ごっそりモジュール化してしまうことをおすすめします。 ※参考　⇒　どんどんモジュール化しよう ]]> http://mt.atmaru.com/30/000051.html http://mt.atmaru.com/30/000051.html 030表示内容のカスタマイズ Fri, 17 Aug 2007 23:28:48 +0900 サイドバーの見た目をかえる サイドバーを右から左に変更する 位置を変えるだけでだいぶ会社ホームページっぽくなりましたが、どうもオリジナルテンプレートは色合いが暗い気がします。もっと華やかな、あるいは親しみやすい雰囲気にしたいところです。 ということで、今回はサイドバーのデザインの変えてみましょう。 デザインの変更ですから、インデックステンプレートの中の『スタイルシート』を開いてください。 idに「beta」がつく箇所がサイドバーに該当します。 「page layout」を指定するクラス群の中に、次の表記があります。
#beta { width: 200px; background: #e6ecf2; }
ここが「id=beta」のデザインを指定する部分です。 横幅を変更する場合は「width: 200px;」の右側の数値(ピクセル)を変更、背景色を変更する場合は「background: #e6ecf2;」の右側の色数値を変更すれば、サイドバー全体の幅と色が変わります。 オリジナルでは幅200ピクセル、薄いグレーになっています。 ※色見本の参考　⇒とほほの色入門・色見本 続いて、サイドバーに表示されている要素(検索小窓、最近のエントリー小窓、カテゴリー小窓、等)のデザインも変更してみましょう。 この要素のことを、Movable Typeでは「Widget＝ウィジェット」または「module＝モジュール」と呼びますが、テンプレートモジュールと混同しやすいので、ここではWidgetと呼びます。 Widgetは、タイトルバーとコンテンツボックスの組み合わせでできていますので、それぞれ変更していくことになります。
タイトルバー

コンテンツボックス

各ＨＴＭＬテンプレートでは、以下のように記載されています。
<div class="module-○○ module"> <h2 class="module-header">（タイトル）</h2> <div class="module-content"> （コンテンツ） </div> </div>
詳細を見てみると、<div class="module-○○ module">～</div>　でWidget全体のくくり、<h2 class="module-header">～</h2>　でタイトル部分、<div class="module-content">～</div>　でコンテンツ部分のデザイン(クラス)を指定しています。 まず、Widget全体の背景色を変更するには、スタイルシートの中から、「module」に関する指定をしている下記の部分を探します。
.module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #dae0e6; }
背景色は、「background: #dae0e6;」の右側の色数字を変更すればＯＫです。薄いグレーのままだと地味なので、明るめの色に変更してしまいましょう。 続いて、Widgetのタイトル部分を変更するには、スタイルシートの中から、「class="module-header"」に関する指定をしている下記の部分を探します。
.module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 5px solid #36414d; padding: 5px; color: #fff; background: #a3b8cc; font-size: 11px; font-weight: bold; line-height: 1; text-transform: uppercase; }
こうして見てみると、module-headerだけでなく、trackbacks-header、comments-header、comments-open-header、archive-headerも一緒に指定されています。従って、ここを変更すると、トラックバックやコメントを表示する部分のヘッダーデザインも変わりますので、注意してください。 主な変更内容は、文字色「color: #fff;」、背景色「background: #a3b8cc;」、文字のサイズ「font-size: 11px;」あたりでしょうか。 「border-left: 5px solid #36414d;」は、タイトル部分の左枠に表示されている濃い部分です。ここの色を変えるだけでも随分イメージが変わります。ここの太さを変えるなら「5px」を別の数字に、ここの色を変更するには「#36414d」を別の色数字に変更してください。 最後に、コンテンツ部分の詳細変更です。スタイルシートの中から、「class="module-content"」に関する指定をしている下記の部分を探します。
.module-content { margin: 0 0 10px 0; border-top: 1px solid #cfd4d9; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; }
ここでは、文字サイズ「font-size: 10px;」や、行間「line-height: 1.2;」の変更ができます。 余白(margin、padding)の変更も可能ですが、あまり変更することはないので、詳細説明はここでは省略します。 必要な修正を終えたら、保存＆再構築(S&R)してみてください。お好みのサイドバーになりましたか？ ]]> http://mt.atmaru.com/20/000050.html http://mt.atmaru.com/20/000050.html 020デザインのカスタマイズ Tue, 14 Aug 2007 19:06:49 +0900 Mapper⇒地図画像を表示する ■『Mapper』プラグインの設置方法 １．Google Maps API Keyを取得する 　　⇒　Google Maps API 英語でいろいろ書かれていますが、通常のインターネットサイトへの利用であれば問題ありません。 ※イントラネットや違法性のあるサイトには利用できません。 「Sign up」ページ最後のチェックボックスにチェックし、Movable TypeをインストールしているＵＲＬ(ブログのＵＲＬではないので注意)を入力して「Generate API key」をクリック⇒googleアカウントにログインしていない場合は、メールアドレスと適当なパスワードでアカウント作成・ログイン⇒キーコードが発行されます。 ２．Mapper.zipをダウンロードし、解凍する 　　⇒　Mapperダウンロード：Hirotaka Ogawaさんのサイトへ ３．Mapper.plをMovable Typeのpluginsディレクトリにコピーする ４．管理画面「プラグインの設定」で、Mapperプラグインの「設定を表示」し、１で取得したAPI Keyを入力して＜変更を保存＞する ５．地図を表示させたい場所を　<MTMapper>～</MTMapper>　タグで囲み、　[map:address]　で地図の表示先を指定する(詳細後述) ・MTMapperタグには次のオプション(アトリビュート)を付記することができます。 　　width="size"　：描画する地図の横幅を指定。デフォルトは400px。 　　height="size"　：描画する地図の縦幅を指定。デフォルトは300px。 　　zoom="zoom-level"　：描画する地図のズームレベルを指定。デフォルトは15。 ・address部分(地図表示先)は「東京都○○区○○1-1-1」のような住所表記のほか、「x経度y緯度(例：x139.729116y35.660391)」もしくは「緯度,経度(例：35.660391,139.729116)」のような「座標」表記も記述できます。 ■地図を表示させる方法（２通りあります） Ａ．エントリー記事内に地図を表示させる場合 １．エントリー記事の表示に関係するテンプレート(※)の　<body>　タグのあとに　<MTMapper>　タグ、　</body>　タグのあとに　</MTMapper>　タグを追加して保存 ※標準なら、メインページ(index.html)と各アーカイブ(エントリー・アーカイブ、カテゴリー・アーカイブ、等) 以下は、メインページにMapperタグを追加した例です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head> 　～省略～ </head> <body class="layout-two-column-right main-index"> <MTMapper> <div id="container"> <div id="container-inner" class="pkg"> ～省略～ </div> </div> </MTMapper> </body> </html>
２．エントリー記事内の、地図を表示させたい場所に以下のmapタグを記述
[map:東京都○○区○○1-1-1]
このとき、自動改行にしている場合は、行の前後に改行を１行入れてください。 自動改行にしていない場合は、<div>[map:東京都○○区○○1-1-1]</div>　のようにdivタグで挟んでください。 Ｂ．ヘッダーやナビ部分など、エントリー記事以外の場所に地図を表示させる場合 各テンプレートの表示させたい場所に、以下のタグを入力します。
<MTMapper> <div>[map:東京都○○区○○1-1-1]</div> </MTMapper>
※参考：six apart社のホームページでも紹介されています。ここにも詳しい設定方法の記載がありますので参考にしてください。 　⇒　Mapperプラグインの紹介 　　（six apart社のサイトへリンクしています） ]]> http://mt.atmaru.com/50/000049.html http://mt.atmaru.com/50/000049.html 050入れておきたいプラグイン Tue, 14 Aug 2007 16:49:22 +0900 グーグルマップを表示してみる Mapper⇒地図画像を表示する ]]> http://mt.atmaru.com/90/000048.html http://mt.atmaru.com/90/000048.html 090よもやま話 Tue, 14 Aug 2007 16:36:34 +0900 MailForm⇒メール問い合わせフォームを表示する MailFormプラグインの設定方法 １．藤本 壱さんのサイトから『MailForm』プラグインをダウンロードして解凍 ２．Movable Typeの「plugins」ディレクトリにアップロード ３．「plugins」-「MailForm」-「mt-mail-form.cgi」の属性をＣＧＩ用に変更（ロリポップサーバーなら755） ４．メールフォームを表示するＨＴＭＬテンプレートをアップロード ５．メールフォームを表示するファイルへリンクを貼る プラグインは、藤本 壱さんのサイトからダウンロードできます。最新の更新情報等もこちらでチェックしましょう。 ⇒　メールフォーム作成用プラグイン メールフォームのＨＴＭＬも、自分で作ると難しいので、標準テンプレート用サンプルを使わせてもらいましょう。ここでダウンロード＆設置方法が確認できます。 ⇒　Movable Type標準テンプレート用のサンプルメールフォーム ※補足：six apart社でも、登録プラグインとして紹介しています。こちらも参考にしてください。 ⇒　http://www.sixapart.jp/movabletype/plugins/mailform.html 　　(six apart社の登録プラグインページへリンクしています) ■メールが送信できないときは？ 私も最初に設定したときは、テストメールが送られずに悩みました。でもどうやら、標準プラグインのスパムチェックがかかってしまって送れなかったようです。 テストメールを＜送信＞したときに、エラーメッセージ「スパムチェックのため送られませんでした」等のメッセージが出た場合は、下記の設定変更をしてみてください。 ＜システム・メニュー＞－＜プラグイン＞－＜SpamLookup - リンク＞－＜設定＞ ここで、「リンク数」の最初のチェックボックスのチェックを、クリックして外します。 その状態で＜変更を保存＞してください。これで送れるようになると思います。]]> http://mt.atmaru.com/50/000047.html http://mt.atmaru.com/50/000047.html 050入れておきたいプラグイン Tue, 14 Aug 2007 10:58:26 +0900 文字の色や大きさをかえる テンプレートの基本的な構成 この中で、文字のサイズを指定するのが「font-size:～～」という要素、文字の色を指定するのが「color:～～」という要素です。サイトの中で、文字の大きさや色を変更したいデザインクラスのfont-sizeやcolorを変更するだけでＯＫです。 なお、よく変更を加える主な文字群は、大きく分けると下記の３箇所くらいです。 ・archive-header 　･･･大見出し：アーカイブページ(記事ページやカテゴリーページ)のページタイトル部分 ・entry-header 　･･･小見出し：各モジュール(記事や一覧等)のタイトル部分 ・module-content 　･･･本文：記事等のコンテンツ・本文にあたる部分 例えば、各記事の小見出し(タイトル部分)の文字を変更したい場合は、下記の部分を探してください。
.entry-header { margin-top: 0; border-left: 5px solid #dae0e6; padding: 0 0 0 10px; color: #666; font-size: 18px; }
Movable Type標準テンプレートでは、小見出しの文字色は濃グレー(color: #666;)、文字の大きさは18ピクセル(font-size: 18px;)になっています。 文字色を赤くするなら「color: #FF0000;」に、文字の大きさをやや控えめにするなら「font-size: 16px;」、というように変更して、保存＆再構築(S&R)してください。 ※色見本の参考　⇒　とほほの色入門・色見本 上記の他に、ページタイトルバナー部分の文字の大きさ・色も変更することができます。 「#banner-header」や「#banner-description」が該当する部分となりますが、詳細についてはこちらで説明していますので参照ください。 　⇒　タイトルバナーの雰囲気を変える]]> http://mt.atmaru.com/20/000046.html http://mt.atmaru.com/20/000046.html 020デザインのカスタマイズ Fri, 10 Aug 2007 23:46:44 +0900 Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る pingを有効に活用しよう でもこのping送信、Movable Typeの標準の状態だと、新しい記事を初めて「公開」にしたとき１回だけ送られるものになっています。 せっかくだから、記事の内容を更新するときにもping送信できるようになってたらいいと思いませんか？ エントリー画面で毎回ping送信先を入力してもいいのですが、どうせなら自動で送られると便利ですよね。 ということで今回ご紹介する『Update-n-Ping』プラグインは、記事を更新保存するたびに。自動的にping送信してくれるようになるものです。 ■『Update-n-Ping』プラグインの設定方法 導入はとても簡単です。 １．配布サイトから「update-n-ping.pl」をダウンロードする ２．Movable Typeのpluginsディレクトリ下に「update-n-ping.pl」をアップロードする ３．管理画面の＜設定＞－＜プラグイン＞を開く ４．『Update-n-Ping』の＜設定を表示＞を開き、ping送信先を入力・保存する プラグインはこちらからダウンロードできます。 ⇒　Update-n-Pingプラグイン]]> http://mt.atmaru.com/50/000045.html http://mt.atmaru.com/50/000045.html 050入れておきたいプラグイン Fri, 10 Aug 2007 22:22:18 +0900 サイドバーを右から左に変更する <div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="alpha"> <div id="alpha-inner" class="pkg"> ： ： </div> </div> <div id="beta"> <div id="beta-inner" class="pkg"> ： ： </div> </div> </div> </div> 最初の２行(＋最後の２行)が、メインページのボディとなるコンテンツをくくっているタグです。 その次の行に『alpha』という表現が入っていますが、この　<div id="alpha">～該当する</div>　がメインの記事部分、その次の　<div id="beta">～該当する</div>　がサイドバーの部分です。 ※テンプレートの全体構成については、こちらを参考にしてください。 　⇒　テンプレートの基本的な構成 現在右にあるサイドバーを左に移すには、単純に、サイドバーの部分を先に記載すればよいだけです。 つまり、　<div id="alpha">～該当する</div>　と　<div id="beta">～該当する</div>　の位置を逆にします。以下のようになります。
<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="beta"> <div id="beta-inner" class="pkg"> ： ： </div> </div> <div id="alpha"> <div id="alpha-inner" class="pkg"> ： ： </div> </div> </div> </div>
これで、サイドバー部分が先(左側)に、記事部分が後(右側)に表示されるようになりました。 メインページ以外のページテンプレートも同様の構成になっていますので、同じように順序を入れ替えておきましょう。]]> http://mt.atmaru.com/30/000044.html http://mt.atmaru.com/30/000044.html 030表示内容のカスタマイズ Thu, 09 Aug 2007 22:55:12 +0900 テンプレートの基本的な構成 テンプレートって何？ どのような構成になっているか、図示すると以下のようになります。
head(サイト・ページに関する情報を記述)
body(ブラウザに表示する内容を記述)
container
banner
pagebody
alpha beta
バナーを変えるならbannerに関する部分を、右側のサイドバー(リンクナビ部分)に表示している内容を変えるならbetaの部分を探して、必要な修正をかけます。 やみくもに探すよりは、全体の構成がわかると探しやすいのではないでしょうか。 続いて、スタイルシートについてです。 Movable Type標準テンプレートのスタイルシートはわかりにくいと、よく言われます。その理由は、同じ名称のクラスが分割して記載されているからです。 例えば、『body』タグのデザインを指定する『body』クラスタグが、スタイルシートの中に何度も出てきます。 しかしこれも、Movable Typeのスタイルシートの構成を理解すると、少しわかりやすくなります。 その構成は、次のようになっています。
basic elements ： 余白(margin、padding等)の基本要素群
page layout(1) ： ページや枠内での相対的な表示位置を指定する要素群
content ： コンテンツ(記事部分)のデザインを指定する要素群
modules(1) ： モジュール部分の表示位置を指定する要素群
basic page elements ： 基本的な文字のフォント・サイズ・色等を指定する要素群
page layout(2) ： 大きさ(幅・高さ)や背景色など、様々なレイアウトを指定する要素群
modules(2) ： モジュール部分の余白や背景色を指定する要素群
ここには基本的なもののみを抜粋しました。 スタイルシートの中には、特定のモジュールのみに使用する要素群もあります。でも滅多に使うことはないので無視していても問題ないでしょう。 デザインの修正をしたいときは、上記の構成を参考に、該当する要素がありそうなところをすべて見るようにしてください。 再度書きますが、Movable Typeの標準スタイルシートでは、同一のクラス要素が複数回出てきます。あれおかしいな？と思ったら、見逃している同一名称のクラスが他にないか、探してみるようにしてください。]]> http://mt.atmaru.com/10/000043.html http://mt.atmaru.com/10/000043.html 010ＭＴ導入基礎知識 Thu, 09 Aug 2007 22:43:48 +0900 サイトの背景を変更する body { min-width: 720px; color: #333; background: #36414d; } これが、bodyクラスでレイアウトを指定している部分です。 『background』が背景色を指定する要素ですので、ここの数字を変更すれば、背景色が変わります。 色見本等を参考に、希望の色番号に書き替えましょう。 ※色見本の参考　⇒とほほの色入門・色見本 書き替えたら、保存＆再構築(S&R)して、終了です。サイトを見てみると、書き替えた色の背景になっているはず。 ちなみに、色を変えるのではなく、画像を表示することもできます。 当サイトは水色の背景になっていますが、よく見ると、上が薄く下が濃いグラデーションになっています。これは、水色のグラデーションの画像を表示しているためです。
BODY { min-width: 720px; color: #333; background : url(img/bg.gif) repeat; }
繰り返し画像を表示する場合は、上記のように書き替えて、画像(上記例ではbg.gif)を「img」フォルダにアップロードします。 ストライプや水玉、花柄などを表示しても、にぎやかで楽しいサイトになりますよ。ぜひ自分好みに仕上げてみてください。]]> http://mt.atmaru.com/20/000042.html http://mt.atmaru.com/20/000042.html 020デザインのカスタマイズ Thu, 09 Aug 2007 21:12:56 +0900