DIV で BOX を横に並べる
TABLEの代わりにdivを使う
テーブルを使わずに表型表示をしたいとき。テーマがテーブルの属性をのきなみ変えているってことはショッチュウある。
これのたいさくとして DIV タグで並べる。
横に並べるのは、css の float を使います。
float:left; /* 左に詰めてくれ */ float:right; /* 右に詰めてくれ */
ず~っと並んでいくので・・・
はいここまでぇ~。 が、 style=”clear:both;”ファイヤーフォックスも考慮してこう書いておけばOK.
<br clear="all"><div style="clear:both;"></div>もしくは
<div class="clearfix"></div>
ボックスを上2つ下1つに並べる。
<div style="float:left;"> 左1ブロック </div> <div style="float:left;"> 左2ブロック </div> <div style="clear:both;"> フロートの下のブロック </div>
ファイヤーフォックス対応
ファイヤーフォックスは、clear:both;が効かないので以下のようにします。
<div> <div style="float:left;"> 左1ブロック </div> <div style="float:left;"> 左2ブロック </div> <br clear="all"> </div> <div style="clear:both;"> フロートの下のブロック </div>
WPに 3カラムフッターを付ける
function.php 3カラムフッターを付ける
function.php に以下を追加//--------------------------- if ( function_exists('register_sidebar') ) { //------ (A) ----- register_sidebar(array( 'name' =>'フッター左', 'before_widget' => '<section class="wfooter">', 'after_widget' => '</section>', 'before_title' => '<h3 class="wfooter-title">', 'after_title' => '</h3>', )); register_sidebar(array( 'name' =>'フッター中', 'before_widget' => '<section class="wfooter">', 'after_widget' => '</section>', 'before_title' => '<h3 class="wfooter-title">', 'after_title' => '</h3>', )); register_sidebar(array( 'name' =>'フッター右', 'before_widget' => '<section class="wfooter">', 'after_widget' => '</section>', 'before_title' => '<h3 class="wfooter-title">', 'after_title' => '</h3>', )); //------ (/A) ----- } //---------------------------すでに「if ( function_exists(‘register_sidebar’) ) {」がある場合は、その並びに (A)~(/A)だけを追加
ウィジェットエリアの作成 3カラムフッターを付ける
footer.php (たぶん)に以下を追加。<!-- フッターウィジェット --> <div class="row"> <section class="rowin"> <div class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター左') ) : ?> <?php endif; ?> </div > <div class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター中') ) : ?> <?php endif; ?> </div > <div class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター右') ) : ?> <?php endif; ?> </div > </section> </div><!-- / row --> <br clear="all"><div style="clear:both;"></div> <!-- / フッターウィジェット -->
スタイルシート 3カラムフッターを付ける
style.css に以下を追加。/*------*/ .row{ /* border:1px solid #fff; */ /* text-align:center; */ } .rowin{ margin:10px auto; width:90%; } .third{ width:22%; float:left; padding:0 5%; display:inline-block; vertical-align:top; /* border:1px solid #ff0; */ } .wfooter{ /* background:#ccc; */ } .wfooter-title{ /* font-size:12px; color:#fff; */ } /*------*/
float でなくなる高さを取り戻す
下に続く黄色い箱の手前までを box の塊にしてほしいわけなので、
.box{ background-color:#666; }
とすれば、よさそうなのだけど、実際は、ピンクのボックス部分のみ背景色がつく。
これは、float によって ul のブロックが浮き上がって高さがなくなっているから。
その対策として、以下のようにする。
.box{ background-color:#666; overflow:hidden; }※もしくは overflow:auto
<div id="footer"> <!-- フッターウィジェット --> <div class="rowin"> <ul class="row"> <li class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター左') ) : ?> <?php endif; ?> </li> <li class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター中') ) : ?> <?php endif; ?> </li > <li class="third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('フッター右') ) : ?> <?php endif; ?> </li> </ul><!-- / row --> <!-- / フッターウィジェット --> <div class="layout-978"> <?php //Displaying footer logo ?> <div class="col7 copyright no-margin-left"> <div style="margin:30px 0px;"> <?php if( function_exists( 'simplecatch_footerlogo' ) ) : simplecatch_footerlogo(); endif; ?><?php _e( 'Copyright', 'simplecatch' ); ?> © <?php echo date("Y"); ?> <span><?php bloginfo('name')?></span>. <?php _e( 'All Rights Reserved.', 'simplecatch' ); ?> </div><!-- marign --> </div><!-- .col7 --> <?php //do_action( 'simplecatch_credits' ); ?> </div><!-- .layout-978 --> </div><!-- .rowin --> </div><!-- #footer -->
CSS
.row{ /* border:1px solid #fff; */ /* text-align:center; */ } .rowin{ overflow:hidden; background:#000; padding:10px 10px 30px 0; } .third{ width:22%; float:left; padding:0 5%; display:inline-block; vertical-align:top; } .wfooter{ /* border:1px solid #f00; */ } .wfooter a{ color:#ffffff !important; } .wfooter a:hover{ color:#cccccc !important; } .wfooter-title{ /* font-size:12px; color:#fff; */ }
スポンサーリンク