【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/

追尾するお問い合わせボタン

参考サイト

  • toastrサイトからzipをダウンロード
  • zip解凍して、フォルダ名をtoastrに変更
  • フォルダごと子テーマ直下にコピー
  • 以下のJavaScript(jsファイル)を作成
jQuery(document).ready(function() {
    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-bottom-right",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "0",
      "extendedTimeOut": "0",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }

    toastr.info('<br />お問い合わせ','', 
        {onclick: function() {window.open( "http://usort.jp/contact/", "_blank")}}
    );
  });
  • 子テーマにjsフォルダを作成して上記jsファイルをコピー
  • 子テーマのFunction.phpに以下追記
// toastr jsとCSSを読み込む
function my_scripts_toastr() {
    wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
    wp_enqueue_script( 'toast', get_bloginfo('stylesheet_directory') . '/js/toastr.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_toastr' );

function my_styles_toastr() {
    wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles_toastr' );
  • style.cssに以下を追記
/* toastrのinfoを縦表示させる */
#toast-container > div {
    width:70px;
    text-align:center;
    font-size: 16px;
}
#toast-container > .toast-info {
  background-image:none !important;
  padding: 15px 20px 15px 20px !important;
}
.toast-close-button {
  font-size: 30px;
}
.toast-bottom-right {
  right: 1px;
  bottom: 60px;
}

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 問い合わせフォームに条件分岐