WordPressカスタマイズ　その2 | WordPressをBootStrap化する為の注意点2　〜コーディング編１〜

WordPressでBootStrapをコーディングする前にCSSを上書きする。そう、フレームワークのCSSを直すなら上書きがマストです。

前回はBootStrapをWordPressで機能させるための初期設定編をお送りしました。

 

WordPressカスタマイズ　その1 | WordPressをBootStrap化する為の注意点　〜初期設定編〜

 

内容は長いだけのクドクド小言を言う親父の様になってしまいましたがｗ、第一歩的には十分でしたでしょうか・・・。

 

 

CSSフレームワークの最高峰と言われたBootStrapにも弱点はあったのか！！？

さて、まず始めに私的にですがBootStrapのCSSで厄介なモノがあります。

それは標準で組み込まれているmargin設定です。

 

 

.container {
 margin-right: auto;
 margin-left: auto;
 padding-left: 15px;
 padding-right: 15px;
}
.row {
 margin-left: -15px;
 margin-right: -15px;
}

.col-xs-1...（全てのカラム）..., .col-lg-24 {
 padding-left: 15px;
 padding-right: 15px;
}

 

このCSSを見て頂ければわかりますが、「container」「col-」で左右のpaddingを相殺しあっています。

なのですが、「row」でmarginがかかっているためスキマが出てしまいます。

 

「何がいけないの？main・sidebarで自動でスキマを作ってくれるじゃ無い！！」と声が聞こえてきそうですがBootStrapのみで完全スマホ化を目指す場合これがかなり厄介な存在になります。

 

「col-」で区切ると数字によりボックス化出来CSSでのfloat処理がいらなくなります。

その場合ボックスの間をmargin処理しますが要らない場合も存在します。

例えばこう言った場合。

 

snsのカウントボタンなのですが、こちらのコーディング例がこれです。

ちなみにsnsカウンターは次のPlug-inを併用しています。

「SNS Count Cache」

参考サイト：ゆめぴょんの知恵「シェア数を高速表示！WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速い」

アイコンは「font-awesome.css」を使用しています。

<div class="col-sm-24 sns">
<aside class="sns-icons">
 <!--ツイートボタン-->
 <div class="col-xs-6">
 <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&amp;text=<?php echo $title_encode ?>&amp;tw_p=tweetbutton" class="lsf-icon" title="twitter" style="background:#00acee"><i class="fa fa-twitter-square fa-lg"></i> ツイッター　<?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?></a>
 </div>
 <!--Facebookいいね！/シェアボタン-->
 <div class="col-xs-6">
 <a href="http://www.facebook.com/sharer.php?src=bm&amp;u=<?php echo $url_encode;?>&amp;t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" style="background:#4561b0" class="lsf-icon" title="facebook"><i class="fa fa-facebook-square fa-lg"></i> Facebook　<?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></a>
 </div>
 <div class="col-xs-6">
 <!--Google+1ボタン-->
 <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;" class="lsf-icon" title="google" style="background:#dd4b30"><i class="fa fa-google-plus-square fa-lg"></i> Google+　<?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></a>
 </div>
 <div class="col-xs-6">
 <!--はてブボタン-->
 <a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" class="lsf-icon" title="hatenabookmark" style="background:#00a4de"><i class="fa fa-bold fa-lg"></i> はてブ　<?php if(function_exists('get_scc_hatebu')) echo (get_scc_hatebu()==0)?'':get_scc_hatebu(); ?></a>
 </div>
</aside>
<div class="clearfix"></div>
</div>

各ボタンをカラムで区切っています。

 

col-xs-6なのでスマホまで同じ横並びのボタンを1列表示出来る様になります。

前回説明したとおりカラムを24列にしているからですね。

スマホの場合こうなります。

 

お分かりのようにスキマを無くしています。

最近流行っていたフラットデザインですが、ボタンを並べると言う処理をするときにこの標準marginが邪魔になるわけです。

この処理を各section・contentごとにやっているとcss記述量が半端なくなってきます。

なのでこういう上書き処理を致します。

 

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16, .col-xs-17, .col-sm-17, .col-md-17, .col-lg-17, .col-xs-18, .col-sm-18, .col-md-18, .col-lg-18, .col-xs-19, .col-sm-19, .col-md-19, .col-lg-19, .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xs-21, .col-sm-21, .col-md-21, .col-lg-21, .col-xs-22, .col-sm-22, .col-md-22, .col-lg-22, .col-xs-23, .col-sm-23, .col-md-23, .col-lg-23, .col-xs-24, .col-sm-24, .col-md-24, .col-lg-24 {
 padding-left: 0;
 padding-right: 0;
}

CSSカスタマイズでやれば良いのですが、結構ややこしいのでstyle.cssで上書きしました。

しかし長いなあと言われる方はBootStrapカスタマイズからチャレンジしてみて下さい。

Customize and download

[browser-shot url=”http://getbootstrap.com/customize/” width=”300px” target=”_blank”]

 

 

こうすることでfloat処理する事がほとんどなく、すでにclearfixがされているのでclear:both処理も要らないわけです。

どうしてもpadding処理する場合は通常のcss記述を施せば良いだけと言う事です。

 

メインコンテンツとサイドバーはこう処理すれば良い感じになる

例えば「mainContent」と「sidebar」の場合はこうなります。

 

緑の部分が「padding:20px;」している部分です。

この場合「col-md-8」だと367pxあるのですが、sidebarが「width:347px」なのでちょうど20px動かしてやれば右端に来る訳ですね。

 

ついでの説明になりますが、「col-sm-24」を同時にclassに記述しているのですが、これはsm領域＝タブレット縦表示になると言う事です。

 

この様にサイドバーが右側から無くなり、mainContentの下層に移動します。

 

Menu部分のカスタマイズはこうだ！スマホでメガナビ、PCドロップダウンMenuはホバーで処理！

何故タブレットの縦持ちの時にスマホ表示にしたのか！！？　ビックリスマホ用Menuを用意しております！

タブレットと言っても縦持ちするとフリックするアクセスがかなり難しくなるとは思いませんか？

私はiPadを持ってサイトを見るときは両手持ちなので親指がどちらかでアクセス出来る横持ちが基本です。

縦持ちをするときに表示領域が全体見えるのは良いのですが重すぎて片手では持てません。

なのでスマホ表示にしてみました。

 

スマホ表示の時はheaderMenuを消しています。

でも当サイトでは画面下層に大きなボタンを設置しています。

 

下層に見える黒色3本バーのボタンです。

クリックするとアニメーション付きでこうなります。

 

スマホ用に設置したMenuです。

ここでもBootStrap標準のアコーディオンを使用しほとんど全てのリンクにアクセス出来る様にしております。

プラスfooterのサイトマップ的Menuは無くなっています。

こうすることで上にも下にもスライドしなくても次のMenuにアクセスしやすくしているんですね。

動画でご覧下さい。（３Mbほどあるのでスマホではご遠慮下さい。）

 

 

こう言ったギミックも装備していると楽しいサイトになるかと思ってですねｗ。

プラス機能的な部分はハイエンドになればと思いました。

こちらの紹介はまたの講釈に致します。

 

 

PC用Menuのドロップダウンをホバー使用に変更する。そして、classに.activeをjsで付けてもらう。

結構長くなってきましたが次に移りましょう。

PC用Menuは基本BootStrapのナビゲーションバーを使用しました。

均等にする「justified」を設定し、container幅で均等に表示します。

CSSを上書きしてこの様になりました。

 

リンク先が同じ記述ならclassをactiveにするjs書き込む。

// URLに対してclass activeを付ける
 $(function () {
 var url = $.url();
 host = 'http://'+url.attr('tqs.jp');
 to_link = url.attr('source').replace(host,"");
 $('a[href="'+to_link+'"]').addClass('active');
 // $('a[href="'+to_link+'"]').parent('li').addClass('active');
// a /controller/action/params... の直上li に active class をつける
 });

下の方に記述している「aタグ」に対して上層の「liタグ」に「class=”active”」を付けれるとあったのですが、これが言う事を効きませんでした・・・。

 

どなたか分かる方いらっしゃいますでしょうか？

まだまだ勉強不足でして・・・。

とりあえず「aタグ」には対応したので「class=”active”」を付けて後はCSSでゴニョゴニョします。

 

これはスマホ用Menuにも対応しており、ちょっとだけ分かりやすくなっています。

オレンジのアンダーバーがそれですね。

 

BootStrap標準のドロップダウンをhoverに対応させる

次にBootStrap標準のドロップダウンメニューはクリックしてからMenuが開きます。
やってみたかったのもあるのですが、スマホMenuの使用を決めていたのでスマホクリックが必要ではなかった点です。

そうなるとマウスhoverの方がアクセスがしやすいのです。

と言う事で色々ググりまくって出来る様になりました！

・・・なのですが・・・参考サイトを保存し忘れまして・・・。

で、色々ググりましたが、実は複合体で出来る様になりました。

とりあえずこう言った感じです。

// トップナビドロップダウンをhover処理する
$('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

cssで処理すると紹介していたblogもあったのですが、どうもそれだと言う事を効きませんでした。
で、色々ググって居るとここかなぁってところで・・・。

How to make twitter bootstrap menu dropdown on hover rather than click

ここから拾ったjsを他にも見たかなぁ・・・ってところとで合わせ技ですｗ。
ただドロップダウンの方が良い場合もあるので一概には良い処理とは言えないですが、ギミックが分かりやすくあるのは良い方向と考えています。

後書き

と、かなり長々と記述しておりますが、長すぎるので次回の講釈と致しますｗ。

まだheaderの部分でも説明があるのですが、はい・・・。

 

次回は「コーディング編２」として、header内にある検索窓の処理とスマホとPCのボックス処理を予定します。