注目タグ

テンプレート・プラグイン

トピック詳細

kotori を2カラムから3カラムにしたい。

エンプレート:kotori
を3カラムにする方法を教えてください。

まったく素人ですので、
スタイルシート等、出来る限り詳しくお願いします。

2012年04月06日 13:09  by 

コメント一覧 5件中、1~5件表示

  • シメノのプレビューでは
    ブログの左側にまったく余白がなくて見苦しかったので、アレコレ試していたのですが
    スタイルシートの以下の箇所を変更した際に
    なんとかカラム落ちせずに余白を空けることができました。

    /* Container and Wrapper
    -------------------------------------------------- */
    div#container {
    width : 980px;
    <以下略>


    /* Secondary2
    -------------------------------------------------- */
    div#secondary-column2 {
    float : left;
    width : 220px;
    margin-left : 20px;}


    なお、以下の部分も弄ってます。
    div#header h1 { margin :100px 0 0 140px; }
    div#header p { margin :0 0 0 35px; }

    2012年04月13日 09:16 by 標野ゆき


  • シメノのカスタム例では
    左側に追加したメニューカラムがてっぺんから始まる形になりますが
    画像の幅の半端さを目立たせないためにはこのほうが無難かと考えました。

    ちなみに
    このカスタム例はシメノの環境とシメノの手順で行なったものですので
    他のヒトが別の環境や手順で行なったときには同じように反映されないことがあります。
    なにとぞご理解ください。

    2012年04月12日 22:51 by 標野ゆき

  • 次にスタイルシートの編集です。

    /* Container and Wrapper
    -------------------------------------------------- */
    div#container {
    width : 950px;
    margin-left : auto;
    margin-right : auto;
    background : transparent url(ここにあったURLを削除します) top left rep eat-y #fff;
    text-align : left;
    }
    上記の部分を変更します。



    以下の部分は/* Secondary の下にでも追加してください。
    ホントはtertiary(3番目)にしたほうがスマートなんですが煩雑なので簡単に。
    /* Secondary2
    -------------------------------------------------- */
    div#secondary-column2 {
    float : left;
    width : 200px;
    }
    div#appendix2 {
    width : 180px;
    margin-left : 20px;
    }
    div#secondary-column2 h2 {
    display : none;
    }
    div#secondary-column2 div.section {}
    div#secondary-column2 h3 {
    margin : 0 0 1em 0;
    padding-left : 20px;
    background : transparent url("http://templates.blog.f c2.com/template/kotori/sideicon_05.png") center left no -repeat;
    }



    以下の部分も画像URLを削除します。
    /* Footer
    -------------------------------------------------- */
    div#footer {
    clear : both;
    background : transparent url(ここにあったURLを削除します) bottom cente r no-repeat;
    }

    2012年04月12日 22:36 by 標野ゆき

  • よく似た名前のテンプレートがあったので
    そちらと間違ってお返事申し上げていたようです。
    混乱させてしまって申し訳ありませんでした。
    (間違えたレスは混乱を避けるため削っています)

    正しい方のテンプレートのカスタム例をコメントにつけますね。
    ただこちらのテンプレートだとずいぶん手数が多くなって判り難いうえに
    ちょっと不細工になってしまいますのでゴメンナサイ。

    まずは
    テンプレートHTMLの
    <div id="container"><!-- container --> ;

    <div id="header"><!-- header -->
    の間にプラグインを表示するためのタグを挿入します。

    下のほうから
    <div id="secondary-column2" class=&qu ot;main"><!-- secondary-column2 -->
    <div id="appendix">
    <h2>Appendix2</h2>
    <!--plugin-->
    <!--plugin_second-->
    <中略>
    <!--/plugin_second-->
    <!--plugin_third-->
    <中略>
    <!--/plugin_third-->

    <!--/plugin-->
    </div>
    </div><!-- /secondary-column2 -->

    赤文字の部分を切り取ってきて挿入してください。
    赤文字以外の部分はこのコメントからコピペされて構いません。

    2012年04月12日 22:25 by 標野ゆき

  • 標野さま、ありがとうございました。

    ですが、スタイルシートの下記の部分が特定できません(すみません)
    /* Layout
    ----------------------------------------------------------- - */

    sidemenu2 の表示も見当たりません。

    何段目とかで、お示しいただけないでしょうか?
    お手数をおかけして、申し訳ありませんが、
    よろしくお願いいたします。

    2012年04月12日 21:23 by