javascript
-
2025/10/27 / javascript
Slick Slider滑らかに逆スクロール｜画像の幅が違う
HTML <div class="main-slider"> <div><img src="mainimg1.png" alt="" /></div> <div>&...
続きを読む
-
2025/10/13 / html+css
FOUT (Flash of Unstyled Text) の症状
Adobe Fontを読むと、ブラウザを開いた時に一瞬fontが落ち着かず、その後に指定したフォントになる。開いた瞬間から指定したフォントにする指定。（下記は全てする必要は無し） 非同期読み込みをやめて同期にする jsに ...
続きを読む
-
2025/10/10 / 便利ツール
photoshopを使ってAIで画像背景切り抜き
コンテキストタスクバー ...
続きを読む
-
2025/10/08 / Python
pycacheフォルダと中に user.cpython-313.pycが自動で作られる
__pycache__ フォルダと user.cpython-313.pyc は、Pythonが自動で作ったキャッシュファイルです。Pythonはプログラムを実行するときに、.py ファイル（テキスト）をそのまま読むのではなく、「バイト...
続きを読む
-
2025/10/08 / Python
FastAPIやPython開発・仮想環境（venv）とは
FastAPIやPython開発では「仮想環境（venv）」を作ります。 cd backend python3 -m venv venv これは「プロジェクト専用のPython環境をbackendフォルダ内に作る」という意味で...
続きを読む
-
2025/04/16 / wordpress設計術
Advanced custom field Pro 繰り返し記載
<?php if(have_rows('●●●')): $faq_counter = 1; //カウンタ変数の初期化 ?> <?php while(have_rows('●●●')): the_row();...
続きを読む
-
2025/04/11 / 便利ツール
XDで文字のアウトライン化
文字を選択して command+8 ...
続きを読む
-
2025/04/11 / html+css
【css】テキストを左に揃えて全体を中央よせ
pタグの場合 <div class="fr"> <p> 猫はその愛らしい仕草とふわふわの毛並みで、多くの人の心を癒してくれます。<br> 無邪気に遊んだり、飼い主のそばで眠ったりする姿は見ているだけで幸せな気持...
続きを読む
-
2025/04/11 / html+css
【CSS】テキスト2行目以降を字下げ（インデント）
text-indent: -1em; padding-left: 1em; ...
続きを読む
-
2025/04/05 / html+css
レスポンシブで画像を正方形に維持する
HTML <div class="cont"> <div class="box"> <img src="/img.jpg"> </div> <div class=...
続きを読む
-
2025/02/22 / wordpress設計術
AdoAdvanced Custom Fields のテキストエリアにカウンター
functions.phpに下記を記載 ●●●●はacfの値 function acf_add_character_counter() { ?> <script> document.addE...
続きを読む
-
2025/01/06 / SEOの基本
構造化データ・パンクズとFAQの合体
/body（bodyの終了タグ）より前に入れる。 パンクズとFAQの合体 ●●内を書き換え <script type="application/ld+json"> { "@context": "https://schem...
続きを読む
-
2024/12/15 / javascript
slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
HTMLに記載 HTML側に dir="rtl" という記載が必要 <div class="slider" dir="rtl"> <div></div> <div></div> <div>&...
続きを読む
-
2024/12/13 / wordpress設計術
カテゴリーをパラメーターとして使用するtag.phpを分岐
テンプレートに記載 よく使用されるtagを表示 カテゴリースラッグのパラメーターをworks、column、その他のカテゴリーとして、それぞれのテンプレート（single.phpやcategory.php）に使用頻度の高いtagを呼び出す...
続きを読む
-
2024/12/09 / html+css
before・afterをcssで画像にする
HTML <p class="fvframe">テキスト</p> ::beforeと::afterのアイコン .fvframe::before { content: ' '; display: inlin...
続きを読む
-
2024/12/08 / wordpress設計術
wpカテゴリーcategory.phpとその子、孫カテゴリーページで同じ内容を出力
親のcategory IDが5の時 <?php if(is_category('5') || cat_is_ancestor_of(5, intval(get_query_var('cat')))): ?> カテゴリーで表示さ...
続きを読む
-
2024/06/22 / wordpress設計術
WPでSNSシェアボタンを手動でつける・HTML+PHPコード
X（旧twitter） <a href="https://twitter.com/share?url=<?php echo get_the_permalink();?>&text=<?php echo ge...
続きを読む
-
2024/06/20 / wordpress設計術
category.phpアイキャッチ優先順位
アイキャッチ画像で、投稿記事のアイキャッチが設定してあればアイキャッチ画像 無ければ投稿記事の最初の画像無ければnoimages_01.phpを表示 <?php // アイキャッチ画像があるかどうか...
続きを読む
-
2024/05/23 / html+css
ハンバーガーメニュー・左から出て右へ消える
HTML <div class="panelmenu"></div> CSS .panelmenu { position: fixed; z-index: 2; top: 0; left: 0...
続きを読む
-
2024/05/18 / wordpress設計術
contactform7 Enter・returunキーで送信させない
contactform7 Enter・returunキーで送信させない jsに記載 document.onkeydown = function (event){ if( event.target.tagName == 'INPUT'...
続きを読む
HOME > Tecnical Note
javascript
- slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替える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
