CSS – 今日という日は贈り物

Bootstrapのグリッドシステム

グリッドシステムとは、サイトの割る付けの構成を横12ブロック単位で分割できるように考えられたもので、クラスを col-xs-3 のように指定すると分割できます。

例えば、

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>;
    <div class="col-xs-9 col-xs-offset-3"><div>
  </div>
</div>

<div class="col-xs-3"></div>;

</div>

と、書くと、

col-xs-3で左から3ブロック分と、次のDIVで9ブロック分とるけど、offsetで、スタート位置を左から3ブロックずらしてから9ブロック使いますとなります。

containerで割り付ける領域を指定。rowで行を指定(横に並んだり、ブレークして縦に引っ付いたりする単位)。
containerは固定幅指定で、container-fruidは流動的に変化する。

xsの部分は、作っているWEBサイトがどのような画面サイズの端末からアクセスされることを期待するのかによって以下のように選択します。

	モバイル（768p未満）	タブレット（768px以上、992px未満）	デスクトップ（992px以上、1200px未満）	デスクトップ大画面（1200px以上）
class名接頭辞	.col-xs-	.col-sm-	.col-md-	.col-lg-
横幅ブレークポイント	なし（auto）	750px	970px	1170px

モバイル（768p未満）

タブレット（768px以上、992px未満）

デスクトップ（992px以上、1200px未満）

デスクトップ大画面（1200px以上）

class名接頭辞

.col-xs-

.col-sm-

.col-md-

.col-lg-

横幅ブレークポイント

なし（auto）

750px

970px

1170px

ここに、色々なパターンが紹介されているので、サイト構成をアレンジしてみてね。

wordpressで子テーマ化

デフォルトのフォントが気に入らなかったのと、後いろいろと弄りたい所があったので、放置してましたが、バージョンアップで設定がリセットされるのも面倒なので、いまさらながら、子テーマ化してみました。

子テーマ用のフォルダを作成

mkdir ./wp-content/themes/twentyfifteen4s

1

mkdir ./wp-content/themes/twentyfifteen4s

子テーマ用の上書きスタイルを作成

vi ./wp-content/themes/twentyfifteen4s/style.css
---
/*
Theme Name: twentyfifteen4s
Template: twentyfifteen
*/
@import url('../twentyfifteen/style.css');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: ”メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”HiraKakuPro-W3″,”ＭＳ Ｐゴシック”,”MS PGothic”,Arial, Helvetica,sans-serif;}

vi ./wp-content/themes/twentyfifteen4s/style.css

---

Theme Name: twentyfifteen4s

Template: twentyfifteen

@import url('../twentyfifteen/style.css');

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

font-family: ”メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”HiraKakuPro-W3″,”ＭＳＰゴシック”,”MS PGothic”,Arial, Helvetica,sans-serif;}

functions.php を作成

< ?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

< ?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')

);

}

その他、変更したphpなどがあればコピーしておきます

cp -p ./wp-content/themes/twentyfifteen/content.php \ ./wp-content/themes/twentyfifteen4s/

1
2

cp -p ./wp-content/themes/twentyfifteen/content.php \
./wp-content/themes/twentyfifteen4s/

いつもお世話になっております、4geruさんのサイトを参考にさせて頂きました！

タグ: CSS

Bootstrapのグリッドシステム

Bootstrapのグリッドシステム

いまさら子テーマ化

wordpressで子テーマ化