IT the Best

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

【コピペok】はてなブログでユーザー向けのカテゴリー別サイトマップページを作成する 表示内容,スタイルの変更可能 | はてなブログカスタマイズ はてなブログツール

カテゴリー別記事一覧のサイトマップページ はてなブログで、ユーザー向けのサイトマップページを作成するためのJavaScriptコードとスタイルコードを生成します。 カテゴリー別に記事一覧を取得し、記事内に表示します。 表示形式の種類を選択し、コードをコ…

【見本あり】javaScriptでリストをドラッグスクロールする「jQueryプラグイン」 - オプションでエンドレススクロール,慣性スクロールも可能 | listmousedragscroll.js

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

【Reactで作る】CSS+Reactで実装するアコーディオンリスト | javascript | react | jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するため…

【コピペok】はてなブログ 記事デザインサンプル集 スマホも簡単にカスタマイズ可能! | はてなブログデザインカスタマイズ

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンで…

【Reactで作る】iOSのスイッチのようなトグルボタン | javascript | react | jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのもので…

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

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

【javascript】要素の範囲外をクリックした時の処理を実装する | .closest()

JavaScriptで特定要素の領域外をクリックしたときのイベント処理です。 特定要素外のクリックイベント※当処理では、jQueryを使用しています。closestメソッドを使用して、特定要素外のクリックを判断します。 メニューバーをイメージしたデモです。対象要素…

ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】追記:iOSでズーム,拡大させない

JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 更新情報 投稿日 2019/10/03 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 当記事のコピー処理が動作したブラウザ Chrome,Microsoft Edge,Firefox,Saf…

【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー

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

【はてなブログSEO対策】サイトマップの役割と重要性 Googleにサイトマップは既に送信されている?

はてなブログのサイトマップ サイトマップの送信 はてなブログにはもともとサイトマップファイルが存在していて、/robots.txtファイルによってGoogleに送信されています。 はてなブログでのサイトマップの重要性 はてなブログでサイトマップは自動で作成され…

はてなブログで【目次】をサイドバーに表示する方法 | はてなブログカスタマイズ

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

【Jade】記述方法-HTMLの書き方との違いをまとめました。id,class,属性など | jade(pug)の記述方法

当記事では、Jadeの初歩的な記述方法についてHTMLと比べながらまとめていきます。 Jadeとは Jadeの記述方法 基本的な構文(基本的な書き方) 例1 例2 例3 Jadeとは Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言…

【HTML】継承されたファイル文字コードをUnicodeに変更するとheadの中身がなくなる問題の対処法

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。 // 問題の要因 extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コ</body>…

【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オブジェ…

【JavaScript】スクロールをマウスドラッグで可能にする | マウスドラッグスクロール | JS | 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(); // 開始時間 …

【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