Nefert

ワタクシ、何を隠そうただいま大学生をやっておりまして、大学院への進学を目論んで最近ちまちまと勉強しているのでした。最近いそがしーと言っていたのはそれのことなのです。
他大学＋レベル的にも今いる大学より上の大学の院を目指しているのですが、なんだか険しい道に分け入ってしまった感が否めません。もし院入れなかったら……ゴクリ。

そういうことで、もうしばらくはテンプレート作りは気分転換としてのんびりとやっていくことになってしまいます。もしテンプレートのリクエストなどがありましたら、コメントだったりメールだったりでこそっと書いて頂ければ幸いです。最近の流行のテーマとかもわかんないしどういったテンプレートが需要あるのかも分からないので…(；-ω-)

それではまたー。

★ 対象テンプレート：Herba-3c

Herba-3cは標準では次のようなカラム配置になっています。



ここでは、このカラムの配置を次のように変更します。



まず、

/*────────────────────────────────────────
 ■ 各カラムの幅・配置設定
────────────────────────────────────────*/
#three-column-container {
    width           : 77%;
    float           : left;
}
#main {
    width           : 69%;
    float           : left;
}
#plugin1 {
    width           : 30%;
    float           : right;
} 
#plugin23 {
    width           : 22%;
    float           : right;
}

を、次のように置き換えます。

/*────────────────────────────────────────
 ■ 各カラムの幅・配置設定
────────────────────────────────────────*/
#three-column-container {
    width           : 77%;
    float           : left;
}
#main {
    width           : 69%;
    float           : right;
}
#plugin1 {
    width           : 30%;
    float           : left;
} 
#plugin23 {
    width           : 22%;
    float           : right;
}

次に、細かい表示の調整として、

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
.submenu {
    padding-top     : 2.5em;
    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;
}
.submenu .plugin1-container, 
.submenu .plugin23-container  {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : left bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
/*────────────────────────────────────────
 ■ 各メニューを包括する要素の設定
────────────────────────────────────────*/
.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 0 0 12px;
}

この部分を次のように置き換えます。

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
#plugin1.submenu {
    padding-top     : 2.5em;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : right top;
    /* for IE5 */
    text-align      : center;
}
#plugin23.submenu {
    padding-top     : 2.5em;
    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;
}
.submenu .plugin1-container {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : right bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
.submenu .plugin23-container {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : left bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
/*────────────────────────────────────────
 ■ 各メニューを包括する要素の設定
────────────────────────────────────────*/
#plugin1.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 12px 0 0;
}
#plugin23.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 0 0 12px;
}

★ 対象テンプレート：Daylight

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

#wrapper {
    border-left     : 1px solid #999;
    border-right    : 1px solid #999;    
    border-bottom   : none;
    padding         : 0 1px;
    margin          : 0 auto;
    min-width       : 600px;
    max-width       : 900px;
    background-color    : #fff;
    position        : relative;
    
    /*　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 < 600)? "600px" :
                "auto"
            );
    /* for IE */
    *height         : 1%;
}

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

定期的に、今までのものを全部消して一からやりなおしたいという衝動に駆られることがあるのですが、まさにいまその時期のようです。テンプレートの最適化もちょっと前にしましたが、元の構造を残しながらの調整だったので今になってやり直したくなってます。あと、FC2ブログのテンプレート自体にいろいろと不満が出てきたり…。

そんなこんなを考えてるとなんだか疲れてしまったので、すこしだけテンプレート作りの優先度を下げて落ち着こうと思います。ついこの前プライベートで使うHTML触ってたら楽しかったので自分用のブログデザインとか作ってみたいなぁ。

もうしばらくは忙しそうなので、のんびりと、できる範囲でやっていきます

なかなか新しいテンプレートのデザインがまとまらない上に、テンプレート作りに没頭できる時間も作ることができないため、今あるテンプレートの手直しの方に力を入れています。

今やってること。
1.CSSの軽量化
なんだかんだで20KBを余裕で超えてしまっているCSSをダイエット中。よくもまぁこんなに太ったもんだ…という感じです。ファイルサイズが肥大化している原因のほとんどが、インデントに使う空白と注釈などのコメント部分のようなので、そこらへんを上手いこと簡略化したいところ。
ブログ側での説明を充実させたりして負荷を分散させたいですね。

2.CSS内の目次作り
CSSに項目毎でナンバリングし、参照しやすいようにしています。
これはカスタマイズの時に該当箇所を探す+説明する手間を省くのと、CSSの軽量化などに役立つ…はず。

Daylightが登録されるまでにこの変更を適用させたいなーと思ってるのですが、間に合うかは微妙です。がんばろー。