【kk_3c_line-art】基本的なカスタマイズ

kk_3c_line-artを使用する上で基本的な部分のカスタマイズの仕方を説明します。

日付単位表示に設定する。

管理画面の「環境設定の変更」から「ブログの設定」の「拡張表示設定」で「表示単位」を"1ページ内の表示を日付単位でまとめる"に変更。

日付単位表示の設定を行なうと、1日に複数の記事を投稿した際に記事を囲うジグザグのボーダーが繋がります。

変則3カラム化

左に記事、右にメニュー2カラムにする場合、下記コードの"記事エリア囲み"のfloat: right;をfloat: left;に変更、"メインメニュー囲み"のfloat: left;をfloat: right;に変更します。

右に記事、左にメニュー2カラムの場合、下記コードの"記事エリア＋メインメニュー囲み"のfloat: left;をfloat: right;に変更、"サブメニュー囲み"のfloat: right;をfloat: left;に変更します。

カラム幅の調整

記事エリアの幅を増減する場合、"全体囲み"と"記事エリア囲み"と"記事エリア＋メインメニュー囲み"のwidth: XXXpx;を変更します。記事エリアの幅を10px増やす場合は"全体囲み"と"記事エリア囲み"と"記事エリア＋メインメニュー囲み"のwidth: XXXpx;に10px足します。

メインメニューの幅を増減する場合は"全体囲み"と"メインメニュー囲み"と"記事エリア＋メインメニュー囲み"のwidth: XXXpx;を変更します。メインメニューの幅を10px減らす場合は"全体囲み"と"メインメニュー囲み"と"記事エリア＋メインメニュー囲み"のwidth: XXXpx;に10px引きます。

サブメニューの幅を増減する場合は"全体囲み"と"サブメニュー囲み"のwidth: XXXpx;を変更します。サブメニューの幅を10px減らす場合は"全体囲み"と"サブメニュー囲み"のwidth: XXXpx;に10px引きます。

また記事エリアやメインメニュー、サブメニューのジグザグボーダーの左部分及び右部分の幅を増減する場合も同様に変更します。記事エリアのジグザグボーダー左部分を2px増やす場合は"全体囲み"と"記事エリア囲み"と"記事エリア＋メインメニュー囲み"のwidth: XXXpx;に2px足します。

/* ブログ構成ボックス
=========================================================== */
/* 全体囲み */
div#blogbase{
width: 934px;
background: #FFF none repeat scroll 0%;
margin: 0pt auto;
text-align: left;
}
div#baseinner{padding: 0 10px;}

/* 記事エリア＋メインメニュー＋サブメニュー囲み */
div#layout_three_column{
margin: 0 0 1.7em;
}

/* 記事エリア＋メインメニュー囲み */
div#layout_two_column{
width: 710px;
float: left;
}

/* 記事エリア囲み */
div#layout_entry{
width: 506px;
float: right;
overflow:hidden;
}

/* メインメニュー囲み */
div#layout_main_menu{
width: 184px;
float: left;
overflow:hidden;
}

/* サブメニュー囲み */
div#layout_sub_menu{
width: 184px;
float: right;
overflow:hidden;
}

ジグザグボーダーの向き（S字・逆S字）変更

下記コードの右部分及び左部分を変更します。
記事エリアのジグザグボーダーの向きを変える場合は"記事エリア"の"ジグザグ右部分"のborder-rightをborder-leftに、"ジグザグ左部分"のborder-leftをborder-rightに変更します。

メインメニューやサブメニューも同様に右部分及び左部分を変更すればボーダーの向きが変わります。また#XXXXXXの部分をお好きなカラーコードに変更する事でボーダー色を変えれます。

/* ジグザグボーダー構成
=========================================================== */

/* 記事エリア
----------------------------------------------------------- */
/* カラーコード変更でお好きな色に（デフォルト#B35000） */
/* ジグザグ上部分 */
h2.entry_date,h2.titlelist_name,
h2#edit_title{border-top: 3px solid #B35000;}

/* ジグザグ右部分 */
.entry_content,.trackback_inner,.comment_inner,
.form,.titlelist_body{border-right: 6px solid #B35000;}

/* ジグザグ下部分 */
h2.entry_title,h2.titlelist_title,
div#trackback_area h3,div#comment_area h3,div#edit_area h3,
.entry_content,.trackback_inner,.comment_inner,.form,.titlelist_body,
h2#edit_title{border-bottom: 3px solid #B35000;}

/* ジグザグ左部分 */
h2.entry_date,h2.titlelist_name,
h2.entry_title,h2.titlelist_title,
div#trackback_area h3,div#comment_area h3,div#edit_area h3,
h2#edit_title{border-left: 6px solid #B35000;}


/* メニューエリア
----------------------------------------------------------- */
/* カラーコード変更でお好きな色に（デフォルト#FF9D00） */
/* ジグザグ上部分(メイン・サブ共通) */
div#header,div#yoko_calendar{border-bottom: 2px solid #FF9D00;}

/* メインメニュー
----------------------------------------------------------- */
/* ジグザグ右部分 */
.main_menu_inner{border-right: 4px solid #FF9D00;}

/* ジグザグ下部分 */
h2.mainplug,.main_menu_inner{border-bottom: 2px solid #FF9D00;}

/* ジグザグ左部分 */
h2.mainplug{border-left: 4px solid #FF9D00;}

/* サブメニュー
----------------------------------------------------------- */
/* ジグザグ右部分 */
h2.subplug{border-right: 4px solid #FF9D00;}

/* ジグザグ下部分 */
h2.subplug,.sub_menu_inner{border-bottom: 2px solid #FF9D00;}

/* ジグザグ左部分 */
.sub_menu_inner{border-left: 4px solid #FF9D00;}

その他、質問や不具合の報告等ありましたらお気軽にコメントください。