日常とECR33とWEB関連なんでも帳

レイアウト変更につづき、デザインもちょっと変更してみました。
いろいろやったのですが、思い通りいかず途中で断念。

うーん、スタイルシートの理解が浅くてうまくいかない。。。
TABLE組めば思うようにできるんですが、それじゃあ意味ないんですよね・・・

もうちょっと勉強してからやってみましょう。。。

iNTERNET magazine 2004年3月号に載っていた「はじめてのCSSでblog自分流デザイン Movable Type編」を参考にちょっとだけレイアウトを変えてみました。

ほんとはデザイン全体を変えようと思ったのですが、そこまでのスキルはまだないようです・・・
徐々にスキルアップを図りたいと思います。

iNTERNET magazine 2004年3月号
「はじめてのCSSでblog自分流デザイン Movable Type編」

カテゴリ別のアイコンを作って、それを表示するようにしてみました。アイコン自作ですが、あいかわらずのセンスのなさにがっくり・・・

参考にさせてもらったのは「blogDROID」さんの下記のエントリー。
blogDROID: エントリーのタイトル前にカテゴリ別画像を表示する

最初は、プラグインの「Topicon」を使ってやろうと思ったのですが、うまくいかないようだったので・・・

この変更にあわせて、カテゴリ一覧の表示をMTCategoryDescriptionに戻しました。
画像のファイル名にカテゴリ名を使用しなければいけなかったのがその理由です。

関連記事
日常とECR33とWEB関連なんでも帳: カテゴリ名を日本語に！

Movable TypeのプラグインがたくさんあるのがMT Plugin Directoryです。

まだどれを使っていいのかわかりませんが、少しずつ試してみたいと思います。まずは英語を理解しないと・・・

やり方もわからず、危険な状態でしたが、思い切ってバージョンアップしてみました。

バージョンアップの参考にしたのは下記です。
Movable Type 日本語化手順
参考というか、日本語パッチを提供されている「ひらのさん」のところです。

まず、本家のmovabletype.orgから「Upgrade Version」をダウンロードします。

次に、上記の「ひらのさん」のところから日本語パッチをダウンロード。
いつも使っているWindowsのノートパソコンでパッチをあてるので、Windows版をダウンロード。

で、日本語版の中にある「MT.euc.EXE」を本家からダウンロードして解凍した「MT-2.661-upgrade」フォルダ内にコピーします。

で、「MT.euc.EXE」を実行します。これで日本語化OK。

で、その後どうしたらいいのかわからないのですが・・・
とりあえず、ファイルをアップロード。そして「mt-upgrade.cgi」を実行。

一応「Version 2.661 Copyright 2001-2003 Six Apart. All Rights Reserved. 」となったのでバージョンアップできたようです。

でも、いろいろと変更したファイル「CMS.pm」「bm_entry.tmpl」「edit_entry.tmpl」などがもとに戻ってしまったので、バックアップから戻しておきました。

でも、これでほんとにいいのかな？

とりあえず動いているからよしとしましょう（苦笑）

ブログの軽量化関係でもあったphp化。
「Acidcorporation.com」さんにいい記事があったのでアドレスを忘れないようにメモ。
今度試してみたいと思います。

Acidcorporation.com : 全アーカイブ、PHP化のススメ

先日行った作業で一部追加と修正を行いました。
・リンク（aタグ）に「target="_blank"」の指定を追加
・「MT It!」でエントリーと追加するときにも同じボタンがでるように追加

先日の作業
日常とECR33とWEB関連なんでも帳: MTの編集画面にDreamweaver風のボタンを

・リンク（aタグ）に「target="_blank"」の指定を追加の修正個所は「edit_entry.tmpl」と「bm_entry.tmpl」の二つのファイルです。

（修正前）
function insertLink () {
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
var my_link = prompt('<MT_TRANS phrase="Enter URL:">', 'http://');
if (my_link != null)
document.selection.createRange().text = '<a href="' + my_link + '">' + str + '</a>';
}

（修正後）
function insertLink () {
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
var my_link = prompt('<MT_TRANS phrase="Enter URL:">', 'http://');
if (my_link != null)
document.selection.createRange().text = '<a href="' + my_link + '"
target="_blank">' + str + '</a>';
}

・「MT It!」でエントリーと追加するときにも同じボタンがでるように追加したのは「bm_entry.tmpl」の二つのファイルです。
（修正内容）
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0">');
document.write('<tr>');
document.write('<td width="27"><a href="javascript:formatStr(\'strong\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/strong-button.gif" alt="より強調"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'em\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/em-button.gif" alt="強調"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h4\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/h4-button.gif" alt="見出し
1" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h5\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/h5-button.gif" alt="見出し
2" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h6\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/h6-button.gif" alt="見出し
3" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'blockquote\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif" alt="ブロック引用"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'pre\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/pre-button.gif" alt="プリフォーマットテキスト"
width="27" height="27" border="0"></a></td>');
document.write('</tr><tr>');
document.write('<td width="27"><a href="javascript:formatStr(\'ul\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/ul-button.gif" alt="リスト"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'ol\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/ol-button.gif" alt="番号リスト"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'li\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/li-button.gif" alt="リスト項目"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dl\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/dl-button.gif" alt="定義リスト"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dt\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/dt-button.gif" alt="定義する用語"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dd\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/dd-button.gif" alt="定義の詳細"
width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:insertLink()"><img
src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="ハイパーリンク"
width="27" height="27" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write(' ');
}
</script>

MYBLOG JAPANに登録してみました。

といっても登録依頼しただけで、まだ未登録状態ですが・・・
MYBLOG JAPAN登録でどれほどの効果があがるか。
といっても「ネタ」に自信がないのでそんなに効果ないと思いますが・・・

MYBLOG JAPAN登録ついでにちょっとだけBLOGを改造。

といっても共通的なところをテンプレート化しただけですが・・・

テンプレート化したのは
・アドセンスのJavascript関係
・ａｍａｚｏｎのフォーム関係
・amazonのJavascript関係
・MYBLOG JAPANの検索ボックス設置関係
・MYBLOG JAPANの最新記事設置関係

アドセンスとamazon関係のソースをテンプレート化していいものは不安ですが、これでしばらく様子を見てみたいと思います。

まだ情報量は少ないのですが、将来軽量化の必要があるのかなと思い、たまたま見つけたサイトをブックマーク代わりに・・・

Living by the Animal Faith: 月別Archiveのページをリスト化&軽量化

いろんなblogを見ますが、KHさんのところはとても綺麗ですね。参考にしたいと思います。機能面も含めて。
Living by the Animal Faith

Movable Typeの取扱説明書は英語なので見る気がしなかったのですが（というか読めないだけですが・・・）、ありました！翻訳されたページが！

Movable Type 取説

翻訳はhogeLogの高山さんです。
感謝感謝

フォトブログを設置してみました。

参考にしたのは、eblogの
eblog: Photoblogシステム「Quixotic Pixels」の設置

とてもわかりやすく説明してあります。感謝感謝

もとになるのはQuixotic Pixels: stylish & fun web designです。
ここからテンプレートとかを持ってきます。

あとは、eblogさんのところを参考にすればほぼOKです。

多少躓いた点は、
１．新しいエントリーを作るときのデフォルトのテキストフォーマット設定を「None Convert Line Breaks」にし忘れていた。（なぜか「コメントに適用するテキストフォーマットの設定」のところをいじってました・・・）
※どうもこれが原因で再構築した時にエラーになっていたようです。
２．登録しても画像がでない
eblog: Photoblogシステム「Quixotic Pixels」の設置に書いてある

そして大事なことなのですが、「Extended（追記）」部分に、写真の拡張子を抜いた階層を入力してやる必要があります。 これを入力しないと写真が表示されずに×マークになってしまうので注意してください。例えば 「http://xxxxx.xxxx.com/archives/photo.jpg」 という画像がアップロードされているとします。その場合には、 「http://xxxxx.xxxx.com/archives/photo」 という風に記述します。 拡張子「.jpg」は入れないことが大事です。また、画像ファイルがアップロードされている階層をきちんと確認しておいてください。

僕が使っているMovable Type 2.64では 「Extended（追記）」ではなく「追記(extend)」でした。「Entryの新規作成」画面の「エントリーの内容(body) 」の下にある「追記(extend)」にアップロードした画像のパスを書いてその拡張子を消せばOKでした。

３．日本語が文字化けする。
文字コードを変更し忘れてました。
Quixotic Pixels: stylish & fun web designからコピーしてくるテンプレートの文字コード(META部分）が「iso-8859-1」になっていますので、<$MTPublishCharset$>にすればOKです。（コピーしたテンプレート分）

以上で大丈夫でした。

でも、写真を登録することはあるのか不安です・・・

一応今回作ったフォトログ
my photolog

挑戦しようと思ったのですが、うまくいかないようです・・・
時間がある時に再チャレンジということで・・・

参考サイトをメモ
blog.bulknews.net: mt-rssfeed

少し前に編集画面にblockquoteボタンを追加したのですが、もっとすごいのやっている方がいました。

MTの編集画面にDreamweaver風のボタンを：風のまにまに号

「風のまにまに号」さんより

以前depologさんのエントリーを参考にMTの編集画面に「引用」ボタンを設置させていただいたのですが、これを応用してDreamweaver MX 2004風の各種タグ挿入ボタン一式を組み込んでみました。これを入れるとDWで編集するのと同じ感覚で色々なタグを使うことができます。

今度時間がある時にチャレンジしてみたいと思います。

（関連）
エントリー編集画面にblockquoteボタンを追加

大したことではないのですが、ちょっとだけ変更しました。

メインメニュー > 編集メニュー > 設定の「アーカイブの設定」のところを変更しました。

優先するアーカイブのタイプが「Category」になっていたのを「individual」に修正しました。
サイト内でリンクさせる時にこっちのほうがやりやすかったので。

★参考サイト
デポログ / DEPOLOG : blockquoteを簡単に

<blockquote>タグの装飾？をスタイルシートに追加したのですが、どうも綴りを忘れがち・・・
なので、エントリーの編集ボタンにあらかじめ追加できないのかなと探していたらありました。
「デポログ / DEPOLOG」さんのところで紹介されていました。感謝感謝。

ついでに、「ctrl」+「shift」+「q」で同じことができることがわかりそれも設定してみました。
これで簡単に<blockquote>タグが使えます。
でも、これでまた<blockquote>タグの綴りを忘れるんでしょうね。

変更したのは「tmpl/cms/edit_entry.tmpl」の380行目付近

document.write('<td width="24"><a href="javascript:formatStr(\'blockquote\')"><img
src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif"
alt="blockquote" width="24" height="18" border="0"></a></td>');

それと、「ctrl」+「shift」+「q」は132行目付近

if (event.keyCode == 17) formatStr('blockquote');

これだけでOK。
「event.keyCode」はほかにも使えそうですね。

★参考サイト
BLOG質問箱: リーセントコメント コメント日付

コメントなんて書かれる事はないのですが、たまに自分でコメントを書くことがありそうなので最近のコメントを表示するようにしてみました。
やり方は・・・

<div class="sidetitle">
RECENT COMMENTS
</div>
<div class="side">
<ul>
<MTEntries recently_commented_on="5" sort_order="ascend">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="4">
└ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br />
</MTComments>
</MTEntries>
</ul>
</div>

個人的な趣味で、リスト「<ul>」を番号付きリスト「<ol>」に変更にしてみました。
（上記は変更前です）
それとリストにする場合、スタイルシートの「side」のところに「list-style-position: inside;」を設定しておかないと妙なことになります。（これは少し悩みました）

今回の変更も「BLOG質問箱」を参考にさせていただきました。感謝感謝

★参考サイト
BLOG質問箱: カテゴリを日本語名で表示する

このサイトを立ち上げた当初、カテゴリ名を日本語にするとファイル名が化け化けになることに気づき、カテゴリ名を日本語にすることを諦めていたのですが、やっぱり世の中には解決する人がいるんですね。感謝、感謝です。

通常、「カテゴリラベル」が表示されているようですが、それを「カテゴリの説明」に変えることで画面上に日本語表示が可能なようです。これだとファイル名も化け化けにならずすみますね。

■修正前
<div class="side">
<MTCategories>
<a　href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>[<$MTCategoryCount$> items]
</MTCategories>
</div>

■修正後
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryDescription$>
</a>[<$MTCategoryCount$> items]
</MTCategories>
</div>

トップページの右側にあるカレンダーの日付からのリンクがなぜかカテゴリーのページに・・・
どうやるんだろうと試行錯誤して見ましたが解決せず、困ったときのGoogle様ということで「"アーカイブの設定"　"dairy"」で検索するとありました！

テンプレートの編集で「$MTEntryLink archive_type="Daily"$」とすればよかったようです。

ちなみに「すちゃらかCSS素材集」さんのサイトを参考にさせていただきました。（感謝）

すちゃらかCSS素材集: カレンダーで移動できてますか？

<blockquote> の使い方を勉強

トップページにカテゴリを表示することに。
「ウェブログ入門」を見ながらテンプレートに下記のソースを追加。
「MTCategories」と「MTCategoriy」となっているところを間違えて
最初失敗したが、修正してOKに。
でも、カテゴリを日本語にしておくとアーカイブファイルのファイル名が
おかしくなっているようなので、とりあえず英語に。
でも、ほかにやり方ないのかな・・・

<div class="sidetitle">
カテゴリ
</div>
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$> 件]<br />
</MTCategories>
</div>

気分転換にデザインを変更してみました。

とりあえず下記を参考にして「ありもの」のスタイルシートを使ってます。

もうちょっと勉強してオリジナルが作れるようになればなぁと思います。

TRIGGERS / blognews: テンプレート・カスタマイズのすすめ

blogを始めて数日・・・
なにを書くか迷いますね。
でも、日記的な使い方よりも備忘録的な使い方をした方が長続きしそうな予感。
カテゴリ分けできて、検索もできるので。

ということで、あまり気張らず続けてみましょう！