表示幅を固定する@Amaris

★ 対象テンプレート：Amaris

スタイルシートを編集します。

#wrapper {
    border-top      : none;
    border-left     : 10px solid #999;
    border-right    : 10px solid #999;
    border-bottom   : none;
    padding         : 0 1px;
    margin          : 0 auto;
    min-width       : 600px;
    max-width       : 900px;
    background-color    : #fff;

    /*　for IE5　*/
    text-align      : left;
}

このなかの、

    min-width       : 600px;
    max-width       : 900px;

の部分を、次のように書き換えてください。

    width           : 800px;

ここでは例として幅を800ピクセルで固定しています。幅のサイズはご自由に変更してください。

次に、

* html #wrapper {
    width : expression(
                (document.documentElement.clientWidth > 800)? "800px" :
                (document.documentElement.clientWidth < 500)? "500px" :
                "auto"
            );
    /* for IE */
    *height         : 1%;
}

という記述が続けて書いてあるので、この部分を削除してください。

最新エントリーの上部にプラグイン3を表示する@Herba

★ 対象テンプレート：Herba

HTMLとCSSの編集を行います。
[ HTML ]

    <!-- 【 ▼メインエリア ここから 】 -->
    <div id="main"><div class="main-container">

↑この箇所を次で置き換えてください。

    <!-- 【 ▼メインエリア ここから 】 -->
    <div id="main"><div class="main-container">
    <!--plugin-->
        <div id="plugin3">
          <!--plugin_third-->
          <div class="menuitem plugin-<%plugin_third_tag>"">
            <h2><span><%plugin_third_title></span></h2>
            <div class="menu-body">
            <%plugin_third_description>
            <%plugin_third_content>
            <%plugin_third_description2>
            </div>
          </div>
          <!--/plugin_third-->
        </div>
      <!--/plugin-->

また、

    <!-- 【 ▼サブエリア ここから 】 -->

より下にある、

        <div id="plugin3">
          <!--plugin_third-->
          <div class="menuitem plugin-<%plugin_third_tag>"">
            <h2><span><%plugin_third_title></span></h2>
            <div class="menu-body">
            <%plugin_third_description>
            <%plugin_third_content>
            <%plugin_third_description2>
            </div>
          </div>
          <!--/plugin_third-->
        </div>

の部分を削除してください。HTMLの編集は以上です。

[CSS]
スタイルシートに、以下の記述を追加してください。

#plugin3 .menuitem{
    margin-bottom   : 1.5em;
}
#plugin3 .menu-body{
    width           : 95%;
    margin-left     : 5%;
    /* 
    右側へのインデントを大きくしたい場合は、margin-leftの値を大きくし、
    widthの値 + margin-leftの値が100%以下になるようにwidthの値を
    調節してください。
    */
    
    overflow        : auto;
    padding-bottom  : 25px;

    /* for IE */
    *overflow-x     : auto;
    *overflow-y     : hidden;
}
#plugin3 h2 {
    margin          : 0;
    padding         : 0.5em 1em 0.5em 0;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_menutitle.gif");
    background-repeat   : no-repeat;
    background-position : right center;
    font-size       : 100%;
    font-weight     : bold;
}
#plugin3 h2 span{
    background-color    : #fff;
    padding         : 0 0.3em 0 0;
}
#plugin3 ul {
    padding-left    : 20px;
    list-style-type : square;
}
#plugin3 dd {
    padding-left    : 20px;
}
#plugin3 input, 
#plugin3 textarea {
    margin          : 2px 0px;
    padding         : 1px;
}

CSSの編集は以上です。

カラムの幅を調整する@Herba

★ 対象テンプレート：Herba

スタイルシートの編集を行います。

/*────────────────────────────────────────
 ■ メインコンテンツを包括する要素の設定
        エントリー部（メイン）を包括する要素の設定。
────────────────────────────────────────*/
#main {
    float           : left;
    width           : 64%;
    overflow        : hidden;
    padding-top     : 1em;
}

また、

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
div#sub{
    width           : 35%;
    padding-top     : 2.5em;
    float           : right;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : left top;
    /* for IE5 */
    text-align      : center;
}

このそれぞれの「width」の値によってカラムの幅が定められています。
二つのwidthの値の合計が100%を超えないよう（99%あたりにしておくのが無難かと）にそれぞれの幅を調整してください。

タイトルエリアの画像を変更する@Herba

★ 対象テンプレート：Herba

まず初めに、タイトルに使いたい画像をアップロードしておきます。
次に、スタイルシートの編集から、

.header-container {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_title.jpg");
    background-repeat   : no-repeat;
    background-position : left top;
    width           : 100%;
}

という箇所を探してください。
この中の、

    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_title.jpg");

という部分で、タイトルエリアの画像が設定されています。
この、「url("」と「")」の中の部分を、アップロードした画像のURLで置き換えてください。
画像の配置に関しては、background-positionプロパティを編集してください。

expressionについて（追加情報）

関連記事：javascriptの荒波に

この記事から引き続きexpressionについて調べていたのですが、オライリーの本でexpressionについて触れてあるのを発見し、早速（Amazonで）購入ー。届くまでの間にもう少し調べたら、Web上でもオライリーの情報が少しのっていて、テストサイトなんかもありました。これはありがたい。

http://www.marlin-arms.com/support/hpws/index7.html
驚きなのは、リンク先にある「CSS expressionを使ったカウンタ」。
expressionが評価されるたびに数が増えていくのですが、増え方ハンパ無さ過ぎ。「増え方すごいよ。ほんとだよ」とは言われていたものの、確かにこりゃ重くなるなと納得の数値です。お試しあれ。
これ見たらますますイベントハンドラの必要性を感じました。

今expression絡みで困ってること。
・expression直下でwindow.onresizeが使えるかどうか
・window.onresizeだけで初表示時はだいじょーぶなのかどうか
悩みがふえた（-ω-；）

expressionについてはこちらも詳しくて参考になります。ありがたやー。
ダイナミックプロパティ expression() のまとめ （Snow-Materiaさん）

javascriptの荒波に

Webサイトの高速化 ルール7　CSSのExpression()は使わない!
ここの記事によると、expressionを使うとあらゆるイベントに対して評価が行われ、動作が遅くなってしまうのだそうです。

Nefertのテンプレートではmin-width・max-widthをIE6で適用させるためにexpressionを使っているのですが、この情報を元にイベントハンドラをつかってみよーと思ったのでした。

が、いかんせんjavascriptの知識は皆無に近いもんで(；'-')
あってるのかどうなのかすら分からない状態になってしまいました…(；'-')

expression内のjavascriptの記述はこんな感じです。
意図としては、ウィンドウサイズが変化したときにウィンドウサイズによってwidthを指定するという感じなのですが…

window.onresize = ( 
           (document.documentElement.clientWidth > 1150)? "1150px" :
           (document.documentElement.clientWidth < 600)? "600px" :
           "auto")

javascriptに強い方、これってどーなんでしょうか。
ウィンドウサイズが変化したときだけではなく、ページを最初に読み込んだときにも幅を指定する必要があるので、onloadとかで入れ子？条件分け？したほうがいいのでしょうか。
一応動作確認した段階では問題なさげなのですが…(-ω-;)

問題なければこれを全テンプレートに適用させたいなと思いますー。