[{"data":1,"prerenderedAt":1077},["ShallowReactive",2],{"site-info":3,"post-tech-2756":7,"related-post-tag-index":38},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":15,"slug":28,"excerpt":29,"content":30,"simple_css":31,"adjacent":32},2756,"WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話","tech","Tech Blog","\u002Ftech\u002F2756\u002F","2026.06.12","\u002Fuploads\u002F2026\u002F06\u002Fimg_2756-1200x675.png",[16,20,24],{"name":17,"slug":18,"url":19},"API","api","\u002Ftag\u002Fapi\u002F",{"name":21,"slug":22,"url":23},"Nuxt","nuxt","\u002Ftag\u002Fnuxt\u002F",{"name":25,"slug":26,"url":27},"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です。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上で […]"," \n  \u003Cp class=\"wp-block-paragraph\">これまでこのサイトは、WordPressを使って運用していました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">WordPressは記事の管理や更新がしやすく、長く使われているCMSです。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上でWordPressを動かし続ける以上、セキュリティ対策やアップ\n  デート対応、プラグイン管理などの運用コストはどうしても発生します。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">そこで今回、WordPressを記事管理用のCMSとして使いながら、公開サイト側はNuxt.jsで生成した静的サイトとして配信する構成へ移行しました。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">WordPressをヘッドレスCMSとして使う\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今回の構成では、WordPressの \u003Ccode>wp-json\u003C\u002Fcode> を利用しています。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">WordPress側ではこれまで通り記事を作成・更新し、そのデータをREST API経由で取得します。フロントエンド側ではNuxt.jsがその記事データを読み込み、ページとして生成します。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">つまり、WordPressは「記事を管理するための管理画面」として使い、実際にユーザーが見るサイトはNuxt.jsでビルドされた静的HTMLとして公開する形です。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">AIとCodexを使ってサイトを構築\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今回の移行では、Codexを使ってAIと一緒にサイト構築を進めました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">既存のWordPressテーマや記事データをもとに、Nuxt.js側のページ構成、コンポーネント、CSS、記事一覧、詳細ページ、検索機能などを整備していきました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">AIを使うことで、実装のたたき台を素早く作れる一方で、最終的な判断や調整は人間側で行う必要があります。特にデザインや細かなUIの品質については、AI任せにすると「それっぽいけれど、もう一段洗練されて\n  いない」状態になりやすいと感じました。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">ローカルでWordPressを動かして記事を更新\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">現在は、ローカル環境でWordPressを動かし、そこで記事を更新する運用にしています。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">記事を追加・修正したあと、Nuxt.js側で \u003Ccode>generate\u003C\u002Fcode> を実行します。これにより、WordPressの記事データを取得して、静的なサイトとしてビルドします。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">公開サーバーには、生成されたHTMLやCSS、JavaScript、画像などの静的ファイルだけをアップロードします。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">公開サーバーからWordPressを削除\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今回の大きな目的のひとつが、公開サーバー側からWordPressを削除することでした。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">WordPress本体、管理画面、ログイン画面、プラグイン、テーマのPHPファイルなどが公開サーバー上に存在しないため、攻撃対象を大きく減らすことができます。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">もちろん、静的サイトだから絶対に安全というわけではありません。ただ、WordPressを公開環境で直接動かしている場合に比べると、管理画面への不正アクセス、プラグインの脆弱性、PHP実行環境に起因するリス\n  クなどを減らせます。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">小規模なサイトや更新頻度がそこまで高くないサイトでは、この構成はかなり現実的だと感じています。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">デメリットもある\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">一方で、公開サーバー側にWordPressがないことによるデメリットもあります。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">たとえば、WordPressのプラグインに依存していたお問い合わせフォームやアクセス数のカウントなどは、そのままでは使えません。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">お問い合わせフォームはGoogleフォームや外部サービスを使う、アクセス解析はGoogle Analyticsなどを使う、といった代替手段が必要になります。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">また、記事を更新したら毎回ビルドしてアップロードする必要があります。WordPressだけで完結していた頃に比べると、更新フローは少しエンジニア寄りになります。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">今後の課題\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">現在の課題は、デザイン面です。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">AIを使うことで、一定の見た目まではかなり速く作れます。ただ、そこから先の「洗練されたデザイン」に到達するには、余白、文字サイズ、情報設計、配色、写真やビジュアルの使い方などを、もっと丁寧に詰め\n  ていく必要があります。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今の状態は、まだAIが提案したデザインの範囲を抜け出せていない部分があります。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今後は、ただ動くサイトではなく、見た目の完成度や読みやすさ、ブランドとしての印象も含めて改善していきたいと考えています。\u003C\u002Fp>\n  \n\n  \n  \u003Ch2 class=\"wp-block-heading\">まとめ\u003C\u002Fh2>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今回、WordPressで運用していたサイトを、\u003Ccode>wp-json\u003C\u002Fcode> を使ったヘッドレスCMS構成に移行しました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">ローカルではWordPressを記事管理用に使い、公開側はNuxt.jsで生成した静的サイトとして配信しています。さらにCodexを使うことで、AIと一緒に実装を進める開発スタイルも試すことができました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">公開サーバーからWordPressを削除できたことで、セキュリティ面ではかなりシンプルな構成になりました。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">一方で、お問い合わせやアクセス数カウントなど、WordPressの動的機能に頼っていた部分は別の方法で補う必要があります。\u003C\u002Fp>\n  \n\n  \n  \u003Cp class=\"wp-block-paragraph\">今後は、AIを活用しながらも、より人の手で細部を磨き込み、サイト全体の完成度を上げていきたいと思います。\u003C\u002Fp>\n  \n","",{"next":33,"previous":34},null,{"ID":35,"title":36,"post_type":10,"date":37},2372,"オリジナルフォントを作成する","2025.11.21",[39,55,152,284,301,309,332,350,367,382,588,595,615,622,644,660,667,724,731,758,764,788,916,942,952,1000,1020,1029,1043,1051,1057,1063],{"name":40,"slug":41,"url":42,"posts":43},"Android","android","\u002Ftag\u002Fandroid\u002F",[44],{"ID":45,"title":46,"post_type":10,"post_type_label":11,"url":47,"date":48,"modified":49,"thumbnail":50,"thumb":50,"tag":51,"slug":53,"excerpt":54},298,"Android ChromeをUSBでパソコンに繋いでデバッグする方法","\u002Ftech\u002F298\u002F","2022.10.03","2022.10.10","\u002Fuploads\u002F2022\u002F10\u002Fthumbnail_298-1200x675.jpg",[52],{"name":40,"slug":41,"url":42},"%ef%bf%bc","Android 側 ※OSのバージョンによって異なる場合があります。 ホーム画面などにある「設定」アイコンをタップ 「設定」にある、「デバイス情報」をタップ 「ビルド番号」を数回タップしたあと、「PIN番号」を入力。 「 […]",{"name":17,"slug":18,"url":19,"posts":56},[57,62,80,96,120,139],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":58,"slug":28,"excerpt":29},[59,60,61],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":63,"title":64,"post_type":10,"post_type_label":11,"url":65,"date":66,"modified":66,"thumbnail":67,"thumb":67,"tag":68,"slug":78,"excerpt":79},1737,"WordPressに気象庁APIで天気を表示する","\u002Ftech\u002F1737\u002F","2023.07.24","\u002Fuploads\u002F2023\u002F07\u002Fweather_api-1200x731.webp",[69,70,73,74],{"name":17,"slug":18,"url":19},{"name":71,"slug":71,"url":72},"php","\u002Ftag\u002Fphp\u002F",{"name":25,"slug":26,"url":27},{"name":75,"slug":76,"url":77},"気象庁","jma","\u002Ftag\u002Fjma\u002F","wordpress%e3%81%ab%e6%b0%97%e8%b1%a1%e5%ba%81api%e3%81%a7%e5%a4%a9%e6%b0%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 気象庁が提供しているAPIから天気情報をWordPressに表示します。 エリア情報 エリア情報は下記URLから確認することができます。 https:\u002F\u002Fwww.jma.go.jp\u002Fbosai\u002Fcommon\u002Fcon […]",{"ID":81,"title":82,"post_type":10,"post_type_label":11,"url":83,"date":84,"modified":84,"thumbnail":85,"thumb":85,"tag":86,"slug":94,"excerpt":95},1131,"WordPressで月送りのカレンダーを実装（祝日対応）","\u002Ftech\u002F1131\u002F","2023.06.15","\u002Fuploads\u002F2023\u002F06\u002Fbnr_calendar.png",[87,88,92,93],{"name":17,"slug":18,"url":19},{"name":89,"slug":90,"url":91},"Google","google","\u002Ftag\u002Fgoogle\u002F",{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},"wordpress%e3%81%a7%e6%9c%88%e9%80%81%e3%82%8a%e3%81%ae%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e5%ae%9f%e8%a3%85%ef%bc%88%e7%a5%9d%e6%97%a5%e5%af%be%e5%bf%9c%ef%bc%89","概要 月送りが出来て、投稿日にリンクと祝日の表示がされるカレンダーを実装します。 下記のようにAPIにしてHTML書き出しにしています。 https:\u002F\u002Filr.jp\u002Fapi\u002Fcalendar.php 祝日部 […]",{"ID":97,"title":98,"post_type":10,"post_type_label":11,"url":99,"date":100,"modified":101,"thumbnail":102,"thumb":102,"tag":103,"slug":118,"excerpt":119},1027,"Youtubeフィードを使用してWordPressにチャンネルの動画一覧を表示する。","\u002Ftech\u002F1027\u002F","2023.05.04","2026.06.04","\u002Fuploads\u002F2022\u002F10\u002Fyoutube_id.png",[104,105,109,110,114],{"name":17,"slug":18,"url":19},{"name":106,"slug":107,"url":108},"RSS","rss","\u002Ftag\u002Frss\u002F",{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},"YouTube","youtube","\u002Ftag\u002Fyoutube\u002F",{"name":115,"slug":116,"url":117},"フィード","feed","\u002Ftag\u002Ffeed\u002F","youtube%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6wordpress%e3%81%ab%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%ab%e3%81%ae%e5%8b%95%e7%94%bb%e4%b8%80%e8%a6%a7","概要 Youtubeにはフィードを取得する方法があります。 今回はYoutubeフィードを使用してWordPressにチャンネルの動画一覧を表示させます。 フィードURL チャンネルIDは以前投稿した記事で確認することが […]",{"ID":121,"title":122,"post_type":10,"post_type_label":11,"url":123,"date":124,"modified":125,"thumbnail":126,"thumb":126,"tag":127,"slug":137,"excerpt":138},521,"Instagram Graph APIのビジネスアカウントIDとアクセストークン取得","\u002Ftech\u002F521\u002F","2022.11.01","2023.08.08","\u002Fuploads\u002F2022\u002F11\u002Fimg_instagram.webp",[128,129,133],{"name":17,"slug":18,"url":19},{"name":130,"slug":131,"url":132},"Instagram","instagram","\u002Ftag\u002Finstagram\u002F",{"name":134,"slug":135,"url":136},"Node.js","node-js","\u002Ftag\u002Fnode-js\u002F","instagram-graph-api%e3%81%ae%e3%83%93%e3%82%b8%e3%83%8d%e3%82%b9%e3%82%a2%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88id%e3%81%a8%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%83%b3","概要 WEBサイトにインスタグラムの写真を埋め込むために必要なビジネスアカウントIDとアクセストークン取得方法です。3段階目のアクセストークンまでの発行をスクリプトにしました。 用意するもの 必要なデータ ソース git […]",{"ID":140,"title":141,"post_type":10,"post_type_label":11,"url":142,"date":143,"modified":144,"thumbnail":145,"thumb":145,"tag":146,"slug":150,"excerpt":151},464,"WordPressにYouTubeの動画一覧を表示する","\u002Ftech\u002F464\u002F","2022.10.28","2022.12.02","\u002Fuploads\u002F2022\u002F10\u002Fwordpress-youtube-1200x684.png",[147,148,149],{"name":17,"slug":18,"url":19},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},"wordpress%e3%81%abyoutube%e3%81%ae%e5%8b%95%e7%94%bb%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 簡易的にWordPressにYouTubeの動画一覧を表示する方法 ※事前にYouTubeのAPIキーの取得をする必要があります。 検索部分 「youtube_data」の部分はTransients APIで保存す […]",{"name":153,"slug":154,"url":155,"posts":156},"CSS","css","\u002Ftag\u002Fcss\u002F",[157,168,182,193,202,212,223,234,244,254,264,274],{"ID":158,"title":159,"post_type":10,"post_type_label":11,"url":160,"date":161,"modified":162,"thumbnail":163,"thumb":163,"tag":164,"slug":166,"excerpt":167},1904,"ブラウザの横幅に合わせてフォントサイズを変更する。","\u002Ftech\u002F1904\u002F","2023.11.28","2023.12.15","\u002Fuploads\u002F2022\u002F10\u002Filr.png",[165],{"name":153,"slug":154,"url":155},"%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":169,"title":170,"post_type":10,"post_type_label":11,"url":171,"date":172,"modified":125,"thumbnail":173,"thumb":173,"tag":174,"slug":180,"excerpt":181},1769,"HTMLメール用にインラインCSSに変換する","\u002Ftech\u002F1769\u002F","2023.07.27","\u002Fuploads\u002F2023\u002F07\u002Fimg_mail.webp",[175,176],{"name":153,"slug":154,"url":155},{"name":177,"slug":178,"url":179},"HTML","html","\u002Ftag\u002Fhtml\u002F","html%e3%83%a1%e3%83%bc%e3%83%ab%e7%94%a8%e3%81%ab%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3css%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%99%e3%82%8b","概要 OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。 今回はメルマガのHTMLメール用のコーディングをする際に […]",{"ID":183,"title":184,"post_type":10,"post_type_label":11,"url":185,"date":186,"modified":187,"thumbnail":188,"thumb":188,"tag":189,"slug":191,"excerpt":192},889,"CSSで三角形を作る(clip-path版)","\u002Ftech\u002F889\u002F","2022.12.28","2026.06.03","\u002Fuploads\u002F2021\u002F09\u002Fimg_css-triangle-1.png",[190],{"name":153,"slug":154,"url":155},"css%e3%81%a7%e4%b8%89%e8%a7%92%e5%bd%a2%e3%82%92%e4%bd%9c%e3%82%8bclip-path%e7%89%88","概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。以前、CSSで三角形を作る(border版)の記事を書いたのですが、その方法のclip-path版です。 ソース .triangleにスタイルを設定 […]",{"ID":194,"title":195,"post_type":10,"post_type_label":11,"url":196,"date":144,"modified":144,"thumbnail":197,"thumb":197,"tag":198,"slug":200,"excerpt":201},837,"要素の境界線を斜めにする","\u002Ftech\u002F837\u002F","\u002Fuploads\u002F2022\u002F12\u002Fimg837-1200x638.png",[199],{"name":153,"slug":154,"url":155},"%e8%a6%81%e7%b4%a0%e3%81%ae%e5%a2%83%e7%95%8c%e7%b7%9a%e3%82%92%e6%96%9c%e3%82%81%e3%81%ab%e3%81%99%e3%82%8b","概要 要素の境界線を水平ではなく少し斜めにCSSでします。背景をグラデーションや画像にすることも可能です。 サンプル タイトル 文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文 […]",{"ID":203,"title":204,"post_type":10,"post_type_label":11,"url":205,"date":206,"modified":206,"thumbnail":207,"thumb":207,"tag":208,"slug":210,"excerpt":211},771,"mask-imageでSVG画像の色を変える","\u002Ftech\u002F771\u002F","2022.11.26","\u002Fuploads\u002F2022\u002F11\u002Fmask-image-color-1200x819.png",[209],{"name":153,"slug":154,"url":155},"mask-image%e3%81%a7svg%e7%94%bb%e5%83%8f%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b","概要 色違いのSVG画像を使用したいけど、別ファイルにして作成するのも面倒くさいし、SVGをインラインで挿入してCSSで色を変えるもの、SVGインラインは可動性にかけてソース見づらいしみたいな時に使用する方法です。 ※色 […]",{"ID":213,"title":214,"post_type":10,"post_type_label":11,"url":215,"date":216,"modified":217,"thumbnail":218,"thumb":218,"tag":219,"slug":221,"excerpt":222},747,"mask-imageで透過グラデーション","\u002Ftech\u002F747\u002F","2022.11.18","2023.07.21","\u002Fuploads\u002F2022\u002F11\u002Fmask-image-1200x671.webp",[220],{"name":153,"slug":154,"url":155},"mask-image%e3%81%a7%e9%80%8f%e9%81%8e%e3%82%b0%e3%83%a9%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","概要 下記のように要素を透過グラデーションする方法です。これを使用すると背景に溶け込ませるようなグラデーションにすることができます。 サンプル HTML CSS mask-imageにlinear-gradientでグラ […]",{"ID":224,"title":225,"post_type":10,"post_type_label":11,"url":226,"date":227,"modified":228,"thumbnail":229,"thumb":229,"tag":230,"slug":232,"excerpt":233},395,"ボーダーをグラデーション・角丸・背景抜きでCSSで実装する","\u002Ftech\u002F395\u002F","2022.10.27","2023.06.16","\u002Fuploads\u002F2022\u002F10\u002Fborder-radius-gradient-1200x777.png",[231],{"name":153,"slug":154,"url":155},"%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e3%82%92%e3%82%b0%e3%83%a9%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%bb%e8%a7%92%e4%b8%b8%e3%83%bb%e8%83%8c%e6%99%af%e6%8a%9c%e3%81%8d%e3%81%a7css","はじめに ボーダーの色をグラデーションにして角丸で背景抜きを実装したくて色々ググってみたのですが、なかなか見つからなくて唯一見つけた記事を参考に書かせていただいてます。 https:\u002F\u002Fdev.to\u002Fafif\u002Fborde […]",{"ID":235,"title":236,"post_type":10,"post_type_label":11,"url":237,"date":238,"modified":239,"thumbnail":188,"thumb":188,"tag":240,"slug":242,"excerpt":243},228,"CSSで三角形を作る(border版)","\u002Ftech\u002F228\u002F","2021.09.11","2026.06.02",[241],{"name":153,"slug":154,"url":155},"css%e3%81%a7%e4%b8%89%e8%a7%92%e5%bd%a2%e3%82%92%e4%bd%9c%e3%82%8b","概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。 私自身はclip-path版を推しています。こちらの記事もどうぞ。 https:\u002F\u002Filr.jp\u002Ftech\u002F889 実装結果 解説 な […]",{"ID":245,"title":246,"post_type":10,"post_type_label":11,"url":247,"date":248,"modified":49,"thumbnail":249,"thumb":249,"tag":250,"slug":252,"excerpt":253},143,"CSSでスクロールスナップを実装できるscroll-snap-type","\u002Ftech\u002F143\u002F","2021.08.02","\u002Fuploads\u002F2021\u002F08\u002Fimg_scroll-snap-type.png",[251],{"name":153,"slug":154,"url":155},"css%e3%81%a7%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%b9%e3%83%8a%e3%83%83%e3%83%97%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%a7%e3%81%8d%e3%82%8bscroll-snap-type","要素ごとにスクロールするスクロールスナップをCSSで実装 実装結果 HTML 各要素A、B、C、D、Eを囲む要素を用意します。 CSS 囲った要素wrapにはscroll-snap-type: y mandatory;  […]",{"ID":255,"title":256,"post_type":10,"post_type_label":11,"url":257,"date":258,"modified":239,"thumbnail":259,"thumb":259,"tag":260,"slug":262,"excerpt":263},108,"要素の背後にぼかしなどの効果を加えるbackdrop-filter","\u002Ftech\u002F108\u002F","2021.07.27","\u002Fuploads\u002F2021\u002F07\u002Fthumbnail_108-1200x662.jpg",[261],{"name":153,"slug":154,"url":155},"%e8%83%8c%e6%99%af%e3%81%ab","スタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]",{"ID":265,"title":266,"post_type":10,"post_type_label":11,"url":267,"date":268,"modified":49,"thumbnail":269,"thumb":269,"tag":270,"slug":272,"excerpt":273},83,"要素に連番を与えるcounter-increment","\u002Ftech\u002F83\u002F","2021.07.25","\u002Fuploads\u002F2021\u002F07\u002Fimg_counter-increment-1.png",[271],{"name":153,"slug":154,"url":155},"%e8%a6%81%e7%b4%a0%e3%81%ab%e9%80%a3%e7%95%aa%e3%82%92%e4%b8%8e%e3%81%88%e3%82%8bcounter-increment","olタグで連番を与えることはできますが、それ以外の要素でも与えることができます。 HTML html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。 Style Sh […]",{"ID":275,"title":276,"post_type":10,"post_type_label":11,"url":277,"date":278,"modified":239,"thumbnail":279,"thumb":279,"tag":280,"slug":282,"excerpt":283},43,"行数を指定して文末を「…」で省略するline-clamp","\u002Ftech\u002F43\u002F","2021.07.23","\u002Fuploads\u002F2021\u002F07\u002Fimg_line-clamp-1.png",[281],{"name":153,"slug":154,"url":155},"%e8%a1%8c%e6%95%b0%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%9d%e3%82%8c%e4%bb%a5%e9%99%8d%e3%82%92%e3%80%8c%e3%80%8d%e3%81%a7%e7%9c%81%e7%95%a5%e3%81%99%e3%82%8bline-clamp","CSSにはテキストを省略することができるtext-overflow: ellipsis;がありますが、1行しか省略することができません。 HTML text-overflow: ellipsis; 東京五輪の開会式を走る […]",{"name":285,"slug":286,"url":287,"posts":288},"Docker","docker","\u002Ftag\u002Fdocker\u002F",[289],{"ID":290,"title":291,"post_type":10,"post_type_label":11,"url":292,"date":293,"modified":13,"thumbnail":294,"thumb":294,"tag":295,"slug":299,"excerpt":300},2367,"DockerでWordPress構築（ローカル仮想ドメイン版)","\u002Ftech\u002F2367\u002F","2025.10.30","\u002Fuploads\u002F2025\u002F10\u002Ftech2367-thumbnail-1200x675.png",[296,297,298],{"name":285,"slug":286,"url":287},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},"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 […]",{"name":89,"slug":90,"url":91,"posts":302},[303],{"ID":81,"title":82,"post_type":10,"post_type_label":11,"url":83,"date":84,"modified":84,"thumbnail":85,"thumb":85,"tag":304,"slug":94,"excerpt":95},[305,306,307,308],{"name":17,"slug":18,"url":19},{"name":89,"slug":90,"url":91},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"name":310,"slug":311,"url":312,"posts":313},"GSAP","gsap","\u002Ftag\u002Fgsap\u002F",[314],{"ID":315,"title":316,"post_type":10,"post_type_label":11,"url":317,"date":318,"modified":319,"thumbnail":163,"thumb":163,"tag":320,"slug":330,"excerpt":331},971,"スムーズスクロール","\u002Ftech\u002F971\u002F","2023.02.09","2023.11.14",[321,322,326],{"name":310,"slug":311,"url":312},{"name":323,"slug":324,"url":325},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F",{"name":327,"slug":328,"url":329},"jQuery","jquery","\u002Ftag\u002Fjquery\u002F","%e3%82%b9%e3%83%a0%e3%83%bc%e3%82%ba%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","概要 最近はアニメーションでGSAPをよく使用しているのですが、スムーズスクロールを実装させたい場合、jQueryのeaseScrollだとバッティングしているのか正常に動きません。GSAPにもScrollSmoothe […]",{"name":177,"slug":178,"url":179,"posts":333},[334,346],{"ID":335,"title":336,"post_type":10,"post_type_label":11,"url":337,"date":338,"modified":339,"thumbnail":340,"thumb":340,"tag":341,"slug":344,"excerpt":345},1775,"dialog要素とtemplate要素を使用してモーダルウィンドウを作る","\u002Ftech\u002F1775\u002F","2023.07.29","2025.10.29","\u002Fuploads\u002F2023\u002F07\u002Fimg_window.webp",[342,343],{"name":177,"slug":178,"url":179},{"name":323,"slug":324,"url":325},"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 […]",{"ID":169,"title":170,"post_type":10,"post_type_label":11,"url":171,"date":172,"modified":125,"thumbnail":173,"thumb":173,"tag":347,"slug":180,"excerpt":181},[348,349],{"name":153,"slug":154,"url":155},{"name":177,"slug":178,"url":179},{"name":130,"slug":131,"url":132,"posts":351},[352,362],{"ID":353,"title":354,"post_type":10,"post_type_label":11,"url":355,"date":144,"modified":217,"thumbnail":356,"thumb":356,"tag":357,"slug":360,"excerpt":361},855,"WordPressにインスタグラムの投稿一覧を表示","\u002Ftech\u002F855\u002F","\u002Fuploads\u002F2022\u002F12\u002Finsta_list-1200x806.webp",[358,359],{"name":130,"slug":131,"url":132},{"name":25,"slug":26,"url":27},"wordpress%e3%81%ab%e3%82%a4%e3%83%b3%e3%82%b9%e3%82%bf%e3%82%b0%e3%83%a9%e3%83%a0%e3%81%ae%e6%8a%95%e7%a8%bf%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba","概要 簡易的にWordPressにインスタクラムに投稿された写真の一覧を表示させる方法。 ※あらかじめアクセストークンを取得しておく必要があります。 Instagram Graph APIのビジネスアカウントIDとアクセ […]",{"ID":121,"title":122,"post_type":10,"post_type_label":11,"url":123,"date":124,"modified":125,"thumbnail":126,"thumb":126,"tag":363,"slug":137,"excerpt":138},[364,365,366],{"name":17,"slug":18,"url":19},{"name":130,"slug":131,"url":132},{"name":134,"slug":135,"url":136},{"name":368,"slug":369,"url":370,"posts":371},"iPhone","iphone","\u002Ftag\u002Fiphone\u002F",[372],{"ID":373,"title":374,"post_type":10,"post_type_label":11,"url":375,"date":376,"modified":376,"thumbnail":377,"thumb":377,"tag":378,"slug":380,"excerpt":381},815,"iPhoneでウォレットのメインカードを入れ替える","\u002Ftech\u002F815\u002F","2022.12.01","\u002Fuploads\u002F2022\u002F12\u002Fiphone_wallet01.png",[379],{"name":368,"slug":369,"url":370},"iphone%e3%81%a7%e3%82%a6%e3%82%a9%e3%83%ac%e3%83%83%e3%83%88%e3%81%ae%e3%83%a1%e3%82%a4%e3%83%b3%e3%82%ab%e3%83%bc%e3%83%89%e3%82%92%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e3%82%8b","概要 iPhoneでメインカードを入れ替える方法は２つあります。 ※iOS16.1.1 1.ウォレットアプリでの入れ替え 下になっているカードをタップしながら真ん中に持っていきます。 2.設定からの切り替え 設定を立ち上 […]",{"name":323,"slug":324,"url":325,"posts":383},[384,398,407,420,434,444,453,462,466,478,488,496,503,524,533,538,549,559,568,578],{"ID":385,"title":386,"post_type":10,"post_type_label":11,"url":387,"date":388,"modified":388,"thumbnail":389,"thumb":389,"tag":390,"slug":396,"excerpt":397},2179,"Vueコンポーネント一括インポート","\u002Ftech\u002F2179\u002F","2024.06.25","\u002Fuploads\u002F2023\u002F05\u002Fvuejs.png",[391,392],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},"Vue","vue","\u002Ftag\u002Fvue\u002F","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":399,"title":400,"post_type":10,"post_type_label":11,"url":401,"date":402,"modified":339,"thumbnail":163,"thumb":163,"tag":403,"slug":405,"excerpt":406},1942,"Intersection Observerでスクロールで要素の状態を変化させる","\u002Ftech\u002F1942\u002F","2023.12.20",[404],{"name":323,"slug":324,"url":325},"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":408,"title":409,"post_type":10,"post_type_label":11,"url":410,"date":411,"modified":339,"thumbnail":163,"thumb":163,"tag":412,"slug":418,"excerpt":419},1895,"SVG内の要素にfilterを適応させる","\u002Ftech\u002F1895\u002F","2023.11.16",[413,414],{"name":323,"slug":324,"url":325},{"name":415,"slug":416,"url":417},"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":421,"title":422,"post_type":10,"post_type_label":11,"url":423,"date":424,"modified":125,"thumbnail":425,"thumb":425,"tag":426,"slug":432,"excerpt":433},1831,"JavaScriptで擬似要素を操作する","\u002Ftech\u002F1831\u002F","2023.08.07","\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[427,428],{"name":323,"slug":324,"url":325},{"name":429,"slug":430,"url":431},"擬似要素","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":435,"title":436,"post_type":10,"post_type_label":11,"url":437,"date":438,"modified":125,"thumbnail":439,"thumb":439,"tag":440,"slug":442,"excerpt":443},1827,"2点間の緯度・経度の距離を求める","\u002Ftech\u002F1827\u002F","2023.08.06","\u002Fuploads\u002F2023\u002F08\u002Fimg_markers.webp",[441],{"name":323,"slug":324,"url":325},"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":445,"title":446,"post_type":10,"post_type_label":11,"url":447,"date":438,"modified":339,"thumbnail":448,"thumb":448,"tag":449,"slug":451,"excerpt":452},1814,"JavaScriptで現在地を取得する","\u002Ftech\u002F1814\u002F","\u002Fuploads\u002F2023\u002F08\u002Fimg_marker.webp",[450],{"name":323,"slug":324,"url":325},"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":454,"title":455,"post_type":10,"post_type_label":11,"url":456,"date":457,"modified":457,"thumbnail":163,"thumb":163,"tag":458,"slug":460,"excerpt":461},1807,"コロン(:)の入った要素や属性の情報を取得する","\u002Ftech\u002F1807\u002F","2023.08.04",[459],{"name":323,"slug":324,"url":325},"%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":335,"title":336,"post_type":10,"post_type_label":11,"url":337,"date":338,"modified":339,"thumbnail":340,"thumb":340,"tag":463,"slug":344,"excerpt":345},[464,465],{"name":177,"slug":178,"url":179},{"name":323,"slug":324,"url":325},{"ID":467,"title":468,"post_type":10,"post_type_label":11,"url":469,"date":66,"modified":66,"thumbnail":163,"thumb":163,"tag":470,"slug":476,"excerpt":477},1754,"日付のフォーマットを変更する","\u002Ftech\u002F1754\u002F",[471,472],{"name":323,"slug":324,"url":325},{"name":473,"slug":474,"url":475},"日付","date","\u002Ftag\u002Fdate\u002F","%e6%97%a5%e4%bb%98%e3%81%ae%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%83%e3%83%88%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b","概要 この関数を知らなかったのでメモ。 Date.prototype.toLocaleDateString() 内容 何も指定しない場合 言語コード指定 アメリカ 日本 オプションを指定 曜日を表示 年月日を日本語表記に […]",{"ID":479,"title":480,"post_type":10,"post_type_label":11,"url":481,"date":482,"modified":125,"thumbnail":483,"thumb":483,"tag":484,"slug":486,"excerpt":487},1712,"数字に3桁ずつ、カンマを入れる","\u002Ftech\u002F1712\u002F","2023.07.19","\u002Fuploads\u002F2023\u002F07\u002Fimg_comma.webp",[485],{"name":323,"slug":324,"url":325},"%e6%95%b0%e5%ad%97%e3%81%ab3%e6%a1%81%e3%81%9a%e3%81%a4%e3%80%81%e3%82%ab%e3%83%b3%e3%83%9e%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b","概要 価格表示する際の数値、「10000」を「10,000」のように、数字に3桁ずつカンマの入った文字列に変換する関数 スクリプト 使用方法",{"ID":489,"title":490,"post_type":10,"post_type_label":11,"url":491,"date":482,"modified":482,"thumbnail":163,"thumb":163,"tag":492,"slug":494,"excerpt":495},1708,"ゼロパディング","\u002Ftech\u002F1708\u002F",[493],{"name":323,"slug":324,"url":325},"%e3%82%bc%e3%83%ad%e3%83%91%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0","概要 ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。 ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。 ゼロパディングは、例えば […]",{"ID":497,"title":323,"post_type":10,"post_type_label":11,"url":498,"date":499,"modified":482,"thumbnail":163,"thumb":163,"tag":500,"slug":324,"excerpt":502},1061,"\u002Ftech\u002F1061\u002F","2023.05.18",[501],{"name":323,"slug":324,"url":325},"カンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]",{"ID":504,"title":505,"post_type":10,"post_type_label":11,"url":506,"date":100,"modified":388,"thumbnail":389,"thumb":389,"tag":507,"slug":522,"excerpt":523},1047,"Vue.jsで暗号化・復号化を実装する","\u002Ftech\u002F1047\u002F",[508,509,510,514,518],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"name":511,"slug":512,"url":513},"プラグイン","plugin","\u002Ftag\u002Fplugin\u002F",{"name":515,"slug":516,"url":517},"復号化","decryption","\u002Ftag\u002Fdecryption\u002F",{"name":519,"slug":520,"url":521},"暗号化","encryption","\u002Ftag\u002Fencryption\u002F","vue-js%e3%81%a7%e6%9a%97%e5%8f%b7%e5%8c%96%e3%83%bb%e8%a4%87%e5%90%88%e5%8c%96%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b","概要 下記githubのソースをもとにVue.js用にプラグイン化しました。 https:\u002F\u002Fgist.github.com\u002FAgoreddah\u002F511864e2c00da064586523b3087c30e2 ソース  […]",{"ID":525,"title":526,"post_type":10,"post_type_label":11,"url":527,"date":528,"modified":339,"thumbnail":163,"thumb":163,"tag":529,"slug":531,"excerpt":532},976,"HLS(HTTP Live Streaming)動画を再生する","\u002Ftech\u002F976\u002F","2023.02.26",[530],{"name":323,"slug":324,"url":325},"hlshttp-live-streaming%e5%8b%95%e7%94%bb%e3%82%92%e5%86%8d%e7%94%9f%e3%81%99%e3%82%8b","概要 HLS(HTTP Live Streaming)フォーマットの動画をWEBで再生する方法 HLSに変換 hls.jsを読み込み VIDEOタグ スクリプト",{"ID":315,"title":316,"post_type":10,"post_type_label":11,"url":317,"date":318,"modified":319,"thumbnail":163,"thumb":163,"tag":534,"slug":330,"excerpt":331},[535,536,537],{"name":310,"slug":311,"url":312},{"name":323,"slug":324,"url":325},{"name":327,"slug":328,"url":329},{"ID":539,"title":540,"post_type":10,"post_type_label":11,"url":541,"date":542,"modified":543,"thumbnail":544,"thumb":544,"tag":545,"slug":547,"excerpt":548},917,"ページのスクロールされている割合を表示させる","\u002Ftech\u002F917\u002F","2023.01.04","2023.01.05","\u002Fuploads\u002F2023\u002F01\u002Fpage-scroll-position-1200x737.png",[546],{"name":323,"slug":324,"url":325},"%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%95%e3%82%8c%e3%81%a6%e3%81%84%e3%82%8b%e5%89%b2%e5%90%88%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b","概要 このサイトのヘッダーでも実装している、スクロールされている割合をページに表示させるJavaScriptを実装します。 ソース 解説 スクロール位置をwindow.scrollTop()で取得できるようにしています。 […]",{"ID":550,"title":551,"post_type":10,"post_type_label":11,"url":552,"date":553,"modified":554,"thumbnail":163,"thumb":163,"tag":555,"slug":557,"excerpt":558},893,"マウスチェイサー","\u002Ftech\u002F893\u002F","2022.12.29","2024.01.14",[556],{"name":323,"slug":324,"url":325},"%e3%83%9e%e3%82%a6%e3%82%b9%e3%83%81%e3%82%a7%e3%82%a4%e3%82%b5%e3%83%bc","概要 マウスの動きに追随する、マウスチェイサー（英語にしただけ^^）を実装します。マウスに近づくにつれてゆっくり動くようにするのと、リンクにマウスオーバーで変形するようにもします。 ソース 解説 mp関数はマウスの座標を […]",{"ID":560,"title":561,"post_type":10,"post_type_label":11,"url":562,"date":563,"modified":339,"thumbnail":163,"thumb":163,"tag":564,"slug":566,"excerpt":567},868,"JavaScriptで円運動","\u002Ftech\u002F868\u002F","2022.12.14",[565],{"name":323,"slug":324,"url":325},"javascript%e3%81%a7%e5%86%86%e9%81%8b%e5%8b%95","概要 JavaScriptで円を描くように要素が移動するアニメーションを実装します。 サンプル ソース 解説 x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。",{"ID":569,"title":570,"post_type":10,"post_type_label":11,"url":571,"date":572,"modified":49,"thumbnail":573,"thumb":573,"tag":574,"slug":576,"excerpt":577},210,"ページ内スクロール","\u002Ftech\u002F210\u002F","2021.09.09","\u002Fuploads\u002F2021\u002F09\u002Fimg_page-scroll-1.png",[575],{"name":323,"slug":324,"url":325},"%e3%83%9a%e3%83%bc%e3%82%b8%e5%86%85%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。 ページ内スクロール HTML CSS ページトップボタン HTML CSS JavaScript 解説 a[href^=”#& […]",{"ID":579,"title":580,"post_type":10,"post_type_label":11,"url":581,"date":582,"modified":49,"thumbnail":583,"thumb":583,"tag":584,"slug":586,"excerpt":587},201,"ハンバーガメニュー","\u002Ftech\u002F201\u002F","2021.08.29","\u002Fuploads\u002F2021\u002F08\u002Fimg_hamburger-menu-1.png",[585],{"name":323,"slug":324,"url":325},"%e3%83%8f%e3%83%b3%e3%83%90%e3%83%bc%e3%82%ac%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc","今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]",{"name":327,"slug":328,"url":329,"posts":589},[590],{"ID":315,"title":316,"post_type":10,"post_type_label":11,"url":317,"date":318,"modified":319,"thumbnail":163,"thumb":163,"tag":591,"slug":330,"excerpt":331},[592,593,594],{"name":310,"slug":311,"url":312},{"name":323,"slug":324,"url":325},{"name":327,"slug":328,"url":329},{"name":596,"slug":597,"url":598,"posts":599},"Mac","mac","\u002Ftag\u002Fmac\u002F",[600],{"ID":601,"title":602,"post_type":10,"post_type_label":11,"url":603,"date":604,"modified":605,"thumbnail":163,"thumb":163,"tag":606,"slug":613,"excerpt":614},992,"Macでテキストを音声データ(MP3)に一括変換","\u002Ftech\u002F992\u002F","2023.04.06","2024.08.05",[607,608,612],{"name":596,"slug":597,"url":598},{"name":609,"slug":610,"url":611},"MP3","mp3","\u002Ftag\u002Fmp3\u002F",{"name":134,"slug":135,"url":136},"mac%e3%81%a7%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e9%9f%b3%e5%a3%b0%e3%83%87%e3%83%bc%e3%82%bfmp3%e3%81%ab%e4%b8%80%e6%8b%ac%e5%a4%89%e6%8f%9b","概要 Macでテキストを一括で音声データに変換する方法です。 テキストを音声データに変換(aiff) Macではテキストを右クリックで音声データに変換することができます。 1、テキストを選択して　＞　右クリック　＞　スポ […]",{"name":609,"slug":610,"url":611,"posts":616},[617],{"ID":601,"title":602,"post_type":10,"post_type_label":11,"url":603,"date":604,"modified":605,"thumbnail":163,"thumb":163,"tag":618,"slug":613,"excerpt":614},[619,620,621],{"name":596,"slug":597,"url":598},{"name":609,"slug":610,"url":611},{"name":134,"slug":135,"url":136},{"name":134,"slug":135,"url":136,"posts":623},[624,634,639],{"ID":625,"title":626,"post_type":10,"post_type_label":11,"url":627,"date":628,"modified":125,"thumbnail":629,"thumb":629,"tag":630,"slug":632,"excerpt":633},1803,"Node.jsのバージョン管理","\u002Ftech\u002F1803\u002F","2023.08.02","\u002Fuploads\u002F2023\u002F08\u002Fimg_nodejs.webp",[631],{"name":134,"slug":135,"url":136},"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":601,"title":602,"post_type":10,"post_type_label":11,"url":603,"date":604,"modified":605,"thumbnail":163,"thumb":163,"tag":635,"slug":613,"excerpt":614},[636,637,638],{"name":596,"slug":597,"url":598},{"name":609,"slug":610,"url":611},{"name":134,"slug":135,"url":136},{"ID":121,"title":122,"post_type":10,"post_type_label":11,"url":123,"date":124,"modified":125,"thumbnail":126,"thumb":126,"tag":640,"slug":137,"excerpt":138},[641,642,643],{"name":17,"slug":18,"url":19},{"name":130,"slug":131,"url":132},{"name":134,"slug":135,"url":136},{"name":645,"slug":645,"url":646,"posts":647},"note","\u002Ftag\u002Fnote\u002F",[648],{"ID":649,"title":650,"post_type":10,"post_type_label":11,"url":651,"date":652,"modified":653,"thumbnail":654,"thumb":654,"tag":655,"slug":658,"excerpt":659},782,"WordPressにnoteの記事一覧を埋め込む","\u002Ftech\u002F782\u002F","2022.11.30","2023.06.14","\u002Fuploads\u002F2022\u002F11\u002Ftit_note-1200x528.png",[656,657],{"name":645,"slug":645,"url":646},{"name":25,"slug":26,"url":27},"wordpress%e3%81%abnote%e3%81%ae%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 noteのRSSを読み込んでWordPressに埋め込む方法 APIへのアクセスを減らすためTransients APIを使用して一時保存する noteのRSS RSSのURLはクリエーターページのプロフィールエリ […]",{"name":21,"slug":22,"url":23,"posts":661},[662],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":663,"slug":28,"excerpt":29},[664,665,666],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"name":71,"slug":71,"url":72,"posts":668},[669,674,680,695,701,712],{"ID":290,"title":291,"post_type":10,"post_type_label":11,"url":292,"date":293,"modified":13,"thumbnail":294,"thumb":294,"tag":670,"slug":299,"excerpt":300},[671,672,673],{"name":285,"slug":286,"url":287},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"ID":63,"title":64,"post_type":10,"post_type_label":11,"url":65,"date":66,"modified":66,"thumbnail":67,"thumb":67,"tag":675,"slug":78,"excerpt":79},[676,677,678,679],{"name":17,"slug":18,"url":19},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"name":75,"slug":76,"url":77},{"ID":681,"title":682,"post_type":10,"post_type_label":11,"url":683,"date":684,"modified":684,"thumbnail":685,"thumb":685,"tag":686,"slug":693,"excerpt":694},1717,"WordPressにQiitaの記事一覧を表示する","\u002Ftech\u002F1717\u002F","2023.07.20","\u002Fuploads\u002F2023\u002F07\u002Fimg_qiita-1200x682.webp",[687,688,692],{"name":71,"slug":71,"url":72},{"name":689,"slug":690,"url":691},"Qiita","qiita","\u002Ftag\u002Fqiita\u002F",{"name":25,"slug":26,"url":27},"wordpress%e3%81%abqiita%e3%81%ae%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","概要 WordPressにQiitaの記事一覧を表示する方法 ※事前にQiitaのアクセストークンの発行の取得をする必要があります。 検索部分 「qiita_data」の部分はTransients APIで保存するときの […]",{"ID":81,"title":82,"post_type":10,"post_type_label":11,"url":83,"date":84,"modified":84,"thumbnail":85,"thumb":85,"tag":696,"slug":94,"excerpt":95},[697,698,699,700],{"name":17,"slug":18,"url":19},{"name":89,"slug":90,"url":91},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"ID":702,"title":703,"post_type":10,"post_type_label":11,"url":704,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":707,"slug":710,"excerpt":711},1115,"WordPressページネーションを自作する","\u002Ftech\u002F1115\u002F","2023.06.12","\u002Fuploads\u002F2021\u002F08\u002Fimg_feed-1.png",[708,709],{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},"wordpress%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e8%87%aa%e4%bd%9c%e3%81%99%e3%82%8b","概要 このWEBサイトで使用しているページネーション ソース",{"ID":713,"title":714,"post_type":10,"post_type_label":11,"url":715,"date":716,"modified":716,"thumbnail":706,"thumb":706,"tag":717,"slug":722,"excerpt":723},1090,"カスタム投稿タイプのフィードを作成する","\u002Ftech\u002F1090\u002F","2023.05.31",[718,719,720,721],{"name":71,"slug":71,"url":72},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},"%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e3%82%bf%e3%82%a4%e3%83%97%e3%81%ae%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b","概要 RSSへのリンクを追加してカスタム投稿タイプのフィードを表示させます。 下記URLでも良いのですが、せっかくなのでリライトルールを使用して独自URLを作成します。 スクリプト リライトルールの反映 WordPres […]",{"name":689,"slug":690,"url":691,"posts":725},[726],{"ID":681,"title":682,"post_type":10,"post_type_label":11,"url":683,"date":684,"modified":684,"thumbnail":685,"thumb":685,"tag":727,"slug":693,"excerpt":694},[728,729,730],{"name":71,"slug":71,"url":72},{"name":689,"slug":690,"url":691},{"name":25,"slug":26,"url":27},{"name":106,"slug":107,"url":108,"posts":732},[733,739,746],{"ID":713,"title":714,"post_type":10,"post_type_label":11,"url":715,"date":716,"modified":716,"thumbnail":706,"thumb":706,"tag":734,"slug":722,"excerpt":723},[735,736,737,738],{"name":71,"slug":71,"url":72},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},{"ID":97,"title":98,"post_type":10,"post_type_label":11,"url":99,"date":100,"modified":101,"thumbnail":102,"thumb":102,"tag":740,"slug":118,"excerpt":119},[741,742,743,744,745],{"name":17,"slug":18,"url":19},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"name":115,"slug":116,"url":117},{"ID":747,"title":748,"post_type":10,"post_type_label":11,"url":749,"date":750,"modified":751,"thumbnail":706,"thumb":706,"tag":752,"slug":756,"excerpt":757},168,"フィードカスタマイズ","\u002Ftech\u002F168\u002F","2021.08.12","2023.05.30",[753,754,755],{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},"%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","フィードにカスタム投稿タイプの更新を含める デフォルトではフィードにはカスタム投稿タイプは表示されないので下記を追加します。 フィードのauthorを変更 dc:creatorに表示される内容はログインのときのIDと同じ […]",{"name":415,"slug":416,"url":417,"posts":759},[760],{"ID":408,"title":409,"post_type":10,"post_type_label":11,"url":410,"date":411,"modified":339,"thumbnail":163,"thumb":163,"tag":761,"slug":418,"excerpt":419},[762,763],{"name":323,"slug":324,"url":325},{"name":415,"slug":416,"url":417},{"name":393,"slug":394,"url":395,"posts":765},[766,777,781],{"ID":767,"title":768,"post_type":10,"post_type_label":11,"url":769,"date":388,"modified":13,"thumbnail":770,"thumb":770,"tag":771,"slug":775,"excerpt":776},2186,"【改訂】Vueで暗号化・復号化を実装する","\u002Ftech\u002F2186\u002F","\u002Fuploads\u002F2024\u002F06\u002Ftech2186-thumbnail-1200x675.png",[772,773,774],{"name":393,"slug":394,"url":395},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},"%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":385,"title":386,"post_type":10,"post_type_label":11,"url":387,"date":388,"modified":388,"thumbnail":389,"thumb":389,"tag":778,"slug":396,"excerpt":397},[779,780],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"ID":504,"title":505,"post_type":10,"post_type_label":11,"url":506,"date":100,"modified":388,"thumbnail":389,"thumb":389,"tag":782,"slug":522,"excerpt":523},[783,784,785,786,787],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"name":511,"slug":512,"url":513},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},{"name":25,"slug":26,"url":27,"posts":789},[790,795,800,809,815,820,826,834,838,848,854,861,865,869,874,882,891,901,906],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":791,"slug":28,"excerpt":29},[792,793,794],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":290,"title":291,"post_type":10,"post_type_label":11,"url":292,"date":293,"modified":13,"thumbnail":294,"thumb":294,"tag":796,"slug":299,"excerpt":300},[797,798,799],{"name":285,"slug":286,"url":287},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"ID":801,"title":802,"post_type":10,"post_type_label":11,"url":803,"date":804,"modified":804,"thumbnail":163,"thumb":163,"tag":805,"slug":807,"excerpt":808},1992,"WordPressでサイドバーに目次を表示させる","\u002Ftech\u002F1992\u002F","2024.01.05",[806],{"name":25,"slug":26,"url":27},"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":63,"title":64,"post_type":10,"post_type_label":11,"url":65,"date":66,"modified":66,"thumbnail":67,"thumb":67,"tag":810,"slug":78,"excerpt":79},[811,812,813,814],{"name":17,"slug":18,"url":19},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"name":75,"slug":76,"url":77},{"ID":681,"title":682,"post_type":10,"post_type_label":11,"url":683,"date":684,"modified":684,"thumbnail":685,"thumb":685,"tag":816,"slug":693,"excerpt":694},[817,818,819],{"name":71,"slug":71,"url":72},{"name":689,"slug":690,"url":691},{"name":25,"slug":26,"url":27},{"ID":81,"title":82,"post_type":10,"post_type_label":11,"url":83,"date":84,"modified":84,"thumbnail":85,"thumb":85,"tag":821,"slug":94,"excerpt":95},[822,823,824,825],{"name":17,"slug":18,"url":19},{"name":89,"slug":90,"url":91},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"ID":827,"title":828,"post_type":10,"post_type_label":11,"url":829,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":830,"slug":832,"excerpt":833},1118,"WP-CLIでWordPressの改ざんチェック","\u002Ftech\u002F1118\u002F",[831],{"name":25,"slug":26,"url":27},"wp-cli%e3%81%a7wordpress%e3%81%ae%e6%94%b9%e3%81%96%e3%82%93%e3%83%81%e3%82%a7%e3%83%83%e3%82%af","概要 WP-CLIを導入することによって、コマンドでWordPressの改ざんチェックを行います。 インストール https:\u002F\u002Fwp-cli.org\u002Fja\u002F wp-cli.pharをダウンロードします。 wp-cli. […]",{"ID":702,"title":703,"post_type":10,"post_type_label":11,"url":704,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":835,"slug":710,"excerpt":711},[836,837],{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"ID":839,"title":840,"post_type":10,"post_type_label":11,"url":841,"date":842,"modified":843,"thumbnail":706,"thumb":706,"tag":844,"slug":846,"excerpt":847},1094,"WordPressでauthor名を分からないようにする","\u002Ftech\u002F1094\u002F","2023.06.01","2024.06.26",[845],{"name":25,"slug":26,"url":27},"wordpress%e3%81%a7author%e5%90%8d%e3%82%92%e5%88%86%e3%81%8b%e3%82%89%e3%81%aa%e3%81%84%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b","概要 WordPressのソースの中にはauthor名表示される箇所があります。そのauthor名から管理画面へログインされる可能性があるのでソースに表示されないようにします。 authorページをリダイレクト \u002F?au […]",{"ID":713,"title":714,"post_type":10,"post_type_label":11,"url":715,"date":716,"modified":716,"thumbnail":706,"thumb":706,"tag":849,"slug":722,"excerpt":723},[850,851,852,853],{"name":71,"slug":71,"url":72},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},{"ID":97,"title":98,"post_type":10,"post_type_label":11,"url":99,"date":100,"modified":101,"thumbnail":102,"thumb":102,"tag":855,"slug":118,"excerpt":119},[856,857,858,859,860],{"name":17,"slug":18,"url":19},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"name":115,"slug":116,"url":117},{"ID":353,"title":354,"post_type":10,"post_type_label":11,"url":355,"date":144,"modified":217,"thumbnail":356,"thumb":356,"tag":862,"slug":360,"excerpt":361},[863,864],{"name":130,"slug":131,"url":132},{"name":25,"slug":26,"url":27},{"ID":649,"title":650,"post_type":10,"post_type_label":11,"url":651,"date":652,"modified":653,"thumbnail":654,"thumb":654,"tag":866,"slug":658,"excerpt":659},[867,868],{"name":645,"slug":645,"url":646},{"name":25,"slug":26,"url":27},{"ID":140,"title":141,"post_type":10,"post_type_label":11,"url":142,"date":143,"modified":144,"thumbnail":145,"thumb":145,"tag":870,"slug":150,"excerpt":151},[871,872,873],{"name":17,"slug":18,"url":19},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"ID":875,"title":876,"post_type":10,"post_type_label":11,"url":877,"date":227,"modified":227,"thumbnail":706,"thumb":706,"tag":878,"slug":880,"excerpt":881},451,"プラグイン「Simple CSS」で任意の場所にスタイルシートを書き出したい","\u002Ftech\u002F451\u002F",[879],{"name":25,"slug":26,"url":27},"%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8csimple-css%e3%80%8d%e3%81%a7%e4%bb%bb%e6%84%8f%e3%81%ae%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88","はじめに 「Simple CSS」というプラグインを使用すると記事ごとにスタイルシートを書くことができるのですが、書き出し場所がheadタグ内になります。 しかし、「barba.js」などでSPA（シングルページアプリケ […]",{"ID":883,"title":884,"post_type":10,"post_type_label":11,"url":885,"date":886,"modified":543,"thumbnail":163,"thumb":163,"tag":887,"slug":889,"excerpt":890},939,"アイキャッチにデフォルト画像を設定","\u002Ftech\u002F939\u002F","2022.01.05",[888],{"name":25,"slug":26,"url":27},"%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81%e3%81%ab%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e7%94%bb%e5%83%8f%e3%82%92%e8%a8%ad%e5%ae%9a","概要 保存する時にアイキャッチの指定がない場合、指定した画像をアイキャッチとして保存するように設定します。 画像をアップロード アイキャッチに使用したい画像をメディアにアップロード 画像IDを調べる アップロードした画像 […]",{"ID":892,"title":893,"post_type":10,"post_type_label":11,"url":894,"date":895,"modified":49,"thumbnail":896,"thumb":896,"tag":897,"slug":899,"excerpt":900},195,"WordPressカスタムナビゲーション","\u002Ftech\u002F195\u002F","2021.08.28","\u002Fuploads\u002F2021\u002F08\u002Fimg_custom-navigation-1.png",[898],{"name":25,"slug":26,"url":27},"wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","今回は管理画面で編集できるグローバルメニューをカスタマイズします。 グローバルメニュー 管理画面 メニュー項目を管理画面でカスタマイズすることができます。 1.functions.phpにregister_nav_men […]",{"ID":747,"title":748,"post_type":10,"post_type_label":11,"url":749,"date":750,"modified":751,"thumbnail":706,"thumb":706,"tag":902,"slug":756,"excerpt":757},[903,904,905],{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},{"ID":907,"title":908,"post_type":10,"post_type_label":11,"url":909,"date":910,"modified":49,"thumbnail":911,"thumb":911,"tag":912,"slug":914,"excerpt":915},156,"ログインフォームカスタマイズ","\u002Ftech\u002F156\u002F","2021.08.11","\u002Fuploads\u002F2021\u002F08\u002Fwp-loginform-1.png",[913],{"name":25,"slug":26,"url":27},"%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba","WordPressのログインフォームのカスタマイズします。 手順 フック「login_enqueue_scripts」で外部スタイルシートを読み込み 外部スタイルシートでロゴを変更 ロゴのリンク先を変更 1.フック「lo […]",{"name":917,"slug":918,"url":919,"posts":920},"X(旧Twitter)","xtwitter","\u002Ftag\u002Fxtwitter\u002F",[921,933],{"ID":922,"title":923,"post_type":10,"post_type_label":11,"url":924,"date":554,"modified":388,"thumbnail":163,"thumb":163,"tag":925,"slug":931,"excerpt":932},2062,"Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する","\u002Ftech\u002F2062\u002F",[926,927],{"name":917,"slug":918,"url":919},{"name":928,"slug":929,"url":930},"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":934,"title":935,"post_type":10,"post_type_label":11,"url":936,"date":554,"modified":554,"thumbnail":163,"thumb":163,"tag":937,"slug":940,"excerpt":941},2047,"Xプレミアムでプロフィールページのいいねを非表示にする","\u002Ftech\u002F2047\u002F",[938,939],{"name":917,"slug":918,"url":919},{"name":928,"slug":929,"url":930},"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プレミアムにアップグレードすると、プロフィールページの「いいね」タブを非表示にすることができます。どこ投稿に「いいね」をしたかを知られないようにしたいときには有効です。 施策 「もっと見る」をクリック 「設定とサ […]",{"name":928,"slug":929,"url":930,"posts":943},[944,948],{"ID":922,"title":923,"post_type":10,"post_type_label":11,"url":924,"date":554,"modified":388,"thumbnail":163,"thumb":163,"tag":945,"slug":931,"excerpt":932},[946,947],{"name":917,"slug":918,"url":919},{"name":928,"slug":929,"url":930},{"ID":934,"title":935,"post_type":10,"post_type_label":11,"url":936,"date":554,"modified":554,"thumbnail":163,"thumb":163,"tag":949,"slug":940,"excerpt":941},[950,951],{"name":917,"slug":918,"url":919},{"name":928,"slug":929,"url":930},{"name":111,"slug":112,"url":113,"posts":953},[954,962,969,977,986,995],{"ID":955,"title":956,"post_type":10,"post_type_label":11,"url":957,"date":162,"modified":101,"thumbnail":102,"thumb":102,"tag":958,"slug":960,"excerpt":961},1934,"【公式】他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F1934\u002F",[959],{"name":111,"slug":112,"url":113},"%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":97,"title":98,"post_type":10,"post_type_label":11,"url":99,"date":100,"modified":101,"thumbnail":102,"thumb":102,"tag":963,"slug":118,"excerpt":119},[964,965,966,967,968],{"name":17,"slug":18,"url":19},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"name":115,"slug":116,"url":117},{"ID":970,"title":971,"post_type":10,"post_type_label":11,"url":972,"date":376,"modified":376,"thumbnail":102,"thumb":102,"tag":973,"slug":975,"excerpt":976},825,"YouTubeアプリでフィード(サムネイル)が自動再生されるのを止める","\u002Ftech\u002F825\u002F",[974],{"name":111,"slug":112,"url":113},"youtube%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%81%8c%e8%87%aa%e5%8b%95%e5%86%8d%e7%94%9f%e3%81%95%e3%82%8c%e3%82%8b","概要 YouTubeアプリを起動したときにフィード(サムネイル)が自動で再生されてしまいます。WiFi環境なら問題ないのですが、外出中などに勝手に再生されるのは通信量もかかるので止めるようにします。 操作方法 アプリ右上 […]",{"ID":978,"title":979,"post_type":10,"post_type_label":11,"url":980,"date":981,"modified":339,"thumbnail":102,"thumb":102,"tag":982,"slug":984,"excerpt":985},765,"YouTube動画のキーワードを調べる","\u002Ftech\u002F765\u002F","2022.11.25",[983],{"name":111,"slug":112,"url":113},"youtube%e5%8b%95%e7%94%bb%e3%81%ae%e3%82%ad%e3%83%bc%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b","概要 YouTubeの動画がどんなキーワードを指定しているか気になりますよね。そんなキーワードを調べる方法です。 ソースから確認 ソースで確認する場合、キーワードタグで確認することができます。 確認できるフォームを作りま […]",{"ID":987,"title":988,"post_type":10,"post_type_label":11,"url":989,"date":990,"modified":339,"thumbnail":102,"thumb":102,"tag":991,"slug":993,"excerpt":994},485,"他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F485\u002F","2022.10.29",[992],{"name":111,"slug":112,"url":113},"%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","概要 自分自身のチャンネルIDはYouTube Studio＞カスタマイズ＞基本情報 で確認することができますが、他人のチャンネルでカスタム URLを使用されているチャンネルはチャンネルIDがわかりません。 ソースから確 […]",{"ID":140,"title":141,"post_type":10,"post_type_label":11,"url":142,"date":143,"modified":144,"thumbnail":145,"thumb":145,"tag":996,"slug":150,"excerpt":151},[997,998,999],{"name":17,"slug":18,"url":19},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"name":115,"slug":116,"url":117,"posts":1001},[1002,1008,1015],{"ID":713,"title":714,"post_type":10,"post_type_label":11,"url":715,"date":716,"modified":716,"thumbnail":706,"thumb":706,"tag":1003,"slug":722,"excerpt":723},[1004,1005,1006,1007],{"name":71,"slug":71,"url":72},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},{"ID":97,"title":98,"post_type":10,"post_type_label":11,"url":99,"date":100,"modified":101,"thumbnail":102,"thumb":102,"tag":1009,"slug":118,"excerpt":119},[1010,1011,1012,1013,1014],{"name":17,"slug":18,"url":19},{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":111,"slug":112,"url":113},{"name":115,"slug":116,"url":117},{"ID":747,"title":748,"post_type":10,"post_type_label":11,"url":749,"date":750,"modified":751,"thumbnail":706,"thumb":706,"tag":1016,"slug":756,"excerpt":757},[1017,1018,1019],{"name":106,"slug":107,"url":108},{"name":25,"slug":26,"url":27},{"name":115,"slug":116,"url":117},{"name":511,"slug":512,"url":513,"posts":1021},[1022],{"ID":504,"title":505,"post_type":10,"post_type_label":11,"url":506,"date":100,"modified":388,"thumbnail":389,"thumb":389,"tag":1023,"slug":522,"excerpt":523},[1024,1025,1026,1027,1028],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"name":511,"slug":512,"url":513},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},{"name":519,"slug":520,"url":521,"posts":1030},[1031,1036],{"ID":767,"title":768,"post_type":10,"post_type_label":11,"url":769,"date":388,"modified":13,"thumbnail":770,"thumb":770,"tag":1032,"slug":775,"excerpt":776},[1033,1034,1035],{"name":393,"slug":394,"url":395},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},{"ID":504,"title":505,"post_type":10,"post_type_label":11,"url":506,"date":100,"modified":388,"thumbnail":389,"thumb":389,"tag":1037,"slug":522,"excerpt":523},[1038,1039,1040,1041,1042],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"name":511,"slug":512,"url":513},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},{"name":75,"slug":76,"url":77,"posts":1044},[1045],{"ID":63,"title":64,"post_type":10,"post_type_label":11,"url":65,"date":66,"modified":66,"thumbnail":67,"thumb":67,"tag":1046,"slug":78,"excerpt":79},[1047,1048,1049,1050],{"name":17,"slug":18,"url":19},{"name":71,"slug":71,"url":72},{"name":25,"slug":26,"url":27},{"name":75,"slug":76,"url":77},{"name":429,"slug":430,"url":431,"posts":1052},[1053],{"ID":421,"title":422,"post_type":10,"post_type_label":11,"url":423,"date":424,"modified":125,"thumbnail":425,"thumb":425,"tag":1054,"slug":432,"excerpt":433},[1055,1056],{"name":323,"slug":324,"url":325},{"name":429,"slug":430,"url":431},{"name":473,"slug":474,"url":475,"posts":1058},[1059],{"ID":467,"title":468,"post_type":10,"post_type_label":11,"url":469,"date":66,"modified":66,"thumbnail":163,"thumb":163,"tag":1060,"slug":476,"excerpt":477},[1061,1062],{"name":323,"slug":324,"url":325},{"name":473,"slug":474,"url":475},{"name":515,"slug":516,"url":517,"posts":1064},[1065,1070],{"ID":767,"title":768,"post_type":10,"post_type_label":11,"url":769,"date":388,"modified":13,"thumbnail":770,"thumb":770,"tag":1066,"slug":775,"excerpt":776},[1067,1068,1069],{"name":393,"slug":394,"url":395},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},{"ID":504,"title":505,"post_type":10,"post_type_label":11,"url":506,"date":100,"modified":388,"thumbnail":389,"thumb":389,"tag":1071,"slug":522,"excerpt":523},[1072,1073,1074,1075,1076],{"name":323,"slug":324,"url":325},{"name":393,"slug":394,"url":395},{"name":511,"slug":512,"url":513},{"name":515,"slug":516,"url":517},{"name":519,"slug":520,"url":521},1781247296930]