前回からの続きです
目次
メディアクエリでそれぞれ指定したのをまとめる。
現状は、
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()
ん？リンクでなぜこうでる？
次に、スライダーを修正
Swiper
だが、今回はbxsliderのままで、
記事一覧の見出しを整える
次に
