2021.9.10

jQueryでクリックした要素のテキストを取得する方法

HTML
<div id="display"></div>
<table>
<tbody>
<tr>
<th><p>1</p></th>
<th><p>2</p></th>
<th><p>3</p></th>
</tr>
</tbody>
</table>

jQuery
$('p').on('click' , function() {
var result = $(this).text();
$('#display').append(result);
});

+ 続きを読む
2021.9.10

メディアクエリを指定しているのにスマホで見ると適応されない
PC画面の幅を縮めてみるとうまくレスポンシブするのに
スマホで見るとcssが効いていない…
というときはViewportの設定を確認しましょう。
cssを読み込んでいるhtml内のヘッド部分にこちらの一行を追記すればOK
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

【参照】
https://qiita.com/noraworld/items/10926dfa6c88f3afdbb3

+ 続きを読む
2021.9.8 更新アイコン 2021.9.10

overflow:hiddenが効かない
何の要素がはみ出ているのか、原因を発見できる場合は対処が簡単ですが
たまに全然わからないときがあります。
そんな時に手っ取り早く処理するために
main{
overflow: hidden;
}

とするのですが、それでもうまくいかないときは

main{
overflow: hidden;
position: relative;
}
で解決できます

+ 続きを読む
2021.8.31

jsがうまく動ていないときは、まずjsが読み込まれているのかどうかを確認する。
例えばアラートを出してみるとか
<script>
alert(‘JavaScriptのアラート’);
</script>
うまくいっていないjsの中にこれを記述してみて
もしアラートが表示されるなら、jsは読み込まれているけど記述が間違っているということ。
アラートが表示されなかったらそもそもjsが読み込まれていないので記述以外に問題があると判断できる。

+ 続きを読む
2021.8.13 更新アイコン 2021.8.14

いつも書いてるスムーススクロール

$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var height=$("header").height();
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-height;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});

これだとページ内のスクロールはうまくいかないので

$(document).on('click', 'a[href*="#"]', function() {
let time = 500;
let target = $(this.hash);
if (!target.length) return;
var height=$("header").height();
let targetY = target.offset().top-height;
$('html,body').animate({scrollTop: targetY}, time, 'swing');
return false;
});

こちらに書き換えた

$([href^=”#”])とすることで、href属性が “#” で始まる要素を取得することができる。
$(‘[ 属性 *= “値” ]’)は、指定した属性の値が”値”を含む要素を選択できる。

+ 続きを読む
2021.8.13 更新アイコン 2021.8.14

月別アーカイブの年表記をカスタムする
以下をfunction.phpに記載するとできる

function my_archives_link($html){
$html = str_replace('年','.',$html);
$html = str_replace('月','',$html);
return $html;
}

add_filter(‘get_archives_link’, ‘my_archives_link’);

年 → .
月 → 空
に変換処理している

add_action アクションの追加処理

参照
https://hirashimatakumi.com/blog/60.html

考え方
https://www.javadrive.jp/javascript/function/index2.html

+ 続きを読む