【JS】Webサイト開発・HTMLコーディング・Webページ閲覧時のJavaScript便利機能まとめ

Webサイト開発時のHTMLコーディング、デザイン制作、閲覧時などで、ブラウザ上で素早く使用できる便利機能のJavaScriptコードをまとめました。 ブラウザのコンソールで使用して活用できるかと思います。 ・ローカル画像の貼り付け・表示確認 ・日本語を含むURLを日本語のままコピペ（コピーアンドペースト）する ・JavaScriptファイルを追加する

【CSS】背景色 グラデーション --サンプル集-- background:linear-gradient 【WEBデザイン】

投稿日：2019/07/19 CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記した記事です。 虹色 虹色 <div class="style1"></div> .style1{ background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255), rgb(60, 120, 255),rgb(80, 255, 237),rgb(100, 255, 169), rgb(170, 255, 120),rgb(221, 255, 140),rgb(255, 236, 16…

【JavaScript】JSで日付の範囲チェックを行う 範囲内かどうか/大小比較のサンプルコードあります。

今回はJavaScriptでの日付の範囲チェックについて、紹介していきます。1つの日付が対象の日付の範囲内かどうか、2つの日付範囲が有効かどうかをサンプルコードを交えてご紹介します。Dateオブジェクトに変換して判定する方法です。

【JavaScript】JSで日付が有効かどうかチェックする 範囲/正規表現/フォーマットチェックのサンプルコードあり

JavaScriptで日付が有効かどうかチェックする方法を、Dateオブジェクトへの変換・正規表現で紹介しています。また、日付の範囲チェックについてのサンプルコードも紹介しています。日付の形式を判定する正規表現もいくつか紹介しています。

【JavaScript】JavaScriptでの日付の加算方法 サンプルコードあり

JavaScriptでの日付の加算方法（年月日時分秒）、月またぎ、年またぎをサンプルコードを交えて紹介しています。日付の加算・減算の計算方法はこれを見れば把握できるといった記事になったと思います。ぜひご覧ください。

【JS】window.matchMediaで画面横幅に対応した処理をする。resizeイベント、observerと比較 JavaScriptでのレスポンシブデザイン

JavaScriptによるレスポンシブ対応の実現方法をresize/observer/matchMedia別にまとめました。サンプルコードもあるので参考になればと思います。主に画面幅/要素の横幅の変更時にスタイルを変更することを想定して作成しました。

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

スマートフォンのようになぞるようにしてスクロールができるjQueryPluginです。一行でマウスドラッグによるスクロールが可能なリストが実現できます。オプションには横幅、縦幅の指定や無限スクロール(endless scroll)の設定などができます。...使用方法からDEMO、メソッド・オプションの記載あり。更新情報2019-09-16https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js、 https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.js

【Mac】やっぱりAppleはこういう所がいい。視覚を刺激する美しいダイナミックデスクトップの機能 おすすめの無料ダウンロードサイトも紹介

Macのダイナミックデスクトップの設定方法と、おすすめのダウンロードサイトを紹介しています。無料でダウンロードできるサイトもあり、おすすめです。また、ダウンロードから適用までの説明もあります。

CSSでスクロール バーをカスタマイズして、カラフルなスクロールバーのデザインを作ってみました。svgを使用しているものもあり。

cssを使用していろいろなスクロール バーのデザインを作成してみました。「::-webkit-scrollbar」をいじって、スクロール バーをカスタマイズしています。種類ごとにスクロール バーを分けて、サンプルを表示しています。色、幅、透明度、素材をカスタマイズした様々なスクロール バーのデザインがあります。

node.jsプロジェクトでnode_modulesを除外してコピーの速度を大幅に速くさせる バッチファイル Windows

node.jsプロジェクトを素早くコピーする方法です。node_modulesを除外してコピーするためにxcopyコマンドを使用します。当記事では、そのコマンドの説明、コピー（バックアップ）を素早くするための方法を紹介しています。

【Mac】Windowsのようにf2キーでリネーム(名前の変更)を行えるようにする。Mac-ショートカット設定

MacでWindowsのようにf2ボタンで、リネームをする方法です。Windowsでは、f2キーでリネームが行えましたがMacでは使えないので、ショートカットキーを追加して対応します。Macでショートカットキーを設定する場合の手順は以下です。1：システム環境設定を開く 2：キーボードのショートカットを設定する メニュータイトルにはコマンド名を正確に入力しなければいけません。リネームさせる場合は、「名前を変更」と正確に入力しましょう。

ReactでFontAwesomeのアイコンを使用する。～導入編～

FontAwesomeのアイコンもReactコンポーネントとして使用することができます。FontAwesomeとは、Webで最も人気があるアイコンセットで無料でできます。そんなFontAwesomeアイコンをReactコンポーネントとして表示させる方法を、サンプルコードとインストールに分け、導入編として解説しています。JavaScriptではなくTypeScript、JSX記法でサンプルコードは記述しています。

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

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。記事が長い場合に効果的です。記事の目次を表示するには、記事編集画面で入力補助ツールバーから「目次」ボタンをクリックします。という文字が入力され、この文字の位置に記事の目次が表示されます。記事の見出しが目次として表示されます。サイドバーに表示本題のサイドバーに表示する方法ですが、私は、HTML要素のクローンを生成して表示する方法をとりました。サイドバーには事前に、HTMLモジュールを一番下に設置しておきます。

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

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

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

Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのものです。 「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。 type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。 Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。 ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。 開閉の処理は、Reactコンポーネントの状態を更新し再レンダリングして実現しているわけではなく、対象要素の属性を直接変更して行っているため、Reactで作る意味があまりない

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

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンでコードのコピーができるようになっています。コピペOKです。コピー用テキストエリア(ページ下部)を設置したので、使用したいデザイン(スタイル)をまとめてコピーすることが可能です。カラーボックス - 背景色,枠線,アイコン付き 文字の強調表示 1 - 下線,マーカー 文字の強調表示 2 - 囲い ブログカードのヘッドアイコン

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

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのものです。 状態を持つコンポーネント 状態に応じて見た目が変わる JSX(Babel)を利用したJavaScript 「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。 type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。 Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。 ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。

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

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡張版...jQuery.prototype.movable...要素の移動処理をjQueryのメソッドとして拡張し、引数にはタップ開始時、移動時、移動終了時のコールバック関数を用意しました。...補足move後のクリック無効は、リンクなどが設定されている要素の移動後のイベント(リンク先に飛ぶなど)を発生させないためです。

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

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

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

JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 JavaScript - コピー方法 DEMO 入力欄 textarea sample text 112358130000000 copy copy 貼り付け用 入力欄以外 p sample text copy 貼り付け用 div sample text copy 貼り付け用 コード function copy(id) { var copyText = document.getElementById(id); va…

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

はてなブログのカテゴリー・パンくずリストの表示を階層化表示にカスタマイズするには、「階層化表示にするための処理の追加」と「階層カテゴリーの入力」の2つの作業が必要です。外部ファイルの読み込みによる方法と、コードを埋め込む方法...読み込む必要のあるファイルは2つ..階層化させるカテゴリーリストの指定や、パンくずリストのオプションを指定することができます。コードを書き換えることで、パンくずリストの区切り文字などを変更できます。...スマホのブラウザからの場合PC版表示に切り替えることでスマホからでもコードを記述することができます。...「-」(半角ハイフン)を区切り文字と認識し、階層化を行います。...折りたたみ機能も備わっているためクリック(タッチ)により下層のカテゴリーが表示されます。...Googleにパンくずリストを認識させることができるので検索結果にパンくずリストを表示することができます。

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

はてなブログのサイトマップ サイトマップの送信 はてなブログにはもともとサイトマップファイルが存在していて、/robots.txtファイルによってGoogleに送信されています。 はてなブログでのサイトマップの重要性 はてなブログでサイトマップは自動で作成されますが、Googleヘルプによれば、ページが適切にリンクされていれば必要ないとのことです。それでも、通常より高度なクロールが行われるため、各ページのインデックス登録につながります。検索結果に表示されれば、集客力の向上が期待できます。よって、はてなブログでは独自にサイトマップを作成する必要も、独自で検索エンジンに送信する(GoogleSearchConsole)必要もないと考えられます。

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

当記事では、Jadeの初歩的な記述方法についてHTMLと比べながらまとめていきます。 Jadeとは Jadeの記述方法 基本的な構文(基本的な書き方) 例1 例2 例3 Jadeとは Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。 ちなみにこの Haml は近年爆発的に普及をみせる CSS プリプロセッサ Sass の記法の元にもなっています (Sass の中でも普及率が高いのは SCSS 記法の方ですが)。 https://…

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

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。 // 問題の要因 extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コードをUnicodeにしました。そして、そのファイルを継承しているページを開くと継承部分が<body>内にすべて含まれてしまい、先頭行にあったDOCTYPE htmlが文字列として表示されてしまいました。 その時のファイルlayoutとindex。 layout index 表示されたHTML // 解決方法 解決…

【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オブジェクト拡張版 Math.randomRange=function(min,max){ return Math.floor(Math.random() * (max + 1 - min) + min);} {"@context":"h…

【JavaScript】マウスドラッグスクロール jQuery - jQueryプラグイン(拡張)

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQueryを使用しています。 www.it-the-best.com DEMO 1 2 3 4 5 // コード function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i, e) { $(e).mous…

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

JavaScriptで、 loop処理(for文やwhile文)を実行させることで、他言語にあるsleep処理のような指定時間分処理を止める動作を実装します。1秒間のsleep処理(処理を止める)を実行させる。 var sleepTime=1000; // msecで記述 var now=Date.now(); // 開始時間 while(Date.now()-now<sleepTime){} // 指定時間を超えるまで実行 Dateオブジェクトの拡張 Dateオブジェクトを使用するので、Dateオブジェクトのメソッドとして定義。 ※拡張の書き方は間違えているか、あまりよくない書き方をしているかもしれません。

【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 = top+(height/2); jQuery 拡張版 jQuery.prototype.offsetCenter=function(){ var left = this.offset().left; var top = this.offset().top; var width = this.width(); var height = this.height(); left = left+(width/2); top = top+(height/2); return { top , left } }要素の横幅、縦幅の取得に.width(),.height()を使用していますが、paddingまたはmarginを設定している場合は.outerWidth(),.outerHeight()(.outerWidth(true),.outerHeight(true))を使用してください。

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

CSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見ることができませんが、意外と再現率高めのスイッチになったと思います。見本：作成したスイッチ(トグルボタン)色・サイズを変える

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

今回も冬をテーマにした画像のパズルです。 とてもきれいな写真で、水面に反射した景色がさらに美しくさせます。 画像の半分が反転しているような形になっているので、想像力が良い方は元の画像が見えてくるかもしれません。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 ヒント：元の画像を見る 評価別クリア時間目安 Excellent~06:59.99 Great~07:59.99 Nice~08:59.99 Good09:00.00~ Photo by Ian Keefe on Unsplash

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

今回も冬をテーマにした画像のパズルです。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 Photo by Aaron Wilson on Unsplash ヒント：元の画像を見る 評価別クリア時間目安 Excellent~05:59.99 Great~06:59.99 Nice~07:59.99 Good08:00.00~

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

秋も終わり、冬になり本格的に寒くなってきました。冬と言えば寒さ、雪が思い浮かびます。今回のパズルはそんな冬をテーマにした画像です。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 ヒント：元の画像を見る 評価別クリア時間目安 Excellent~05:59.99 Great~06:59.99 Nice~07:59.99 Good08:00.00~

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

カテゴリー別アーカイブ 全カテゴリー別記事一覧ページ...カスタマイズ概要一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。サイト内記事探索が一つのページで可能になるため、サイト訪問者が興味のある記事を容易に探しだすことができます。サイト訪問者が興味のある記事を見つけ出すことができれば、アクセスにつながるため、サイト内回遊率向上に期待できます。...カテゴリーリストからすべてのカテゴリーを取得します。...取得したカテゴリーごとに、記事一覧を取得し表示します。記事一覧の取得先は、はてなブログで元々用意されているカテゴリー別記事一覧ページから取得します。

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

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

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

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、似たようなピースが多くつながりもわかりずらいためかなり難しくなっていると思います。 ポイントは手前に写っている女性と、光が写っているピースです。 ヒント：元の画像を見る Level：7 Photo by Alex Alvarez on Unsplash 評価別クリア時間目安 Excellent~04:59.99 Great~06:59.99 Nice~08:59.99 Good11:00.00~

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

HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。 @keyframes規則を使用することでアニメーションを作成することができます。@keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }@keyframes規則についての詳細は「@keyframes - CSS: カスケーディングスタイルシート MDN」をご覧ください。アニメーションスタイルの適用方法...animationプロパティを使用することで適用することができます。animation:[ keyframesの名前 ] [ アニメーションの時間 ] [ アニメーションの繰り返し回数 ]infiniteは無限に再生を繰り返すときに使用します。アニメーションの操作は他にもあります。詳細は「animation - CSS: カスケーディングスタイルシート MDN」をご覧ください。

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

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

【パズル】脳トレ ― スライドパズル 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

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

URLを入力するだけの簡単作業で、おすすめの記事を表示させる「はてなモジュール」を作成するはてなブログカスタマイズです。はてなブログおすすめ記事モジュールの目的。希望する場所に希望する記事の一覧を表示するためのはてなブログモジュールを作成するはてなブログカスタマイズです。当モジュールでは、自身がおすすめする記事のURLを入力するだけで、その記事を表示することができます。複数の記事の表示も可能です。最低でもコードを3つ貼り付けるだけで、自身がおすすめしたい記事の一覧を希望の場所に表示することができます。下記はその手順...モジュールの作成次表示したいおすすめ記事のURLを「,」区切りで下のテキストボックスに入力し、テキストエリアに表示されたコードをコピーします。直接記入も可...記事のURLは全て入力するか、「.../entry/」後のURLを入力します。

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

はてなブログをカスタマイズするのに必要な作業として、HTMLコードの記述があります。この作業は特に難しくはありませんが、スマホからはてなブログをカスタマイズする方法は、PCとは違うので当記事に記します。...スマホのブラウザからもheadに要素を追加にHTMLコードを記述する手順は同じですが、デザインからHTMLコードを記述するには、PC版表示にする必要があります。はてなブログのダッシュボードからページ下部のPC版をタップします。PC版表示にしたら、それ以降の手順はPCと同じです。

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

最近、はてなブログでGoogleAdsense(グーグルアドセンス)の審査がいつになっても通らないという記事をいくつか見かけたので、私が試してうまくいった情報を共有します。GoogleAdsenseに登録するサイトのURLに「www」はいらないはてなブログで独自ドメインを使用するには、「www」のサブドメインをつけることが必須とされています。そのため、はてなブログPROで独自ドメインを使用しているサイトのURLには、大抵「www」がドメインの冒頭についています。...「サイト上にコードが見つかりませんでした。これは、コードが不足しているか不完全である、またはサイトのURLが正しくない」という問題でした。...

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

先日、HTML要素に「"」と「'」(ダブルクォーテーション、シングルクオーテーション)を含むクラス名を設定して、jQueryの要素検索でそのクラス名を指定して取得しようとしたときのことです。実行すると、Syntax error, unrecognized expressionとconsoleに表示されました。ふとその要素を見てみると知りもしないIDが設定されていました！そのIDは、「sizzle」と10ケタ以上の数字を合わせたものでした。(id="sizzle123456.....")理解できずにソースコードを見返して自分で設定しているのかを確認しましたが、もちろんそのような処理は書かれておらず、気になって「jQuery sizzle」とGoogleで調べてみました。検索結果のタイトルには「jQuery」と「sizzle」のキーワードが存在するものがあり、jqueryに関連するものだとわかりひとまず安心しました。 そして、検索結果内のひとつのページをのぞいてみると、「sizzle」についてこのようなことが書かれていました。SizzleとはjQueryで要素検索を行うためのモジュールであるどうやら、sizzleはjQueryのモジュールの名前らしいです。ですが、どうして要素検索をしてエラーとなった要素にIDが設定されたのかは謎です。公式ドキュメントを調べれば情報が載っていると思いますが...以上、jQueryの面白い発見でした。

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

結論 JavaScriptに静的変数を定義するキーワードはない。staticはクラス内メソッドを静的メソッドとして定義するキーワードである。 しかし、JavaScriptで静的変数(独自)を実装する方法はある模様。 参考文献 developer.mozilla.org developer.mozilla.org 先日、JavaScriptの静的変数について調べて、JavaScriptには静的変数はないことがわかりました。 調べたきっかけは、JavaScriptのクラス構文を記述するために、公式ドキュメントを見ながらコーディングをしていたときです。 勘違いでstatic変数があると思い込み、st…

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

Photo by Chris Ried on Unsplash コード整形ツール HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) ※注意：一般的なHTMLコードに適しています(整形が不完全な部分もあるとおもいます...) inputに整形したいHTMLコードを入力(貼り付け)します。(初期表示のテキストはサンプルです。) outputに整形されたHTMLコードが表示されます。 input <!--sample--> <div id="code-formatter"…

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

パンくずリスト生成ツールBreadcrumb list creation tool入力欄にパンくずのリンク先のURL、パンくずリスト名を入力することで、コードが生成されます。...パンくずリストとはGoogle検索では、検索結果にパンくずリストが表示されます。パンくずリストはそのページがサイト階層内のどこに位置するのかを示します。メリット...パンくずリストを表示することは、「アクセス数アップ」、「サイト回遊率向上」に期待できます。また...検索結果の順位向上につながり、SEO対策としても効果的です。...コードを確認するGoogle(グーグル)の構造化データテストツールで、正しくパンくずリストとして機能するか確認することができます。

正規表現 HTMLタグのみを取得する JavaScript

正規表現によるHTMLタグのみの抽出 属性の取得を行わないHTMLタグのみを抽出する正規表現です。 str.match(/<([\w]*?> \/[\w]*?> [\w]* \/[\w]* )/g) <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <!-- Method 1 (preferred) --> <a itemprop="item" href="htt…

濁点・半濁点文字を一文字ずつに変換する「自動変換ツール」 - 【JavaScript】

コード ひらがなの濁点・半濁点文字をそれぞれ一文字ずつに分ける(変換する)処理コード。また、文字と濁点・半濁点を一文字にする処理、その両方の処理もあり。ツール 上記のコードを実装したツール。文字を入力しボタンを押すだけで簡単に文字列の変換をします。

【ゲーム】タイピング(フリック入力)練習ゲーム【ことわざ】 ー ちょっとした暇つぶしに...

暇つぶし用のゲームに、タイピング練習ゲームを開発しました。 PCで遊ぶ場合は、ローマ字入力設定でタイピング練習ができます。スマホの場合は、かな入力設定で日本語入力のフリック入力練習ができます。

iPhoneで【Safari】のバージョンを確認する - userAgent情報の確認

現在あなたが使用しているブラウザのユーザーエージェント情報 上記のuserAgent情報から判明したあなたがお使いのSafariのバージョンは です。 // {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","item":"https://www.it-the-best.com"},{"@type":"ListItem","position":2,"name":"ツール","item":"https:…

複数の文字列をそれぞれ別の文字列に置換する方法 -正規表現【JavaScript】

複数の文字列を同一の文字列に置換する 複数の文字列をそれぞれ別の文字列に置換する 複数の文字列を同一の文字列に置換する 例 「apple,banana」を「cucumber」に置換する。 var str="apple2 banana3 orange8 cucumber0" str=str.replace(/(apple) (banana)/g,"cucumber") console.log(str) // cucumber2 cucumber3 orange8 cucumber0 複数の文字列をそれぞれ別の文字列に置換する 例1 「one,two,three」を「three,two,one」に…

【はてなブログカスタマイズ】2ステップでホーム画面にシェアボタン(あとで読む系)を表示させる - スマホからでも簡単カスタマイズ

今回のはてなブログカスタマイズは、ホーム画面の記事一覧にシェアボタン(後で読む系)を搭載するカスタマイズです。ホーム画面にシェアボタンを表示させる当カスタマイズで表示させるシェアボタンは、はてなブックマーク・Pocketです。これらのボタンはシェア機能に加え後で読むための機能としても活用されています。多くのサイトでは記事ページにだけシェアボタンが設置されていますが、これらの後で読む系のボタンは記事一覧にも設置することで、利便性の向上、アクセスアップにつながると思われます。

【HTML】画像やアイコン・文字などを反転させる - scale()を使った方法

Photo by Devin Avery on Unsplash scale()を使ったHTML要素を反転させる方法 コード 見本 通常 反転 上下反転 scale()を使ったHTML要素を反転させる方法 [HTML] [CSS] [スタイル] コード transform:scale(-1,1); 見本 通常 通常 HTML CSS JS 5 Photo by Thiébaud Faix on Unsplash <p>5</p><figure class="figure-image figure-image-fotolife mceNonEditable" title="Photo by Th…

意外と簡単なMyシェアボタンの作成 -- 難しくて困るのは素材を集めることでした。

シェアボタン制作 素材集め ボタン作成 リンク設定 リンク詳細設定 完成品 SNSシェアボタン作成は手を付けてみると意外と簡単でしたが、SNSアイコンやボタンスタイルなどの素材集めが案外難しくて困るPointでした。 当記事は、SNSシェアボタンの作成からアイコンやスタイルに使用した素材についてまとめたものです。 シェアボタン制作 はてなブックマーク・Facebook・ツイッター・tumblr・ライン・Pocketの各SNSのシェアボタン制作の素材からScript処理まで。 素材集め 各SNSのロゴ/アイコンのダウンロードサイトのリンクと、ロゴ/アイコンに近いHTMLカラーコード。 はてなブッ…各SNSの素材を使用したボタンの作成(はてなブックマーク・ライン以外はFont Awesomeからアイコンを使用しています)。...

【はてなブログカスタマイズ】長くなったカテゴリーモジュールを開閉可能にする【CSS＋JavaScript】

概要前回、CSSだけではてなブログのカテゴリーモジュールに開閉機能を付けるカスタマイズ記事を投稿しました。今回の記事もカテゴリーモジュールに開閉機能を付けるカスタマイズになりますが、今回はCSSだけでなくCSS＋JavaScriptによるカスタマイズになります。前回のCSSによる開閉機能は、CSSのマウスホバーをイベントとしていたためPC向けの機能としてカスタマイズをしました。今回は、クリック(タッチデバイスの場合タップ)をイベントに動作させるためスマホ(タッチデバイス)にも同様な動作が処理されるものになります。

【CSS】のみで長くなったカテゴリーモジュールを開閉可能にする【はてなブログカスタマイズ】

はてなブログを長いことやっていると、記事も多くなりカテゴリーの種類も多くなると思います。そんななかサイドバーにはてなモジュールのカテゴリーを設定していると、ズラーっとしたに長いカテゴリーリンクのリストができてしまうと思います。そんな長くなったカテゴリーリンクのリストにCSSだけで開閉機能を付けて、コンパクトにするはてなブログのカスタマイズになります。CSSだけで開閉機能を実現するには、マウスオーバー(マウスホバー)時に表示/非表示を切り替えて開閉させる方法をとります。しかし、スマートフォンなどタッチデバイスでのマウスオーバーはタップしたときに動作します。ですが意図しない動作になりがちなため、今回はPC向けの開閉機能のカスタマイズをしたいと思います。

数字変換ツール - 話題のフィボナッチ数列の流れに乗って数字で遊ぶ - Google試験にも出題された説がある数列の法則をもとにした数字生成

フィボナッチ数列0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...先日、ドラマ「あなたの番です」の12話でフィボナッチ数列に関する話題が...今回は、そんなフィボナッチ数列のように面白い数列の法則にちなんだ数字変換ツールを作成しました。Googleの試験でも出てきたことがあると言われている数列1, 11, 12, 1121, 122111, 112213... 「12」は、「1が一つと2が一つ」1121「122111」は、「1が一つと2が二つと1が三つ」112213...数字変換ツール入力：出力：

【読者になるボタン】をCSSだけで「立体感」のある押しボタンにカスタマイズする はてなブログカスタマイズ

読者になるボタンカスタマイズ不可能な読者になるボタンはてなブログの 設定 ＞ 詳細 にある「読者になるボタン」はiframe要素なのでカスタマイズができません。カスタマイズ可能な読者になるボタンなので当サイトでは、サイドバーにある「プロフィールモジュール」の「読者になるボタン」を使ってカスタマイズをしました。サイドバーに表示される「読者になるボタン」はiframe要素でないためスタイルのカスタマイズ

slideToggle() - たった1行でできる表示/非表示の切り替え jQuery Introduction

slideToggle()slideToggle()メソッドはHTML要素の表示/非表示を切り替える時に使います。1行だけで表示/非表示を切り替えることができるのでとても便利です。...jQueryの設定方法 - jQueryを使用するまでの手順 【jQuery】 - IT the Best...$("tag.classname").slideToggle();...demo素早い(0.3s)遅い(2.0s)表示/非表示切り替え後の処理...例...公式Document.slideToggle() jQuery API Documentation

jQueryの設定方法 - jQueryを使用するまでの手順 【jQuery】

jQuery使用方法読み込み外部から読み込む方法(CDN)jQuery：Google：Microsoft：「jQuery(公式)」「Google」「Microsoft」が公開しているjQueryファイルを読み込んでjQueryを使用します。三つのいずれかをheadタグ内に記述してjQueryを使用することができます。

toggleClass() - 条件式を書かずにクラスの追加/削除をする jQuery Introduction

toggleClass()このメソッドは、引数に指定されたクラスの追加または削除を行います。条件式を書くことなく容易にクラスの切り替えができます。例クラス"sample2"の追加と削除（クラスの切り替え） 追加$("div.sample1").toggleClass("sample2")

opacity - 透明度を変更し画像などをぼかす -hover処理あり- CSS Introduction

opacityCSSのopacityプロパティはHTML要素の透明度を変更することができ、画像にぼかしをいれたり透明にしたりすることができます。マウスオーバー時に画像をぼかすことで、画像の強調表示も可能です。opacity: 透明度(0.0~1.0); ...見本、例(html,css)あり...opacityを使ったWEBデザイン系の記事はコチラ...

transform:scale() - マウスホバー時に写真などを縮小/拡大する CSS Introduction

transform:scale()関数をマウスホバー時に設定して写真などの要素を強調表示させる。transform:scale()transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。要素をマウスホバー時に拡大/縮小することで強調表示させることができます。transform: scale(x,y);...DEMO(見本)、例あり

【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- 【HTML】【JavaScript】

スライダーの値をリアルタイムに取得HTMLのinput要素のtype：rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(推奨設置場所：headタグ内)...DEMO/例あり

簡単1行！階層リストに折りたたみ機能をつける【jQueryPlugin】 HTML-JS-サンプルあり

階層リストをたった一行で折りたたみ可能にする【jQueryPlugin】HTML-JavaScript(JS)-jQueryプラグイン-サンプルありjQueryとプラグインファイル...DEMO...使用方法「HTMLUListElement」には入れ子になったリスト(階層リスト)のトップリスト(最上位)を指定します。「ul」,「ol」,「menu」それぞれに対応しています。オプション1.強調表示 : set_listFolding( { "hover" : "true" } ) マウスオーバ(マウスの重なり)で透明度を変えるオプションになります。引数に「 {"hover":"true"} 」を指定します。("true"はtrueでも可能)開閉可能なリストをわかりやすくするために閉じている階層リストだけが強調表示されます。

GoogleAdSense広告のコードを改変してレスポンシブ対応にする方法 【Google AdSense】

GoogleAdSense(グーグル アドセンス)広告を固定サイズで掲載すると画面サイズ(ページレイアウト)に応じたレスポンシブサイズでなくなり、画面からはみ出したデザインになる可能性があります。当記事は、それを防ぐためにGoogleAdSenseの固定サイズの広告ユニットをレスポンシブ対応させるための方法を記した記事です。レスポンシブ対応の方法は様々あるのでその一部になります。GoogleAdSense広告は、主に自動広告と広告ユニットに分けられます。...レスポンシブ対応Google AdSenseの広告だからと言って特別な方法をとることはなく、通常のHTML要素のように画面サイズに伴って表示非表示またはサイズを切り替えるだけです。ここで、気になるのがGoogle広告に手を加えることはポリシー違反になるのではないかということです。

JavaScript/CSSコード圧縮 便利簡単な無料圧縮ツール【Minifier】

JavaScript/CSSコードの圧縮が簡単にできる無料圧縮ツール【Minifier】の紹介記事になります。リンクJavaScript MinifierCSS Minifier使用方法圧縮 コードを貼り付けてボタンを押すだけで簡単に圧縮することができます。JavaScript Minifier左側のテキストエリアに圧縮したいコードを貼り付けます。「Minify」という青いボタンを押します。圧縮されたコードが、右側のテキストエリアに表示されます。CSSも同様の作業で圧縮することができます。CSS MinifierAPI APIも用意されており、各言語で実装できます。

【CSS】背景と文字の組み合わせ -キレイめカラー- 【WEBデザイン】

個人的に相性が良いと思った背景色と文字色の組み合わせを、備忘録として書き記している記事です。 「salmon」「white,#555」 「salmon」「white,#555」 background-color: salmon;color: white; background-color: salmon;color: #555;

【CSS】背景パターン --サンプル集-- 【WEBデザイン】

投稿日：2019/07/19 CSSだけでできる柄物の背景を、備忘録として書き記した記事です。 ドット柄 ドット柄 <div class="style1"></div> .style1{ background-color: #04bd41; background-image: linear-gradient(45deg, #00ad39 25%, #04bd41 25%,transparent 75%, #04bd41 75%); background-size: 10px 10px; background-position: 0px 0px,3px 3px; } {"@context":"h…

ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

Photo by Sean Lim on Unsplash Google Code Prettify HTML CSS JavaScript sample html JavaScript Google Code Prettify 使用している code-prettify https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst HTML、CSS、JavaScriptなどのソースコードハイライトに、それぞれの言語情報を記述するCSS。 HTML pre.html::before{…

同カテゴリーが記事下の関連記事に表示されない時の対処法 - 【はてなブログ】 【カスタマイズ】

[画像]問題と対処法 記事下の関連記事の仕様 サイドバーの関連記事モジュールの仕様 カスタマイズ サイドバーに関連記事モジュールを追加する 関連記事モジュール以降にJavaScriptを埋め込む サンプルコード 表示するデータの変更 関連記事を記事下に表示する設定にしているのに、関連する記事が表示されないので、はてなモジュールから関連記事を表示するようにカスタマイズしました。 問題と対処法 私としては、記事と同じカテゴリーが表示されてほしいのですが、全く予想だにしていない記事が関連記事として表示されてしまいます。 そこで、サイドバーに設定することがで…

【CSS】でスクロールバーの表示を変えて、個性的なデザインにカスタマイズする【WEBデザイン】

今回の記事は、[画像]この見慣れたスクロールバーのカスタマイズに関する記事です。前置きFirefox、IEなどでは、サポートされていません。スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性[画像] ::-webkit-scrollbar::-webkit-scrollbar-::-webkit-scrollbar-thumb::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-corner::-webkit-resizer

【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る 【カスタマイズ】

カテゴリーを取得 カテゴリー別に記事を取得 表示 カテゴリー別の記事一覧ページを固定ページで作りました。 html,css,javascriptそしてphpを利用して表示させています。 ※固定ページは、はてなブログPROのみ作成できます。 カテゴリーを取得 var category_list = [] var category = $(".hatena-module-category .hatena-module-body>ul>li") category.each(function (i, e) { if (e.style.display != "none") { /*カテゴリーの記事数を消…

【WEBデザイン】CSSで画像をホバー時にハイライトさせてオシャレにする

記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。cssの「transition」「opacity」「transform」プロパティの3つを使用しています。サンプル(マウスホバー時)拡大/縮小ぼかし透明度の値:0.5変化時間の設定説明transform:scale()transformプロパティのscale()関数を使用して要素の拡大/縮小をします。横(x)と縦(y)のサイズ倍率を変えることができ、カンマ(,)区切りで指定します。transitiontransitionプロパティを使用して、要素の状態変化の完了時間を指定することができます。値は、プロパティごとにカンマ(,)区切りで指定することができます。

【JavaScript】ブラウザ/デバイス情報の取得から判定 - navigatorプロパティ一覧 【navigator】

navigator プロパティ一覧(2019/6/20時点の標準のみ) 実際の値 ブラウザ情報 デバイス情報 使用例 navigator.userAgent navigator.onLine navigator navigatorオブジェクトは、ブラウザの情報やデバイスの情報を取得することができます。 ・ブラウザ情報 ブラウザの正式名称、クッキー、バージョンなどの情報取得が可能 ・デバイス情報 デバイスのネットワークやユーザ情報の取得が可能 プロパティ一覧(2019/6/20時点の標準のみ) プロパティ名 内容 navigator.appName※ ブラウザの正式名称 navigator.ap…

【はてなブログ】パンくずリスト・カテゴリーを階層化表示でアクセスアップ 【SEO対策】【カスタマイズ】

パンくずリストとは 現在のはてなブログのパンくずリスト はてなブログで階層化表示をする ファイルの準備 ※注意：導入する場合 headタグ内に追加 フッタの一番下に追加 階層カテゴリー を作る パンくずリストとは パンくずリストの階層化表示は、ページがそのサイトのどこにあるのかを示し、記事のカテゴリーを詳しく表示することができます。そのため、SEOの効果的な対策として取り入れられています。 Google検索の検索結果では、パンくずリストからコンテンツの階層化表示が行われます。これによって、ページがサイト階層内のどこに位置するのかを示すことができ、SEO対策となります。 また、サイト運営者側も記…

【はてなブログ】パンくずリスト・カテゴリーを階層化表示でアクセスアップ #階層カテゴリーパンくずリストの表示

階層カテゴリーパンくずリストの表示 当記事は、階層カテゴリーを表示するために開発したJavaScriptファイルの説明になります。#階層カテゴリーパンくずリストの表示 www.it-the-best.com 階層カテゴリーパンくずリストの表示 //パンくずリストを表示 function create_breadcrumblist() { //記事のカテゴリーをすべて取得 var mlist = [], slist = [], list = [] $(".entry-categories.categories .entry-category-link").each(function (index…

【はてなブログ】パンくずリスト・カテゴリーを階層化表示でアクセスアップ #カテゴリーの表示を変える

カテゴリーの表示を変える カテゴリー情報を取得する 階層化カテゴリータグを表示させない 階層化カテゴリーの表示を変える すべてのカテゴリーを取得 カテゴリー一覧(階層化表示にする) カテゴリータイトルの表示を変える 当記事は、階層カテゴリーを表示するために開発したJavaScriptファイルの説明になります。#カテゴリーの表示を変える www.it-the-best.com カテゴリーの表示を変える カテゴリーが表示される主な場所 ・カテゴリータグ：記事一覧、記事内 ・カテゴリーリスト：カテゴリー一覧、パンくずリスト カテゴリー情報を取得する ほとんどのページで表示されるカテゴリーの要素は、ク…

【はてなブログ】パンくずリスト・カテゴリーを階層化表示でアクセスアップ #説明

説明 階層カテゴリーについて パンくずリストについて ファイルについて JavaScriptファイルの説明 はてなブログのカスタマイズ設定について パンくずリスト カテゴリー一覧 当記事は、階層カテゴリーを表示するために開発した機能の、おおまかな説明になります。 www.it-the-best.com 説明 階層カテゴリーについて ハイフンで書かれた階層カテゴリーは、「カテゴリータグ」では表示されないように処理をしています。 サブカテゴリーでなくハイフンを含むカテゴリーを指定したい場合は、「"」(ダブルクォーテーション)か「'」(シングルクォーテーション)で囲みます。例）"box-shadow…

【JavaScript】超簡単！スマホかPCの判断のしかた navigator.userAgent

navigator.userAgent 使用方法 効果 navigator.userAgent navigatorオブジェクトのuserAgentプロパティを使ってデバイスの判断をします。 userAgent userAgentでは、ブラウザのユーザエージェント情報を取得することができます。 ユーザエージェント情報には、OS、ブラウザそしてデバイス情報があります。 userAgent情報(あなたのユーザエージェント情報) // 使用方法 userAgentに含まれるデバイス情報をもとに、デバイス別に処理を実行するようにします。 var ua=navigator.userAgent if (ua…

【htaccess】超簡単便利！Webサイト引っ越し時のリダイレクトのテスト/動作確認ができる htaccessテスターの紹介

unsplash-logo Becca Tapert htaccessとは ApacheWebサーバーのディレクトリごとの設定ができるファイルです。設定できる内容は、パスワードの設定、Webページのリダイレクトなどがあります。 レンタルサーバーでは、リダイレクトをするときなどに、このhtaccessファイルの編集が必要になります。 当記事は、リダイレクト機能に焦点をあてた記事になります。 htaccessとは よくあるリダイレクト設定 httpをhttpsに統一 www有に統一/www無に統一 他ホストドメインへのリダイレクト 特定ページのリダイレクト 条件によってリダイレクト先を変える ht…

【JavaScript】エラーを回避するorエラーを条件分岐に使う「テクニック」 【try catch】

try catch文 使用方法 catch finally 効果 try catch文 try{}catch(error){} 使用方法 tryのカッコ内にテストしたい(エラーになる可能性がある)文を入れ、catchのカッコ内にはtryに入れた文がエラーとなったときに処理させる文を入れます。 try：通常処理 catch：例外時処理 catch catchには引数を指定することでエラー情報を入手できます。 catch (e){ console.log(e) //エラー情報(例外情報) } finally finally{}はtry,catchのあとに実行されるブロックです。try,catchど…

【はてなブログカスタマイズ】ホーム画面におすすめ記事を表示させる

今回のはてなブログカスタマイズはコチラ ホーム画面に独自のおすすめ記事を表示させる 良い記事が書けたけどなかなか発信しきれていない。そんな記事は誰にでもあるとおもいます。そんなときは、ホーム画面だったりでアピールしたりと対策をしましょう。 記事一覧要素(HTML)をコピーする サイドバーに表示できる注目記事や最新記事の要素をまねして、おすすめ記事を表示させます。それらの記事の要素の中には、アイキャッチ画像のURLや記事へのリンクURL、ブックマークの数などの情報があります。 コチラの記事は要素取得の仕方が書かれています。 www.it-the-best.com 表示させたい記事に入れ替える コ…

【WEBデザイン】を美しくする グラデーション(linear-gradient())

【WEBデザイン】を美しくする グラデーション // linear-gradient() 使い方 グラデーションの方向 途中色 グラデーションをつくる linear-gradient() CSSのbackgroundプロパティに使用することのできる関数です。 使い方 background:linear-gradient(グラデーションの方向,開始色,途中色,終了色) 各指定値はカンマごとに入力します。 グラデーションの方向 向きによる指定 右に向かって変わる：to right 上に向かって変わる：to top 左に向かって変わる：to left 下に向かって変わる：to bottom 角度…

【JavaScript】【String】文字列を指定文字数分の文字列にする String.substr()

Stringオブジェクトのsubstr()メソッドを使った、文字列の文字数操作です。 使用方法 ストリング変数.substr(開始位置,抜き出す文字数) ※引数が一つだけの場合は、それを開始位置と判断しそれ以降の文字列を抜き出します。 <script> var str="123456789" var str2=str.substr(0,5) console.log(str2)//12345 var str="123456789" var str2=str.substr(4,9) console.log(str2)//56789 var str="123456789" var str2=str.…

【はてなブログカスタマイズ】注目記事一覧ページを作る方法「リアルタイム」

サイドバーには表示できるけど、注目記事だけの記事を作りたいのにできないという方必見のはてなブログカスタマイズ情報です。 ページに表示したい注目記事の情報を決める 要素をコピーする 記事または固定ページ(PROのみ)に貼り付ける 箱だけ残して中身を消す 補足 ページに表示したい注目記事の情報を決める まず、デザイン設定のカスタマイズからサイドバーを選びます。 モジュール追加で注目記事を選びます。そこで、注目記事一覧の表示設定をします。 要素をコピーする 注目記事モジュールの追加設定が終わり適用したら、そのモジュールのHTMLをコピーします。 コピーの仕方は、注目記事のうえにカーソルを置き右クリッ…

「HTML」縦書き・行書体による575 「CSS」

あこがれた たてにしたくて できなくて などと思った人も多いでしょう。 ご覧のとおり縦書きはできます。 縦にする -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 行書体 font-family: “HGP行書体”, “MS P明朝”, “MS PMincho”, serif;writing-mode: vertical-rl; 上の二つを加えるだけで、壊滅的な575を書くことができます。 活用シーンはあまり思い浮かびませんが、知っておいて損はないと思います。ただ、縦書き…

超簡単「WEBデザイン」を美しくする ボックスシャドウ(box-shadow)

google chroomで簡単にUIで設定値を変更できる 前回、Google Chromeの開発ツールが超便利という記事を書きました。 www.it-the-best.com 今回は、その開発ツールを使った簡単WEBデザインの紹介をします。 box-shadowというプロパティをつかって要素にかげをつけるデザインです。記事タイトル下にある写真は青い影をつけています。 まず、開発ツールを開き影をつけたい要素を選択します。選択の仕方は、開発ツールのelements項目に表示されている要素ごとに選択することができます。下の画像の上半分がHTMLで要素が並んでいます。 ちなみに、開発ツールを開いたと…

誰でも簡単にブログカスタマイズが「楽になる方法 」 開発ツール

開発ツール プログラミング経験が浅い人は、ブラウザの検証機能というものを知っているでしょうか？ ブラウザページ上で右クリックを押して検証を選択すると、開発ツールというWEBページの情報を見たりいじったりすることができます。 ちなみに、開発ツールを開いたときに、マウスが重なっている要素のHTMLがフォーカスされて開かれます。 この開発ツールを利用して、閲覧しているWEBページのカスタマイズをすることができます。ブラウザ上で編集しているだけで実際のファイルには影響しません。 私は、これを利用してはてなブログのカスタマイズをしています。はてなブログのカスタマイズでは、更新するたびテキストエリアが閉じ…

はてなブログ「小技」 投稿していない画像を使う

小技 1.写真を隠す 2.アイキャッチ画像に設定してから消す アイキャッチ画像をつけたいんだけど、記事内におくのは何か嫌だというときはないでしょうか？ アイキャッチ画像は、記事内にある写真しか選択することができません。 他の記事で使った写真のURLを、直接アイキャッチ画像のURL欄に記入してもはじかれてしまいます。 そこで、記事内に表示されていない写真をアイキャッチ画像にする小技があります。 小技 1.写真を隠す 写真にhiddenをつけるか、styleのdisplayを"none"にする。 <img class="hatena-fotolife" title="f:id:Surprisedb…

「はてなブログカスタマイズ」 「PRO」だけの特典。フッターの要素を変える

はてなブログの一番下にある本当のフッターは、はてなブログPROでないと簡単にはカスタマイズできません。(下の写真の文字がある部分) (JavaScriptファイルを別で作成して、読み込ませる方法ではカスタマイズできる。多分) はてなブログPROになれば、フッターの非表示ができるため、私はそれを利用してフッターのカスタマイズをしました。 ステップ1 まず、非表示にする前に開発者ツールを開いて<footer id="footer" ...>の要素をコピーします。開発者ツールの開き方は、クロームの場合右クリックをして検証から開けます。 コピーしたらフッターを非表示にします。 ステップ2 自分のブログ…

「はてなブログカスタマイズ」 記事内の写真を記事タイトル下に持ってくる

記事上に何かコンテンツを入れていると、記事内で張り付けた写真を一番上に表示させることができません。 そこで、記事内の一番上にある写真をタイトル下に持ってくるようにカスタマイズしました。 <script> //記事内の一番上の写真 var entry_top_img=document.getElementsByClassName("hatena-fotolife")[0] //記事タイトル var entry_title=document.getElementsByClassName("entry-title")[0] console.log(entry_top_img.src,entry_ti…

「ブログカスタマイズ 」 ホーム画面だけで動くjavascript 「はてなブログ」

ホーム画面の判断のさせかた URLを取得する ・URLすべてを取得 ・ドメイン(FQDN)後の文字列(パス名)を取得 画面を判断する ・パス名で判断する場合 ・URLで判断する場合 はてなブログで動かす ホーム画面の判断のさせかた URLを取得して、表示されている画面の判断をします。 おそらく、はてなブログを利用してブログを開設した人のホーム画面はトップディレクトリに存在するため、URLは「プロトコル」と「ドメイン(FQDN)」のみになると思います。(※トップディレクトリに存在するという表現が正しいかはわかりません) この傾向を利用して画面の判断をします。 URLを取得する ・URLすべてを取…

「JavaScript」URLから画面別に処理を実装させる

URLを取得する ・URLすべてを取得 let url=location.href console.log(url)//"https://www.it-the-best.com/" ・ドメイン(FQDN)後の文字列(パス名)を取得 let path=location.pathname console.log(path)//"/" 画面を判断する ・パス名で判断する場合 当サイトのホーム画面のパス名は「"/"」のみになるので、location.pathnameが"/"のときにホーム画面と判断します。 let path=location.pathname if (path=="/") { /*ホー…

「JavaScript」locationで簡単にURLの情報を取得する

locatoin locationオブジェクトを使用すれば簡単にURLの情報を取得できます。 プロパティ一覧 location.href location.protocol location.host location.hostname location.port location.pathname location.search location.hash location.origin 当画面のURL情報です。 location.href location.protocol location.host location.hostname location.port location.pat…

「HTML」「CSS」WEBページ背景色に悩んだら#f1f1f1

WEBページ制作ではデザインをどうしようか悩むものですよね。 背景色もどうしようかと思って、何度もいろいろ試してしまいます。 コンテンツの色など、ほかの要素との相性によってはしっくりくる色を見つけるのは、なかなか難しいです。 そんなときに便利なのが#f1f1f1です。 スクロールバーと似た色で、整合性が保たれて全体的にしっくりくるデザインになります。これに近い色を使用しているサイトも多々あります。 派手さもなく不自然さもなく、真っ白でないので目にもやさしいです。（私はもう長い間画面の明るさをずいぶん下げているので関係ありませんが...） 背景色の設定 [要素]{ background-colo…