「suspire」カラム逆配置版

某所にて要望があったsuspireの逆カラムバージョンです。編集箇所が多かったので、今回はCSSファイルそのままでの配布ー。
suspire-re(080705).css
上のCSSファイルを開き、全て選択→コピーの後、テンプレートのスタイルシートと置き換えてください。

ブログタイトルの背景に画像を設定する@Favilla

★対象テンプレート：Favilla

スタイルシートのカスタマイズから、

/*────────────────────────────────────────
 ■ ヘッダー部の設定
        タイトル・ブログの紹介を含む部分の設定です。
────────────────────────────────────────*/
#header {
    padding         : 140px 0;
    width           : 40%;
    float           : right;
}
.header-container {
    width           : 100%;
    overflow        : hidden;
    text-align      : center;
}
#title h1 {
    margin          : 0;
    padding         : 0 0.3em 1px;
    border-bottom   : 1px solid #333;
    font-size       : 130%;
    font-weight     : bold;
}

の部分を次の記述で置き換えてください。

#header {
    padding         : 0 0 140px;
    width           : 40%;
    float           : right;
}
.header-container {
    width           : 100%;
    overflow        : hidden;
    text-align      : center;
}
#title h1 {
    margin          : 0;
    padding         : 140px 0.3em 1px;
    border-bottom   : 1px solid #333;
    background-image : url("画像のurl");
    background-repeat : no-repeat;
    background-position : left top;
    font-size       : 130%;
    font-weight     : bold;
}

さらに、このなかの、

    background-image : url("画像のurl");
    background-repeat : no-repeat;
    background-position : left top;

という部分を使いたい画像にあわせて適宜変更してください。

全体の文字色を変更する@Daylight

★対象テンプレート：Daylight
ここでは、基本の文字色（リンクや見出し以外のテキストの色）を変更する方法を紹介します。

スタイルシートから、

/*────────────────────────────────────────
 ■ ページ全体の設定
        ページ全体に適用するスタイルを設定しています。
────────────────────────────────────────*/
body {
    margin          : 0;
    padding         : 0 2.5em;
    background-color    : #fff;
    line-height     : 1.4;
    color           : #999;
    font-family     : "Verdana",　"MS UI Gothic",　"Osaka",　sans-serif;
    font-weight     : normal;
    font-size       : 85%;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/daylight-background.png");
    background-repeat   : repeat-x;
    background-position : left top;
    
    /*　for IE5　*/
    text-align      : center;
}

という記述を探してください。この中の、「color : #999;」という部分によって、基本の文字色が設定されています。#999;を変更してください。

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;
}