blog -under construction-: Web_Designing アーカイブ

2006年09月05日

　2006年9月号

「Movable Type 3.3の新機能、Widget Managerを活用する」

●WidgetManagerを使ってみる
-----------------------ソースここから-----------------------------
<$MTWidgetManager name="Sidebar"$>
-----------------------ソースここまで-----------------------------

●Widgetを追加してみる

「最新のトラックバック」というモジュールを作成

-----------------------ソースここから-----------------------------
<div class="module-recent-comments module">
<h2 class="module-header">最近のトラックバック</h2>
<div class="module-content">
<ul class="module-list">
<MTPings lastn="5">
<li><a href="<$MTPingURL$>"
title=""<$MTPingBlogName$>"さんからのトラックバック"><$MTPingTitle$></a></br>
from:<$MTPingBlogName$> <$MTPingDate format="%x">
</MTPings>
</ul>
</div>
</div>
-----------------------ソースここまで-----------------------------

投稿者 tag : 22:19 | コメント (0) | トラックバック

　2006年8月号

「条件分岐するコンテンツを作る」

●MTタグで条件分岐

-----------------------ソースここから-----------------------------
<MTEntryIfExtended>
<a href="<$MTEntryLink$>#<$MTEntryID$>">続きを読む</a>
<MTElse>
この記事はここまで
</MTElse>
</MTEntryIfExtended>
-----------------------ソースここまで-----------------------------

●<MTIfNonEmpty> タグを使いこなす

<MTIfNonEmpty>タグは少し特殊な条件タグです。このタグには「tag」というアトリビュートが必須で、そこで指定された変数タグに一文字でもなにか値があるかどうかを判定します。実際の利用例は以下のようになります。

-----------------------ソースここから-----------------------------
<MTIfNonEmpty tag="値の有る無しを設定できる変数タグ">
tagアトリビュートで指定したタグに値がある時のみ表示するコンテンツ
<MTElse>tagアトリビュートで指定したタグに値が無い時のみ表示するコンテンツ</MTElse>
</MTIfNonEmpty>
-----------------------ソースここまで-----------------------------

○例1：カテゴリーが指定されている場合のみカテゴリー名を表示する

-----------------------ソースここから-----------------------------
<MTEntries>
<MTIfNonEmpty tag="MTEntryCategory">
<$MTEntryCategory$>
<MTElse>カテゴリーなし</MTElse>
</MTIfNonEmpty>
</MTEntries>
-----------------------ソースここまで-----------------------------

○例2：最新10件のエントリーの中で、任意のエントリーにだけ new マークをつける

-----------------------ソースここから-----------------------------
<ul><MTEntries lastn="10">
<MTIfNonEmpty tag="MTEntryKeywords">
<li class="new">
　 <MTElse>
<li class="normal">
</MTElse>
　</MTIfNonEmpty>
　<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a>
　</li>
</MTEntries></ul>
-----------------------ソースここまで-----------------------------

-----------------------ソースここから-----------------------------
li.new {
padding-left: 20px; /* 画像の幅と少しの余白分 */
background: transparent url(new-icon.gif) no-repeat left center; /* 背景画像で new マークを表示 */
}

li.normal {
padding-left: 20px; /* 画像の幅と少しの余白分 */
}
-----------------------ソースここまで-----------------------------

投稿者 tag : 22:13 | コメント (0) | トラックバック

　2006年7月号

「複数の人で運営するblogポータルを作る」

●ワークフロープラグインを使う
http://www.rayners.org/plugins/workflow/

●マルチブログプラグインを使う
○最新版1.99
http://www.rayners.org/plugins/multiblog/
○今回使った1.1.0
http://www.rayners.org/2004/09/multiblog_110.php

●Movable Type Enterprise
http://www.sixapart.jp/movabletype/enterprise/

投稿者 tag : 21:56 | コメント (0) | トラックバック

　2006年6月号

「動画でblogをもっと楽しくしよう」

