度々ごめんなさい。Snowdance更新です。

Snowdance2.23をSnowdance2.3にアップデートです。
IE6～7に対して、カラム幅変更のカスタマイズが適用されない不具合を修正しました。

カスタマイズ等の理由によりテンプレートの更新が難しい方は以下の編集を行ってください。

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

/*[3.1-b:for IE5-IE7]*/
.lt-ie8 #header {
  width : 49.5%;
}

この部分を削除してください。

[ Close ]

Snowdance修正です(ノ∀｀)

Snowdance2.22をSnowdance2.23にアップデートです。
スタイルシート中のコメントの一部が間違っていました。

簡易カスタマイズ項目内、【カラム幅の変更】の中にある、

/* [4]：「75%」の部分を、「(100% - B1の値)/2」の値に変更*/

この部分を次のように修正しました。

/* [4]：「75%」の部分を、「100% - (B2の値)/2」の値に変更*/


まさかの計算式間違い(ノ∀｀)

snowdanceのカラム幅編集について

snowdanceのカラム配置は特殊なため、カラムの幅を編集する時には編集箇所がちょっと多くなってしまいます。構造を把握していないと大変かと思うので、編集方法について紹介させていただきます。
※snowdance2.2以降は、簡易カスタマイズ項目内に記述をまとめてあります。

なお、記事側のカラムを「メインカラム」、タイトルとサブメニュー側のカラムを「サブカラム」と表記します。



ここでは例として、メインカラムとサブカラムを6:4の割合で表示するようにしてみます。つまり、メインカラムが60%、サブカラムが40%。

■サブカラム
まず、サブカラム側のサイズを変更します。編集箇所は、以下の下線が引かれている部分になります。ナンバリングを参考にすると編集箇所が探しやすいかと思います。

/*[3.1]*/
#header {
  width : 50%;
  *width : 49.5%;
  background-position : 50% 50%;
  background-repeat : no-repeat;
  text-align : center;
}

/*[15.1]*/
#sub {
  padding-top : 1.5em;
  width : 50%;
  *width : 49.5%;
  color : #fff;
  background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/snowdance_title_border-y.gif");
  background-repeat : repeat-y;
  background-color : #000;
}

アスタリスク（*←これ）がついていないwidthの値を、50%から40%に変更します。
アスタリスクがついているwidthの値は、(上の値-0.5)%にします。つまり、今回の例では39.5%です。
サブカラムは変更箇所が「/*[3.1]*/ #header」と「/*[15.1]*/ #sub」の2ヵ所ありますので、どちらも同じように変更してください。


■メインカラム
次に、メインカラム側のサイズを変更します。

/*[4.1]*/
#main {
  width : 50%;
  *width : 50.4%;
  overflow : hidden;
}

アスタリスクがついていないwidthの値を、50%から60%に変更します。
アスタリスクがついているwidthの値は、(上の値+0.4)%にします。つまり、ここでは60.4%になります。


アスタリスクのついていないwidthの値は、メインカラム側とサブカラム側でぴったり100%になるようにしてください。こちらのwidthの値を指定するときは、小数点以下の数値を使わない方が良いかと思います。


■プラグインの横並び解除
なお、初期の設定ではプラグイン1とプラグイン2・3が横並びになっているため、サブカラムの幅を狭くするとプラグインの表示領域はより狭くなってしまいます。
サブカラムの幅を狭くする場合は、プラグインとプラグイン2・3の横並びを解除すると良いでしょう。
解除するには、以下の記述をスタイルシートの最後尾に追加してください。

#plugin1 ,
#plugin23 {
 width : 100%; float : none;
}

■ローディングアニメーションの位置変更
また、このままだとタイトル画像を読み込んでいる際に表示されるアニメーションの表示位置がちょっとずれている（変更後の幅によってはいつまでも表示され続けることもあります）ので、見栄えにこだわる方はコレに関しても編集してみましょう。
編集箇所は以下の下線が引かれている部分になります。（ナンバリングはされていません。スタイルシートの上部あたりに記述されています。）

/* ■■ カラムシフト設定 ■■
───────────────────────────────────────
カラムの配置を逆にしたい場合は、HTMLの編集から【 ▼カラム配置の設定 】という
箇所を検索し、クラス名（「class="～"」 の～部分）を変更してください。*/

/* この部分はカスタマイズ非推奨 */
.shift-off { background-position : 75% 300px;}
.shift-off div#header {float:right;}
.shift-off div.header-container {background-position:left bottom;padding:0 0 0 1px;}
.shift-off div#main {float:left;}
.shift-off div#sub {float:right;background-position:left top;}
.shift-on {background-position : 25% 300px;}
.shift-on div#header { float:left; }
.shift-on div.header-container {background-position:right bottom;padding:0 1px 0 0;}
.shift-on div#main {float:right;}
.shift-on div#sub {float:left;background-position:right top;}
/* この部分はカスタマイズ非推奨 */

