[{"data":1,"prerenderedAt":1099},["ShallowReactive",2],{"site-info":3,"post-tech-2769":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},2769,"WebページにGoogleフォーム風のお問い合わせフォームを追加する方法","tech","Tech Blog","\u002Ftech\u002F2769\u002F","2026.06.22","\u002Fuploads\u002F2026\u002F06\u002FImage_2769_20260622-1200x675.png",[16,20,24],{"name":17,"slug":18,"url":19},"Google","google","\u002Ftag\u002Fgoogle\u002F",{"name":21,"slug":22,"url":23},"HTML","html","\u002Ftag\u002Fhtml\u002F",{"name":25,"slug":26,"url":27},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F","add-google-form-to-website-html-apps-script","HTMLフォーム、Googleスプレッドシート、Apps Scriptを使って、静的なWebページに問い合わせフォームを追加する方法を簡単に解説します。","\n\u003Cp class=\"wp-block-paragraph\">Webサイトを静的HTMLで運用していると、WordPressの問い合わせフォームプラグインのような動的機能をそのまま使えないことがあります。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">そんなときは、HTMLフォームからGoogle Apps Scriptへ送信し、Googleスプレッドシートに内容を保存する方法が手軽です。このサイトの \u003Ccode>contact\u002F\u003C\u002Fcode> でも、フォームの送信先としてApps Scriptを使っています。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">この記事では、できるだけ簡単にするため、Vueなどのフレームワークは使わず、HTMLと少しのJavaScriptだけで説明します。\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\u003Cul class=\"wp-block-list\">\n\u003Cli>Webページ側にHTMLフォームを置く\u003C\u002Fli>\n\n\n\n\u003Cli>送信ボタンを押すとApps ScriptのURLへ送信する\u003C\u002Fli>\n\n\n\n\u003Cli>Apps ScriptがGoogleスプレッドシートに1行追加する\u003C\u002Fli>\n\n\n\n\u003Cli>必要ならメール通知も送る\u003C\u002Fli>\n\u003C\u002Ful>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Googleフォームそのものをiframeで埋め込む方法もありますが、今回はサイトのデザインに合わせやすい「自分で作ったHTMLフォーム」を使います。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">全体の流れ\u003C\u002Fh2>\n\n\n\n\u003Col class=\"wp-block-list\">\n\u003Cli>Googleスプレッドシートを作る\u003C\u002Fli>\n\n\n\n\u003Cli>Apps Scriptを書く\u003C\u002Fli>\n\n\n\n\u003Cli>Apps ScriptをWebアプリとして公開する\u003C\u002Fli>\n\n\n\n\u003Cli>HTMLフォームからApps Scriptへ送信する\u003C\u002Fli>\n\u003C\u002Fol>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">先にスプレッドシートとApps Scriptを用意して、最後にHTML側へ送信先URLを設定します。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">1. スプレッドシートを用意する\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">まず、Googleスプレッドシートで新しいファイルを作成します。シート名は例として \u003Ccode>お問い合わせ\u003C\u002Fcode> にします。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">1行目には、次の見出しを入れておきます。\u003C\u002Fp>\n\n\n\n\u003Cfigure class=\"wp-block-table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>日時\u003C\u002Fth>\u003Cth>お名前\u003C\u002Fth>\u003Cth>メールアドレス\u003C\u002Fth>\u003Cth>相談内容\u003C\u002Fth>\u003Cth>お問い合わせ内容\u003C\u002Fth>\u003Cth>送信元\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>timestamp\u003C\u002Ftd>\u003Ctd>name\u003C\u002Ftd>\u003Ctd>email\u003C\u002Ftd>\u003Ctd>category\u003C\u002Ftd>\u003Ctd>message\u003C\u002Ftd>\u003Ctd>source\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">見出しの日本語は自由に変えて構いません。Apps Script側で、同じ順番にデータを追加していきます。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">2. Apps Scriptを書く\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">スプレッドシート上部のメニューから「拡張機能」→「Apps Script」を開きます。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">開いたエディタに、次のコードを貼り付けます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\">\u003Ccode>const SHEET_NAME = 'お問い合わせ';\nconst NOTICE_EMAIL = 'your@example.com'; \u002F\u002F 通知が不要なら空文字にする\n\nfunction doPost(e) {\n  const lock = LockService.getScriptLock();\n  lock.waitLock(10000);\n\n  try {\n    const sheet = SpreadsheetApp\n      .getActiveSpreadsheet()\n      .getSheetByName(SHEET_NAME);\n\n    const params = e.parameter;\n\n    \u002F\u002F 空の項目は空文字として扱う\n    const name = params.name || '';\n    const email = params.email || '';\n    const category = params.category || '';\n    const message = params.message || '';\n    const source = params.source || '';\n\n    \u002F\u002F 簡単なスパム対策。HTML側の隠し項目に入力があれば保存しない\n    if (params.website) {\n      return createResponse({ result: 'ok' });\n    }\n\n    sheet.appendRow([\n      new Date(),\n      name,\n      email,\n      category,\n      message,\n      source,\n    ]);\n\n    if (NOTICE_EMAIL) {\n      MailApp.sendEmail({\n        to: NOTICE_EMAIL,\n        subject: 'Webサイトからお問い合わせがありました',\n        body: [\n          `お名前: ${name}`,\n          `メールアドレス: ${email}`,\n          `相談内容: ${category}`,\n          '',\n          message,\n        ].join('n'),\n      });\n    }\n\n    return createResponse({ result: 'ok' });\n  } catch (error) {\n    return createResponse({ result: 'error', message: error.message });\n  } finally {\n    lock.releaseLock();\n  }\n}\n\nfunction createResponse(data) {\n  return ContentService\n    .createTextOutput(JSON.stringify(data))\n    .setMimeType(ContentService.MimeType.JSON);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>SHEET_NAME\u003C\u002Fcode> は、実際に作ったシート名に合わせてください。メール通知が不要な場合は、\u003Ccode>NOTICE_EMAIL\u003C\u002Fcode> を空文字にします。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>appendRow\u003C\u002Fcode> の順番が、スプレッドシートの列の順番になります。フォーム項目を増やしたい場合は、HTML側の \u003Ccode>name\u003C\u002Fcode> 属性とApps Script側の \u003Ccode>params.xxx\u003C\u002Fcode> を同じ名前で増やします。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">3. Apps ScriptをWebアプリとして公開する\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">コードを保存したら、Apps ScriptをWebアプリとしてデプロイします。\u003C\u002Fp>\n\n\n\n\u003Col class=\"wp-block-list\">\n\u003Cli>右上の「デプロイ」を押す\u003C\u002Fli>\n\n\n\n\u003Cli>「新しいデプロイ」を選ぶ\u003C\u002Fli>\n\n\n\n\u003Cli>種類で「ウェブアプリ」を選ぶ\u003C\u002Fli>\n\n\n\n\u003Cli>実行するユーザーは「自分」を選ぶ\u003C\u002Fli>\n\n\n\n\u003Cli>アクセスできるユーザーは「全員」を選ぶ\u003C\u002Fli>\n\n\n\n\u003Cli>デプロイして、表示されたWebアプリURLをコピーする\u003C\u002Fli>\n\u003C\u002Fol>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">ここでコピーしたURLを、HTML側の送信先として使います。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">「全員」にするとURLを知っている人は送信できる状態になります。問い合わせフォームとして公開する以上必要な設定ですが、スパム対策や入力チェックは最低限入れておくのがおすすめです。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">4. HTMLフォームを作る\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">次に、Webページ側のHTMLを作ります。以下の \u003Ccode>YOUR_APPS_SCRIPT_WEB_APP_URL\u003C\u002Fcode> を、先ほどコピーしたWebアプリURLに置き換えてください。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><form id="contact-form" class="contact-form">\n  <label>\n    お名前\n    <input type="text" name="name" autocomplete="name" required>\n  <\u002Flabel>\n\n  <label>\n    メールアドレス\n    <input type="email" name="email" autocomplete="email" required>\n  <\u002Flabel>\n\n  <label>\n    相談内容\n    <select name="category" required>\n      <option value="">選択してください<\u002Foption>\n      <option value="Webサイト制作">Webサイト制作<\u002Foption>\n      <option value="WordPress構築・改修">WordPress構築・改修<\u002Foption>\n      <option value="サイト運用・保守">サイト運用・保守<\u002Foption>\n      <option value="その他">その他<\u002Foption>\n    <\u002Fselect>\n  <\u002Flabel>\n\n  <label>\n    お問い合わせ内容\n    <textarea name="message" rows="8" required><\u002Ftextarea>\n  <\u002Flabel>\n\n  <!-- スパム対策用。通常のユーザーには見せない -->\n  <label class="form-trap">\n    Webサイト\n    <input type="text" name="website" tabindex="-1" autocomplete="off">\n  <\u002Flabel>\n\n  <input type="hidden" name="source" value="example.com\u002Fcontact">\n\n  <button type="submit">送信する<\u002Fbutton>\n  <p id="form-status" role="status"><\u002Fp>\n<\u002Fform>\n\n<script>\nconst endpoint = 'YOUR_APPS_SCRIPT_WEB_APP_URL';\nconst form = document.getElementById('contact-form');\nconst statusText = document.getElementById('form-status');\n\nform.addEventListener('submit', async (event) => {\n  event.preventDefault();\n\n  statusText.textContent = '送信中です';\n\n  try {\n    const formData = new FormData(form);\n\n    await fetch(endpoint, {\n      method: 'POST',\n      body: formData,\n      mode: 'no-cors',\n    });\n\n    form.reset();\n    statusText.textContent = '送信しました。お問い合わせありがとうございます。';\n  } catch (error) {\n    statusText.textContent = '送信できませんでした。時間をおいて再度お試しください。';\n  }\n});\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>mode: 'no-cors'\u003C\u002Fcode> を指定しているのは、静的サイトからApps Scriptへ送信するときにCORSエラーを避けるためです。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">この指定を使うと、JavaScript側ではApps Scriptから返ってきたJSONの中身を読めません。そのため、「fetchが完了したら送信完了として表示する」というシンプルな扱いにしています。\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">5. 最低限のCSS\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">見た目を少し整えるなら、次のようなCSSを追加します。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.contact-form {\n  display: grid;\n  gap: 16px;\n  max-width: 640px;\n}\n.contact-form label {\n  display: grid;\n  gap: 6px;\n  font-weight: 700;\n}\n.contact-form input,\n.contact-form select,\n.contact-form textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font: inherit;\n}\n.contact-form button {\n  width: fit-content;\n  padding: 12px 24px;\n  border: 0;\n  border-radius: 4px;\n  background: #111;\n  color: #fff;\n  font: inherit;\n  cursor: pointer;\n}\n.form-trap {\n  position: absolute;\n  left: -9999px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">フォーム項目を増やす場合\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">たとえば電話番号を追加したい場合は、HTMLに \u003Ccode>name=\"tel\"\u003C\u002Fcode> の入力欄を追加します。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><label>\n  電話番号\n  <input type="tel" name="tel" autocomplete="tel">\n<\u002Flabel>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Apps Script側にも \u003Ccode>params.tel\u003C\u002Fcode> を追加し、\u003Ccode>appendRow\u003C\u002Fcode> に入れます。\u003C\u002Fp>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\">\u003Ccode>const tel = params.tel || '';\nsheet.appendRow([\n  new Date(),\n  name,\n  email,\n  tel,\n  category,\n  message,\n  source,\n]);\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\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\u003Cul class=\"wp-block-list\">\n\u003Cli>Apps ScriptのWebアプリURLは、フォーム送信用のURLとしてHTMLに設定します。\u003C\u002Fli>\n\n\n\n\u003Cli>スプレッドシートの共有設定を一般公開にする必要はありません。\u003C\u002Fli>\n\n\n\n\u003Cli>メール通知を使う場合、初回実行時にGoogleアカウントの許可が必要です。\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Ccode>no-cors\u003C\u002Fcode> ではレスポンス本文を読めないため、細かいエラー表示には向きません。\u003C\u002Fli>\n\n\n\n\u003Cli>本格的なフォームでは、reCAPTCHAやサーバー側の入力検証も検討してください。\u003C\u002Fli>\n\u003C\u002Ful>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">まとめ\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">HTMLフォーム、Googleスプレッドシート、Apps Scriptを組み合わせると、静的なWebページにも問い合わせフォームを追加できます。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">WordPressのフォームプラグインを使わずに済むため、静的サイトやヘッドレスCMS構成でも扱いやすい方法です。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">まずは、お名前・メールアドレス・お問い合わせ内容だけの小さなフォームから作ると理解しやすいです。必要になったら項目を増やし、通知メールやスパム対策を追加していくとよいと思います。\u003C\u002Fp>\n","",{"next":33,"previous":34},null,{"ID":35,"title":36,"post_type":10,"date":37},2756,"WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話","2026.06.12",[39,55,162,291,308,321,341,364,381,396,609,616,636,643,665,681,688,745,752,779,785,809,937,963,973,1022,1042,1051,1065,1073,1079,1085],{"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":56,"slug":57,"url":58,"posts":59},"API","api","\u002Ftag\u002Fapi\u002F",[60,75,93,106,130,149],{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":61,"date":37,"modified":37,"thumbnail":62,"thumb":62,"tag":63,"slug":73,"excerpt":74},"\u002Ftech\u002F2756\u002F","\u002Fuploads\u002F2026\u002F06\u002Fimg_2756-1200x675.png",[64,65,69],{"name":56,"slug":57,"url":58},{"name":66,"slug":67,"url":68},"Nuxt","nuxt","\u002Ftag\u002Fnuxt\u002F",{"name":70,"slug":71,"url":72},"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":76,"title":77,"post_type":10,"post_type_label":11,"url":78,"date":79,"modified":79,"thumbnail":80,"thumb":80,"tag":81,"slug":91,"excerpt":92},1737,"WordPressに気象庁APIで天気を表示する","\u002Ftech\u002F1737\u002F","2023.07.24","\u002Fuploads\u002F2023\u002F07\u002Fweather_api-1200x731.webp",[82,83,86,87],{"name":56,"slug":57,"url":58},{"name":84,"slug":84,"url":85},"php","\u002Ftag\u002Fphp\u002F",{"name":70,"slug":71,"url":72},{"name":88,"slug":89,"url":90},"気象庁","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":94,"title":95,"post_type":10,"post_type_label":11,"url":96,"date":97,"modified":97,"thumbnail":98,"thumb":98,"tag":99,"slug":104,"excerpt":105},1131,"WordPressで月送りのカレンダーを実装（祝日対応）","\u002Ftech\u002F1131\u002F","2023.06.15","\u002Fuploads\u002F2023\u002F06\u002Fbnr_calendar.png",[100,101,102,103],{"name":56,"slug":57,"url":58},{"name":17,"slug":18,"url":19},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},"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":107,"title":108,"post_type":10,"post_type_label":11,"url":109,"date":110,"modified":111,"thumbnail":112,"thumb":112,"tag":113,"slug":128,"excerpt":129},1027,"Youtubeフィードを使用してWordPressにチャンネルの動画一覧を表示する。","\u002Ftech\u002F1027\u002F","2023.05.04","2026.06.04","\u002Fuploads\u002F2022\u002F10\u002Fyoutube_id.png",[114,115,119,120,124],{"name":56,"slug":57,"url":58},{"name":116,"slug":117,"url":118},"RSS","rss","\u002Ftag\u002Frss\u002F",{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},"YouTube","youtube","\u002Ftag\u002Fyoutube\u002F",{"name":125,"slug":126,"url":127},"フィード","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":131,"title":132,"post_type":10,"post_type_label":11,"url":133,"date":134,"modified":135,"thumbnail":136,"thumb":136,"tag":137,"slug":147,"excerpt":148},521,"Instagram Graph APIのビジネスアカウントIDとアクセストークン取得","\u002Ftech\u002F521\u002F","2022.11.01","2023.08.08","\u002Fuploads\u002F2022\u002F11\u002Fimg_instagram.webp",[138,139,143],{"name":56,"slug":57,"url":58},{"name":140,"slug":141,"url":142},"Instagram","instagram","\u002Ftag\u002Finstagram\u002F",{"name":144,"slug":145,"url":146},"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":150,"title":151,"post_type":10,"post_type_label":11,"url":152,"date":153,"modified":154,"thumbnail":155,"thumb":155,"tag":156,"slug":160,"excerpt":161},464,"WordPressにYouTubeの動画一覧を表示する","\u002Ftech\u002F464\u002F","2022.10.28","2022.12.02","\u002Fuploads\u002F2022\u002F10\u002Fwordpress-youtube-1200x684.png",[157,158,159],{"name":56,"slug":57,"url":58},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},"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":163,"slug":164,"url":165,"posts":166},"CSS","css","\u002Ftag\u002Fcss\u002F",[167,178,189,200,209,219,230,241,251,261,271,281],{"ID":168,"title":169,"post_type":10,"post_type_label":11,"url":170,"date":171,"modified":172,"thumbnail":173,"thumb":173,"tag":174,"slug":176,"excerpt":177},1904,"ブラウザの横幅に合わせてフォントサイズを変更する。","\u002Ftech\u002F1904\u002F","2023.11.28","2023.12.15","\u002Fuploads\u002F2022\u002F10\u002Filr.png",[175],{"name":163,"slug":164,"url":165},"%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":179,"title":180,"post_type":10,"post_type_label":11,"url":181,"date":182,"modified":135,"thumbnail":183,"thumb":183,"tag":184,"slug":187,"excerpt":188},1769,"HTMLメール用にインラインCSSに変換する","\u002Ftech\u002F1769\u002F","2023.07.27","\u002Fuploads\u002F2023\u002F07\u002Fimg_mail.webp",[185,186],{"name":163,"slug":164,"url":165},{"name":21,"slug":22,"url":23},"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":190,"title":191,"post_type":10,"post_type_label":11,"url":192,"date":193,"modified":194,"thumbnail":195,"thumb":195,"tag":196,"slug":198,"excerpt":199},889,"CSSで三角形を作る(clip-path版)","\u002Ftech\u002F889\u002F","2022.12.28","2026.06.03","\u002Fuploads\u002F2021\u002F09\u002Fimg_css-triangle-1.png",[197],{"name":163,"slug":164,"url":165},"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":201,"title":202,"post_type":10,"post_type_label":11,"url":203,"date":154,"modified":154,"thumbnail":204,"thumb":204,"tag":205,"slug":207,"excerpt":208},837,"要素の境界線を斜めにする","\u002Ftech\u002F837\u002F","\u002Fuploads\u002F2022\u002F12\u002Fimg837-1200x638.png",[206],{"name":163,"slug":164,"url":165},"%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":210,"title":211,"post_type":10,"post_type_label":11,"url":212,"date":213,"modified":213,"thumbnail":214,"thumb":214,"tag":215,"slug":217,"excerpt":218},771,"mask-imageでSVG画像の色を変える","\u002Ftech\u002F771\u002F","2022.11.26","\u002Fuploads\u002F2022\u002F11\u002Fmask-image-color-1200x819.png",[216],{"name":163,"slug":164,"url":165},"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":220,"title":221,"post_type":10,"post_type_label":11,"url":222,"date":223,"modified":224,"thumbnail":225,"thumb":225,"tag":226,"slug":228,"excerpt":229},747,"mask-imageで透過グラデーション","\u002Ftech\u002F747\u002F","2022.11.18","2023.07.21","\u002Fuploads\u002F2022\u002F11\u002Fmask-image-1200x671.webp",[227],{"name":163,"slug":164,"url":165},"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":231,"title":232,"post_type":10,"post_type_label":11,"url":233,"date":234,"modified":235,"thumbnail":236,"thumb":236,"tag":237,"slug":239,"excerpt":240},395,"ボーダーをグラデーション・角丸・背景抜きでCSSで実装する","\u002Ftech\u002F395\u002F","2022.10.27","2023.06.16","\u002Fuploads\u002F2022\u002F10\u002Fborder-radius-gradient-1200x777.png",[238],{"name":163,"slug":164,"url":165},"%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":242,"title":243,"post_type":10,"post_type_label":11,"url":244,"date":245,"modified":246,"thumbnail":195,"thumb":195,"tag":247,"slug":249,"excerpt":250},228,"CSSで三角形を作る(border版)","\u002Ftech\u002F228\u002F","2021.09.11","2026.06.02",[248],{"name":163,"slug":164,"url":165},"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":252,"title":253,"post_type":10,"post_type_label":11,"url":254,"date":255,"modified":49,"thumbnail":256,"thumb":256,"tag":257,"slug":259,"excerpt":260},143,"CSSでスクロールスナップを実装できるscroll-snap-type","\u002Ftech\u002F143\u002F","2021.08.02","\u002Fuploads\u002F2021\u002F08\u002Fimg_scroll-snap-type.png",[258],{"name":163,"slug":164,"url":165},"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":262,"title":263,"post_type":10,"post_type_label":11,"url":264,"date":265,"modified":246,"thumbnail":266,"thumb":266,"tag":267,"slug":269,"excerpt":270},108,"要素の背後にぼかしなどの効果を加えるbackdrop-filter","\u002Ftech\u002F108\u002F","2021.07.27","\u002Fuploads\u002F2021\u002F07\u002Fthumbnail_108-1200x662.jpg",[268],{"name":163,"slug":164,"url":165},"%e8%83%8c%e6%99%af%e3%81%ab","スタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]",{"ID":272,"title":273,"post_type":10,"post_type_label":11,"url":274,"date":275,"modified":49,"thumbnail":276,"thumb":276,"tag":277,"slug":279,"excerpt":280},83,"要素に連番を与えるcounter-increment","\u002Ftech\u002F83\u002F","2021.07.25","\u002Fuploads\u002F2021\u002F07\u002Fimg_counter-increment-1.png",[278],{"name":163,"slug":164,"url":165},"%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":282,"title":283,"post_type":10,"post_type_label":11,"url":284,"date":285,"modified":246,"thumbnail":286,"thumb":286,"tag":287,"slug":289,"excerpt":290},43,"行数を指定して文末を「…」で省略するline-clamp","\u002Ftech\u002F43\u002F","2021.07.23","\u002Fuploads\u002F2021\u002F07\u002Fimg_line-clamp-1.png",[288],{"name":163,"slug":164,"url":165},"%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":292,"slug":293,"url":294,"posts":295},"Docker","docker","\u002Ftag\u002Fdocker\u002F",[296],{"ID":297,"title":298,"post_type":10,"post_type_label":11,"url":299,"date":300,"modified":37,"thumbnail":301,"thumb":301,"tag":302,"slug":306,"excerpt":307},2367,"DockerでWordPress構築（ローカル仮想ドメイン版)","\u002Ftech\u002F2367\u002F","2025.10.30","\u002Fuploads\u002F2025\u002F10\u002Ftech2367-thumbnail-1200x675.png",[303,304,305],{"name":292,"slug":293,"url":294},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},"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":17,"slug":18,"url":19,"posts":309},[310,315],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":311,"slug":28,"excerpt":29},[312,313,314],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":94,"title":95,"post_type":10,"post_type_label":11,"url":96,"date":97,"modified":97,"thumbnail":98,"thumb":98,"tag":316,"slug":104,"excerpt":105},[317,318,319,320],{"name":56,"slug":57,"url":58},{"name":17,"slug":18,"url":19},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"name":322,"slug":323,"url":324,"posts":325},"GSAP","gsap","\u002Ftag\u002Fgsap\u002F",[326],{"ID":327,"title":328,"post_type":10,"post_type_label":11,"url":329,"date":330,"modified":331,"thumbnail":173,"thumb":173,"tag":332,"slug":339,"excerpt":340},971,"スムーズスクロール","\u002Ftech\u002F971\u002F","2023.02.09","2023.11.14",[333,334,335],{"name":322,"slug":323,"url":324},{"name":25,"slug":26,"url":27},{"name":336,"slug":337,"url":338},"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":21,"slug":22,"url":23,"posts":342},[343,348,360],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":344,"slug":28,"excerpt":29},[345,346,347],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":349,"title":350,"post_type":10,"post_type_label":11,"url":351,"date":352,"modified":353,"thumbnail":354,"thumb":354,"tag":355,"slug":358,"excerpt":359},1775,"dialog要素とtemplate要素を使用してモーダルウィンドウを作る","\u002Ftech\u002F1775\u002F","2023.07.29","2025.10.29","\u002Fuploads\u002F2023\u002F07\u002Fimg_window.webp",[356,357],{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},"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":179,"title":180,"post_type":10,"post_type_label":11,"url":181,"date":182,"modified":135,"thumbnail":183,"thumb":183,"tag":361,"slug":187,"excerpt":188},[362,363],{"name":163,"slug":164,"url":165},{"name":21,"slug":22,"url":23},{"name":140,"slug":141,"url":142,"posts":365},[366,376],{"ID":367,"title":368,"post_type":10,"post_type_label":11,"url":369,"date":154,"modified":224,"thumbnail":370,"thumb":370,"tag":371,"slug":374,"excerpt":375},855,"WordPressにインスタグラムの投稿一覧を表示","\u002Ftech\u002F855\u002F","\u002Fuploads\u002F2022\u002F12\u002Finsta_list-1200x806.webp",[372,373],{"name":140,"slug":141,"url":142},{"name":70,"slug":71,"url":72},"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":131,"title":132,"post_type":10,"post_type_label":11,"url":133,"date":134,"modified":135,"thumbnail":136,"thumb":136,"tag":377,"slug":147,"excerpt":148},[378,379,380],{"name":56,"slug":57,"url":58},{"name":140,"slug":141,"url":142},{"name":144,"slug":145,"url":146},{"name":382,"slug":383,"url":384,"posts":385},"iPhone","iphone","\u002Ftag\u002Fiphone\u002F",[386],{"ID":387,"title":388,"post_type":10,"post_type_label":11,"url":389,"date":390,"modified":390,"thumbnail":391,"thumb":391,"tag":392,"slug":394,"excerpt":395},815,"iPhoneでウォレットのメインカードを入れ替える","\u002Ftech\u002F815\u002F","2022.12.01","\u002Fuploads\u002F2022\u002F12\u002Fiphone_wallet01.png",[393],{"name":382,"slug":383,"url":384},"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":25,"slug":26,"url":27,"posts":397},[398,403,418,427,440,454,464,473,482,486,498,508,516,523,545,554,559,570,580,589,599],{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":13,"thumbnail":14,"thumb":14,"tag":399,"slug":28,"excerpt":29},[400,401,402],{"name":17,"slug":18,"url":19},{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":404,"title":405,"post_type":10,"post_type_label":11,"url":406,"date":407,"modified":408,"thumbnail":409,"thumb":409,"tag":410,"slug":416,"excerpt":417},2179,"Vueコンポーネント一括インポート","\u002Ftech\u002F2179\u002F","2024.06.25","2026.06.16","\u002Fuploads\u002F2024\u002F06\u002Ftech2179-thumbnail-1200x675.png",[411,412],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},"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":419,"title":420,"post_type":10,"post_type_label":11,"url":421,"date":422,"modified":353,"thumbnail":173,"thumb":173,"tag":423,"slug":425,"excerpt":426},1942,"Intersection Observerでスクロールで要素の状態を変化させる","\u002Ftech\u002F1942\u002F","2023.12.20",[424],{"name":25,"slug":26,"url":27},"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":428,"title":429,"post_type":10,"post_type_label":11,"url":430,"date":431,"modified":353,"thumbnail":173,"thumb":173,"tag":432,"slug":438,"excerpt":439},1895,"SVG内の要素にfilterを適応させる","\u002Ftech\u002F1895\u002F","2023.11.16",[433,434],{"name":25,"slug":26,"url":27},{"name":435,"slug":436,"url":437},"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":441,"title":442,"post_type":10,"post_type_label":11,"url":443,"date":444,"modified":135,"thumbnail":445,"thumb":445,"tag":446,"slug":452,"excerpt":453},1831,"JavaScriptで擬似要素を操作する","\u002Ftech\u002F1831\u002F","2023.08.07","\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[447,448],{"name":25,"slug":26,"url":27},{"name":449,"slug":450,"url":451},"擬似要素","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":455,"title":456,"post_type":10,"post_type_label":11,"url":457,"date":458,"modified":135,"thumbnail":459,"thumb":459,"tag":460,"slug":462,"excerpt":463},1827,"2点間の緯度・経度の距離を求める","\u002Ftech\u002F1827\u002F","2023.08.06","\u002Fuploads\u002F2023\u002F08\u002Fimg_markers.webp",[461],{"name":25,"slug":26,"url":27},"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":465,"title":466,"post_type":10,"post_type_label":11,"url":467,"date":458,"modified":353,"thumbnail":468,"thumb":468,"tag":469,"slug":471,"excerpt":472},1814,"JavaScriptで現在地を取得する","\u002Ftech\u002F1814\u002F","\u002Fuploads\u002F2023\u002F08\u002Fimg_marker.webp",[470],{"name":25,"slug":26,"url":27},"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":474,"title":475,"post_type":10,"post_type_label":11,"url":476,"date":477,"modified":477,"thumbnail":173,"thumb":173,"tag":478,"slug":480,"excerpt":481},1807,"コロン(:)の入った要素や属性の情報を取得する","\u002Ftech\u002F1807\u002F","2023.08.04",[479],{"name":25,"slug":26,"url":27},"%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":349,"title":350,"post_type":10,"post_type_label":11,"url":351,"date":352,"modified":353,"thumbnail":354,"thumb":354,"tag":483,"slug":358,"excerpt":359},[484,485],{"name":21,"slug":22,"url":23},{"name":25,"slug":26,"url":27},{"ID":487,"title":488,"post_type":10,"post_type_label":11,"url":489,"date":79,"modified":79,"thumbnail":173,"thumb":173,"tag":490,"slug":496,"excerpt":497},1754,"日付のフォーマットを変更する","\u002Ftech\u002F1754\u002F",[491,492],{"name":25,"slug":26,"url":27},{"name":493,"slug":494,"url":495},"日付","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":499,"title":500,"post_type":10,"post_type_label":11,"url":501,"date":502,"modified":135,"thumbnail":503,"thumb":503,"tag":504,"slug":506,"excerpt":507},1712,"数字に3桁ずつ、カンマを入れる","\u002Ftech\u002F1712\u002F","2023.07.19","\u002Fuploads\u002F2023\u002F07\u002Fimg_comma.webp",[505],{"name":25,"slug":26,"url":27},"%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":509,"title":510,"post_type":10,"post_type_label":11,"url":511,"date":502,"modified":502,"thumbnail":173,"thumb":173,"tag":512,"slug":514,"excerpt":515},1708,"ゼロパディング","\u002Ftech\u002F1708\u002F",[513],{"name":25,"slug":26,"url":27},"%e3%82%bc%e3%83%ad%e3%83%91%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0","概要 ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。 ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。 ゼロパディングは、例えば […]",{"ID":517,"title":25,"post_type":10,"post_type_label":11,"url":518,"date":519,"modified":502,"thumbnail":173,"thumb":173,"tag":520,"slug":26,"excerpt":522},1061,"\u002Ftech\u002F1061\u002F","2023.05.18",[521],{"name":25,"slug":26,"url":27},"カンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]",{"ID":524,"title":525,"post_type":10,"post_type_label":11,"url":526,"date":110,"modified":407,"thumbnail":527,"thumb":527,"tag":528,"slug":543,"excerpt":544},1047,"Vue.jsで暗号化・復号化を実装する","\u002Ftech\u002F1047\u002F","\u002Fuploads\u002F2023\u002F05\u002Fvuejs.png",[529,530,531,535,539],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"name":532,"slug":533,"url":534},"プラグイン","plugin","\u002Ftag\u002Fplugin\u002F",{"name":536,"slug":537,"url":538},"復号化","decryption","\u002Ftag\u002Fdecryption\u002F",{"name":540,"slug":541,"url":542},"暗号化","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":546,"title":547,"post_type":10,"post_type_label":11,"url":548,"date":549,"modified":353,"thumbnail":173,"thumb":173,"tag":550,"slug":552,"excerpt":553},976,"HLS(HTTP Live Streaming)動画を再生する","\u002Ftech\u002F976\u002F","2023.02.26",[551],{"name":25,"slug":26,"url":27},"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":327,"title":328,"post_type":10,"post_type_label":11,"url":329,"date":330,"modified":331,"thumbnail":173,"thumb":173,"tag":555,"slug":339,"excerpt":340},[556,557,558],{"name":322,"slug":323,"url":324},{"name":25,"slug":26,"url":27},{"name":336,"slug":337,"url":338},{"ID":560,"title":561,"post_type":10,"post_type_label":11,"url":562,"date":563,"modified":564,"thumbnail":565,"thumb":565,"tag":566,"slug":568,"excerpt":569},917,"ページのスクロールされている割合を表示させる","\u002Ftech\u002F917\u002F","2023.01.04","2023.01.05","\u002Fuploads\u002F2023\u002F01\u002Fpage-scroll-position-1200x737.png",[567],{"name":25,"slug":26,"url":27},"%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":571,"title":572,"post_type":10,"post_type_label":11,"url":573,"date":574,"modified":575,"thumbnail":173,"thumb":173,"tag":576,"slug":578,"excerpt":579},893,"マウスチェイサー","\u002Ftech\u002F893\u002F","2022.12.29","2024.01.14",[577],{"name":25,"slug":26,"url":27},"%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":581,"title":582,"post_type":10,"post_type_label":11,"url":583,"date":584,"modified":353,"thumbnail":173,"thumb":173,"tag":585,"slug":587,"excerpt":588},868,"JavaScriptで円運動","\u002Ftech\u002F868\u002F","2022.12.14",[586],{"name":25,"slug":26,"url":27},"javascript%e3%81%a7%e5%86%86%e9%81%8b%e5%8b%95","概要 JavaScriptで円を描くように要素が移動するアニメーションを実装します。 サンプル ソース 解説 x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。",{"ID":590,"title":591,"post_type":10,"post_type_label":11,"url":592,"date":593,"modified":49,"thumbnail":594,"thumb":594,"tag":595,"slug":597,"excerpt":598},210,"ページ内スクロール","\u002Ftech\u002F210\u002F","2021.09.09","\u002Fuploads\u002F2021\u002F09\u002Fimg_page-scroll-1.png",[596],{"name":25,"slug":26,"url":27},"%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":600,"title":601,"post_type":10,"post_type_label":11,"url":602,"date":603,"modified":49,"thumbnail":604,"thumb":604,"tag":605,"slug":607,"excerpt":608},201,"ハンバーガメニュー","\u002Ftech\u002F201\u002F","2021.08.29","\u002Fuploads\u002F2021\u002F08\u002Fimg_hamburger-menu-1.png",[606],{"name":25,"slug":26,"url":27},"%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":336,"slug":337,"url":338,"posts":610},[611],{"ID":327,"title":328,"post_type":10,"post_type_label":11,"url":329,"date":330,"modified":331,"thumbnail":173,"thumb":173,"tag":612,"slug":339,"excerpt":340},[613,614,615],{"name":322,"slug":323,"url":324},{"name":25,"slug":26,"url":27},{"name":336,"slug":337,"url":338},{"name":617,"slug":618,"url":619,"posts":620},"Mac","mac","\u002Ftag\u002Fmac\u002F",[621],{"ID":622,"title":623,"post_type":10,"post_type_label":11,"url":624,"date":625,"modified":626,"thumbnail":173,"thumb":173,"tag":627,"slug":634,"excerpt":635},992,"Macでテキストを音声データ(MP3)に一括変換","\u002Ftech\u002F992\u002F","2023.04.06","2024.08.05",[628,629,633],{"name":617,"slug":618,"url":619},{"name":630,"slug":631,"url":632},"MP3","mp3","\u002Ftag\u002Fmp3\u002F",{"name":144,"slug":145,"url":146},"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":630,"slug":631,"url":632,"posts":637},[638],{"ID":622,"title":623,"post_type":10,"post_type_label":11,"url":624,"date":625,"modified":626,"thumbnail":173,"thumb":173,"tag":639,"slug":634,"excerpt":635},[640,641,642],{"name":617,"slug":618,"url":619},{"name":630,"slug":631,"url":632},{"name":144,"slug":145,"url":146},{"name":144,"slug":145,"url":146,"posts":644},[645,655,660],{"ID":646,"title":647,"post_type":10,"post_type_label":11,"url":648,"date":649,"modified":135,"thumbnail":650,"thumb":650,"tag":651,"slug":653,"excerpt":654},1803,"Node.jsのバージョン管理","\u002Ftech\u002F1803\u002F","2023.08.02","\u002Fuploads\u002F2023\u002F08\u002Fimg_nodejs.webp",[652],{"name":144,"slug":145,"url":146},"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":622,"title":623,"post_type":10,"post_type_label":11,"url":624,"date":625,"modified":626,"thumbnail":173,"thumb":173,"tag":656,"slug":634,"excerpt":635},[657,658,659],{"name":617,"slug":618,"url":619},{"name":630,"slug":631,"url":632},{"name":144,"slug":145,"url":146},{"ID":131,"title":132,"post_type":10,"post_type_label":11,"url":133,"date":134,"modified":135,"thumbnail":136,"thumb":136,"tag":661,"slug":147,"excerpt":148},[662,663,664],{"name":56,"slug":57,"url":58},{"name":140,"slug":141,"url":142},{"name":144,"slug":145,"url":146},{"name":666,"slug":666,"url":667,"posts":668},"note","\u002Ftag\u002Fnote\u002F",[669],{"ID":670,"title":671,"post_type":10,"post_type_label":11,"url":672,"date":673,"modified":674,"thumbnail":675,"thumb":675,"tag":676,"slug":679,"excerpt":680},782,"WordPressにnoteの記事一覧を埋め込む","\u002Ftech\u002F782\u002F","2022.11.30","2023.06.14","\u002Fuploads\u002F2022\u002F11\u002Ftit_note-1200x528.png",[677,678],{"name":666,"slug":666,"url":667},{"name":70,"slug":71,"url":72},"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":66,"slug":67,"url":68,"posts":682},[683],{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":61,"date":37,"modified":37,"thumbnail":62,"thumb":62,"tag":684,"slug":73,"excerpt":74},[685,686,687],{"name":56,"slug":57,"url":58},{"name":66,"slug":67,"url":68},{"name":70,"slug":71,"url":72},{"name":84,"slug":84,"url":85,"posts":689},[690,695,701,716,722,733],{"ID":297,"title":298,"post_type":10,"post_type_label":11,"url":299,"date":300,"modified":37,"thumbnail":301,"thumb":301,"tag":691,"slug":306,"excerpt":307},[692,693,694],{"name":292,"slug":293,"url":294},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"ID":76,"title":77,"post_type":10,"post_type_label":11,"url":78,"date":79,"modified":79,"thumbnail":80,"thumb":80,"tag":696,"slug":91,"excerpt":92},[697,698,699,700],{"name":56,"slug":57,"url":58},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"name":88,"slug":89,"url":90},{"ID":702,"title":703,"post_type":10,"post_type_label":11,"url":704,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":707,"slug":714,"excerpt":715},1717,"WordPressにQiitaの記事一覧を表示する","\u002Ftech\u002F1717\u002F","2023.07.20","\u002Fuploads\u002F2023\u002F07\u002Fimg_qiita-1200x682.webp",[708,709,713],{"name":84,"slug":84,"url":85},{"name":710,"slug":711,"url":712},"Qiita","qiita","\u002Ftag\u002Fqiita\u002F",{"name":70,"slug":71,"url":72},"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":94,"title":95,"post_type":10,"post_type_label":11,"url":96,"date":97,"modified":97,"thumbnail":98,"thumb":98,"tag":717,"slug":104,"excerpt":105},[718,719,720,721],{"name":56,"slug":57,"url":58},{"name":17,"slug":18,"url":19},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"ID":723,"title":724,"post_type":10,"post_type_label":11,"url":725,"date":726,"modified":726,"thumbnail":727,"thumb":727,"tag":728,"slug":731,"excerpt":732},1115,"WordPressページネーションを自作する","\u002Ftech\u002F1115\u002F","2023.06.12","\u002Fuploads\u002F2021\u002F08\u002Fimg_feed-1.png",[729,730],{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},"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":734,"title":735,"post_type":10,"post_type_label":11,"url":736,"date":737,"modified":737,"thumbnail":727,"thumb":727,"tag":738,"slug":743,"excerpt":744},1090,"カスタム投稿タイプのフィードを作成する","\u002Ftech\u002F1090\u002F","2023.05.31",[739,740,741,742],{"name":84,"slug":84,"url":85},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},"%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":710,"slug":711,"url":712,"posts":746},[747],{"ID":702,"title":703,"post_type":10,"post_type_label":11,"url":704,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":748,"slug":714,"excerpt":715},[749,750,751],{"name":84,"slug":84,"url":85},{"name":710,"slug":711,"url":712},{"name":70,"slug":71,"url":72},{"name":116,"slug":117,"url":118,"posts":753},[754,760,767],{"ID":734,"title":735,"post_type":10,"post_type_label":11,"url":736,"date":737,"modified":737,"thumbnail":727,"thumb":727,"tag":755,"slug":743,"excerpt":744},[756,757,758,759],{"name":84,"slug":84,"url":85},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},{"ID":107,"title":108,"post_type":10,"post_type_label":11,"url":109,"date":110,"modified":111,"thumbnail":112,"thumb":112,"tag":761,"slug":128,"excerpt":129},[762,763,764,765,766],{"name":56,"slug":57,"url":58},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127},{"ID":768,"title":769,"post_type":10,"post_type_label":11,"url":770,"date":771,"modified":772,"thumbnail":727,"thumb":727,"tag":773,"slug":777,"excerpt":778},168,"フィードカスタマイズ","\u002Ftech\u002F168\u002F","2021.08.12","2023.05.30",[774,775,776],{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},"%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":435,"slug":436,"url":437,"posts":780},[781],{"ID":428,"title":429,"post_type":10,"post_type_label":11,"url":430,"date":431,"modified":353,"thumbnail":173,"thumb":173,"tag":782,"slug":438,"excerpt":439},[783,784],{"name":25,"slug":26,"url":27},{"name":435,"slug":436,"url":437},{"name":413,"slug":414,"url":415,"posts":786},[787,798,802],{"ID":788,"title":789,"post_type":10,"post_type_label":11,"url":790,"date":407,"modified":37,"thumbnail":791,"thumb":791,"tag":792,"slug":796,"excerpt":797},2186,"【改訂】Vueで暗号化・復号化を実装する","\u002Ftech\u002F2186\u002F","\u002Fuploads\u002F2024\u002F06\u002Ftech2186-thumbnail-1200x675.png",[793,794,795],{"name":413,"slug":414,"url":415},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},"%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":404,"title":405,"post_type":10,"post_type_label":11,"url":406,"date":407,"modified":408,"thumbnail":409,"thumb":409,"tag":799,"slug":416,"excerpt":417},[800,801],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"ID":524,"title":525,"post_type":10,"post_type_label":11,"url":526,"date":110,"modified":407,"thumbnail":527,"thumb":527,"tag":803,"slug":543,"excerpt":544},[804,805,806,807,808],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"name":532,"slug":533,"url":534},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},{"name":70,"slug":71,"url":72,"posts":810},[811,816,821,830,836,841,847,855,859,869,875,882,886,890,895,903,912,922,927],{"ID":35,"title":36,"post_type":10,"post_type_label":11,"url":61,"date":37,"modified":37,"thumbnail":62,"thumb":62,"tag":812,"slug":73,"excerpt":74},[813,814,815],{"name":56,"slug":57,"url":58},{"name":66,"slug":67,"url":68},{"name":70,"slug":71,"url":72},{"ID":297,"title":298,"post_type":10,"post_type_label":11,"url":299,"date":300,"modified":37,"thumbnail":301,"thumb":301,"tag":817,"slug":306,"excerpt":307},[818,819,820],{"name":292,"slug":293,"url":294},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"ID":822,"title":823,"post_type":10,"post_type_label":11,"url":824,"date":825,"modified":825,"thumbnail":173,"thumb":173,"tag":826,"slug":828,"excerpt":829},1992,"WordPressでサイドバーに目次を表示させる","\u002Ftech\u002F1992\u002F","2024.01.05",[827],{"name":70,"slug":71,"url":72},"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":76,"title":77,"post_type":10,"post_type_label":11,"url":78,"date":79,"modified":79,"thumbnail":80,"thumb":80,"tag":831,"slug":91,"excerpt":92},[832,833,834,835],{"name":56,"slug":57,"url":58},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"name":88,"slug":89,"url":90},{"ID":702,"title":703,"post_type":10,"post_type_label":11,"url":704,"date":705,"modified":705,"thumbnail":706,"thumb":706,"tag":837,"slug":714,"excerpt":715},[838,839,840],{"name":84,"slug":84,"url":85},{"name":710,"slug":711,"url":712},{"name":70,"slug":71,"url":72},{"ID":94,"title":95,"post_type":10,"post_type_label":11,"url":96,"date":97,"modified":97,"thumbnail":98,"thumb":98,"tag":842,"slug":104,"excerpt":105},[843,844,845,846],{"name":56,"slug":57,"url":58},{"name":17,"slug":18,"url":19},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"ID":848,"title":849,"post_type":10,"post_type_label":11,"url":850,"date":726,"modified":726,"thumbnail":727,"thumb":727,"tag":851,"slug":853,"excerpt":854},1118,"WP-CLIでWordPressの改ざんチェック","\u002Ftech\u002F1118\u002F",[852],{"name":70,"slug":71,"url":72},"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":723,"title":724,"post_type":10,"post_type_label":11,"url":725,"date":726,"modified":726,"thumbnail":727,"thumb":727,"tag":856,"slug":731,"excerpt":732},[857,858],{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"ID":860,"title":861,"post_type":10,"post_type_label":11,"url":862,"date":863,"modified":864,"thumbnail":727,"thumb":727,"tag":865,"slug":867,"excerpt":868},1094,"WordPressでauthor名を分からないようにする","\u002Ftech\u002F1094\u002F","2023.06.01","2024.06.26",[866],{"name":70,"slug":71,"url":72},"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":734,"title":735,"post_type":10,"post_type_label":11,"url":736,"date":737,"modified":737,"thumbnail":727,"thumb":727,"tag":870,"slug":743,"excerpt":744},[871,872,873,874],{"name":84,"slug":84,"url":85},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},{"ID":107,"title":108,"post_type":10,"post_type_label":11,"url":109,"date":110,"modified":111,"thumbnail":112,"thumb":112,"tag":876,"slug":128,"excerpt":129},[877,878,879,880,881],{"name":56,"slug":57,"url":58},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127},{"ID":367,"title":368,"post_type":10,"post_type_label":11,"url":369,"date":154,"modified":224,"thumbnail":370,"thumb":370,"tag":883,"slug":374,"excerpt":375},[884,885],{"name":140,"slug":141,"url":142},{"name":70,"slug":71,"url":72},{"ID":670,"title":671,"post_type":10,"post_type_label":11,"url":672,"date":673,"modified":674,"thumbnail":675,"thumb":675,"tag":887,"slug":679,"excerpt":680},[888,889],{"name":666,"slug":666,"url":667},{"name":70,"slug":71,"url":72},{"ID":150,"title":151,"post_type":10,"post_type_label":11,"url":152,"date":153,"modified":154,"thumbnail":155,"thumb":155,"tag":891,"slug":160,"excerpt":161},[892,893,894],{"name":56,"slug":57,"url":58},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"ID":896,"title":897,"post_type":10,"post_type_label":11,"url":898,"date":234,"modified":234,"thumbnail":727,"thumb":727,"tag":899,"slug":901,"excerpt":902},451,"プラグイン「Simple CSS」で任意の場所にスタイルシートを書き出したい","\u002Ftech\u002F451\u002F",[900],{"name":70,"slug":71,"url":72},"%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":904,"title":905,"post_type":10,"post_type_label":11,"url":906,"date":907,"modified":564,"thumbnail":173,"thumb":173,"tag":908,"slug":910,"excerpt":911},939,"アイキャッチにデフォルト画像を設定","\u002Ftech\u002F939\u002F","2022.01.05",[909],{"name":70,"slug":71,"url":72},"%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":913,"title":914,"post_type":10,"post_type_label":11,"url":915,"date":916,"modified":49,"thumbnail":917,"thumb":917,"tag":918,"slug":920,"excerpt":921},195,"WordPressカスタムナビゲーション","\u002Ftech\u002F195\u002F","2021.08.28","\u002Fuploads\u002F2021\u002F08\u002Fimg_custom-navigation-1.png",[919],{"name":70,"slug":71,"url":72},"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":768,"title":769,"post_type":10,"post_type_label":11,"url":770,"date":771,"modified":772,"thumbnail":727,"thumb":727,"tag":923,"slug":777,"excerpt":778},[924,925,926],{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},{"ID":928,"title":929,"post_type":10,"post_type_label":11,"url":930,"date":931,"modified":49,"thumbnail":932,"thumb":932,"tag":933,"slug":935,"excerpt":936},156,"ログインフォームカスタマイズ","\u002Ftech\u002F156\u002F","2021.08.11","\u002Fuploads\u002F2021\u002F08\u002Fwp-loginform-1.png",[934],{"name":70,"slug":71,"url":72},"%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":938,"slug":939,"url":940,"posts":941},"X(旧Twitter)","xtwitter","\u002Ftag\u002Fxtwitter\u002F",[942,954],{"ID":943,"title":944,"post_type":10,"post_type_label":11,"url":945,"date":575,"modified":407,"thumbnail":173,"thumb":173,"tag":946,"slug":952,"excerpt":953},2062,"Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する","\u002Ftech\u002F2062\u002F",[947,948],{"name":938,"slug":939,"url":940},{"name":949,"slug":950,"url":951},"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":955,"title":956,"post_type":10,"post_type_label":11,"url":957,"date":575,"modified":575,"thumbnail":173,"thumb":173,"tag":958,"slug":961,"excerpt":962},2047,"Xプレミアムでプロフィールページのいいねを非表示にする","\u002Ftech\u002F2047\u002F",[959,960],{"name":938,"slug":939,"url":940},{"name":949,"slug":950,"url":951},"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":949,"slug":950,"url":951,"posts":964},[965,969],{"ID":943,"title":944,"post_type":10,"post_type_label":11,"url":945,"date":575,"modified":407,"thumbnail":173,"thumb":173,"tag":966,"slug":952,"excerpt":953},[967,968],{"name":938,"slug":939,"url":940},{"name":949,"slug":950,"url":951},{"ID":955,"title":956,"post_type":10,"post_type_label":11,"url":957,"date":575,"modified":575,"thumbnail":173,"thumb":173,"tag":970,"slug":961,"excerpt":962},[971,972],{"name":938,"slug":939,"url":940},{"name":949,"slug":950,"url":951},{"name":121,"slug":122,"url":123,"posts":974},[975,983,990,998,1007,1017],{"ID":976,"title":977,"post_type":10,"post_type_label":11,"url":978,"date":172,"modified":111,"thumbnail":112,"thumb":112,"tag":979,"slug":981,"excerpt":982},1934,"【公式】他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F1934\u002F",[980],{"name":121,"slug":122,"url":123},"%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":107,"title":108,"post_type":10,"post_type_label":11,"url":109,"date":110,"modified":111,"thumbnail":112,"thumb":112,"tag":984,"slug":128,"excerpt":129},[985,986,987,988,989],{"name":56,"slug":57,"url":58},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127},{"ID":991,"title":992,"post_type":10,"post_type_label":11,"url":993,"date":390,"modified":390,"thumbnail":112,"thumb":112,"tag":994,"slug":996,"excerpt":997},825,"YouTubeアプリでフィード(サムネイル)が自動再生されるのを止める","\u002Ftech\u002F825\u002F",[995],{"name":121,"slug":122,"url":123},"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":999,"title":1000,"post_type":10,"post_type_label":11,"url":1001,"date":1002,"modified":353,"thumbnail":112,"thumb":112,"tag":1003,"slug":1005,"excerpt":1006},765,"YouTube動画のキーワードを調べる","\u002Ftech\u002F765\u002F","2022.11.25",[1004],{"name":121,"slug":122,"url":123},"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":1008,"title":1009,"post_type":10,"post_type_label":11,"url":1010,"date":1011,"modified":1012,"thumbnail":112,"thumb":112,"tag":1013,"slug":1015,"excerpt":1016},485,"他人のYouTubeのチャンネルIDを調べる","\u002Ftech\u002F485\u002F","2022.10.29","2026.06.15",[1014],{"name":121,"slug":122,"url":123},"%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":150,"title":151,"post_type":10,"post_type_label":11,"url":152,"date":153,"modified":154,"thumbnail":155,"thumb":155,"tag":1018,"slug":160,"excerpt":161},[1019,1020,1021],{"name":56,"slug":57,"url":58},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127,"posts":1023},[1024,1030,1037],{"ID":734,"title":735,"post_type":10,"post_type_label":11,"url":736,"date":737,"modified":737,"thumbnail":727,"thumb":727,"tag":1025,"slug":743,"excerpt":744},[1026,1027,1028,1029],{"name":84,"slug":84,"url":85},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},{"ID":107,"title":108,"post_type":10,"post_type_label":11,"url":109,"date":110,"modified":111,"thumbnail":112,"thumb":112,"tag":1031,"slug":128,"excerpt":129},[1032,1033,1034,1035,1036],{"name":56,"slug":57,"url":58},{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":121,"slug":122,"url":123},{"name":125,"slug":126,"url":127},{"ID":768,"title":769,"post_type":10,"post_type_label":11,"url":770,"date":771,"modified":772,"thumbnail":727,"thumb":727,"tag":1038,"slug":777,"excerpt":778},[1039,1040,1041],{"name":116,"slug":117,"url":118},{"name":70,"slug":71,"url":72},{"name":125,"slug":126,"url":127},{"name":532,"slug":533,"url":534,"posts":1043},[1044],{"ID":524,"title":525,"post_type":10,"post_type_label":11,"url":526,"date":110,"modified":407,"thumbnail":527,"thumb":527,"tag":1045,"slug":543,"excerpt":544},[1046,1047,1048,1049,1050],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"name":532,"slug":533,"url":534},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},{"name":540,"slug":541,"url":542,"posts":1052},[1053,1058],{"ID":788,"title":789,"post_type":10,"post_type_label":11,"url":790,"date":407,"modified":37,"thumbnail":791,"thumb":791,"tag":1054,"slug":796,"excerpt":797},[1055,1056,1057],{"name":413,"slug":414,"url":415},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},{"ID":524,"title":525,"post_type":10,"post_type_label":11,"url":526,"date":110,"modified":407,"thumbnail":527,"thumb":527,"tag":1059,"slug":543,"excerpt":544},[1060,1061,1062,1063,1064],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"name":532,"slug":533,"url":534},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},{"name":88,"slug":89,"url":90,"posts":1066},[1067],{"ID":76,"title":77,"post_type":10,"post_type_label":11,"url":78,"date":79,"modified":79,"thumbnail":80,"thumb":80,"tag":1068,"slug":91,"excerpt":92},[1069,1070,1071,1072],{"name":56,"slug":57,"url":58},{"name":84,"slug":84,"url":85},{"name":70,"slug":71,"url":72},{"name":88,"slug":89,"url":90},{"name":449,"slug":450,"url":451,"posts":1074},[1075],{"ID":441,"title":442,"post_type":10,"post_type_label":11,"url":443,"date":444,"modified":135,"thumbnail":445,"thumb":445,"tag":1076,"slug":452,"excerpt":453},[1077,1078],{"name":25,"slug":26,"url":27},{"name":449,"slug":450,"url":451},{"name":493,"slug":494,"url":495,"posts":1080},[1081],{"ID":487,"title":488,"post_type":10,"post_type_label":11,"url":489,"date":79,"modified":79,"thumbnail":173,"thumb":173,"tag":1082,"slug":496,"excerpt":497},[1083,1084],{"name":25,"slug":26,"url":27},{"name":493,"slug":494,"url":495},{"name":536,"slug":537,"url":538,"posts":1086},[1087,1092],{"ID":788,"title":789,"post_type":10,"post_type_label":11,"url":790,"date":407,"modified":37,"thumbnail":791,"thumb":791,"tag":1088,"slug":796,"excerpt":797},[1089,1090,1091],{"name":413,"slug":414,"url":415},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},{"ID":524,"title":525,"post_type":10,"post_type_label":11,"url":526,"date":110,"modified":407,"thumbnail":527,"thumb":527,"tag":1093,"slug":543,"excerpt":544},[1094,1095,1096,1097,1098],{"name":25,"slug":26,"url":27},{"name":413,"slug":414,"url":415},{"name":532,"slug":533,"url":534},{"name":536,"slug":537,"url":538},{"name":540,"slug":541,"url":542},1782103389610]