●FlipClipを使って動画を投稿
FlipClip

●その他の動画ストレージ

○YouTube
http://www.youtube.com

○モビゾー
http://www.movizo.com/member/

○らくちんFLVメーカー
http://rakuchin.flvmaker.com/

○mooom
http://mooom.jp/

投稿者 tag : 21:51 | コメント (0) | トラックバック

2006年03月23日

　2006年4月号

「自分のblogにGoogle Mapsを貼ってみよう」

●Google MapsとGoogle Maps API

・Google Maps API
・Google Maps API仕様書日本語訳

●「MTGoogleMaps」プラグイン

「MTGoogleMaps」プラグインダウンロードページ

「Create a Google Account」ページ

Google Maps API

「Geocoding」で緯度・経度を取得

-----------------------ソースここから-----------------------------
< MTGoogleMaps coordinates="139.757496, 35.690943" info="毎日コミュニケーションズへようこそ" width="400px" height="400px" zoom="2">
株式会社毎日コミュニケーションズ< br>
〒100-0003< br>
東京都千代田区一ツ橋一丁目１番１号< br>
パレスサイドビル6階< br>
-----------------------ソースここまで-----------------------------

●エントリー内でプラグインを使う

Process Tags plugin

-----------------------ソースここから-----------------------------
< $MTEntryBody process_tags="1"$>
-----------------------ソースここまで-----------------------------

●その他の地図サービス

地図日記

ちず窓

投稿者 tag : 00:39 | コメント (0) | トラックバック

2006年02月28日

　2006年3月号

「管理ページをカスタマイズする」

●「Ajaxify_EnhancedEntryEditing_Ja」プラグイン
「Ajaxify_EnhancedEntryEditing_Ja」プラグインダウンロード
 「Ajaxify」プラグインダウンロード

●「RightFields」プラグイン
「RightFields」プラグインダウンロード
 「BigPAPI」プラグインダウンロード

○あらたにフィールドを作る

・インストール後「RightFields」設定画面で「Configure」ボタンをクリック
・「Extra Field」タブを選択し、「PluginData」をチェックして「Update」をクリック
・「Field」欄に「Weather」、「Label」欄に「天気予報」、「Type」プルダウンメニューで「Select Menu」を選び、表示される「Setting」の欄に「晴れ、曇、雨、雪」と天気を入力し「変更を保存」をクリック
・テンプレートメニューでメインテンプレートを選び、任意の場所（今回はエントリー最下部）に新しく作ったフィールドの内容を表示するテンプレートタグを挿入。

-----------------------ソースここから-----------------------------
天気: <$MTExtraFieldValue field="Weather"$>
-----------------------ソースここまで-----------------------------

○新たにテンプレートタグを作る
・「RightFields」の設定画面で「Template Tags」のタブを選択し、Tag欄を「Weather」、Fieldを「天気予報（Weather）」とし「変更を保存」ボタンをクリック。これで<$MTWeather$>という新しいテンプレートタグが使用可能に。
・先ほどのソースを以下に変更
-----------------------ソースここから-----------------------------
天気: <$MTWeather$>
-----------------------ソースここまで-----------------------------

投稿者 tag : 13:34 | コメント (1) | トラックバック

2006年01月18日

　2月号

「カテゴリーごとにページの見た目を変えてみよう」

「Supplemental Category Tags1.5」プラグイン
http://bradchoate.com/weblog/2002/10/31/mtcatx

「MTIfCategory」プラグイン
http://www.drk7.jp/MT/archives/000829.html

●MTIfCategoryタグを利用して分岐させる

下記のソースをカテゴリーアーカイブテンプレートのヘッダー部分に記述

< style TYPE="text/css">
< MTIfCategory name="Web_Designing">
< !--
.content {
background-color: #ddffcc;
}
-->
< /MTIfCategory>

< MTIfCategory name="Movable_Type">
< !--
.content {
background-color: #ffff99;
}
-->
< /MTIfCategory>
< /style>

●MTIfCategoryプラグインを利用してメニューの見た目を変える

このような形でカテゴリー名の一覧表示をしているとする

< MTCategories show_empty="1">
[< a href="< $MTCategoryArchiveLink$> "> < $MTCategoryDescription$> < /a> ]
< /MTCategories>

このように変更

< MTCategories show_empty="1">
[< MTIfCat_eq_Arc>
< span class="pink">
< a href="< $MTCategoryArchiveLink$> "> < $MTCategoryDescription$> < /a>
< /span>
< /MTIfCat_eq_Arc>

< MTIfNotCat_eq_Arc>
< a href="< $MTCategoryArchiveLink$> "> < $MTCategoryDescription$> < /a>
< /MTIfNotCat_eq_Arc> ]
< /MTCategories>

スタイルシートの任意の部分にクラスを追加

.pink {
background-color: pink;
}

投稿者 tag : 22:56 | コメント (0) | トラックバック

2005年12月20日

　1月号

2006年1月号
「テンプレートのバックアップノウハウ」

template_backup.tmplダウンロード
使用方法は本誌を参照してください

作成したテンプレートバックアップの例

投稿者 tag : 16:27 | コメント (0) | トラックバック

2005年11月19日

　12月号

「ベーシック認証を使って会員制ブログを作る」

①htpasswdの内容を作成
まず、IDと暗号化されたパスワードを用意します。暗号化はオンラインのサービスなどを利用すると良いでしょう

②新規テンプレートとして「.htpasswd」を作成
パスワードの暗号化が終了したら、Movable Typeで「.htpasswd」を生成するテンプレートを新規で作りましょう。先ほどコピーした文字列をそのままペーストするだけの作業です。ユーザー数を増やしたいときは①の作業を繰り返し、文字列をテンプレートにそのまま追加しましょう。

③.htaccess の作成
最後に設定ファイル「.htaccess」を生成するテンプレートを作ります。ベーシック認証をやめたいときはテンプレートを削除し、FTPクライアントなどを使って「.htpasswd」と「.htaccess」ファイルも消去しましょう。、

-----------------------ソースここから-----------------------------
AuthName "Please enter your ID and password"
AuthType Basic
AuthUserFile .htpasswdファイルまでのフルパス
AuthGroupFile /dev/null
<Limit GET POST>
require valid-user
</Limit>
-----------------------ソースここまで-----------------------------

「AuthName」には、IDとパスワードを入力されるウィンドウに表示されるメッセージを入力します。また、「AuthUserFile」には「/home/user/public_html/.htpasswd」のように「.htpasswd」のフルパスを入力します。

投稿者 tag : 12:53 | コメント (0) | トラックバック

2005年10月25日

　11月号

「簡単に独自機能を追加！～プラグイン集～」

●Movable Typeプラグイン配布サイト
Six Apart PLUGIN DIRECTORY
http://www.sixapart.com/pronet/plugins/

Plugins for Movable Type
http://www.staggernation.com/mtplugins/

Brandon Fuller
http://brandon.fuller.name/archives/hacks/

gemal.dk
http://gemal.dk/mt/

a42
http://www.a42.net/

●インターフェイス系
MTPaginate
http://www.sixapart.com/pronet/plugins/plugin/paginate.html

Topicon
http://www.a42.net/topicon/

Favicon
http://gemal.dk/mt/

●写真系
MT-PhotoGallery
http://brandon.fuller.name/archives/hacks/mtphotogallery/

MTRecentImages
http://www.sixapart.com/pronet/plugins/plugin/recentimages.html

●チェック、検査系
MT-Blacklist
http://www.jayallen.org/comment_spam/

CheckLinks
http://www.staggernation.com/mtplugins/CheckLinks/

MostActiveEntries
http://alpha-geek.com/2005/01/20/movable_type_plugin_mostactiveentries_v01

●Webアクセサリー
メロメロパーク
http://meropar.jp/Spring.do

chobi
http://bbs.chobies.jp/

ラクガキ　ボード
http://rakugaki.kayac.com/

投稿者 tag : 04:44 | コメント (0) | トラックバック

2005年09月27日

　10月号

「Movable Typeでポッドキャスティング」

●プラグインをダウンロードしてインストール
「MT-Enclosures」配布サイトからプラグインをダウンロードします

●Podcastカテゴリーを作る
従来からあるブログを利用する場合はポッドキャスティング専用のカテゴリーを作っておいた方がいいでしょう。RSSもこのカテゴリーのエントリーだけから生成することにします。

●Podcastテンプレートを作成
ポッドキャスティングはRSS2.0が使われていますので、「RSS 2.0」テンプレートを改造して、新たに「Podcast」テンプレートを作成します

< MTEntries lastn="15">
< item>
< title>< $MTEntryTitle remove_html="1" encode_xml="1"$>< /title>
< description>< $MTEntryBody encode_xml="1"$>< /description>
< link>< $MTEntryPermalink encode_xml="1"$>< /link>
< guid>< $MTEntryPermalink encode_xml="1"$>< /guid>
< category>< $MTEntryCategory remove_html="1" encode_xml="1"$>< /category>
< pubDate>< $MTEntryDate format_name="rfc822"$>< /pubDate>
< /item>
< /MTEntries>

↓　変更後

< MTEntries lastn="15" category="podcast">
< item>
< title>< $MTEntryTitle remove_html="1" encode_xml="1"$>< /title>
< description>< $MTEntryBody encode_xml="1"$>< /description>
< link>< $MTEntryPermalink encode_xml="1"$>< /link>
< guid>< $MTEntryPermalink encode_xml="1"$>< /guid>
< category>< $MTEntryCategory remove_html="1" encode_xml="1"$>< /category>
< pubDate>< $MTEntryDate format_name="rfc822"$>< /pubDate>
< $MTEntryEnclosures mime_include="audio" remote="1"$>
< /item>
< /MTEntries>

●RSSのリンクを記述する
メインテンプレートの<HEAD>要素に以下を挿入

サイドバーには以下を追加

<div class="link-note">
<a href="<$MTBlogURL encode_html="1">podcast.xml" title="Podcast RSS">Podcast RSS</a>
</div&ｇt;

投稿者 tag : 04:09 | コメント (0) | トラックバック

2005年08月18日

　9月号

「写真のサムネイルを表示できるプラグイン」

プラグインはここからダウンロードして下さい

MTGetsrcURL.zip

●プラグインをインストール

●サイドバーにサムネールを表示させよう

テンプレート画面からメインページのテンプレートを開き、任意の場所（ここではカレンダーの下部）に下記のソースを書き加える

-----------------------ソースここから-----------------------------
< h2>最近の画像< /h2>
< ul class="entry-image">< MTEntries lastn="5" category="Picture">
< li>< a href="< $MTEntryPermalink$>" title="< $MTEntryTitle$>">< img src="< $MTEntryBody getsrcurl="1"$>" alt="< $MTEntryTitle$> image" width="100" height="75" />< /a>< /li>
< /MTEntries>< /ul>
-----------------------ソースここまで-----------------------------

●サムネールのみを利用したインデックスページ

アーカイブページのインデックス・テンプレートのソースをコピーし、「新しいインデックス・テンプレートを作る」をクリック
テンプレートの名前を「画像つきエントリーアーカイブ」、出力ファイル名を「picture.html」とし、コピーしておいたソースをペーストする。

-----------------------ソースここから-----------------------------
< h2>アーカイブ< /h2>
< p>
< MTArchiveList>
< a href="< $MTArchiveLink$>">< $MTArchiveTitle$>< /a>< br />
< /MTArchiveList>
< /p>
-----------------------ソースここまで-----------------------------

ソース内の上記の部分を

-----------------------ソースここから-----------------------------
< h2>画像つきエントリーアーカイブ< /h2>
< ul class="image-list">< MTArchiveList>
< MTEntries category="Picture">
< li>< a href="< $MTEntryPermalink$>" title="< $MTEntryTitle$>">< img src="< $MTEntryBody getsrcurl="1"$>" alt="< $MTEntryTitle$> image" height="100" />< /a>< /li>
< /MTEntries>
< /MTArchiveList>< /ul>
-----------------------ソースここまで-----------------------------

このように修正し、「保存」ぼたんをクリック

スタイルシートを開き下記のソースを追加する

-----------------------ソースここから-----------------------------
a img {
text-decoration: none;
border: none;
}

ul.entry-image li {
text-align: center;
}

ul.image-list li {
display: inline;
}

ul.image-list li img {
margin: 0 5px 10px 5px;
}
-----------------------ソースここまで-----------------------------

表示例

投稿者 tag : 03:37 | コメント (3) | トラックバック

2005年07月28日

　8月号

theme of this month
「サイトナビゲーションを工夫する」

　ブログをカスタマイズする際、デザインに凝るのはもちろんだが、サイトナビゲーションの向上についても考慮していきたい。今回は読者がページ内の目的の場所にスムーズに移動したり、読みたい記事を簡単に探すことができるような機能を考えてみることにする。

●個別エントリーアーカイブを選び、ヘッダーの下に以下のソースを追加します。

<ul class="inline navigation">
<li> <a href="<$MTBlogURL$> " title="トップページ"> Top</a> <img src="http://www.○○○○.com/arrow.jpg" width="12" height ="12" alt="に含まれる" />
<ul class="inline">
<li> <MTParentCategories> <a href="<$MTCategoryArchiveLink$> " title="カテゴリー"<$MTCategoryLabel$> ""> <$MTCategoryLabel$> </a> </MTParentCategories> <img src="http://www.○○○○.com/arrow.jpg" width="12" height ="12" alt="に含まれる" />
<ul class="inline">
<li> <a href="<$MTEntryPermalink$> " title="<$MTEntryTitle$> "> <$MTEntryTitle$> </a> </li>
</ul>
</li>
</ul>
</li>
</ul>

●スタイルシートを選び、以下のソースを追加してください。

ul.inline li ul.inline {
display: inline;
padding: 0;
margin: 0
}

ul.inline li {
display: inline;
}

ul.navigation {
border: 1px solid black;
background-color: white;
margin: 1em 0;
padding: 1em 0 1em 1em;
}

ul.navigation li a {
color: black;
text-decoration: none;
}

ul.navigation li a:hover {
color: black;
text-decoration: underline;
}

●最後にアーカイブテンプレートにもパンくずリストを設置しましょう。管理者ページのテンプレート画面で、カテゴリーアーカイブを選び、ヘッダーの下に以下のソースを追加します。

●エントリーにタグを付与する

個別エントリーアーカイブを開き、任意の場所にソースを挿入します

<p> Tags: <MTEntryTags> <a href="<$MTTagArchiveLink$> " title="<$MTTagName$> "> <$MTTagName$> </a> </MTEntryTags> </p>

投稿者 tag : 18:53 | コメント (0) | トラックバック

2005年06月21日

　7月号

ヘッダにジャンプメニューを設置しよう

●ジャンプメニューを設置する

○機能を追加したヘッダーモジュール

<script type="text/javascript"> function check(fObj) { jpURL = fObj.options[fObj.selectedIndex].value; location.href = jpURL; } </script>
<div id="header">
<h1> <a href="<$MTBlogURL$> " accesskey="1"> <$MTBlogName encode_html="1"$> </a> </h1>
<h2> <$MTBlogDescription$> </h2>
<form action="<$MTBlogURL$> ">
<select onChange="check(this)">
<option value=""> Select</option>
<option value="<$MTBlogURL$> "> Top</option>
<optgroup label="Category">
<MTCategories> <option
value="<$MTCategoryArchiveLink$> "> <$MTCategoryLabel$> </option> </MTCategories> 　（注1）
</optgroup>
<optgroup label="Monthly">
<MTArchiveList archive_type="Monthly"> <option
value="<$MTArchiveLink$> "> <$MTArchiveTitle$> </option> </MTArchiveList>
</optgroup>
</select>
</form>
</div>

