JavaScriptカンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]Tech Blog
Tech
67 entries
Page 2 / 3
JavaScriptカンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]
Vue.jsで暗号化・復号化を実装する概要 下記githubのソースをもとにVue.js用にプラグイン化しました。 https://gist.github.com/Agoreddah/511864e2c00da064586523b3087c30e2 ソース […]
Youtubeフィードを使用してWordPressにチャンネルの動画一覧を表示する。概要 Youtubeにはフィードを取得する方法があります。 今回はYoutubeフィードを使用してWordPressにチャンネルの動画一覧を表示させます。 フィードURL チャンネルIDは以前投稿した記事で確認することが […]Macでテキストを音声データ(MP3)に一括変換概要 Macでテキストを一括で音声データに変換する方法です。 テキストを音声データに変換(aiff) Macではテキストを右クリックで音声データに変換することができます。 1、テキストを選択して ＞ 右クリック ＞ スポ […]HLS(HTTP Live Streaming)動画を再生する概要 HLS(HTTP Live Streaming)フォーマットの動画をWEBで再生する方法 HLSに変換 hls.jsを読み込み VIDEOタグ スクリプトスムーズスクロール概要 最近はアニメーションでGSAPをよく使用しているのですが、スムーズスクロールを実装させたい場合、jQueryのeaseScrollだとバッティングしているのか正常に動きません。GSAPにもScrollSmoothe […]
ページのスクロールされている割合を表示させる概要 このサイトのヘッダーでも実装している、スクロールされている割合をページに表示させるJavaScriptを実装します。 ソース 解説 スクロール位置をwindow.scrollTop()で取得できるようにしています。 […]マウスチェイサー概要 マウスの動きに追随する、マウスチェイサー（英語にしただけ^^）を実装します。マウスに近づくにつれてゆっくり動くようにするのと、リンクにマウスオーバーで変形するようにもします。 ソース 解説 mp関数はマウスの座標を […]
CSSで三角形を作る(clip-path版)概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。以前、CSSで三角形を作る(border版)の記事を書いたのですが、その方法のclip-path版です。 ソース .triangleにスタイルを設定 […]JavaScriptで円運動概要 JavaScriptで円を描くように要素が移動するアニメーションを実装します。 サンプル ソース 解説 x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。
WordPressにインスタグラムの投稿一覧を表示概要 簡易的にWordPressにインスタクラムに投稿された写真の一覧を表示させる方法。 ※あらかじめアクセストークンを取得しておく必要があります。 Instagram Graph APIのビジネスアカウントIDとアクセ […]
要素の境界線を斜めにする概要 要素の境界線を水平ではなく少し斜めにCSSでします。背景をグラデーションや画像にすることも可能です。 サンプル タイトル 文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文 […]YouTubeアプリでフィード(サムネイル)が自動再生されるのを止める概要 YouTubeアプリを起動したときにフィード(サムネイル)が自動で再生されてしまいます。WiFi環境なら問題ないのですが、外出中などに勝手に再生されるのは通信量もかかるので止めるようにします。 操作方法 アプリ右上 […]
iPhoneでウォレットのメインカードを入れ替える概要 iPhoneでメインカードを入れ替える方法は２つあります。 ※iOS16.1.1 1.ウォレットアプリでの入れ替え 下になっているカードをタップしながら真ん中に持っていきます。 2.設定からの切り替え 設定を立ち上 […]
WordPressにnoteの記事一覧を埋め込む概要 noteのRSSを読み込んでWordPressに埋め込む方法 APIへのアクセスを減らすためTransients APIを使用して一時保存する noteのRSS RSSのURLはクリエーターページのプロフィールエリ […]
mask-imageでSVG画像の色を変える概要 色違いのSVG画像を使用したいけど、別ファイルにして作成するのも面倒くさいし、SVGをインラインで挿入してCSSで色を変えるもの、SVGインラインは可動性にかけてソース見づらいしみたいな時に使用する方法です。 ※色 […]YouTube動画のキーワードを調べる概要 YouTubeの動画がどんなキーワードを指定しているか気になりますよね。そんなキーワードを調べる方法です。 ソースから確認 ソースで確認する場合、キーワードタグで確認することができます。 確認できるフォームを作りま […]
mask-imageで透過グラデーション概要 下記のように要素を透過グラデーションする方法です。これを使用すると背景に溶け込ませるようなグラデーションにすることができます。 サンプル HTML CSS mask-imageにlinear-gradientでグラ […]
Instagram Graph APIのビジネスアカウントIDとアクセストークン取得概要 WEBサイトにインスタグラムの写真を埋め込むために必要なビジネスアカウントIDとアクセストークン取得方法です。3段階目のアクセストークンまでの発行をスクリプトにしました。 用意するもの 必要なデータ ソース git […]ブランドリソース一覧概要 WEBサービスを提供している企業はブランドリソースという形で、ロゴの使用ガイドラインやダンロードをできるをページを提供しています。そんなブランドリソースページをまとめました。 Facebook https://ww […]他人のYouTubeのチャンネルIDを調べる概要 自分自身のチャンネルIDはYouTube Studio＞カスタマイズ＞基本情報 で確認することができますが、他人のチャンネルでカスタム URLを使用されているチャンネルはチャンネルIDがわかりません。 ソースから確 […]
WordPressにYouTubeの動画一覧を表示する概要 簡易的にWordPressにYouTubeの動画一覧を表示する方法 ※事前にYouTubeのAPIキーの取得をする必要があります。 検索部分 「youtube_data」の部分はTransients APIで保存す […]
get_the_archive_title で勝手に追加される「アーカイブ:」などを削除概要 上記でアーカイブのタイトルを書き出したい時に勝手に「アーカイブ: ○○○○○」と表示されるのを毎回削除し方を忘れるので書きとめておきます。 フックで削除する 無理やり感はありますが、簡単でわかりやすかったので下記の […]プラグイン「Simple CSS」で任意の場所にスタイルシートを書き出したいはじめに 「Simple CSS」というプラグインを使用すると記事ごとにスタイルシートを書くことができるのですが、書き出し場所がheadタグ内になります。 しかし、「barba.js」などでSPA（シングルページアプリケ […]
ボーダーをグラデーション・角丸・背景抜きでCSSで実装するはじめに ボーダーの色をグラデーションにして角丸で背景抜きを実装したくて色々ググってみたのですが、なかなか見つからなくて唯一見つけた記事を参考に書かせていただいてます。 https://dev.to/afif/borde […]
Android ChromeをUSBでパソコンに繋いでデバッグする方法Android 側 ※OSのバージョンによって異なる場合があります。 ホーム画面などにある「設定」アイコンをタップ 「設定」にある、「デバイス情報」をタップ 「ビルド番号」を数回タップしたあと、「PIN番号」を入力。 「 […]アイキャッチにデフォルト画像を設定概要 保存する時にアイキャッチの指定がない場合、指定した画像をアイキャッチとして保存するように設定します。 画像をアップロード アイキャッチに使用したい画像をメディアにアップロード 画像IDを調べる アップロードした画像 […]CSSで三角形を作る(border版)概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。 私自身はclip-path版を推しています。こちらの記事もどうぞ。 https://ilr.jp/tech/889 実装結果 解説 な […]
ページ内スクロール今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。 ページ内スクロール HTML CSS ページトップボタン HTML CSS JavaScript 解説 a[href^=”#& […]
ハンバーガメニュー今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]