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

BLOG

ブログ

TIPS

【TIPS】WordPress全般

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

CSS記述

上下中央寄せ

flexboxを使う方法

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

div内での上下中央寄せ

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

div の左右寄せ・中央寄せ

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

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

インライン画像の中央寄せ

.image-1 img {
	vertical-align: middle;
}

参考サイト:https://www.granfairs.com/blog/staff/centering-by-css

カラムの比率

.column1 .wp-block-column:first-child{
	flex-basis:30%;
}

.column1 .wp-block-column:not(first-child){
	flex-basis:35%;
}

リスト

ul

list-style-type: none;
list-style-image: url ( );

li

display: inline-block;

リストイメージ中央揃え

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/

Google関連

Googleカレンダーのスマホ表示

【HTML】

<div class=”cal_wrapper”>
<div class=”googlecal”>
<発行されるGoogleカレンダーのiframeのコード>
</div>
</div>

【CSS】

.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}

.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/* 画面幅が768px以上の場合の縦横比の指定 */

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

地味に便利なプラグイン

Category Order and Taxonomy Terms Order カテゴリー表示順変更

Show Current Template どのファイルを編集しているかがわかる

Contact Form 7 Conditional Fields 問い合わせフォームに条件分岐

関連記事