nerdspec | 仕事のための個人的なメモ

2021年12月8日

条件分岐

ごく基本的なやつだけメモトップページ

<?php if(is_home() || is_front_page()) : ?>
トップページの表示内容
<?php endif; ?>

<?php if(is_home() || is_front_page()) : ?>

トップページの表示内容

<?php endif; ?>

固定ページ [...

Wordpress

2021年12月7日

画面幅で動画を出し分けたい

画面幅767pxでPC用とSP用の動画を出し分けする時に使いました。 JS [crayon-61b12ceb56da91...

JS

2021年12月7日

YouTubeの埋め込み動画をレスポンシブ化する方法

HTML

<div class="yt_cont">
  <iframe src="https://www.youtube.com/xxxx/xxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
</div>

<div class="yt_cont">

<iframe src="https://www.youtube.com/xxxx/xxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

CSS(SCSS) [crayon-61b1...

CSS

2021年2月17日

pxからvwに（SCSS）

01. _setting.scssなどに下記を記述する $viewportに基準となる画面幅をセット [crayon-6...

CSS

2021年2月15日

Swiper.jsの基本的な使い方

読み込み

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.12.4.min.js"></script> 
<script src="js/swiper/js/swiper.min.js"></script>

<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/jquery-1.12.4.min.js"></script>

<script src="js/swiper/js/swiper.min.js"></script>

HTML [crayon-61b12ceb5...

jquery

2021年1月15日

imgタグのsrcの一部をreplaceする

<img src="{$root}img/xxx.jpg">

1	<img src="{$root}img/xxx.jpg">

を [crayon-61b12ceb57b1d4915...

jquery

2021年1月15日

PHPで指定したファイルやURLを文字列に読み込む

<?php
$file = file_get_contents('https://xxx.xxx/xxx.html');
echo $file;
?>

$file = file_get_contents('https://xxx.xxx/xxx.html');

xxx.htmlが文字列として読み込まれます。

PHP

2020年12月3日

JSでナビゲーションを表示

HTML ナビゲーションを表示したい場所にマークアップ

<section id="inc-header"></section>

1	<section id="inc-header"></section>

...

jquery

2020年12月2日

下スクロールでヘッダ非表示、上スクロールで表示するやつ

JS

$(function () {
	var menuHeight = $("#site-header").height();
	var startPos = 0;
	$(window).scroll(function () {
		var currentPos = $(this).scrollTop();
		if (currentPos > startPos) {
			if ($(window).scrollTop() >= 100) {
				$("#site-header").css("top", "-" + menuHeight + "px");
			}
		} else if (startPos > currentPos) {
			$("#site-header").css("top", 0 + "px");
		}
		startPos = currentPos;
	});
});

$(function () {

var menuHeight = $("#site-header").height();

var startPos = 0;

$(window).scroll(function () {

var currentPos = $(this).scrollTop();

if (currentPos > startPos) {

if ($(window).scrollTop() >= 100) {

$("#site-header").css("top", "-" + menuHeight + "px");

} else if (startPos > currentPos) {

$("#site-header").css("top", 0 + "px");

startPos = currentPos;

CSS [crayon-61b12ceb5841...

jquery

2020年12月2日

imgタグのソースを画面幅に応じて変更する

たとえば、画面幅767px以上でPC用の画像（pc.jpg）を、それ以外でモバイル用画像（sp.jpg）を読み込みたい場...

jquery

2020年11月27日

正規表現で文字列を含む行、文字列を含まない行を選択、置換する(vscode、サクラエディタ)

正規表現全くわからないので勉強になります。正規表現で文字列を含む行、文字列を含まない行を選択、置換する(vscode、...

その他

2020年11月13日

レスポンシブイメージスウィッチャー

画面幅に応じて読み込み画像のファイル名末尾「_pc」「_sp」を付け替えるやつ [crayon-61b12ceb589e...

jquery

2020年11月9日

キーボード設定アシスタントでJIS（日本語キーボード）に識別設定する方法

キーボード設定アシスタントでJIS（日本語キーボード）に識別設定する方法です。下記アプリケーションを起動してJIS、A...

MAC

2020年8月3日

YouTube動画を画面いっぱいに背景として使用できるjqrueryプラグイン

探すと意外と少ないのでお世話になっているものをご紹介です。 jQuery tubular jquery.mb.YTPla...

jquery

2020年7月29日

下スクロールで消えて、上スクロールで表示

See the Pen 下スクロールでフェードアウト上スクロールでフェードイン by nerdspec (@nerdsp...

jquery

2020年6月1日

共通部品のインクルード（jQuery）

読み込むファイル（index.html）

<header></header>

1	<header></header>

JS(jQu...

jquery

2020年5月12日

ナビゲーションのカレント表示【jQuery】

URLのディレクトリ名を取得して指定した要素にカレント用のクラスを付与するやつ。 [crayon-61b12ceb58f...

jquery

2020年5月12日

右クリック禁止

See the Pen 右クリック禁止 by nerdspec (@nerdspec) on CodePen.

jquery

2020年1月9日

iOSのSafariでCSSアニメーションの動きがイマイチな件

iOSのSafari初回読み込み時にCSSアニメーションの動きが変な時があります。時には動かいないときもあります。一...

CSS/jquery

2019年12月26日

CSSでaタグのリンクを無効化する

下記記述でCSSでaタグのリンクを無効化することができます。 [crayon-61b12ceb594f415641933...

CSS