とあるテーマのBootstrap化 その３　分散していたCSSをまとめる

前回からの続きです

メディアクエリでそれぞれ指定したのをまとめる。

現状は、
style.css、base.css、それとメディアクエリ分の ４つのcssがあるので、それぞれ中身を見ながらbootstrapのグリッドにあわせていく。

トップのスライダー部分
これはfront-pageに書いている

if( !st_is_mobile() ){
if ( is_home() || is_front_page() ) : ?>
 <div id="top_slider">
 <div id="top_slider">
 <?php include("top_slider.php"); 
 </div>

など不明な感じで書いてあるので、これをhidden-{prefix} , visible-{prefix}で非表示にしたりする。

<div id="top_slider" class="hidden-xs">
<?php include("top_slider.php"); // トップページスライダー	?>
</div>

header.phpも修正

メガメニューを使ってるので、それもカラムに。
躓いた点として前のCSSの切り替え。
またテストも画像化に。

sr-onlyCSSクラス

●sr-onlyCSSクラス

・ブートストラップでは標準でsr-onlyというCSSクラスを用意し、ブラウザ上には表示されないようにしています。下記のように定義されています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

panel panel-default

以下ちとメモ

Bootstrapで用意されているコンポーネントの説明。
http://bootstrap3-guide.com/compornent/navbar.html

css position:fixedで縦横中央に要素を配置する
http://qiita.com/aosho235/items/33faecdae4d9ca128e5c

初心者でも分かる！モーダルウィンドウの作り方
https://syncer.jp/jquery-modal-window

jQueryで表示・非表示のアニメーション：toggle(), show(), hide()
jQueryで表示・非表示のアニメーション：toggle(), show(), hide()

ん？リンクでなぜこうでる？

jQueryで表示・非表示のアニメーション：toggle(), show(), hide()

次に、スライダーを修正

Swiper
だが、今回はbxsliderのままで、

記事一覧の見出しを整える

次に