忍者ブログ
28 March

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

26 August

WPカスタムメニューヘッダーメニュードロップダウンメニュー デザイン

https://thewppress.com/libraries/implement-submenu-as-dropdown-list-on-the-navigation/

一部上記ありがたいコードをコピペ
menuをheader_menu_wrap で囲っておけばとりあえず形になる


.header_menu_wrap .menu{
display: flex;
       justify-content: flex-end;
    flex-wrap: wrap;
text-align:center;
 
}   
.header_menu_wrap .menu li a{
display:block;
color:#000;
padding:10px 15px;
}
/* サブメニューをabsoluteにするため、親メニューをrelativeに */
.menu-item-has-children {
  position: relative;
}
/* 親メニューにマウスオーバーしたときにカーソルを変更 */
.menu-item-has-children:hover {
  cursor: pointer;
}
/* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */
.menu-item-has-children:hover .sub-menu {
  display: block;
}
/* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: white;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  padding: 0;
}
/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
.sub-menu > .menu-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
/* サブニューのリンクタグをmenu-itemの大きさと合わせ、クリックしやすいようにした */
.sub-menu > .menu-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: .5em 0;
}
/* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */
.sub-menu > .menu-item a:hover {
  background: black;
  color: white;
}
PR
22 August

文字を縦書きにしたい

   -ms-writing-mode: tb-rl; /* for IE */
    writing-mode: vertical-rl;


IE11はプレフィックスをつけないと効かない
まじしねよ
13 July

cf7 メールアドレス確認 をつけたい

ありがたいコードを引用する
https://taroken.org/wordpress-contact-form-7-mail-address-confirm/


// コンタクトフォームのメアド再入力
function wpcf7_main_validation_filter( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        if (method_exists($result, 'invalidate')) {
          $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
      } else {
          $result['valid'] = false;
          $result['reason'][$name] = '確認用のメールアドレスが一致していません';
        }
      }
    }
  }
  return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );
10 July

カウントアップするプラグイン

https://github.com/ciromattia/jquery.counterup
デモ
http://ciromattia.github.io/jquery.counterup/demo/index.html


条件
整数、小数点、どちらが含んでも可能

検索すると出てきたやつがなんか動かないかなんかだったので、もっと調べてみると新しいものがでていた。名称がノーマル過ぎるしもっとオリジナリティのある名前つけてくんないかねー
調べても情報をみつけにくい

※ただこれは「waypoints」でスクロール位置から動作するようになっていた。
これやったときwaypointsの数値変えてやったか、waypointsやめてinviewのjqueryにしたか思い出せない…




検索するとカウントアップはいろいろでてくる
日本人が作った簡単そうなやつ入れてみたが、整数と小数点を混合して使えなかった
ちゃんとjqueryプラグインとして配布してるやつじゃないと、そこまで対応していない