TopMovable Typeテンプレート > 2005年8月
2005年8月11日

テンプレート修正(個別エントリーアーカイブ追加・IE6後方互換モード対処)

August 11,2005 11:55 PM
Tag:[, , ]
Permalink

3.2がまもなくリリースという時になんですが、現在公開中の Movable Type 3.17x-ja 用テンプレートをそれぞれ下記のように修正しました。

個別エントリーアーカイブテンプレート(2カラム/3カラム)を追加

3.17-ja リリース後、Movable Type 3.17用テンプレート(個別エントリーアーカイブ)をエントリーしましたが、それ以降マルチカラム版を作ってなかったので作りました(放置状態で申し訳ありません)。3.151-ja までの個別アーカイブテンプレートも残しています。
なお2カラムテンプレートで1カラムの個別エントリーアーカイブをご利用になる場合は、3カラム版のエントリーにある個別エントリーアーカイブ(1カラム)」をご利用ください(固定・可変のどちらでもOKです)。

IE6の後方互換モードによる解釈誤りを対処

3カラム版で修正した、IE6の後方互換モードによる解釈誤り(text-align および width と padding の分離)の対処を2カラム版にも適用しました。対処内容の詳細は固定3カラムのIE6・後方互換モード対処方法をご覧ください。

その他、上記の各エントリーで「テンプレートは3.151-jaまで確認」と書かれてあった部分について、最新バージョンを追加変更しました。

以上です。
それではどうぞよろしくお願い致します。

Comments [0] | Trackbacks [0]
2005年8月 5日

Designed by Tickler's bunkum days & Assisted by Orbium -Sora No Tama-

August 5,2005 11:51 PM
Tag:[, , ]
Permalink
Designed by Tickler's bunkum days

内輪ネタで恐縮ですが、公開テンプレートご利用ユーザの「今日の覚え書き」さんと「Orbium -そらのたま-」さんのコラボレーションでオリジナルデザインのテンプレートがリリースされました。以前より同じデザインのサイトをちらほらと見かけていましたが、これでますますご利用者が増えることと思われます。

テンプレートはどちらのサイトからもダウンロードできます。興味のある方は(ない方も)是非ご訪問ください。

2005.08.06 追記
本文を修正しました。

Comments [5] | Trackbacks [1]
2005年8月 1日

サイドバーの背景を最後まで表示する

修正前

float 指定のマルチカラムテンプレートのデザインで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文(中央カラム)の表示より短くなった場合、背景色がそこで途切れてしまうことです。

例えば、本サイトの公開テンプレート(2カラム・右にサイドバー表示)のCSSの右サイドバーに背景色(ピンク)を追加してみます。

/* 右カラム */
#links-right{
    float: left;
    background-color: pink;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    }

この設定例で、サイドバーの表示が本文より短い場合、最初の画像のように指定した背景が途中までしか表示されません。

ということで、ページの最後までサイドバーの背景色を表示するカスタマイズ方法です。

1.画像を用意する

次のような画像を用意します。これは中央カラム(白)およびサイドバーの背景(ピンク)となるものです。サンプルのテンプレートは横幅が700pxですので、長さ700pxにしています(サンプルは縮小表示していますのでクリックして実物を確認してください)。

背景画像

この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをキャプチャソフト(フリーで色々あると思います)でキャプチャして、その一部分を切り抜いたものです。

2.画像のアップロード

作成した画像を images ディレクトリ等にアップロードします。ここでは back.jpg としています。

3.スタイルシート修正

styles-site.css を下記のように修正します。公開テンプレートでは中央カラムにボーダーを表示していますが今回の例では削除して、画像の線を使っています(無理に罫線を入れる必要はありませんが)。また冒頭に書いた links-right の background-color は不要です。

/* 3カラム全体 */
#box {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 0px;
    padding-bottom: 20px;
    width: 700px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #FFFFFF;
    background: url(images/back.jpg) repeat-y;
}
 
       : 
 
/* エントリーのある大段落(3カラム) */
#content {
    float: left;
    width: 514px;
    border-bottom: 1px solid #666699;
/*    border-left: 1px solid #666699;*/
    border-right: 1px solid #666699;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

画像は横幅いっぱいのものでなくても大丈夫だと思います。例えばサイドバーの幅の
画像を作って #box に

background: #ffffff url(images/back.jpg) repeat-y top right;

とすれば右寄りに画像が配置されます(間違ってたらすいません)。

修正後以上です。これで左のようにページの最後まできれいに表示されます。
Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3