カスタマイズ非推奨と書いてありますが、ガンガン変更しちゃいます。
下線が2カ所に引いてありますが、カラムを初期状態で使用している場合は上側を、逆にして使っている場合には下側を編集します。


初期状態で使用している場合は、上側の下線部中の「75%」という値を編集することになります。
変更後の値は、｛[メインカラムの幅]+（[サブカラム幅]/2）｝% です。
今回の例ではメインカラムを60%、サブカラムを40%に変更しているので、[60 + （40 / 2）]% = 80% ということになります。

カラムを逆にしている場合は、「25%」という値を、（[サブカラム幅]/2）%にします。ということで、今回の例では20%になります。


■ 以下、技術的情報
アスタリスクがついたプロパティはIE7以下用のCSSハック（通称アスタリスクハック）です。IE6以下に使えるアンダースコアハックは結構有名ですが、アスタリスクハックはIE7でも修正されなかったため、IE7以下につかえるハックの一つとなっています。なお、アンダースコアハック同様、仕様上は存在しないプロパティを使うのでCSS Validatorは通りません。Validじゃなきゃ嫌だという方はごめんなさい。ここでは管理の容易さを考えてハックを使う方をえらびました。

IE7以下には、二つのボックスをfloatで並べるときに二つのボックスのwidthが足して100%になる場合、表示幅によっては片方のボックスが下に落ちてしまうという不具合があります。今回はその対策として、アスタリスクハックを用いたwidthプロパティと、小数点以下のパーセンテージを使いました。

snowdance

クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : snowdance
最新バージョン : 2.4

更新履歴 - Update history

09/10/08 : 2.3→2.4

[Modify] 全記事一覧表示に対応

[Modify] 「前後の記事へのリンク部分」のスタイル変更

[Modify] プラグイン3の出力方法を変更

[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応

[Modify] 簡易カスタマイズ一部改良

[Modify] pre、hrなどのデフォルトスタイル変更

09/08/01 : 2.23→2.3

[Bug Fix] カラム幅調整用カスタマイズのミス修正

09/07/20 : 2.22→2.23

[Bug Fix] 簡易カスタマイズ項目内のコメントミス修正
（軽微な更新のため、更新通知はしておりません）

09/07/05 : 2.21→2.22

[Modify] 簡易カスタマイズ項目に「プラグインカラムの横並び解除」を追加
（軽微な更新のため、更新通知はしておりません）

09/07/04 : 2.2→2.21

[Bug Fix] 独自クラスのスタイル指定を修正
（軽微な更新のため、更新通知はしておりません）

09/07/02 : 2.1.0→2.2

[Bug Fix] 追記スクリプト仕様変更など。

[Modify] IE8用の微調整

[Modify] 独自クラス追加

09/03/30 : 2.0.0→2.1.0

[Bug Fix] HTMLの記述ミス修正

※フッター部などにバージョン表記がされていないテンプレートは、ver.2.0.0より古いものになっております。

白の季節へ。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（snowdance 2.2以降）。ご了承ください。

★ テンプレート更新通知機能つき

更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

• カラムの幅の割合を変更する ※ver2.1.0以下
  ↑プラグインを一列で表示させる方法もこの記事中に載せてあります
• タイトル画像をランダムで変更させる

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
（バージョンによって項目に多少差があります）

• フォントの設定（ver.2.4以上）
  • 基本となるフォント
  • ブログタイトルのフォント
• フォントサイズの変更
  • 全体の文字サイズ（ver.2.4以上）
  • タイトルエリアの文字サイズ（ver.2.4で廃止）
  • タイトルの文字サイズ（ver.2.4以上）
  • ブログ紹介文の文字サイズ（ver.2.4以上）
  • メインカラムの文字サイズ
  • 記事の本文の文字サイズ
  • サブカラムの文字サイズ
• 文字色の変更
  • 基本となる文字色（ver.2.4で廃止）
  • タイトル部分の文字色（ver.2.4で廃止）
  • 記事の文字色（ver.2.4以上）
  • ブログタイトルの文字色（ver.2.4以上）
  • ブログ紹介文の文字色（ver.2.4以上）
  • サブカラムの文字色
• 背景色の変更
  • メインカラムの背景色
  • サブカラムの背景色
• カラム幅の変更
• プラグインの横並び設定
• 記事中の画像に枠をつける
• タイトル部分の設定
  • 画像の差し替え
  • 画像の縦幅の調整
  • ブログタイトル・ブログ紹介文の表示位置の調整
• 幅可変／固定の切り替え
• カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。

1.要素の回り込み

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ（スタイルシート上部、簡易カスタマイズ内に項目があります）と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像

"Snow Magic" / katmere (Flickr)

HTML・CSS

"snowdance" / rimse

[ Close ]