オリジナルフォントを作成する概要 SVGから変換してオリジナルフォントを作成します。 ファイル構成 iconフォルダのSVGのファイル名がそのままキーボード入力に割り当てられます。 package.json svgtofont.js nagataは […]ILR
アイ・エル・アール
フリーランスWEB制作
Latest
74 entries
オリジナルフォントを作成する概要 SVGから変換してオリジナルフォントを作成します。 ファイル構成 iconフォルダのSVGのファイル名がそのままキーボード入力に割り当てられます。 package.json svgtofont.js nagataは […]
DockerでWordPress構築（ローカル仮想ドメイン版)概要 Macのローカルに仮装ドメインでWordPressの開発環境を構築します。 ・仮装ドメインでのアクセス・httpsでのアクセス・メール送信できるようにする・phpMyAdmin構築 構成 OSMacBook Pro […]
【改訂】Vueで暗号化・復号化を実装する概要 Vue.js用の暗号化・復号化のモジュールを作成しました。 ソース 暗号化キーは直接書いても良いですし、.envファイルに設定しても良いと思います。 使用方法 暗号化 復号化Vueコンポーネント一括インポート概要 個別にインポートしているコンポーネントを、一括で読み込むようにします。 施策 プラグイン作成 src/plugins/componentsLoader.js componentsフォルダ内のvue拡張子のファイルを […]Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する概要 Xプレミアムにアップグレードすると、プロフィールページにコミュニティへのリンクを追加することができます。 施策 「コミュニティ」をクリック 自身が作成したコミュニティをクリック 右上の管理ツールをクリック 「コミュ […]Xプレミアムでプロフィールページのいいねを非表示にする概要 Xプレミアムにアップグレードすると、プロフィールページの「いいね」タブを非表示にすることができます。どこ投稿に「いいね」をしたかを知られないようにしたいときには有効です。 施策 「もっと見る」をクリック 「設定とサ […]WordPressでサイドバーに目次を表示させる概要 このサイトでも使用していますが、記事の内容を目次にしてサイドバーに表示する方法を解説します。 また、スクロール位置がわかりやすいように、目次のリンクがアクティブになるようにします。 プラグイン プラグインインストー […]Intersection Observerでスクロールで要素の状態を変化させる概要 スクロールに合わせて、タイトルや画像をふわっと表示させたい時は、スクロールイベントを設定して実装していましたが、Intersection Observerを使用することでシンプルに実装できます。 施策 HTML ペ […]
【公式】他人のYouTubeのチャンネルIDを調べる概要 以前、他人のYouTubeのチャンネルIDを調べるという記事を書いたのですが、PCのチャンネルページから調べられるようになったので、共有します。 以前の記事 https://ilr.jp/tech/48 […]ブラウザの横幅に合わせてフォントサイズを変更する。概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]SVG内の要素にfilterを適応させる概要 CSSでSVG内にある要素にfilterを適応させようとすると、なぜかSafariで見ると適応されません。 静的なSVGだとdefsタグ内に設定するだけで良いのですが、動的にSVG内を変更したい場合などは適応するこ […]
JavaScriptで擬似要素を操作する概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript
2点間の緯度・経度の距離を求める概要 2点間の緯度・経度の距離を求めます。直線の距離なので、Googleマップなどの経路の距離ではないので注意が必要です。 参考文献 スクリプト 出力
JavaScriptで現在地を取得する概要 JavaScriptの関数Geolocation: getCurrentPosition()で現在地を取得します。 スクリプト 出力 テスト 現在地情報の取得を許可すると表示されます。コロン(:)の入った要素や属性の情報を取得する概要 XMLなどを読み込んだ際、コロン(:)がついた要素や属性がある場合に取得する方法です。 取得方法 コロン(:)の前にバックスラッシュ(\)を2つ入れます。 要素 属性
Node.jsのバージョン管理概要 毎回忘れるのでメモです。nodebrewがインストールされていることが前提となります。 コマンド 現在のバージョン確認 インストール可能なバージョン確認 インストールされているバージョン確認 バージョンを指定してイ […]
dialog要素とtemplate要素を使用してモーダルウィンドウを作る概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]
HTMLメール用にインラインCSSに変換する概要 OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。 今回はメルマガのHTMLメール用のコーディングをする際に […]