上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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プロパティと、小数点以下のパーセンテージを使いました。
関連記事


コメント

  1. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 17:02 )

  2. rimse | 4HNZ8mMg

    Re: コメント:1番さんへ

    コメントありがとうございます。

    テンプレートなのですが、カスタマイズによって少し構造が崩れてしまっているようです。
    テンプレートのHTMLは閲覧者側ではわからず、出力後のHTMLからの推測になってしまうため不確かではありますが、コメントの表示の部分で、

    <!--<li id="comment<%comment_no>">
    <div class="comment-header">-->
    このようにコメントアウトしていらっしゃいませんか。
    これによって、<div>と</div>の対応関係が崩れてしまい、コメントがつくたびにどんどんレイアウトが崩れていってしまっているようです。ということで、このコメントアウトはしないほうがよろしいかと思います。

    どのように変更をしたかったのか、ソースからでは分かりかねますので、気になるようでしたらコメントやメールなどで連絡いただければと思っております。
    お気軽にどうぞ。

    それでは。

    ( 19:21 [Edit] )

  3. rimse | 4HNZ8mMg

    Re: コメント:1番さんへ(追加)

    追加です。
    タイトルの画像を変更していらっしゃるようですが、実は編集箇所がちょっと間違っているようでした。

    スタイルシートをみると、
    /*[3.2]*/
    .header-container
    の部分を編集していらっしゃったのですが、こちらはタイトル部分の「縦線」を指定しているところなので、ここではなく、スタイルシートの一番上の方にある「■■ タイトル部分の簡易カスタマイズ ■■」の部分から画像を変更していただければと思います。
    細かいところまですみません。

    ( 19:35 [Edit] )

  4. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 22:37 )

  5. kiwami | XMciXXWA

    ありがとうございます。
    お忙しそうですのに丁寧に教えていただいて助かりました。

    さっそく指示通りにしてみました。
    うまくいったように思います。

    斬新的な構造と青い印象的な花の画像にひかれて、こちらを知りました。ブログ内容とのかねあいで、黒ベースのこちらを使わせていただくことにしましたが、個人的にはあちらの方が好みであったりします。機会があれば使わせていただきたいと思っています。

    いろいろお手数かけました。ありがとうございました。

    ( 01:40 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。