max-widthをリセットする

admin コメントをする

レスポンシブ構築の時など、PC用にmax-widthを使用した時、スマホではmax-widthリセットをしたい場合、
『auto』を指定しただけでは、効果はないので、以下のようなセレクタを設定します。

.test{
max-width:initial;
}

各属性を初期値に戻すことのできる「initial」を設定します。

幅を固定せず、ブロックの中央寄せ

admin コメントをする

display:inline-blockなら可変幅で、内包する要素にtext-align:centerを指定することで、中央寄せすることもできます。ですが、改行されないので、要素を中央寄せして縦に並べようとしたのに、幅によっては横に並んでしまうことがあります。

そこで、可変幅にしつつ、改行が入るようにするためにdisplay:tableを使います。

.test {
display: table;
margin:0 auto;
}

条件に一致しないと適用

admin コメントをする

条件に一致しない時にスタイルを適用したい時、否定疑似クラス:not()を使用すると便利です。not(h2)で指定すると、bodyにも「h2以外」が適用されてしまうので、クラス名をつけて詳細まで指定します。

.header :not(h2) {background: green;}

border の幅分ボックスからはみ出たときの対処

admin コメントをする

cssでのボックスの幅は width と padding と border-width の合計となります。
width : 250px;
padding 20px;
border-width : 20px;
実際の幅は330px

box-sizing:border-box を指定すると
width に書いた値が padding,border-width を含んだものになるのでwidth:250px;となります。

レスポンシブの際に横幅100%にすることが多い時
width: 100%;
height: auto;
この場合にborderを指定するとはみ出てしまいますが、box-sizing:border-box ではみ出し防止になります。

WP:アイキャッチ画像の有効化

admin コメントをする

アイキャッチ画像を使用するには、functions.php に下記のコードを追加しましょう。

/**
 * アイキャッチ画像の有効化
 *
 */
add_theme_support( 'post-thumbnails' );

有効化されると、投稿ページ右下にアイキャッチ画像の設定項目が表示されます。

テーマ内でアイキャッチ画像を表示させるには、下記のコードをテンプレートファイルに記述しましょう。

<?php if ( has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>

表示サイズについては下記を参照

the_post_thumbnail( 'thumbnail' ); // サムネイル (デフォルトでは 150x150px)
the_post_thumbnail( 'medium' );    // 中サイズ   (デフォルトでは 300x300px)
the_post_thumbnail( 'large' );     // 大サイズ   (デフォルトでは 640x640px)
the_post_thumbnail( 'full' );      // フルサイズ (アップロードした画像の元サイズ)

classを追加する場合は

<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'クラス名' ) ); ?>

テキストにマーカーをつける

admin コメントをする

文字の強調に。使い方によっては分かりやすく、おしゃれになります。
■css
.test{
background:linear-gradient(transparent 50%, #660000 50%);
}

linear-gradient(transparent 開始位置, 色の指定 終了位置);と設定でき、開始位置と終了位置の数値が離れるほどぼかしがかかる感じになります。

clearfixの使い方

admin コメントをする

floatさせている画像やボックスなどの要素を内包する親要素が子要素を包んでくれない場合に、
clear:bothをクラス指定したりoverflow:hiddenを使用したと思いますが、これを解決してくれるのがclearfixです。

.clearfix:after {
content: “.”;
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}

.clearfix {
display: inline-block;
}