WordPressカスタマイズのCSS記述例など
メニューにFont Awesomeを表示
Font Awesomeから使いたいアイコンを選ぶ
メニューの「説明」にショートコード [icon class=”fas fa-home”] を記述
上下中央寄せ
flexboxを使う方法
.container {
display: flex;
justify-content: center;
align-items: center;
}div内での上下中央寄せ
display: table-cell; を追記することで 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
特定ページへのCSS適用
.page-id-2283 .siteHeader {
display:none;
}もしくは「Simple CSS」等のプラグインを使用。
ボタンのリンクを一時的に解除
.comingsoon {
pointer-events: none;
}カラムの比率
.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: ;
}リストを横並びにする
li {
display:inline-block;
padding-right:40px
}マウスカーソルを画像に
.mouseimg {
cursor: url(画像のパス),auto;
}メニューのカスタムリンクを別タブ表示
表示オプションの「リンクターゲット」にチェック
三角形の下向き矢印
.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/
背景色の透明度
background:rgba(255,255,255,0.5)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%; }
}