Home > PCな生活MT > MT5のデザインで遊ぶ

<< | MT5のデザインで遊ぶ | >>

MT5のデザインで遊ぶ

2010.07.24 | Posted at 12:43 | Category: MT

データーベースの文字化けでクリーンインストールになってしまったMT5のアップグレード。
幸いにというか、災難な事にというか、一からの作り直しで、ちょっと遊ぶことが出来た。
覚えを残しておきたいと思う。

テンプレートは小粋空間さんの3カラム

小粋空間さんの、テンプレは加工しやすく、安定している。
3カラム配布テンプレート
ブログ用:スタイル対応版(フッタ付きリキッドレイアウト対応)

設定などは、とても詳しいので、上記にてご確認ください。

カラム固定で幅は900px

少し広いと思うが、配布テンプレートの850pxから拡げた。
最初に、ホームページを作ったときは、600px幅だった。
だんだん、広くなる。
カラムのレイアウトは、デザイン⇒スタイルから変更できる。

ヘッダーやフッター、メニューバー、背景色

backgroundを、GIFに変えた。
ながいこと、同じ配色で、あきたので・・・。
配布元はAmazon Graphicsさん
image597.gif
こういうのをもらってきて、伸ばしたり、切ったり貼ったりした。

配布画像は、『文字入れ』『サイズ変更』等
画像加工してご使用できます。

と言うことなので、
bg_nav3.gif

伸ばしたり(サイドメニュータイトル用)
bg_nav1.gif

切ったり貼ったり(日付表示部用)
ということで、2日ほど使ったが、チカチカしすぎて、真ん中の記事が読みにくいので、すぐに変更。
現行の素材bg_nav2.gifも、Amazon Graphicsさんから、いただきました。

画像のリサイズ、トリミング

「JTrim」
を使用。簡単な加工なら、これで十分だと思う。
jtrim.gif
MSペイントでも、リサイズ、トリミングは出来るがBMPしか使えない。(使わない)
MSペイントで、加工した後、GIFで保存すると、色情報が大幅に欠落する。

スタイルシートについて

ヘッダーなどへの画像の設置は、

{background: url(“hoge.gif”) no-repeat top left;}

などと、スタイルシートで指定するのだが、これも小粋空間さんの、
CSS でヘッダーに画像を表示する for Movable Type 4
の記事を、そのまま参考にした。本当にお世話になります。
(長くなるので、「デザインで遊ぶ・その2」でも、書こう)
と昨日は思ったが、このエントリーに続けて書く。

CSS でヘッダーに画像を表示する

詳しくは、上記の小粋さんの記事を読んで欲しいが、私のところの、スタイルシートの該当部分だけ紹介しておく。

#header a,
#header a:link,
#header a:visited {
color: #fff;
background-color: transparent;
font-size: 16px;
text-decoration: none;
}
#header a:hover {}
#header a:active {}
#header {
background: url(“hoge.gif”) repeat top left;}
/* タイトルバナー下の説明 */
.blog-description {

「top left」はいらないと思うが、一枚ものを入れていた時のままにしてある。

サイドメニューのタイトル部分

私の場合、サイドメニューは折りたたみ式になっている。月別アーカイブなど、長いリストがびろ~んと垂れ下がっているのがいやで導入した。
見たい人だけ、クリックして表示させたらよい。プルダウンメニュー式よりスマートだと思う。
uyu.gifuyu2.gif
元ネタはUnderDone|うにゅうにゅナビゲーション2。
なのだが、ずっと使っているのは、「風のまにまに号さん」
「Macromedia風テンプレート for MT3.1」にデフォルトでついていたやつ。(プラグイン・画像こみ)。
このテンプレートは、色、デザインとも、とても好きで、ブログデビューの頃にしばらく使わせていただいた。
MTカスタマイズの面白さを教えてくれたテンプレ。ブログペットやmoblogも付いていた。
で、この、うにゅうにゅ部分の画像だが、元のCSSの画像URLを書き換えて、imgファイルを、同じフォルダにアップしてやるだけ。要するに、簡単だった。
と言うわけで、

風のまにまに号さんのうにゅうにゅ部分のCSS


#sectionLinks h2{
margin: 10px 0px 10px;
padding: 0px;
font-size: 8pt;
}
#sectionLinks a:link{
display: block;
background-image: url(“/hoge.gif”);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #ffffff;
}
#sectionLinks a:visited{
display: block;
background-image: url(“/hoge.gif”);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #ffffff;
}
#sectionLinks a:hover{
display: block;
background-image: url(“/hoge.gif”);
padding: 3px 0px 3px 10px;
font-weight: bold;
text-decoration: none;
}
.relatedLinks{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 8pt;
line-height: 1.5;
}
.relatedLinks ul li{
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
line-height: 1.5;
font-family: Verdana, Arial, sans-serif;
}

でもって、各ウィジェットのテンプレに、以下のように記述。

(例・blogpeopleのウィジェット)
<div id=”sectionLinks”>
<div id=”varMS_menu10″>
<h2><a href=”#_top” onclick=”showMoreMenu(‘menu10′, 1);return false;”>▲blogpeople</a></h2></div>
<div id=”varMH_menu10″ style=”display: none”>
<h2><a href=”#_top” onclick=”showMoreMenu(‘menu10′, 0);return false;”>▼blogpeople</a></h2>
</div>
</div>
<div id=”varB_menu10″>
<div class=”relatedLinks ul li”>
<script language=”javascript” type=”text/javascript” src=”http://www.blogpeople.net/display/usr/~.js” charset=”Shift_JIS”></script>
<a href=”javascript:void(bloppop=window.open(‘http://www.blogpeople.net/addlink.jsp?n=1&u=~=’+escape(document.title),’blop’,’scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes’));”>このサイトを登録 by BlogPeople</a>

(青字の部分は、各自BlogPeopleでもらうタグ)
</div>
</div>
<script language=”JavaScript” type=”text/JavaScript”>
showMoreMenu(‘menu10′, 1);
</script>

showMoreMenu(‘menu10′, 1);
の、赤字の部分は、「0」で開きっぱなし。もちろん、プラグインのアップと、

<script language=”JavaScript” type=”text/JavaScript” src=”/ShowMore.js”></script>

の記述は忘れずに。
(本当に長くなったので、「デザインで遊ぶ・その2」で続けよう)

Pocket

<< | | MT | | >>

Trackback URL

Trackbacks

Comments

comment