javascript
-
2023/03/28 / javascript
formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
HTMLとform計算 数値を入れる度に、リアルタイムでoutputが変わる。 計算結果 = 入力1 × ラジオボタン1 + 入力2 × ラジオボタン2 <form method="post" oninput=" result...
続きを読む
-
2023/03/21 / javascript
マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
画像を2種類用意する。（後ろに_onをつけたもの。） sample.jpg と sample_on.jpg html <img src="../images/sample.jpg" alt="" class="over...
続きを読む
-
2023/03/15 / 便利ツール
パソコンからInstagram退会
Instagramにログインして下記をクリック。 【注意】誤って削除したくないアカウントを削除しないように。 退会画面 ...
続きを読む
-
2023/03/13 / wordpress設計術
Advanced Custom Fieldsを入れると消えるカスタムフィールドを表示する方法｜wordpress
functions.phpに記載 add_filter('acf/settings/remove_wp_meta_box', '__return_false'); こちらでも可能。functions.phpに記載 fun...
続きを読む
-
2023/02/27 / javascript
querySelectorAllエレメントのhrefをforEachで削除する
wordpressプラグインMetaSliderなどで、左右の矢印をクリックすると、ページのTOPまで戻ってしまうのを解除する記述。 jsファイルに下記を追加 $(function(){ const element1 = doc...
続きを読む
-
2023/02/04 / wordpress設計術
wpカスタム投稿月別アーカイブが404になる時
<?php $args = array( 'show_post_count' => false, //記事数非表示 'echo' => false, 'post_type' => '●●カスタム投稿名（ローマ字）...
続きを読む
-
2022/12/02 / javascript
jQuery,Masonry,imagesloadedで画像を敷き詰める
HTML <div id="grid"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> <div cl...
続きを読む
-
2022/11/28 / javascript
jQueryで特定のページからリンクされた後のページでclassを追加
リンク元の書き方 <a href="http://test.com#link1">リンク</a> リンク先のページのHTML例 <p id="afterlink">リンク後ページ</p> j...
続きを読む
-
2022/11/27 / wordpress設計術
お知らせ等・月ごとに記事をまとめる（jsを使えば開閉可能）サイドナビで使える
<div class="newsside"> <h6>過去のお知らせ</h6> <ul> <?php query_posts( array('posts_per_page'=>...
続きを読む
-
2022/11/14 / CSS関数
scssで変数
.col1fr {width:84px} .col2fr {width:168px} .col3fr {width:252px} .... 100まで記載したくない... そんな時、scssで変数を使う $i: 84px; ...
続きを読む
-
2022/11/12 / javascript
カレンダー
カレンダーのcss <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-...
続きを読む
-
2022/11/11 / javascript
特定の要素を持っていたら（あったら）jQuery
#yousoをクリックしたときに、#yousoが特定のclassを持っていたら... $('#youso').click(function(){ if ($(this).hasClass('open')) { //#yousonoが...
続きを読む
-
2022/11/10 / javascript
スクロールすると上からニョキッと降りてくるメニューjQuery
html <div class="downmenu"> メニューの内容(この枠が降りてくる) </div> jQuery var headNav = $("#downmenu"); $(wi...
続きを読む
-
2022/11/03 / CSS関数
divの中で中央揃え
<div class=container3> <p>この段落… </div> div { height: 10em; position: relative; } p { position: a...
続きを読む
-
2022/11/03 / CSS関数
divなど枠のアスペクト比を保つレスポンシブcss
<div id="fr"> <div id="fr-in">文章</div> </div> #fr { position: relative; width: 100%; } #fr:b...
続きを読む
-
2022/11/03 / CSS関数
表示領域(高さ)のアスペクト比を保つレスポンシブcss
例1 <div> <p>文章</p> </div> div { table-layout: fixed; background-color: #74992e; width: 10...
続きを読む
-
2022/07/29 / html+css
flex基本
HTML <div class="fr"> <div class="fr1"></div> <div class="fr2"></div> <div class="fr3"></...
続きを読む
-
2022/05/20 / wordpress設計術
wpカスタムフィールドに入力した投稿ページのIDの記事を呼び出すWP_Query
カスタムフィールド名前：koumoku 値：3 （例：投稿ページIDを入力しておく） <?php $field_name = 'koumoku'; // カスタムフィールドの名前 $value = post...
続きを読む
-
2022/05/14 / javascript
マウス・マウスホイールで横スクロールするjavascript
jsに下記を記載 $(function() { function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i,...
続きを読む
-
2022/05/14 / javascript
横スクロール要素をマウスホイールで動かせるjavascript
jsに下記を記載 $(function () {$.fn.mycus_hScroll = function (amount) { amount = amount || 120; $(this).bind("DOMMouseSc...
続きを読む
HOME > Tecnical Note
javascript
- Slick Slider滑らかに逆スクロール｜画像の幅が違う
- slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
- slick sliderのサムネイルを縦に流す
- マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら（あったら）jQuery
- スクロールすると上からニョキッと降りてくるメニューjQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション（フェード等）開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript
