nerdspec

Gmailにスパム判定されメールがブロックされる場合の対処法（エックスサーバー編）

エックスサーバーの最新サーバー環境への移行が完了しウェブサイトの表示もいくらか早くなりました。しかし、この日を境にGm...

よく使うCSSアニメーションのショートハンド

よく使うCSSアニメーションのショートハンド。いつも忘れるのでメモしときます。 See the Pen Untitle...

条件分岐

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

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

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

トップページの表示内容

<?php endif; ?>

固定ページ [...

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

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

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-628d...

pxからvwに（SCSS）

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

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-628d4d53a...

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

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

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

を [crayon-628d4d53a46e61126...

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が文字列として読み込まれます。

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

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

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

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

...

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

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-628d4d53a48d...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<header></header>

1	<header></header>

JS(jQu...

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

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

右クリック禁止

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