javascript
-
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...
続きを読む
-
2022/05/14 / 便利ツール
SNSアイコン取得URL｜instagram・twitter・facebook
instagram https://www.facebook.com/brand/resources/instagram/instagram-brand/ twitter https://about.twitter.com/en/w...
続きを読む
-
2022/05/07 / EC-CUBE4
EC-CUBE4にwpの投稿を表示
<script> $(function(){ $.ajax({ type: 'GET', // WP REST APIのURL url: 'https://aute...
続きを読む
-
2022/04/27 / webの知識
Xサーバー/htaccessで特定のページにBasic認証を付ける
.htaccessに下記を記載 DirectoryIndex index.html index.htm index.shtml index.php index.cgi Options -Indexes AuthUserFile /h...
続きを読む
-
2022/04/10 / wordpress設計術
ACFでカラーピッカーを使ってカテゴリーごとに色を付け、TOPページのループ内で表示。styleでbackground-colorを変える
ACFカラーピッカーの表示 ACFでカラーピッカーを使ってカテゴリーごとに色を設定し、TOPページのループ内で表示。 下記、styleでbackground-colorを変える場合 <ul> <?php if ( hav...
続きを読む
-
2022/02/03 / wordpress設計術
CPI UI taxonomy- タームテンプレートのタイトル表示
<?php if ($terms = get_the_terms($post->ID, 'タクソノミー名')) { foreach ( $terms as $term ) { echo...
続きを読む
-
2022/02/03 / wordpress設計術
wordpressのパンクズ（トピックパス）2024年functions.phpとテンプレートに記載
function.php function custom_breadcrumbs() { $delimiter = ' > '; $home = 'トップ'; if (!is_home() &&a...
続きを読む
-
2022/01/31 / html+css
cssでdiv等の要素を正方形に固定（レスポンシブ）
HTML <div id="fr"> <div id="content">中にテキスト</div> </div> css #fr { position: r...
続きを読む
-
2022/01/17 / wordpress設計術
Advanced Custom Fieldsのチェックボックス・ラジオボタンの結果にクラス名を付ける
カスタムフィールド カスタムフィールドの「フィールドタイプ」をチェックボックスまたはラジオボタンにして 選択肢を kn1 : 1級 kn2 : 2級 にする チェックボックスの場合 テンプレート <?php $fi...
続きを読む
-
2022/01/16 / wordpress設計術
singleページのページ送り・通常とカスタム投稿（CPI UI）
通常の投稿ページsingle.phpでの記載 <?php previous_post_link('%link', '« %title', TRUE); ?> <?php next_post_link('%link', '...
続きを読む
-
2022/01/15 / javascript
jqueryとcssでタブ
html <p class="tab_btn active">タブ1</p> <p class="tab_btn">タブ2</p> <p class="tab_btn">タブ3</p> &...
続きを読む
-
2021/12/06 / wordpress設計術
ブラウザ幅を判定して、特定のページをリダイレクトするjavascript
レスポンシブでブラウザ幅を判定して、特定のページをリダイレクト <?php if(is_page(array('●●ページスラッグ●●','●●ページ番号●●','●●ページスラッグ●●'))): ?> <scr...
続きを読む
HOME > Tecnical Note
javascript
- slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- スクロールすると上からニョキッと降りてくるメニューjQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション（フェード等）開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript
