この書籍は本当にオススメです！
自分もいろいろ本屋で探してみましたが、プラグインやカスタマイズ方法が
詳しく記載されていてすごく参考になりました。
中でも紹介されているバックアップ・復元プラグインがすごく便利なんですよ！
多分ネットでアップされているバックアップ用プラグインの中では
高レベルのプラグインだと自分は思います。
また、小粋空間やDr.blogのテンプレートも紹介されていて、
カスタマイズ方法も載っています。
これからMovableTypeでブログを作成しようと考えている方は
是非買ってみてください。
ほんっっとーにとても役に立ちますから！！！
小粋空間の横型カレンダーに
「休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type」
が追加されました。しかし、そこで問題が発生！！
なんと、このカレンダー、phpに対応していないのです！
そこで今回はこのカレンダーをphpの環境下でも設置できるように
カスタマイズしてみました。
完成するとスクリーンショットのような表示になります。
（画像をクリックすると全体が表示されます）
カスタマイズ・設置方法は"続きを読む"からどうぞ。
カテゴリーにマウスオーバーしたとき、
カテゴリーの説明を表示させる方法を紹介します。
各テンプレートの「カテゴリー」のタグに
以下の青文字のタグを追加します。
<MTCategories>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
あとは「カテゴリー」から、表示させたいカテゴリーを選択して
「カテゴリーの説明」にマウスオーバー時に表示される
説明を記述すればＯＫです。
設定はこれだけです。
簡単ですが、ちょっとした小技に覚えておくと
いいかもしれませんねw
小粋空間のテンプレートを使用している場合、
FirefoxなどのMozilla系ブラウザとIE6ブラウザで見え方が違ってきます。
その中でも、CSSで画像に枠を付けている場合、枠がIE6では
表示されないという問題があります。
これは、小粋空間のテンプレートの最初の行で、XML宣言を
しているのが原因らしいです。
実はIE6にはDOCTYPE宣言を1行目（先頭）に書かないと、
必ず「後方互換モード」として解釈されてしまうというバグが存在します。
つまり1行目にXML宣言が記述されているとこのバグが発生します。
IE6の後方互換モードではimg要素のpaddingプロパティが有効にならないため
（標準準拠モードでは問題なく表示されます。）CSSで画像に枠をつけると
IE6では表示されないのです。
この問題を回避するには、テンプレートの最初の行に宣言されている
XML宣言を削除する必要があります。（※以下参照）
<?xml version="1.0" encoding="utf-8"?>
IEでプレビューしたときに画像に枠が
ついてないようでしたら一度試してみてください。
詳しくは「小粋空間」の記事、
"標準準拠モードと後方互換モード・DOCTYPE宣言について"
を参照してください。
上のような、イメージ画像に枠が付いている状態にする
方法を紹介します。
画像に枠をつけるには、<head>～</head>に
以下のソースを追加します。
<style type="text/css">
<!--
img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
padding: 5px;
}
-->
</style>
この方法を使えば、画像の横・縦幅が小さくても大きくても
簡単に枠をつけることができます。
ただし、この場合imgタグ全てにこのCSSが適用されてしまいますので
意図的に枠を消したいときは、以下のようにimgタグに「style="border:none;"」を
適宜追加して下さい。
（例） <img src="../***.jpg" alt="" style="border:none;">
「小粋空間」のMT3.2用テンプレートを利用している方は
"続きを読む"をクリックして下さい。
MTCategoriesタグやMTSubCategoriesタグで
カテゴリーの一覧を出力すると、カテゴリー名が
文字コード順に出力されます。
例えば「パソコン」「趣味」「その他」と
３つのカテゴリーを作ったとすると、「その他」が
一番最後に表示されるほうが都合がいいでしょう。
ところが、文字コード順で並べ替えると「その他」が
一番前に来てしまいます。これでは見栄えも悪いですね；
そこでプラグインを使って、思い通りにカテゴリーの順番を
並べ替える方法を紹介したいと思います。
誰でも情報を更新できるというWiki（ウィキ）の特性を活かし、
livedoor Blogのデザインをカスタマイズするノウハウが
満載のサイト「livedoor BlogのデザインをカスタマイズするWiki」
があります。
livedoorブログに関する質問・カスタマイズ方法など
基本的なことがここに書いてありますので、初心者のかたに
オススメしたいサイトです。是非アクセスしてみて下さい。
とても参考になりますよ。
過去ログを抽出する手立てがカテゴリ、あるいは
月別アーカイブからのアクセスしかないので、
画像だけでもピックアップして勝手に表示してくれる
プラグインがあると便利だなーと思って、いろいろと
探してみたら発見しました。
bird.dip.jp さんや我楽さんのブログの記事で見つけました。
このプラグイン、どういう動作をするかというと、
タグを抽出して表示してくれたりするもので、つまりimg タグを
キーにして画像を抽出したり、a href タグをキーにして
リンクリストを抽出したりなんてことができます。
それで、これを使って img タグをキーに、過去ログの画像を
サムネイル表示させてエントリーリンクをあてがってみる方法を
試してみました。（ほぼ100%パクリです＿|￣|○）
サムネイル画像のサイズも任意に設定できます。
以下、やり方を転記しておきます。
◆ソース詳細
<MTEntries category="08music" lastn="8" offset="1">
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="8" offset="1">
<a href="<$MTEntryLink$>">
<img width="30" height="30" src="<$MTCollectedAttr attr="src"$>" style="margin:1px;border:none" />
</a>
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTEntries>
MTで投稿した各記事を見て、ちょっとした修正や
追加をしたいときがあると思います。
いちいち管理画面のエントリー表示から
編集画面に行って編集するのもなんだかめんどくさいですよね；
そこで探してみると非常に便利な編集ボタンを発見！
このボタンをクリックすることですぐ編集画面に
ジャンプできるというスグレモノです♪
その方法は以下になります。
編集ボタンのリンクを張りたい箇所に、
<a href="<$MTCGIPath$>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID $>&blog_id=<$MTBlogID$>">編集</a>
と追加するだけです。意外と簡単ですね♪
画面上のマウスカーソルを変更する方法です。
ＣＳＳに以下のソースを貼り付ければ簡単に変更できます。
◆通常のカーソル変更
<style type="text/css">
<!--
body{
cursor:カーソルのプロパティ;
}
-->
</style>
＜カーソルのプロパティ＞
auto crosshair default hand help move text wait
n-resize ne-resize nw-resize s-resize se-resize sw-resize
e-resize w-resize all-scroll col-resize no-drop not-allowed
pointer progress row-resize vertical-text
◆カーソルに画像を使う方法
<style type="text/css">
<!--
body{
cursor:url("カーソルのアドレス.cur");
}
-->
</style>
カーソル画像はあらかじめ用意しておく必要があります。
カーソルの作成は、http://www.vector.co.jpにフリーのソフトが
あると思います。
MovableTypeの機能については別段不満はないのですが、
ただ１つ投稿時に日時を自動で変更してくれないと言うのが難点。
下書きに保存した記事や書くのに時間がかかってしまった記事を
公開する時は毎回投稿日時を手動で変更していました。
BlogWriteやubicastBlogger等のブログクライアントツールを
使用すればこの問題は回避できるのですが、
管理画面から直接投稿する際はやはり苦労していました。
そこで何かないか検索したりしていろいろ探してみると、
便利なプラグインを見付けました♪
導入も至って簡単でプラグインディレクトリに
配布されているプラグインをインストールするのみ。
ただしBIGPAPIというプラグインも必要になってくるので
未導入の方は別途インストールする必要があります。
これで投稿時の手間を１つ減らすことができますよ！
雑記ブログ「monochrome」でも使用している
Flash版横型カレンダーを紹介いたします。
デザインは四角・丸型・にくきゅうとカワイイ＆スタイリッシュ♪
（犬の足跡ですが、猫のにくきゅうにも使えます）
カレンダー自体がデザインの一部になって、すっきりと見やすくなります。
このFlashカレンダーはKinarie&Mayさんのブログで
flash素材として配布されています。MT専用のflash版横型カレンダーです。
素材のDL場所や、詳しい設置の仕方はこちらからどうぞ。
とてもわかりやすく解説してあるので、誰でも簡単に設置できますよ♪
指定した時間になるとリンクを切り替える方法です。
切り替えたい箇所に以下のソースを貼り付ければＯＫです。
◆ソース詳細
<SCRIPT type="text/javascript">
<!--
m_url = '<a href="index1.html">リンク１</a>';
n_url = '<a href="index2.html">リンク２</a>';m_time = 1;
n_time = 12;myTime = new Date();
time = myTime.getHours();
if(time >= m_time && time < n_time)document.write(m_url);
else document.write(n_url);
-->
</SCRIPT>
上記ソースでは１時にindex1.htmlへのリンク文字が、１２時に
index2.htmlへのリンク文字が表示されるようになっています。
m_url = '*****';とn_url = '*****';の*****部分をimgタグに変えると
指定時間になると画像が表示されるようにできます。
いろいろカスタマイズしてみてください。
画像をランダムに表示する方法を紹介します。
ランダムに表示したい箇所に以下のタグを追加すれば
画像をランダムに表示できます。
ただし、JAVAスクリプトをＯＮにしていないと表示
されませんのでご注意下さい。
◆ランダムに表示するソース
<SCRIPT type="text/javascript">
<!--
var imgMax = 6;
var imgRandom = Math.floor(Math.random() * imgMax);
if(imgRandom == 0) document.write('<img src="img01.jpg">');
else if(imgRandom == 1) document.write('<img src="img02.jpg">');
else if(imgRandom == 2) document.write('<img src="img03.jpg">');
else if(imgRandom == 3) document.write('<img src="img04.jpg">');
else if(imgRandom == 4) document.write('<img src="img05.jpg">');
else if(imgRandom == 5) document.write('<img src="img06.jpg">');
-->
</SCRIPT>
var imgMax = *; の数値はランダム表示させる数です。
document.write('<img src="*****.jpg">'); のimg srcに画像のＵＲＬを
記述してください。
ランダム数を増やす場合はvar imgMax = *; の値の分だけ
else if(imgRandom == *) document.write('<img src="*****.jpg">');を
増やしてください。
文字や画像のリンクにマウスをポイントすると
表示が斜めにずれるという方法を紹介します。
スタイルシートで該当するリンクタグ、a:hoverの中に
position:relative; top:1px; left:1px;
を入れればOKです。
上記ソースでは、右下になってますが、左下にずらす場合は
position:relative; top:1px; right:1px; を入れればＯＫです。
また、1pxの数値を大きくすると、ずらすときの距離
（ずれの大きさ）を多くすることが出来ます。
これを利用して、マウスオン時にリンク文字を
右に移動させたり、左に移動させたりできます。
例）position:relative; left:10px;（右に10px移動させる）
Tableタグやimgタグなどの枠線（border）を
点線や破線に変更する方法を紹介します。
◆borderプロパティ
border: width style color;（全ての枠線）
border-top: width style color;（上の枠線）
border-right: width style color;（右の枠線）
border-bottom: width style color;（下の枠線）
border-left: width style color;（左の枠線）
「border:～」は全ての枠線を一括指定、
「border-xxx:～」は上下左右の枠線を個別指定します。
一括指定か個別指定のいずれかを使用します。
斜体の部分に枠線の詳細を指定します。
それぞれの意味は
width：枠線の幅
style：枠線のスタイル
color：枠線の色
となっています。
枠線のスタイルは下記の通りになります。
それぞれどのように表示されるかはお試しになって下さい。
none 非表示（デフォルト）
hidden 非表示
solid 1本線
double 2本線
groove 窪んだ線
rigde 隆起した線
inset 全体が窪んだように表示
outset 全体が隆起したように表示
dashed 破線
dotted 点線
なお指定内容によってはブラウザによって表示が
異なる場合がありますのでご注意ください。
画像を透過するには、画像ファイルそのものを
透過GIFや透過情報を含んだPNGファイルを使うのが
一般的ですが、ここではfilterタグを使って
画像を透過する方法を紹介します。
透過したいタグに
style="filter: Alpha(opacity=80);" を追加するだけです。
opacityの数値は透過する割合です。
数値が小さいほど透明になっていきます。
（"0"で透明、"100"で不透明です。）
ＣＳＳに追加する場合は filter: Alpha(opacity=80); を
追加すればＯＫです。
背景画像を固定する場合は、CSSの body 要素に
背景画像を指定し、背景画像の指定に対して下記のように
プロパティ background-attachment プロパティを追加します。
このプロパティの値が fixed の場合、画像が固定表示されます。
◆背景画像固定ソース
<style type="text/css">
<!--
body {
background-image: url("画像のＵＲＬ");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
--></style>
画像の配置位置は background-position プロパティで指定します。
上のリストでは「右下」を指定していますが、プロパティの値は
水平方向：left（左）／center（中央）／right（右）
垂直方向：top（上）／center（中央）／bottom（下）
のいずれかお好きなものを指定してください
（"%"指定等、他の設定方法についてはここでは割愛します）。
また上のサンプルでは background-repeat プロパティで
画像を繰り返し表示しない設定になっています。(no-repeat)
水平方向に繰り返し表示する場合は background-repeat プロパティに
repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を
指定してください。
外部ＣＳＳファイル（.css）を使う場合の記述方法です。
<head>～</head>までに以下のソースを追加すれば、
外部ＣＳＳファイルのスタイルシートを使うことができます。
◆ソース記述方法
<link href="style.css（CSSファイルまでのURL）" rel="stylesheet" type="text/css">
以下をCSSに追加すれば、スクロールバーの色を
変更できます。
◆スクロールバー色変更ソース
＜スクロールバープロパティ＞
scrollbar-3dlight-color ：スクロールバーの左端と上端の色
scrollbar-arrow-color ：スクロールバーの矢印の色
scrollbar-base-color ：スクロールバーのベースの色
scrollbar-darkshadow-color：スクロールバーの右端と下端の色
scrollbar-face-color ：スクロールバーの表面の色
scrollbar-highlight-color ：スクロールバーのハイライトの色
scrollbar-shadow-color ：スクロールバーの影の色
scrollbar-track-color ：スクロールバーの通路の色
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
秋月 錬
