GSAPで一文字ずつテキストをアニメーションさせる概要 このページのようにテキストを一文字ずつ表示させるアニメーションをGSAPを使用して実装します。 スクリプト 使い方 要素にdata-anime=”framein”を追加する ソース http […]tech
技術情報
WordPress、フロントエンド、Web制作、日々の実装メモをまとめています。
70 記事
Page 2 / 3
GSAPで一文字ずつテキストをアニメーションさせる概要 このページのようにテキストを一文字ずつ表示させるアニメーションをGSAPを使用して実装します。 スクリプト 使い方 要素にdata-anime=”framein”を追加する ソース http […]
WordPressでauthor名を分からないようにする概要 WordPressのソースの中にはauthor名表示される箇所があります。そのauthor名から管理画面へログインされる可能性があるのでソースに表示されないようにします。 authorページをリダイレクト /?au […]
カスタム投稿タイプのフィードを作成する概要 RSSへのリンクを追加してカスタム投稿タイプのフィードを表示させます。 下記URLでも良いのですが、せっかくなのでリライトルールを使用して独自URLを作成します。 スクリプト リライトルールの反映 WordPres […]
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を調べる アップロードした画像 […]Contact
制作・改修・運用支援のご依頼
新規制作、既存サイトの改修、継続的な更新業務まで、目的と運用体制に合わせて対応範囲を整理します。
