AN(tcd014)でメインカラムの枠の色を変更する方法

カラムの枠線の色を変更する

AN(tcd014)で、メインカラムの枠の色を変更する方法です。デフォルトの色はグレー(#ccc)が使われていて、上部の枠だけ少し太くなっています。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

変更するファイルは、style_pc.css です。/* layout */ の部分の #main_col と書かれているところを変更します。

変更前

/* layout */
#contents { width:992px; margin:0 auto 30px; }
#main_col { width:678px; float:right; background:#fff; border:1px solid #ccc; border-top:6px solid #ccc; margin:16px 0 0 0; }
#side_col { float:left; width:300px; margin:16px 0 0 0; clear:left; }
#main_col2 { width:800px; background:#fff; border:1px solid #ccc; border-top:6px solid #ccc; margin:16px auto 0 auto; }

変更後

/* layout */
#contents { width:992px; margin:0 auto 30px; }
#main_col { width:678px; float:right; background:#fff; border:1px solid #eebbcb; border-top:6px solid #eebbcb; margin:16px 0 0 0; }
#side_col { float:left; width:300px; margin:16px 0 0 0; clear:left; }
#main_col2 { width:800px; background:#fff; border:1px solid #eebbcb; border-top:6px solid #eebbcb; margin:16px auto 0 auto; }

border に指定されている色を、お好きな色に変更してください。上部の枠は、border-top に指定されている色を変更してください。

#main_col は、2カラムのページで、#main_col2 は、1カラムのページで使われます。もし、1カラムのページを使われている場合は、#main_col2 の border も変更してください。

また、スマホで表示された時は、メインカラムの枠は表示されませんので、style_sp.cssを変更する必要はありません。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (2)
    • 沢田
    • 2015年 2月 24日

    まりー様

    ANのカスタマイズの記事、すごく参考にさせてもらっています。
    他に詳しい情報を書いているブログもないので、とても助かります。

    もし可能でしたら、グローバルメニューとその下の灰色の部分の
    色を変更する方法も、いつか記事にして頂けませんか?

    沢田

      • まりー
      • 2015年 2月 24日

      沢田さん、こんにちは。
      コメントありがとうございます♪

      グローバルメニューと、その下の背景色ですね。
      こちらは、記事にするつもりで、
      予定は組んでます(・∀・)

      私、のんびり屋なので、
      ちょっと気長に待っていただけると嬉しいです(笑)

      2015.3.9 追記
      グローバルメニューやスライダーの背景をカスタマイズする方法を公開しました。
      よければご覧になってください♪
      AN(tcd014)のグローバルメニューやスライダーの背景などをカスタマイズする

サイト内検索

おすすめ記事

ページ上部へ戻る