○変更したCSS

#header { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-color: #999999; text-align: left; padding: 15px 15px 0 0; border-bottom: 1px solid #FFFFFF; }
#header form {
text-align: right;
}

●CSSでヘッダのリンクにマウスオーバーアクションを追加する

#header {
font-family: Verdana, Arial, sans-serif;
background-color: black;
color: #FFFFFF;
text-align: left;
padding: 15px 15px 0 0;
border-bottom: 1px solid #FFFFFF;
}

#header h1 a{
text-decoration: none;
font-size: 2px;
display: block;
width: 420px;
height: 50px;
text-indent: -700em;
background: transparent url(h1-image.jpg) no-repeat top left;
}

#header h1 a:hover{
background-position: left bottom;
}

#header h2 {
padding: 5px 0 0 15px;
font-size: small;
}

投稿者 tag : 07:47 | コメント (0) | トラックバック

　6月号

モジュールでサイトの共通パーツを一元管理しよう

●テンプレート・モジュール

<div id="header"> <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$></h2> </div>

スタイル

#header { font-family: Georgia, 'Times New Roman', serif; color: #000000; background-color: #B22222; text-align: left; padding: 15px; border-bottom: 1px solid #FFFFFF; height: 39px; }
#header a {
color: #FFFFFF;
text-decoration: none;
}

#header h1 {
font-size: xx-large;
}

#header h2 {
font-size: small;
}

テンプレートモジュール2

<div id="header"> <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$> </h2> Web Designingのサイトは<a href="http://book.mycom.co.jp/wd/" target="_new">こちら</a> </div>

●テキストファイルをインクルードする

新しいインデックステンプレート（出力ファイル名をrecent5.jsとする）

document.write('<ul><MTEntries lastn="5"><li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li></MTEntries></ul>');

サイドバーに記入

<h2>最新5件のブログ記事</h2>
<script type="text/javascript" src="http://ブログのドメイン/recent5.js"></script>

投稿者 tag : 07:40 | コメント (0) | トラックバック

2005年05月16日

　5月号

サイトの共通パーツはモジュールを使って一元管理しよう

ここではソースだけを掲載します
詳細は本誌を見てくださいね！

追加するCSSソース

#header { font-family: Georgia, 'Times New Roman', serif; color: #000000; background-color: #B22222; text-align: left; padding: 15px; border-bottom: 1px solid #FFFFFF; height: 39px; }
#header a {
color: #FFFFFF;
text-decoration: none;
}

#header h1 {
font-size: xx-large;
}

#header h2 {
font-size: small;
}

ヘッダモジュールのソース

< div id="header"> < h1> < a href="< $MTBlogURL$> " accesskey="1"> < $MTBlogName encode_html="1"$> < /a> < /h1> < h2> < $MTBlogDescription$> < /h2> < /div>

外部テキストを挿入するときのソース

< textarea id="test-text" name="test-text" rows="10" cols="30">
< $MTInclude file="test.txt"$>
< /textarea>

<
>

投稿者 tag : 05:35 | コメント (0) | トラックバック

2005年03月20日

　4月号

カテゴリーごとのデザインを変える

ここではソースだけを掲載します
詳細は本誌を見てくださいね！

●カテゴリーごとのデザインを変える

カテゴリーテンプレート

スタイルシート

body {
margin: 0px 0px 20px 0px;
background-color: #8FABBE;
text-align: center;
}

/* Musicカテゴリーは背景をブルーに */
body.music {
background-color: #blue;
}

/* Photoカテゴリーは背景をピンクに */
body.photo {
background-color: #pink;
}

#banner {
background: #999 url(banner.png) no-repeat top left;
color: #000;
height: 135px; /*画像の高さ*/
padding: 0;
margin: 0;
text-align: left;
}

body.music #banner {
background: #999 url(music.png) no-repeat top left;
}

body.photo #banner {
background: #999 url(photo.png) no-repeat top left;
}

●条件分岐タグ

<p class="posted">投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <MTIfNonZero tag="MTEntryCommentCount"><a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title=""<$MTEntryTitle$>" にコメントする・見る">コメント (<$MTEntryCommentCount$>)</a>
<MTElse><a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title=""<$MTEntryTitle$>" にコメントする">コメントする</a></MTElse>
</MTIfNonZero>
</MTEntryIfAllowComments>

<MTEntryIfAllowPings>
| <MTIfNonZero tag="MTEntryTrackbackCount"><a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title=""<$MTEntryTitle$>" にトラックバックする・見る">トラックバック (<$MTEntryTrackbackCount$>)</a>
<MTElse><a href="<$M<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title=""<$MTEntryTitle$>" にトラックバックする">トラックバックする</a></MTElse>
</MTIfNonZero>
</MTEntryIfAllowPings>
| Category:<MTParentCategories glue=" > "><a href="<$MTCategoryArchiveLink$>" title="カテゴリー"<$MTCategoryLabel$>""><$MTCategoryLabel$></a></MTParentCategories>
</p>

投稿者 tag : 10:11 | コメント (0) | トラックバック

2005年02月18日

　3月号

カテゴリー名を日本語に

ここではソースだけを掲載します
詳細は本誌を見てくださいね！

サイドバー部分

< MTSubCategories>
< MTSubCatIsFirst> < ul> < /MTSubCatIsFirst>
< MTIfNonZero tag="MTCategoryCount">
< li> < a href="< $MTCategoryArchiveLink$> "　title="< $MTCategoryLabel$> "> < $MTCategoryDescription$> < /a>
< MTElse>
< li> < $MTCategoryDescription$>
< /MTElse>
< /MTIfNonZero>
< MTSubCatsRecurse max_depth="3">
< /li>
< MTSubCatIsLast> < /ul> < /MTSubCatIsLast>
< /MTSubCategories>

エントリー下部

< p class="posted"> 投稿者 < $MTEntryAuthor$> : < a href="< $MTEntryPermalink valid_html="1"$> "> < $MTEntryDate format="%X"$> < /a>
< MTEntryIfAllowComments>
| < a href="< $MTEntryPermalink archive_type="Individual"$> #comments"> コメント (< $MTEntryCommentCount$> )< /a>
< /MTEntryIfAllowComments>
< MTEntryIfAllowPings>
| < a href="< $MTEntryPermalink archive_type="Individual"$> #trackbacks"> トラックバック (< $MTEntryTrackbackCount$> )< /a>
< /MTEntryIfAllowPings>
| Category:< MTParentCategories glue=" > "> < a href="< $MTCategoryArchiveLink$> " title="カテゴリー"< $MTCategoryLabel$> ""> < $MTCategoryDescription$> < /a> < /MTParentCategories>
< /p>

リンクテキストを装飾

a {
text-decoration: none; /*リンクの部分は下線*/
}

a:link {
color: #8FABBE; /*未訪問リンクのテキストの色*/
}

a:visited {
color: #6600FF; /*訪問済みリンクのテキストの色*/
}

a:active {
color: #8FABBE; /*リンクをクリックした時のテキストの色*/
}

a:hover {
color: #006699; /*リンクにマウスが乗った場合のテキストの色*/
background-color: #CCCCCC; /*リンクのテキストに下線を引く*/
　text-decoration: underline; /*リンクの部分は下線*/
}

投稿者 tag : 05:45 | コメント (1) | トラックバック

2005年01月18日

　2月号

「追記を折りたたみにする」「ヘッダを画像にする」

詳しい解説は本誌の記事を見てください

Web Designing

●追記を折りたたみにする

　最初に追記の部分の表示/非表示を指定するスタイルを2つ、テンプレートのスタイルシートの任意の場所に記述します。

--------------ソースここから--------------
.show { display: block; }
.hidden { display: none; }
--------------ソースここまで--------------

　次にメインページのテンプレートの<head>～</head>内にJavaScriptの関数（function）を記述します。

--------------ソースここから--------------
<script type="text/javascript">

// thanks for (o)!
// Ogawa::Memoranda, http://as-is.net/blog/

--------------ソースここまで--------------

　最後に「続きを読む」のリンクをクリックすると、先ほど記述した関数を起動するようにします。同じくメインページのテンプレートの<MTEntryIfExtended>～</MTEntryIfExtended>の部分を以下のように修整します　

--------------ソースここから--------------
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
--------------ソースここまで--------------

↓

--------------ソースここから--------------
<MTEntryIfExtended>
<p class="extended"><a href="javascript:void(0)" onclick="toggleWithClass(this,'hidden','none')" onkeypress="toggleWithClass(this,'hidden','none')" title="Expand">続きを読む</a></p>
<div id="<$MTEntryID$>-more" class="hidden"><$MTEntryMore$></div>
</MTEntryIfExtended>
--------------ソースここまで--------------

●ヘッダを画像にする

○タイトルを画像にする場合
あらかじめ「banner.png」と「h1-title.png」を用意しておく

--------------ソースここから--------------
#banner {
background: #999 url(banner.png) no-repeat top left;　　　　
color: #000;
height: 135px; /*画像の高さ*/　　　
padding: 0;
margin: 0;
text-align: left;
}

#banner h1 a {
background: transparent url(h1-title.png) no-repeat top left;　　
color: #000;
display: block;
padding: 15px 0 0 15px;
margin: 0;
font-size: 2px;
width: 310px; /*画像の幅*/　　　
height: 62px; /*画像の高さ*/　　　
text-decoration: none;
text-indent: -700em;　　　　　　
}

#banner h2 {
font-size: small;
padding: 15px 0 0 15px;
margin: 0;
}
--------------ソースここまで--------------

○タイトルを画像にしたくない場合

--------------ソースここから--------------
#banner {
background: #999 url(banner.png) no-repeat top left;
height: 135px; /*画像の高さ*/
color: #000;
font-family: Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
text-align: left;
}

#banner h1 {
font-size: xx-large;
padding: 15px 0 0 15px;
margin: 0;
}

#banner a {
color: #000;
text-decoration: none;
}

#banner h2 {
font-size: small;
padding: 15px 0 0 15px;
margin: 0;
}
--------------ソースここまで--------------

投稿者 tag : 22:39 | コメント (1) | トラックバック

2005年01月03日

　1月号

「プラグインを利用してみる」

今回はhttp://mt-plugins.org/にある「PingedEntry」を利用します

●プラグインを使ってみよう

<h2>最新のトラックバック3</h2>
<ul>
<MTPings lastn="5">
<li><MTPingedEntry><a href="<$MTPingedEntryLink$>"
title="<$MTPingedEntryTitle$>"><$MTPingedEntryTitle$></a></MTPingedEntry>
<ul>
<li>└<a href="<$MTPingURL$>"
title=""<$MTPingBlogName$>"さんからのトラックバック"><$MTPingBlogName$></
a> <$MTPingDate format="%x"></li>
</ul>
</li>
</MTPings>
</ul>

●最新の記事を日付ごとにまとめて表示する

<h2>最近のエントリー2</h2>

<li>
<a href="<$MTEntryPermalink$>"
title="<$MTEntryTitle$>"><$MTEntryTitle$></a>
</li>

</MTEntries>
</ul>

投稿者 tag : 13:20 | コメント (1) | トラックバック