[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"site-info":3,"home-posts":7},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"items":8,"pagination":245},[9,32,41,58,79,92,109,118,127,137,150,162,175,190,200,209,218,231],{"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},2756,"WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話","tech","Tech Blog","\u002Ftech\u002F2756\u002F","2026.06.12","\u002Fuploads\u002F2026\u002F06\u002Fimg_2756-1200x675.png",[18,22,26],{"name":19,"slug":20,"url":21},"API","api","\u002Ftag\u002Fapi\u002F",{"name":23,"slug":24,"url":25},"Nuxt","nuxt","\u002Ftag\u002Fnuxt\u002F",{"name":27,"slug":28,"url":29},"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":33,"title":34,"post_type":12,"post_type_label":13,"url":35,"date":36,"modified":37,"thumbnail":38,"thumb":38,"slug":39,"excerpt":40},2372,"オリジナルフォントを作成する","\u002Ftech\u002F2372\u002F","2025.11.21","2026.06.04","\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":42,"title":43,"post_type":12,"post_type_label":13,"url":44,"date":45,"modified":15,"thumbnail":46,"thumb":46,"tag":47,"slug":56,"excerpt":57},2367,"DockerでWordPress構築（ローカル仮想ドメイン版)","\u002Ftech\u002F2367\u002F","2025.10.30","\u002Fuploads\u002F2025\u002F10\u002Ftech2367-thumbnail-1200x675.png",[48,52,55],{"name":49,"slug":50,"url":51},"Docker","docker","\u002Ftag\u002Fdocker\u002F",{"name":53,"slug":53,"url":54},"php","\u002Ftag\u002Fphp\u002F",{"name":27,"slug":28,"url":29},"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":59,"title":60,"post_type":12,"post_type_label":13,"url":61,"date":62,"modified":15,"thumbnail":63,"thumb":63,"tag":64,"slug":77,"excerpt":78},2186,"【改訂】Vueで暗号化・復号化を実装する","\u002Ftech\u002F2186\u002F","2024.06.25","\u002Fuploads\u002F2024\u002F06\u002Ftech2186-thumbnail-1200x675.png",[65,69,73],{"name":66,"slug":67,"url":68},"Vue","vue","\u002Ftag\u002Fvue\u002F",{"name":70,"slug":71,"url":72},"復号化","decryption","\u002Ftag\u002Fdecryption\u002F",{"name":74,"slug":75,"url":76},"暗号化","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":80,"title":81,"post_type":12,"post_type_label":13,"url":82,"date":62,"modified":62,"thumbnail":83,"thumb":83,"tag":84,"slug":90,"excerpt":91},2179,"Vueコンポーネント一括インポート","\u002Ftech\u002F2179\u002F","\u002Fuploads\u002F2023\u002F05\u002Fvuejs.png",[85,89],{"name":86,"slug":87,"url":88},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F",{"name":66,"slug":67,"url":68},"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":93,"title":94,"post_type":12,"post_type_label":13,"url":95,"date":96,"modified":62,"thumbnail":97,"thumb":97,"tag":98,"slug":107,"excerpt":108},2062,"Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する","\u002Ftech\u002F2062\u002F","2024.01.14","\u002Fuploads\u002F2022\u002F10\u002Filr.png",[99,103],{"name":100,"slug":101,"url":102},"X(旧Twitter)","xtwitter","\u002Ftag\u002Fxtwitter\u002F",{"name":104,"slug":105,"url":106},"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":110,"title":111,"post_type":12,"post_type_label":13,"url":112,"date":96,"modified":96,"thumbnail":97,"thumb":97,"tag":113,"slug":116,"excerpt":117},2047,"Xプレミアムでプロフィールページのいいねを非表示にする","\u002Ftech\u002F2047\u002F",[114,115],{"name":100,"slug":101,"url":102},{"name":104,"slug":105,"url":106},"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":119,"title":120,"post_type":12,"post_type_label":13,"url":121,"date":122,"modified":122,"thumbnail":97,"thumb":97,"tag":123,"slug":125,"excerpt":126},1992,"WordPressでサイドバーに目次を表示させる","\u002Ftech\u002F1992\u002F","2024.01.05",[124],{"name":27,"slug":28,"url":29},"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":128,"title":129,"post_type":12,"post_type_label":13,"url":130,"date":131,"modified":132,"thumbnail":97,"thumb":97,"tag":133,"slug":135,"excerpt":136},1942,"Intersection Observerでスクロールで要素の状態を変化させる","\u002Ftech\u002F1942\u002F","2023.12.20","2025.10.29",[134],{"name":86,"slug":87,"url":88},"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":138,"title":139,"post_type":12,"post_type_label":13,"url":140,"date":141,"modified":37,"thumbnail":142,"thumb":142,"tag":143,"slug":148,"excerpt":149},1934,"【公式】他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F1934\u002F","2023.12.15","\u002Fuploads\u002F2022\u002F10\u002Fyoutube_id.png",[144],{"name":145,"slug":146,"url":147},"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":151,"title":152,"post_type":12,"post_type_label":13,"url":153,"date":154,"modified":141,"thumbnail":97,"thumb":97,"tag":155,"slug":160,"excerpt":161},1904,"ブラウザの横幅に合わせてフォントサイズを変更する。","\u002Ftech\u002F1904\u002F","2023.11.28",[156],{"name":157,"slug":158,"url":159},"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":163,"title":164,"post_type":12,"post_type_label":13,"url":165,"date":166,"modified":132,"thumbnail":97,"thumb":97,"tag":167,"slug":173,"excerpt":174},1895,"SVG内の要素にfilterを適応させる","\u002Ftech\u002F1895\u002F","2023.11.16",[168,169],{"name":86,"slug":87,"url":88},{"name":170,"slug":171,"url":172},"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":176,"title":177,"post_type":12,"post_type_label":13,"url":178,"date":179,"modified":180,"thumbnail":181,"thumb":181,"tag":182,"slug":188,"excerpt":189},1831,"JavaScriptで擬似要素を操作する","\u002Ftech\u002F1831\u002F","2023.08.07","2023.08.08","\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[183,184],{"name":86,"slug":87,"url":88},{"name":185,"slug":186,"url":187},"擬似要素","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":191,"title":192,"post_type":12,"post_type_label":13,"url":193,"date":194,"modified":180,"thumbnail":195,"thumb":195,"tag":196,"slug":198,"excerpt":199},1827,"2点間の緯度・経度の距離を求める","\u002Ftech\u002F1827\u002F","2023.08.06","\u002Fuploads\u002F2023\u002F08\u002Fimg_markers.webp",[197],{"name":86,"slug":87,"url":88},"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":201,"title":202,"post_type":12,"post_type_label":13,"url":203,"date":194,"modified":132,"thumbnail":204,"thumb":204,"tag":205,"slug":207,"excerpt":208},1814,"JavaScriptで現在地を取得する","\u002Ftech\u002F1814\u002F","\u002Fuploads\u002F2023\u002F08\u002Fimg_marker.webp",[206],{"name":86,"slug":87,"url":88},"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":210,"title":211,"post_type":12,"post_type_label":13,"url":212,"date":213,"modified":213,"thumbnail":97,"thumb":97,"tag":214,"slug":216,"excerpt":217},1807,"コロン(:)の入った要素や属性の情報を取得する","\u002Ftech\u002F1807\u002F","2023.08.04",[215],{"name":86,"slug":87,"url":88},"%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":219,"title":220,"post_type":12,"post_type_label":13,"url":221,"date":222,"modified":180,"thumbnail":223,"thumb":223,"tag":224,"slug":229,"excerpt":230},1803,"Node.jsのバージョン管理","\u002Ftech\u002F1803\u002F","2023.08.02","\u002Fuploads\u002F2023\u002F08\u002Fimg_nodejs.webp",[225],{"name":226,"slug":227,"url":228},"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がインストールされていることが前提となります。 コマンド 現在のバージョン確認 インストール可能なバージョン確認 インストールされているバージョン確認 バージョンを指定してイ […]",{"ID":232,"title":233,"post_type":12,"post_type_label":13,"url":234,"date":235,"modified":132,"thumbnail":236,"thumb":236,"tag":237,"slug":243,"excerpt":244},1775,"dialog要素とtemplate要素を使用してモーダルウィンドウを作る","\u002Ftech\u002F1775\u002F","2023.07.29","\u002Fuploads\u002F2023\u002F07\u002Fimg_window.webp",[238,242],{"name":239,"slug":240,"url":241},"HTML","html","\u002Ftag\u002Fhtml\u002F",{"name":86,"slug":87,"url":88},"dialog%e8%a6%81%e7%b4%a0%e3%81%a8template%e8%a6%81%e7%b4%a0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%82%92","概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]",{"page":246,"per_page":247,"total":248,"total_pages":249},1,18,68,4,1781247296926]