Nefert

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

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

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

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

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

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

変更の方法は、

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

このなかの、「http://blog73.fc2.com/r/rimse/file/herba_title.jpg」を、「http://blog73.fc2.com/r/rimse/file/herba3col_title.jpg」に置き換えてください。

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

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

それではまたー。

★ 対象テンプレート：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://blog73.fc2.com/r/rimse/file/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://blog73.fc2.com/r/rimse/file/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://blog73.fc2.com/r/rimse/file/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://blog73.fc2.com/r/rimse/file/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : left top;
    /* for IE5 */
    text-align      : center;
}
.submenu .plugin1-container {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/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://blog73.fc2.com/r/rimse/file/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;
}