IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【JavaScript】ページ上部に自動スクロールするボタンを実装する | HTML JavaScript スクロールボタン

今回は、html,JavaScript(jQuery)でページ上部に自動スクロールするボタンを実装するまでの記事になります。自動スクロールボタン...ページ上部にスクロールする処理...水平方向のスクロール量の保持...スクロールをゆっくりさせる ...スクロールの速度を徐…

【JS】指定数値範囲内の乱数(整数)の取得 | JavaScript | 乱数(random)

JavaScriptで指定数値範囲内の乱数(整数)を取得する 取得したい数の範囲を指定して乱数を取得する関数 function getRandomInt(min, max) { return Math.floor(Math.random() * (max + 1 - min) + min);} 使用例 getRandomInt(最小値,最大値) // Mathオブジェ…

マウスドラッグスクロール 【JS】【jQuery】プラグイン(拡張) | 【JavaScript(jQuery)】スクロールをマウスドラッグで可能にする

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQuery…

【JS】指定時間分処理を待つ sleep処理を実装する - ループ処理で待ち時間(wait)を発生させる

JavaScriptで、 loop処理(for文やwhile文)を実行させることで、他言語にあるsleep処理のような指定時間分処理を止める動作を実装します。1秒間のsleep処理(処理を止める)を実行させる。 var sleepTime=1000; // msecで記述 var now=Date.now(); // 開始時間 …

はてなブログ | 階層化カテゴリー |【手順付き】カテゴリー・パンくずリストを階層化表示にする

当記事は、はてなブログのカテゴリーを階層化するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。 はてなブログのカ…

【JS】ドラッグでHTML要素の位置を移動させる | jQuery | JavaScript ... jQuery拡張(プラグイン)

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡…

記事の目次をサイドバーに表示して記事を読みやすくしよう!| はてなブログカスタマイズ

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。記事が長い場合に効果的です。記事の目次を表示するには、記事編集画面で…

【JS】要素中央の位置(座標)を取得する | JavaScript | jQuery

jQueryでHTML要素の中央位置(座標)を取得します。var left = $(element).offset().left; var top = $(element).offset().top; var width = $(element).width(); var height = $(element).height(); offsetCenterLeft = left+(width/2); offsetCenterTop = to…

【CSS】でiPhoneのスイッチのようなトグルボタンを設置する | CSS+JavaScript | iosスイッチ

CSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

今回も冬をテーマにした画像のパズルです。 とてもきれいな写真で、水面に反射した景色がさらに美しくさせます。 画像の半分が反転しているような形になっているので、想像力が良い方は元の画像が見えてくるかもしれません。 ブラウザで遊べる、脳トレスライ…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

今回も冬をテーマにした画像のパズルです。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 Photo by Aaron Wilson on Unsplash ヒント…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

秋も終わり、冬になり本格的に寒くなってきました。冬と言えば寒さ、雪が思い浮かびます。今回のパズルはそんな冬をテーマにした画像です。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動さ…

カテゴリー別にすべての記事一覧を表示する | 全カテゴリー別記事一覧ページ | はてなブログカスタマイズ

カテゴリー別アーカイブ | 全カテゴリー別記事一覧ページ | サイトマップページ...カスタマイズ概要一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。サイト内記事探索が一つのページで可能になるため…

【パズル】脳トレ ― スライドパズル : Photo by Noah Silliman on Unsplash【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 ヒント:元の画像を見る Photo by Noah Silliman on Unsplash 評価別クリア時間目安 Ex…

【パズル】脳トレ ― スライドパズル Level:7【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、似たようなピースが多くつながりもわかりずらいためかなり難しくなっていると…

虹色に色が変わるアニメーションスタイルの設定 | animation | CSS | HTML

HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。 @keyframes規則を使用することでアニメーションを作成することができます。@keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }@keyframes規則についての詳細は「@keyframes - CS…

【パズル】脳トレ ― スライドパズル Level:6【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、ピースのつながりがわかりずらいため難しくなっています。 ヒント:元の画像を…

