[{"data":1,"prerenderedAt":257},["ShallowReactive",2],{"site-info":3,"home-posts":7},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"items":8,"pagination":252},[9,32,53,62,81,102,113,130,139,148,158,171,183,196,211,221,230,239],{"ID":10,"title":11,"post_type":12,"post_type_label":13,"url":14,"date":15,"modified":15,"thumbnail":16,"thumb":16,"tag":17,"slug":30,"excerpt":31},2769,"WebページにGoogleフォーム風のお問い合わせフォームを追加する方法","tech","Tech Blog","\u002Ftech\u002F2769\u002F","2026.06.22","https:\u002F\u002Filr.jp\u002Fuploads\u002F2026\u002F06\u002FImage_2769_20260622-1200x675.png",[18,22,26],{"name":19,"slug":20,"url":21},"Google","google","\u002Ftag\u002Fgoogle\u002F",{"name":23,"slug":24,"url":25},"HTML","html","\u002Ftag\u002Fhtml\u002F",{"name":27,"slug":28,"url":29},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F","add-google-form-to-website-html-apps-script","HTMLフォーム、Googleスプレッドシート、Apps Scriptを使って、静的なWebページに問い合わせフォームを追加する方法を簡単に解説します。",{"ID":33,"title":34,"post_type":12,"post_type_label":13,"url":35,"date":36,"modified":36,"thumbnail":37,"thumb":37,"tag":38,"slug":51,"excerpt":52},2756,"WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話","\u002Ftech\u002F2756\u002F","2026.06.12","https:\u002F\u002Filr.jp\u002Fuploads\u002F2026\u002F06\u002Fimg_2756-1200x675.png",[39,43,47],{"name":40,"slug":41,"url":42},"API","api","\u002Ftag\u002Fapi\u002F",{"name":44,"slug":45,"url":46},"Nuxt","nuxt","\u002Ftag\u002Fnuxt\u002F",{"name":48,"slug":49,"url":50},"WordPress","wordpress","\u002Ftag\u002Fwordpress\u002F","wordpress%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%83%98%e3%83%83%e3%83%89%e3%83%ac%e3%82%b9cms%e5%8c%96%e3%81%97%e3%80%81nuxt-js-ai%e9%96%8b%e7%99%ba%e3%81%a7%e9%9d%99%e7%9a%84%e3%82%b5%e3%82%a4","これまでこのサイトは、WordPressを使って運用していました。 WordPressは記事の管理や更新がしやすく、長く使われているCMSです。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上で […]",{"ID":54,"title":55,"post_type":12,"post_type_label":13,"url":56,"date":57,"modified":58,"thumbnail":59,"thumb":59,"slug":60,"excerpt":61},2372,"オリジナルフォントを作成する","\u002Ftech\u002F2372\u002F","2025.11.21","2026.06.04","https:\u002F\u002Filr.jp\u002Fuploads\u002F2025\u002F11\u002Foriginal-font-thumbnail-1920x1080-1-1200x675.webp","%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b","概要 SVGから変換してオリジナルフォントを作成します。 ファイル構成 iconフォルダのSVGのファイル名がそのままキーボード入力に割り当てられます。 package.json svgtofont.js nagataは […]",{"ID":63,"title":64,"post_type":12,"post_type_label":13,"url":65,"date":66,"modified":67,"thumbnail":68,"thumb":68,"tag":69,"slug":79,"excerpt":80},2367,"DockerでWordPress構築（ローカル仮想ドメイン版)","\u002Ftech\u002F2367\u002F","2025.10.30","2026.06.24","https:\u002F\u002Filr.jp\u002Fuploads\u002F2025\u002F10\u002FImage_2367_2026_6_24-1200x675.png",[70,74,78],{"name":71,"slug":72,"url":73},"Docker","docker","\u002Ftag\u002Fdocker\u002F",{"name":75,"slug":76,"url":77},"PHP","php","\u002Ftag\u002Fphp\u002F",{"name":48,"slug":49,"url":50},"docker%e3%81%a7wordpress%e6%a7%8b%e7%af%89%ef%bc%88%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e4%bb%ae%e6%83%b3%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e7%89%88","概要 Macのローカルに仮装ドメインでWordPressの開発環境を構築します。 ・仮装ドメインでのアクセス・httpsでのアクセス・メール送信できるようにする・phpMyAdmin構築 構成 OSMacBook Pro […]",{"ID":82,"title":83,"post_type":12,"post_type_label":13,"url":84,"date":85,"modified":36,"thumbnail":86,"thumb":86,"tag":87,"slug":100,"excerpt":101},2186,"【改訂】Vueで暗号化・復号化を実装する","\u002Ftech\u002F2186\u002F","2024.06.25","https:\u002F\u002Filr.jp\u002Fuploads\u002F2024\u002F06\u002Ftech2186-thumbnail-1200x675.png",[88,92,96],{"name":89,"slug":90,"url":91},"Vue","vue","\u002Ftag\u002Fvue\u002F",{"name":93,"slug":94,"url":95},"復号化","decryption","\u002Ftag\u002Fdecryption\u002F",{"name":97,"slug":98,"url":99},"暗号化","encryption","\u002Ftag\u002Fencryption\u002F","%e3%80%90%e6%94%b9%e8%a8%82%e3%80%91vue-js%e3%81%a7%e6%9a%97%e5%8f%b7%e5%8c%96%e3%83%bb%e5%be%a9%e5%8f%b7%e5%8c%96%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b","概要 Vue.js用の暗号化・復号化のモジュールを作成しました。 ソース 暗号化キーは直接書いても良いですし、.envファイルに設定しても良いと思います。 使用方法 暗号化 復号化",{"ID":103,"title":104,"post_type":12,"post_type_label":13,"url":105,"date":85,"modified":106,"thumbnail":107,"thumb":107,"tag":108,"slug":111,"excerpt":112},2179,"Vueコンポーネント一括インポート","\u002Ftech\u002F2179\u002F","2026.06.16","https:\u002F\u002Filr.jp\u002Fuploads\u002F2024\u002F06\u002Ftech2179-thumbnail-1200x675.png",[109,110],{"name":27,"slug":28,"url":29},{"name":89,"slug":90,"url":91},"vue%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e4%b8%80%e6%8b%ac%e3%82%a4%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%88","概要 個別にインポートしているコンポーネントを、一括で読み込むようにします。 施策 プラグイン作成 src\u002Fplugins\u002FcomponentsLoader.js componentsフォルダ内のvue拡張子のファイルを […]",{"ID":114,"title":115,"post_type":12,"post_type_label":13,"url":116,"date":117,"modified":85,"thumbnail":118,"thumb":118,"tag":119,"slug":128,"excerpt":129},2062,"Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する","\u002Ftech\u002F2062\u002F","2024.01.14","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Filr.png",[120,124],{"name":121,"slug":122,"url":123},"X(旧Twitter)","xtwitter","\u002Ftag\u002Fxtwitter\u002F",{"name":125,"slug":126,"url":127},"Xプレミアム","xpremium","\u002Ftag\u002Fxpremium\u002F","x%e3%83%97%e3%83%ac%e3%83%9f%e3%82%a2%e3%83%a0%e3%81%a7%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b%e3%83%86%e3%82%a3","概要 Xプレミアムにアップグレードすると、プロフィールページにコミュニティへのリンクを追加することができます。 施策 「コミュニティ」をクリック 自身が作成したコミュニティをクリック 右上の管理ツールをクリック 「コミュ […]",{"ID":131,"title":132,"post_type":12,"post_type_label":13,"url":133,"date":117,"modified":117,"thumbnail":118,"thumb":118,"tag":134,"slug":137,"excerpt":138},2047,"Xプレミアムでプロフィールページのいいねを非表示にする","\u002Ftech\u002F2047\u002F",[135,136],{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127},"x%e3%83%97%e3%83%ac%e3%83%9f%e3%82%a2%e3%83%a0%e3%81%a7%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%81%84%e3%81%84%e3%81%ad%e3%82%92%e9%9d%9e%e8%a1%a8","概要 Xプレミアムにアップグレードすると、プロフィールページの「いいね」タブを非表示にすることができます。どこ投稿に「いいね」をしたかを知られないようにしたいときには有効です。 施策 「もっと見る」をクリック 「設定とサ […]",{"ID":140,"title":141,"post_type":12,"post_type_label":13,"url":142,"date":143,"modified":143,"thumbnail":118,"thumb":118,"tag":144,"slug":146,"excerpt":147},1992,"WordPressでサイドバーに目次を表示させる","\u002Ftech\u002F1992\u002F","2024.01.05",[145],{"name":48,"slug":49,"url":50},"wordpress%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ab%e7%9b%ae%e6%ac%a1%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b","概要 このサイトでも使用していますが、記事の内容を目次にしてサイドバーに表示する方法を解説します。 また、スクロール位置がわかりやすいように、目次のリンクがアクティブになるようにします。 プラグイン プラグインインストー […]",{"ID":149,"title":150,"post_type":12,"post_type_label":13,"url":151,"date":152,"modified":153,"thumbnail":118,"thumb":118,"tag":154,"slug":156,"excerpt":157},1942,"Intersection Observerでスクロールで要素の状態を変化させる","\u002Ftech\u002F1942\u002F","2023.12.20","2025.10.29",[155],{"name":27,"slug":28,"url":29},"intersection-observer%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%a7%e8%a6%81%e7%b4%a0%e3%81%ae%e7%8a%b6%e6%85%8b%e3%82%92%e5%a4%89%e5%8c%96%e3%81%95%e3%81%9b%e3%82%8b","概要 スクロールに合わせて、タイトルや画像をふわっと表示させたい時は、スクロールイベントを設定して実装していましたが、Intersection Observerを使用することでシンプルに実装できます。 施策 HTML ペ […]",{"ID":159,"title":160,"post_type":12,"post_type_label":13,"url":161,"date":162,"modified":58,"thumbnail":163,"thumb":163,"tag":164,"slug":169,"excerpt":170},1934,"【公式】他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F1934\u002F","2023.12.15","https:\u002F\u002Filr.jp\u002Fuploads\u002F2022\u002F10\u002Fyoutube_id.png",[165],{"name":166,"slug":167,"url":168},"YouTube","youtube","\u002Ftag\u002Fyoutube\u002F","%e3%80%90%e5%85%ac%e5%bc%8f%e3%80%91%e4%bb%96%e4%ba%ba%e3%81%aeyoutube%e3%81%ae%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%abid%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b","概要 以前、他人のYouTubeのチャンネルIDを調べるという記事を書いたのですが、PCのチャンネルページから調べられるようになったので、共有します。 以前の記事 https:\u002F\u002Filr.jp\u002Ftech\u002F48 […]",{"ID":172,"title":173,"post_type":12,"post_type_label":13,"url":174,"date":175,"modified":162,"thumbnail":118,"thumb":118,"tag":176,"slug":181,"excerpt":182},1904,"ブラウザの横幅に合わせてフォントサイズを変更する。","\u002Ftech\u002F1904\u002F","2023.11.28",[177],{"name":178,"slug":179,"url":180},"CSS","css","\u002Ftag\u002Fcss\u002F","%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e6%a8%aa%e5%b9%85%e3%81%ab%e5%90%88%e3%82%8f%e3%81%9b%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4","概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]",{"ID":184,"title":185,"post_type":12,"post_type_label":13,"url":186,"date":187,"modified":153,"thumbnail":118,"thumb":118,"tag":188,"slug":194,"excerpt":195},1895,"SVG内の要素にfilterを適応させる","\u002Ftech\u002F1895\u002F","2023.11.16",[189,190],{"name":27,"slug":28,"url":29},{"name":191,"slug":192,"url":193},"SVG","svg","\u002Ftag\u002Fsvg\u002F","svg%e5%86%85%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%abfilter%e3%82%92%e9%81%a9%e5%bf%9c%e3%81%95%e3%81%9b%e3%82%8b","概要 CSSでSVG内にある要素にfilterを適応させようとすると、なぜかSafariで見ると適応されません。 静的なSVGだとdefsタグ内に設定するだけで良いのですが、動的にSVG内を変更したい場合などは適応するこ […]",{"ID":197,"title":198,"post_type":12,"post_type_label":13,"url":199,"date":200,"modified":201,"thumbnail":202,"thumb":202,"tag":203,"slug":209,"excerpt":210},1831,"JavaScriptで擬似要素を操作する","\u002Ftech\u002F1831\u002F","2023.08.07","2023.08.08","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[204,205],{"name":27,"slug":28,"url":29},{"name":206,"slug":207,"url":208},"擬似要素","pseudo-element","\u002Ftag\u002Fpseudo-element\u002F","javascript%e3%81%a7%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%82%92%e6%93%8d%e4%bd%9c%e3%81%99%e3%82%8b","概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript",{"ID":212,"title":213,"post_type":12,"post_type_label":13,"url":214,"date":215,"modified":201,"thumbnail":216,"thumb":216,"tag":217,"slug":219,"excerpt":220},1827,"2点間の緯度・経度の距離を求める","\u002Ftech\u002F1827\u002F","2023.08.06","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_markers.webp",[218],{"name":27,"slug":28,"url":29},"2%e7%82%b9%e9%96%93%e3%81%ae%e7%b7%af%e5%ba%a6%e3%83%bb%e7%b5%8c%e5%ba%a6%e3%81%ae%e8%b7%9d%e9%9b%a2%e3%82%92%e6%b1%82%e3%82%81%e3%82%8b","概要 2点間の緯度・経度の距離を求めます。直線の距離なので、Googleマップなどの経路の距離ではないので注意が必要です。 参考文献 スクリプト 出力",{"ID":222,"title":223,"post_type":12,"post_type_label":13,"url":224,"date":215,"modified":153,"thumbnail":225,"thumb":225,"tag":226,"slug":228,"excerpt":229},1814,"JavaScriptで現在地を取得する","\u002Ftech\u002F1814\u002F","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_marker.webp",[227],{"name":27,"slug":28,"url":29},"javascript%e3%81%a7%e7%8f%be%e5%9c%a8%e5%9c%b0%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b","概要 JavaScriptの関数Geolocation: getCurrentPosition()で現在地を取得します。 スクリプト 出力 テスト 現在地情報の取得を許可すると表示されます。",{"ID":231,"title":232,"post_type":12,"post_type_label":13,"url":233,"date":234,"modified":234,"thumbnail":118,"thumb":118,"tag":235,"slug":237,"excerpt":238},1807,"コロン(:)の入った要素や属性の情報を取得する","\u002Ftech\u002F1807\u002F","2023.08.04",[236],{"name":27,"slug":28,"url":29},"%e3%82%b3%e3%83%ad%e3%83%b3%e3%81%ae%e5%85%a5%e3%81%a3%e3%81%9f%e8%a6%81%e7%b4%a0%e3%82%84%e5%b1%9e%e6%80%a7%e3%81%ae%e6%83%85%e5%a0%b1%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b","概要 XMLなどを読み込んだ際、コロン(:)がついた要素や属性がある場合に取得する方法です。 取得方法 コロン(:)の前にバックスラッシュ(\\)を2つ入れます。 要素 属性",{"ID":240,"title":241,"post_type":12,"post_type_label":13,"url":242,"date":243,"modified":201,"thumbnail":244,"thumb":244,"tag":245,"slug":250,"excerpt":251},1803,"Node.jsのバージョン管理","\u002Ftech\u002F1803\u002F","2023.08.02","https:\u002F\u002Filr.jp\u002Fuploads\u002F2023\u002F08\u002Fimg_nodejs.webp",[246],{"name":247,"slug":248,"url":249},"Node.js","node-js","\u002Ftag\u002Fnode-js\u002F","node-js%e3%81%ae%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e7%ae%a1%e7%90%86","概要 毎回忘れるのでメモです。nodebrewがインストールされていることが前提となります。 コマンド 現在のバージョン確認 インストール可能なバージョン確認 インストールされているバージョン確認 バージョンを指定してイ […]",{"page":253,"per_page":254,"total":255,"total_pages":256},1,18,69,4,1785309423184]