Categories
HTML+CSS

マウスオーバーで伸びるアンダーライン

ナビゲーションでよく見かけるものです。

transform-origin を left や right に変更すれば動きが変わります。

a{
	color:#333;
	display:inline-block;
	position:relative;
	text-decoration:none;
}
a:before{
	background:#c00;
	content:'';
	height:2px;
	width:100%;
	position:absolute;
	left:0;
	bottom:-3px;
	transform:scale(0,1);
	transform-origin:center;
	transition:.6s;
}
a:hover:before{
	transform:scale(1);
}
Categories
javascript(jQuery) ホームページ制作・作成

input[type=”range”] と jQuery

input[type=”range”] という出番が少ないタグですが、使う機会があったので、色々と忘れないように。

ローンのシミュレーションや自動見積もりなどで使うことがあるかと。

まずは HTML。

<ul>
	<li><input type="number" id="sampleView" name="sampleView" min="0" max="2000" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>

jQuery は次のように。

$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( $(this).val() );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});
});

カンマ区切りにしたい場合、input[type=”number”] ではカンマ区切りができないので、input[type=”text”] として、次を使う。

<ul>
	<li><input type="text" id="sampleView" name="sampleView" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>
$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( addComma( $(this).val() ) );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});

	function addComma(num)
	{
		return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');
	}
});
Categories
HTML+CSS javascript(jQuery) ホームページ制作・作成

ヘッダー固定でページ内リンク

検索すれば多数ヒットするのですが、自分がわすれないために。

ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。

アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。

なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の2通り。

#anchorText{
margin-top:-100px; /* ヘッダーの高さ */
padding-top:100px; /* ヘッダーの高さ */
}

jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。

position = target.offset().top - 100;
Categories
ホームページ制作・作成

ホームページをリニューアル

オフィスのホームページ

1年以上放置していた事務所のホームページをリニューアルしました。

ファーストビューに動画を設置するなど重そうと思いならがも試験的に運営していきたいと考えています。

Categories
WordPress プラグイン ホームページ制作・作成 写真

360度写真を WordPress に

RICOH THETA を購入し早半年。
仕事で使っているのはもちろんのこと、プライベートで撮影した写真も LINE や Facebook にアップして楽しんでおります。

さて、そんな折、WordPress の記事にアップしたことがないことに気が付きました。

但し、そのままアップしてもマウスでぐりぐりといくらやっても動いてくれません。なので、プラグインを探したところ・・・・・あるではないですか! 次のプラグインを早速インストール&有効化。

WP-VR-view – Add Photo Sphere, 360 video to WordPress

でアップした写真は以下。

多摩センター駅前です。2017年11月の撮影。