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

  • 2017年6月20日
  • 2017年7月17日
  • WordPress
  • 71view


前回からの続きです

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

現状は、
style.css、base.css、それとメディアクエリ分の 4つの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のままで、

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

 

次に

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG