Tag: スタイルシート


WordPress｜ギャラリーのCSSをカスタマイズ

2017年01月31日 CSS｜wordpress｜画像

まず、元からある、ギャラリー用CSSを使わない設定をします。

 

function.php

//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );

 

CSS

/*-----------------------------
ギャラリー
------------------------------*/
.gallery {
}
.gallery-item {
 float: left;
 margin-top: 0;
 margin-bottom: 20px;
 margin-left: 0;
}
.gallery-icon {
 text-align: center;
}
.gallery-caption {
 color: #21759B;
 font-size: 90%;
 margin: 0;
 text-align: center;
}
.gallery-item img{
 width: 100%;
 padding: 0%;
 margin: 0%;
 float: left;
 height: auto;
}
.gallery-columns-1 .gallery-item {
 width: 100%;
 margin: 0%;
 box-sizing: border-box;
 float: left;
 height: auto;
}
.gallery-columns-2 .gallery-item {
 width: 48%;
 margin: 1%;
 float: left;
 height: auto;
}
.gallery-columns-3 .gallery-item {
 width: 32%;
 margin-left: 1%;
 float: left;
 height: auto;
}
.gallery-columns-4 .gallery-item {
 width: 23%;
 margin: 1%;
 float: left;
 height: auto;
}

 

CSSで タグのリンクを無効化

2017年01月31日 CSS 
a {
pointer-events: none;
}

autoで有効に。

これは便利！box-sizing

2017年01月06日 CSS

「padding」や「border」関係なく、横、縦幅の指定ができます。

今更ですが、これは便利。

 

CSS

 box-sizing: border-box;

 

要素を三等分にするスタイルシート

2016年12月28日 CSS

これは便利！

対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降

.3col {
  width : calc(100% / 3) ;
}

幅100%の3分の1サイズ！

念のため、ベンダープレフィックスを

li.3col {
  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}