1. HOME
  2. ブログ
  3. TIPS
  4. WordPress全般

BLOG

ブログ

TIPS

WordPress全般

WordPressカスタマイズのCSS記述例

CSS記述

div内での上下中央寄せ

display: table-cel; を追記することで vertical-align が効く

div の左右寄せ・中央寄せ

①ブロック要素にwidthを指定
②marginで指定

左寄せ:margin-right: auto;
中央寄せ:margin-left: auto;  margin-right: auto;
右寄せ:margin-left: auto;

リストイメージ中央揃え

li {
list-style-type: none;
background-image: url ();
background-repeat: no-repeat;
background-position: left center;
padding-left: ;
}

マウスオーバー

【HTML】

<div class="mouse-over">
  <img src="http://demo7.vcre8.work/wp/wp-content/uploads/2021/04/hybrid.jpg" alt="">
  <img src="http://demo7.vcre8.work/wp/wp-content/uploads/2021/05/hybrid2.png" alt="" class="active">
</div>

【CSS】

.laf-hybrid {
	position: relative;
}

.laf-hybrid .active {
	position: absolute;
	left:0;
	top: 0;
	opacity: 0;
	transition: 0.5s;
}

.laf-hybrid:hover .active {
	opacity: 1;
}

メニューのカスタムリンクを別タブ表示

「表示オプション」→「リンクターゲット」にチェック

下向きの矢印

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 30px solid #ccc;
	margin: 10px auto;
}

参考サイト:https://bagelee.com/design/css/css-triangle/

関連記事