TopMovable Typeテンプレート > 2005年4月
2005年4月30日

テンプレート修正(XHTML1.0/CSS valid)

April 30,2005 3:01 PM
Tag:[, , , ]
Permalink
Valid XHTML 1.0!Valid CSS!現在公開中のテンプレートをタイトルの通り、XHTML1.0 および CSS についていずれも valid (正当)にしました。

修正箇所は

  • img タグに alt 属性追加
  • font-weight指定の修正

です。
後者につきましては明らかに typo ですので、 styles-site.css にある下記のクラスセレクタについて修正ください。ご迷惑おかけして申し訳ございませんがよろしくお願い致します。

.date {
  :
    font-weight: nonebold;
  :
}
 
#content-commentspop h2 { 
  :
    font-weight: nonenormal;
  :
}
 
#content-commentspop h3 { 
  :
    font-weight: nonenormal;
  :
}

また CSSの検証で

  • 行番号 : 168 can't find the warning message for otherprofile
  • 行番号 : 491 can't find the warning message for otherprofile

という警告が表示されます。これは word-break についての警告で、IE専用のプロパティのためと思われますので予めご了承ください。
なお、それぞれの検証サービスは下記にあります。

The W3C Markup Validation Service W3C CSS 検証サービス

URLまたはファイルを指定して実行すれば検証結果が表示されます。

2005.05.01 追記
XHTML1.0については上記サービスで valid になったという事実のみで、XHTMLの準拠については別途xml宣言や名前空間指定等が必要となります。

Comments [0] | Trackbacks [1]
2005年4月13日

3カラムテンプレート(可変)を2カラムに変更する方法

April 13,2005 11:13 PM
Tag:[, , ]
Permalink

本サイトで公開中の Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ可変)を2カラム(サイズ可変)に変更する方法について記します。
修正前に、3カラムテンプレートの基本的な構造を簡単に説明しておきます。

まず3カラムの対象となっているテンプレートは

  • メインページ
  • カテゴリー・アーカイブ
  • 日付アーカイブ
  • 個別エントリーアーカイブ
  • コメントプレビュー
  • コメントエラー

です(1カラム版を使用しているテンプレートは適宜対象から外してください)。

次に、各テンプレートで3カラムを表示するためのタグは下記のような構成になっています。

<!-- 左サイドバー開始 -->
<div id="links-left">
      :
(左サイドバーのメニュー)
      :
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      :
(右サイドバーのメニュー)
      :
</div>
<!-- 右サイドバー終了 -->

青色のタグにある id 属性の links-leftcontentlinks-right がそれぞれ左カラム・中央カラム・右カラムであることを示しています。そしてこの中に記述されたタグがそれぞれのカラムに配置されるという訳です。
「サイドバーのメニュー」と書かれた部分は、

<div class="sidetitle">
メニュータイトル1
</div>
 
<div class="side">
メニューリスト1
</div>
 
<div class="sidetitle">
メニュータイトル2
</div>
 
<div class="side">
メニューリスト2
</div>
    :

という構造でメニュータイトルとメニューリストがペアになって並んでいます(注:カレンダーにはメニュータイトルはありません)。公開テンプレートをそのままの状態で使用されている場合は、メインページの左サイドバーには「カレンダー」「最近のエントリー」「最近のコメント」「最近のトラックバック」が、右サイドバーには「検索」「カテゴリーリスト」「月別アーカイブリスト」等が並んでいます。
つまり、この部分を片方のサイドバーにごっそり移動させ、スタイルシートに修正をちょっと加えることで2カラムに変身させることができます。

ということで以下に具体的な修正方法を記します。左右いずれのサイドバーを残すかによって修正方法が2通りありますのでご注意ください。

1.サイドバーを左だけにする場合

下記リストのように、右サイドバーのメニューを左サイドバーの任意の位置(ここでは </div> の直前)にペーストします(青色)。元の右サイドバーのタグ(赤色)は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
      :
(左サイドバーのメニュー)
      :
 
      :
(右サイドバーのメニュー)
      :
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      
右サイドバーのメニュー
      
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落(トップページ) */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-right : 0px ;
    margin-left  : 185px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

2.サイドバーを右だけにする場合

下記リストのように、左サイドバーのメニューを右サイドバーの任意の位置(ここでは </div> の直前)にペーストします(青色)。元の左サイドバーのタグ(赤色)は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
      
左サイドバーのメニュー
      
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      :
(右サイドバーのメニュー)
      :
 
      :
(左サイドバーのメニュー)
      :
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落(トップページ) */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-left  : 185px ;
    margin-left : 0px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}
Comments [5] | Trackbacks [1]
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