【パズル】脳トレ ― スライドパズル Level:5【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 ヒント:元の画像を見る Level:5 Photo by Michael Liao on Unsplash

【パズル】脳トレ ― スライドパズル Level:4【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ヒント:左上にはバツ印が写った画像のピースが入ります。 Level:4

【パズル】脳トレ ― スライドパズル Level:3【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。 前回までとは違い、ピースに番号が振らていないため少し難しくなっています。 Level:3

【パズル】脳トレ ― スライドパズル Level:2 【ブラウザゲーム】

ブラウザで遊ぶことができる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ピースをスライドさせて、左上から右に数字が順番になるように完成させてください。 Level:2

【パズル】脳トレ ー スライドパズル Level:1 【ブラウザゲーム】

ブラウザで遊ぶことができる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ピースをスライドさせて、左上から右に数字が順番になるように完成させてください。 Level:1

【見本あり】ドラッグスクロール可能なリストを1行で実現する -オプションでエンドレススクロールも可能-【jQueryPlugin】| listmousedragscroll.js

JavaScript(js)でマウスドラッグスクロール(mouse drag scroll)が可能なリストを実現する【listmousedragscroll.js】スマートフォンのようになぞるようにしてスクロールができるjQueryPluginです。一行でマウスドラッグによるスクロールが可能なリストが実現…

URLの入力だけで任意の場所に【おすすめ記事】を表示する「はてなブログモジュール」の作成 | はてなブログカスタマイズ

URLを入力するだけの簡単作業で、おすすめの記事を表示させる「はてなモジュール」を作成するはてなブログカスタマイズです。はてなブログおすすめ記事モジュールの目的。希望する場所に希望する記事の一覧を表示するためのはてなブログモジュールを作成する…

【はてなブログカスタマイズの必須作業】~ 「PC・スマホ」で自サイトにHTMLコードを記述する方法 ~ | はてなブログ | スマホから記事上下などにHTMLを記述する方法

はてなブログをカスタマイズするのに必要な作業として、HTMLコードの記述があります。この作業は特に難しくはありませんが、スマホからはてなブログをカスタマイズする方法は、PCとは違うので当記事に記します。...スマホのブラウザからもheadに要素を追加に…

はてなブログで「google adsense」の審査が通らない方へ - ドメインに「www」はつけるべきか?

最近、はてなブログでGoogleAdsense(グーグルアドセンス)の審査がいつになっても通らないという記事をいくつか見かけたので、私が試してうまくいった情報を共有します。GoogleAdsenseに登録するサイトのURLに「www」はいらないはてなブログで独自ドメインを…

【jQuery】要素検索エラーにより知らないid「sizzle...」が生成される不思議な現象の謎

先日、HTML要素に「"」と「'」(ダブルクォーテーション、シングルクオーテーション)を含むクラス名を設定して、jQueryの要素検索でそのクラス名を指定して取得しようとしたときのことです。実行すると、Syntax error, unrecognized expressionとconsoleに表…

JavaScriptに静的変数はない?staticはクラス内静的メソッドを定義するキーワードである 【JavaScript】

結論 JavaScriptに静的変数を定義するキーワードはない。staticはクラス内メソッドを静的メソッドとして定義するキーワードである。 しかし、JavaScriptで静的変数(独自)を実装する方法はある模様。 参考文献 developer.mozilla.org developer.mozilla.org …

コードフォーマッター | コード公開のため組み込みも可 | 【JavaScript】| コード整形ツール Code formatter

Photo by Chris Ried on Unsplash コード整形ツール HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) ※注意:一般的なHTMLコードに適しています(整形が…

パンくずリスト生成ツール | SEO対策 | Google検索

パンくずリスト生成ツールBreadcrumb list creation tool入力欄にパンくずのリンク先のURL、パンくずリスト名を入力することで、コードが生成されます。...パンくずリストとはGoogle検索では、検索結果にパンくずリストが表示されます。パンくずリストはその…