やっとMT4対応のStyleCatcherテーマが出来たので公開してみました。まずは要望のあった「サイクリング」から。ごくシンプルで普通なデザインです。MT4でもこのようなオーソドックスなデザインで使いたい方に。
基本的には3.3時代に作ったものをそのままMT4に移植したものです。MT4では一部HTML部分での配置が変わっているところがあるので（記事のフッター部分が4.0では記事タイトルのすぐ下に移動してたりとか）、完全に3.3用と同じではないですが、全体のイメージはほぼそのままかと。
１つ困ったのが、Vista環境になってしまったのでIE6での動作確認ができなくなってしまったこと。IE6時代に作ったものを出来る限り触らずそのまま移し替えたので大丈夫なんじゃないかな・・・とは思うんですが。そういえばIE7でもDTD宣言の前に余計な文字入れたら後方互換モードになるんだったっけと思いだしてやってみたところ、崩れてはなかったようですが…。
もしIE6で使ってみてレイアウトがおかしい等ありましたらお知らせいただけたら嬉しいです。
MT4でのバナー画像入れ替えは下記のように。赤字の部分を好きなものに入れ替えるとよいと思います。
#header {
background-image : url(b-back.jpg);
background-position: right;
}
バナーに画像を使わない時は以下のように追加記述を。 バナーの背景色を変える時は赤字の部分を好きに変更。
#header {
background-image : none;
background: #47628F;
}
サンプル頁は２種類用意してみました。
■仕様とか利用規約とか■
・MT4以降のデフォルトテンプレートに合わせて作っています。それ以前のバージョンだと表示が崩れる恐れがあります。
・３カラム（大小小）/３カラム（小大小）/２カラム（大小）/２カラム（小大）に対応しています。
・IE7/Firefox/Netscape7で動作確認しています。マック環境は分かりません。
・カスタマイズはご自由にどうぞ。
・再配布は禁止です（カスタマイズされたものも含む）。
■リポジトリアドレス
https://wing.w-museum.com/wmstyle4
＜2008.8.14＞4.2に対応
コメント
StyleCatcherテーマの更新ありがとうございました。
移行準備中のブログに適用したところ、きれいに表示できました。もろもろの調整をしてから、MT4でブログ運営していこうと思ってます。
取り急ぎ、お礼とご報告まで。
こんにちは。
きれいに表示できましたか。よかったです。
何か気がついたことなどありましたら遠慮なくお知らせ下さいね。
TAKEOさん
タニグチです。
お言葉にあまえて、質問させてください。
現在公開中のサイトではstyle.cssに記述をくわえてgifアイコンに「Download」
という文字を重ねて、ダウンロードファイルをリンクさせています。
１．現在公開中のサイト
http://kachitano.com/mt/archives/2007/02/18011032.php
２．移行準備中のサイト
http://kachitano.coresv.com/mt/archives/2007/02/18011032.php
アイコンの文字を通常時は文字を白色、マウスがのった時にオレンジ色にしています。
今回更新頂いたMT4用のStyleCatcherでは文字が他のリンクと同様の色になってしまいます。
現在の表示が継続できるようにしたいのですが、どのように手をいれればよいかをご相談したいです。
お忙しいところすいませんが、アドバイス頂ければ幸いです。
以下に私が行っている設定を書いておきます。
＜記事のなかでのリンク＞
＜div>＜a href="http://kachitano.com/mt/dl/GetFS_Val_071029_noval.zip" class="menu">Download ＜/a＞＜/div＞
＜style.css＞への設定
/* メニューアイコン（ダウンロードアイコン）の背景設定 */
/* 2007/08/22(Wed) ats add */
/* menu icon set */
a.menu:link , a.menu:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(http://kachitano.com/mt/images/no.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 120px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 10px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: "Courier New", Courier, mono; /*フォントの種類*/
}
a.menu:hover {
color: #FFCC33; /*マウスが乗ったときの文字の色*/
}
こんにちは。
MT4ではbase_theme.css内のリンク設定が複雑で、a:link だけではリンクの変更が難しかったため、#content内で設定するという形を取らせていただいてます。
なので以下のようにされると色が反映されると思います。
#content a.menu:link , #content a.menu:visited {
#content a.menu:hover {
よろしくです。
タニグチです。
ありがとうございます。解決しました。
今後ともよろしくお願いします。
解決されましたか！
よかったです。
こちらこそこれからもよろしくお願いします。^^
タニグチです。
一つ困ったことが出てきました。
サイドバーの表示についてです。
Firefoxではきれいに表示できるのですが、IE６ではサイドバーのうち「ガンマ」が本文の中央あたりに重なって表示されます。
テストサイトは次のURIです。
http://kachitano.coresv.com/mt/
なお、MT4標準のテーマ（ex.Minimalist Blue）ではきれいに表示されます。
どこかこちらで修正したら適切に表示できるでしょうか。
もしわかれば、教えていただければ幸いです。
お忙しいところすいません。よろしくお願いいたします。
こんばんは。
ソースを拝見したところ、boople.comに使われているテーブル幅がちょっと長くてガンマ部分が押し出されているのかもしれません。以下のようにtable widthを160から159以下にしてみて下さい。
<h2 class="widget-header">boople.com</h2>
<div class="widget-content">
<table width="160" border="0" cellspacing="0" cellpadding="1">
↓
<h2 class="widget-header">boople.com</h2>
<div class="widget-content">
<table width="159" border="0" cellspacing="0" cellpadding="1">
これで試してみて下さい。
TAKEOさん
＞table widthを160から159以下
を実施したら、見事に解決しました。
こういうことがあるんですね。勉強になりました。
ありがとうございました。
よかったです～。
IEとFirefoxの違い、悩ましいですよね。
私も精進していこうと思います。
こんばんは、テンプレートお借りしました。
お礼まで。今日ネットカフェで確認したら、3カラムの右側が、エントリーのブロックと重なってしまっています、IE6のバグでしょうか？ちなみにIE7、Firefoxだときちんと表示されるのになぜか不思議なので、書き込みさせて貰いました。
＞HOPEさん
こんにちは。テーマ使っていただいてありがとうございます。^^
カレンダーのcssをカスタマイズされているようですが、widget用のclassが使われてないので、そこがIEのバグに引っかかっているようです。<div id="calendar">の周りを以下のように
<div class="widget-calendar widget">で囲んでみて下さい。
<div class="widget-calendar widget">
<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー">
・・・・・
</table>
</div>
</div>
これでIEでも崩れずに表示されると思います。
試してみて下さい。
今、追加してIE6で見ましたら、バッチリでした。書き忘れって言いますか、全然気がつかなかったです。ありがとうございました。感謝！
＞HOPEさん
IEの表示崩れ、直りましたか！ よかったです。
これからもよろしくお願い致します。
こんにちは、リストマークが微妙にずれている様に思われます、CSSでプロバティが設定されているのですがどこを触ればいいのでしょうか？
＞HOPEさん
リストマークは
.widget-list
.widget-list .widget-list
で設定しています。
ただ、マークがずれて見えるのは仕様のようなものなので、しかたがないところはあるんですよね…。
気になるようでしたら、
list-style-image: url(list.gif);をやめてbackground-imageで微調整する方法もありますが、paddingの変更や全体の再調整も必要になるので、ちょっとややこしいです。
そういうことでよろしくお願い致します。
こんにちは。
このテーマ、気に入って使わせていただいています。
精細なデザインがいいですね。
これからも宜しくお願いします。
＞sigmrさん
こんにちは。テーマ気にいって下さってありがとうございます。^^
これからもよろしくお願いします。