JavaScript
-
PageSpeed Insightsの「Webページの読み込み時間」を改善するにはどうしたら良いのか?
グーグルさんが「読み込み速度も検索順位に影響するからね!」とアナウンスしてから「Webサイトは軽い方が良い」というざっくりとした認識が浸透しているように感じます。 自分もその認識を持っているのですが、では具体的に「読み込み速度」は何を指しているのでしょうか? 色々なwebサイ…
-
「県名」「市区町村名」「町域」の住所選択用セレクトボックスをそこそこ簡単に作る方法
今回は住所選択用のセレクトボックスをそこそこ簡単に作る方法をご紹介します。 住所を入力するフォーム画面を作成する際には役立つかもしれません! 今回の記事を読むと下記のようなフォームが作成できます。 県名 : ---- …
-
GoogleChartsを使用して温度計のようなゲージを表示する
前回は棒グラフや折れ線グラフの表示に関して記事にしました。 [blogcard url="https://incloop.com/chartjsを活用してwebページにグラフを表示する/"] 今回は、下記の温度計のようなゲージを表示する方法を紹介します。 温度計…
-
JavaScriptを使用してテーブルの表示行数を3行、5行、10行とユーザーが自由に切り替えられるようにする方法
最近のWebサイトはスマホにも対応しなければなりませんので「各要素でどれだけの幅を使うべきか…?」という事を考えてページを作らなければなりません。 ですが、テーブル等でキッチリと表示している箇所はなかなか修正が難しいんですよね…。 そのままスマホに対応すると、縦に長くなっ…
-
JavaScriptとグーグルマップを組み合わせてコメントやリンクを設定したオリジナルマップを表示する方法
食べ歩きの感想やレビューを書いているブログで近所のお店が書かれていると、ついついお店を調べたりしちゃいますよね。 そんな時に、ブログの記事内にお店への地図と公式サイトへのリンクがまとまっていたら非常に便利なのになぁ とか思ったりしました。 ということで、今回は「JavaS…
-
「この記事は約〇分で読めます。」をJavaScriptで実装する方法(ついでにWordPressのプラグインで実装する方法も記載します)
今回は他のサイト様でよく見かける「この記事は約〇分で読めます。」を実装する方法を記載します。 JavaScriptを使用して実装する まずはJavaScriptで実装する方法を記載します。 本プログラムで実装する際に、必要となる条件は下記となります。 ・記事を表示…
-
WordPressのプラグイン「Geo Mashup」で表示するGoogleMapのピン(旗)のアイコンを好きな画像に変更する方法
今回はWordPressのプラグイン「Geo Mashup」で表示するGoogleMapのピン(旗)のアイコンを好きな画像に変更する方法を記載します。 ※本記事は「Geo Mashup」のピンのカスタマイズに絞って記載しておりますので、プラグインの導入方法や使い方などは下記…
-
JavaScriptとphpの違いって何?どう使い分けるの?ざっくりと違いをご紹介します!
コードを組んでいるうちにいつの間にか違いを理解していたJavaScriptとphpの違いに関して、復習も兼ねて記事にしてみようと思います。 「バックエンド」や「フロントエンド」という難しい言葉は省いて、ざっくりと「どう違うのか?」「何故使い分けるのか?」という部分をご紹介し…
-
JavaScriptを使用してブラウザのスクロール位置を取得・設定して様々な処理を実行する方法
※本記事のプログラムは2018年2月14日に修正しました。 プログラムを組む感覚を取り戻そうとしています、網干です。 少しの期間ですがプログラムから離れていたら、もうGoogleさんに頼らないと組めない頭になっていました。 これじゃイカンということで、勘を取り戻すた…
-
JavaScriptで曜日ごとに文言の表示を変更する方法
「日替わり」や「期間限定」という言葉に弱いです、網干です。 飲食店やスーパーマーケットで曜日替わりのサービスをやっているお店をよく見かけます。 ですが、ホームページを見ても各曜日ごとにどのようなサービスがやっているのかわからない場合が多いです。 曜日替わりのサービス…
-
ほとんどコピペで出来る!WordPressで横から割り込むようなスマホ専用のメニューを作成する!
久々に自作のコード紹介になります、網干です。 今回はほぼコピペで完成してしまうようなスマホ専用メニューの作成方法をご紹介致します。 メニューの項目はアコーディオン形式で表示しますので、項目が多くなっても対応できます! 本記事を読む事で下記のようなメニューを作成することが…
-
JavaScriptで星のように輝くエフェクトを表示して一平ちゃんショートケーキ味の画像をキラキラさせる方法
昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています!網干です! 見てくださいこの包装!クリスマスにふさわしいデザインがたまりません! く~!ニクイ! 出典:明星 一平ちゃん夜店の焼そば ショートケーキ味: 明星食品 見た目もこんなに綺…
-
JavaScriptとjQueryだけで動きのあるボタンを作成する
ここ数日の夕飯の摂取カロリーが気になっています、網干です。 というのも、ここ数日はベーコン、ジャガイモ、チーズをフライパンで焼いたものを毎晩のように食べているので、カロリーが高すぎるのではないかと気になっています…。 ですが、お手軽にできて非常に美味しいのです!やめられま…
-
JavaScriptで同一ドメイン内のHTMLで構成されたページの開始タグと終了タグで囲った部分を全て取得する方法
趣味が睡眠になりつつあります、網干です。 予定が何も入っていない休日に睡眠時間を16時間もとっていました。 具体的には 0-8時 10-13時 16時-19時 22時-24時 と睡眠をとっていました。 食事の前後しか起きないグータラ生活でしたが、翌日に首と肩で謎の痛みが…
-
JavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法
ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。 ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。 パッケージを見て「これはおいしそう!」と思った商品は高い確率で期間内に何度も購入しています。 普段はアイスを食べない方なのですが、どう…