前回からの続きです
目次
メディアクエリでそれぞれ指定したのをまとめる。
現状は、
style.css、base.css、それとメディアクエリ分の ４つのcssがあるので、それぞれ中身を見ながらbootstrapのグリッドにあわせていく。
トップのスライダー部分
これはfront-pageに書いている
|
1 2 3 4 5 6 |
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}で非表示にしたりする。
|
1 2 3 |
<div id="top_slider" class="hidden-xs"> <?php include("top_slider.php"); // トップページスライダー ?> </div> |
header.phpも修正
メガメニューを使ってるので、それもカラムに。
躓いた点として前のCSSの切り替え。
またテストも画像化に。
sr-onlyCSSクラス
●sr-onlyCSSクラス
・ブートストラップでは標準でsr-onlyというCSSクラスを用意し、ブラウザ上には表示されないようにしています。下記のように定義されています。
|
1 2 3 4 5 6 7 8 9 10 |
.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()
ん？リンクでなぜこうでる？
次に、スライダーを修正
Swiper
だが、今回はbxsliderのままで、
記事一覧の見出しを整える
次に
