なんだか集中できなかったので

気分転換にテンプレートをつくってみました。テンプレート名は「lostsky」
Daylightをベースに、大昔の遺産を流用+Flickrから画像を拝借です。
http://www.flickr.com/photos/drown/148206233/

このテンプレートでは、エントリータイトルの部分をHerbaやBirdcallのようにマウスオーバーで色が変わるようにしました。なんだかんだで色合いがBirdcallと同じになってしまったのは色彩感覚の無さの現れですね。精進します…。

Herbaのちょっとした変更

「最新エントリーの上部にプラグイン3を表示する@Herba」に関連して、プラグインの項目タイトルに使われている画像のサイズを大きくしておきました。
表示幅を大きくしている+このカスタマイズを適用していると、表示幅のサイズによっては画像が途中でとぎれてしまっていたようなので。

以上、かなり細かい変更点のお知らせでした。

Tips!@Herba

Herbaの表示幅を固定して使っている方へのお得な情報。

表示幅を大きく設定すると、タイトル画像の両サイドが切れてしまったりしまいます。これでは見た目がかっこわるいですね。
そんなときは、Herba-3cのタイトル画像と置き換えてみると良いかも。
ちなみにHerbaのタイトル画像は横が900px、Herba-3cのタイトル画像は横が1200pxとなっています。

変更の方法は、

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

このなかの、「http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_title.jpg」を、「http://blog-imgs-26.fc2.com/r/i/m/rimse/herba3col_title.jpg」に置き換えてください。

しばらくは

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

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

それではまたー。

カラム位置を変更する@Herba-3c

★ 対象テンプレート：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

★ 対象テンプレート：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が登録されるまでにこの変更を適用させたいなーと思ってるのですが、間に合うかは微妙です。がんばろー。