HTMLで自動的にタイトルタグを設定する方法|H1タグとタイトルを連動させるテクニック

プログラミング

ウェブサイトのSEO効果を高めるためには、タイトルタグとページ内コンテンツを適切に連携させることが重要です。例えば、H1タグに「牛丼」と入力すると、自動的にタイトルタグが「牛丼|グルメサイトならOO」のように変わる仕組みを作りたい場合、JavaScriptを使うことで簡単に実現できます。

1. タイトルタグとH1タグの関係

まず、ウェブページのタイトルタグ()は、検索エンジン結果やタブの表示に重要な役割を果たします。一方、H1タグはページ内で最も重要な見出しを示すため、両者を関連付けることがSEO的にも効果的です。</p> <p>検索エンジンはページ内のコンテンツを解析し、タイトルタグとH1タグが一致していると、より関連性の高いコンテンツとして評価します。そのため、H1タグの内容をタイトルタグにも反映させることが求められます。</p> <h2><span id="toc2">2. JavaScriptでH1タグの内容をタイトルタグに反映させる方法</span></h2> <p>この機能を実現するためには、JavaScriptを使ってH1タグの内容を取得し、それをタイトルタグに動的に挿入する方法が有効です。以下のコード例を参考にしてください。</p> <pre><code> <script> window.onload = function() { var h1Text = document.querySelector('h1').innerText; document.title = h1Text + '|グルメサイトならOO'; } </script> </code></pre> <p>上記のコードでは、ページが読み込まれるとH1タグのテキストを取得し、そのテキストに「|グルメサイトならOO」を追加してタイトルタグを更新します。このようにすることで、H1タグの内容に基づいてタイトルが自動的に変更されます。</p> <h2><span id="toc3">3. 実際のコードの使い方とカスタマイズ</span></h2> <p>先程紹介した基本的なコードをベースに、さまざまなカスタマイズが可能です。例えば、H1タグが複数ある場合や特定の条件で異なるタイトルを表示したい場合などに対応する方法を考えてみましょう。</p> <p>複数のH1タグがある場合は、最初のH1タグだけを取得するように修正することができます。また、ページごとに異なるサイト名をタイトルに追加することで、より柔軟に対応することもできます。</p> <pre><code> <script> window.onload = function() { var h1Text = document.querySelector('h1').innerText; var siteName = document.body.classList.contains('food-site') ? 'グルメサイトならOO' : 'サイト名'; document.title = h1Text + '|' + siteName; } </script> </code></pre> <h2><span id="toc4">4. SEO対策としての効果</span></h2> <p>このように動的にタイトルタグを変更することで、SEO効果が期待できます。特に、H1タグとタイトルタグが一致することで、検索エンジンがページの内容を正確に理解しやすくなります。</p> <p>また、ユーザーがページを閲覧している際にも、タブに表示されるタイトルがページの内容に即していると、より視覚的な一致感が得られ、ユーザーエクスペリエンスが向上します。</p> <h2><span id="toc5">5. まとめ</span></h2> <p>HTMLとJavaScriptを使って、H1タグに入力した内容を自動的にタイトルタグに反映させる方法について解説しました。このテクニックを活用することで、SEO効果を高め、ユーザーにとってもわかりやすいページを提供できます。</p> <p>ウェブサイトの改善やSEO対策を進める際に、このような自動化された手法を取り入れることは非常に効果的です。ぜひ、自分のサイトに合った方法を試してみてください。</p> <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7126013391301480" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-7126013391301480" data-ad-slot="2086137551"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <!-- CONTENT END 1 --> </div> <footer class="article-footer entry-footer"> <div class="entry-categories-tags ctdt-one-row"> <div class="entry-categories"><a class="cat-link cat-link-2" href="https://programming.awaisora.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>プログラミング</a></div> </div> <div class="sns-share ss-col-3 bc-brand-color sbc-hide ss-bottom"> <div class="sns-share-message">シェアする</div> <div class="sns-share-buttons sns-buttons"> <a href="https://twitter.com/intent/tweet?text=HTML%E3%81%A7%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%BF%E3%82%B0%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BD%9CH1%E3%82%BF%E3%82%B0%E3%81%A8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E9%80%A3%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF&url=https%3A%2F%2Fprogramming.awaisora.com%2Febd196fa-d7a6-49f7-8d56-91d20f623b92%2F" class="share-button twitter-button twitter-share-button-sq" target="_blank" rel="nofollow noopener noreferrer"><span class="social-icon icon-twitter"></span><span class="button-caption">Twitter</span><span class="share-count twitter-share-count"></span></a> <a href="//www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprogramming.awaisora.com%2Febd196fa-d7a6-49f7-8d56-91d20f623b92%2F&t=HTML%E3%81%A7%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%BF%E3%82%B0%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BD%9CH1%E3%82%BF%E3%82%B0%E3%81%A8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E9%80%A3%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF" class="share-button facebook-button facebook-share-button-sq" target="_blank" rel="nofollow noopener noreferrer"><span class="social-icon icon-facebook"></span><span class="button-caption">Facebook</span><span class="share-count facebook-share-count"></span></a> <a href="//b.hatena.ne.jp/entry/s/programming.awaisora.com/ebd196fa-d7a6-49f7-8d56-91d20f623b92/" class="share-button hatebu-button hatena-bookmark-button hatebu-share-button-sq" data-hatena-bookmark-layout="simple" title="HTMLで自動的にタイトルタグを設定する方法|H1タグとタイトルを連動させるテクニック" target="_blank" rel="nofollow noopener noreferrer"><span class="social-icon icon-hatena"></span><span class="button-caption">はてブ</span><span class="share-count hatebu-share-count"></span></a> <a href="//getpocket.com/edit?url=https://programming.awaisora.com/ebd196fa-d7a6-49f7-8d56-91d20f623b92/" class="share-button pocket-button pocket-share-button-sq" target="_blank" rel="nofollow noopener noreferrer"><span class="social-icon icon-pocket"></span><span class="button-caption">Pocket</span><span class="share-count pocket-share-count"></span></a> <a href="//timeline.line.me/social-plugin/share?url=https%3A%2F%2Fprogramming.awaisora.com%2Febd196fa-d7a6-49f7-8d56-91d20f623b92%2F" class="share-button line-button line-share-button-sq" target="_blank" rel="nofollow noopener noreferrer"><span class="social-icon icon-line"></span><span class="button-caption">LINE</span><span class="share-count line-share-count"></span></a> <a href="" class="share-button copy-button copy-share-button-sq" rel="nofollow noopener noreferrer" data-clipboard-text="HTMLで自動的にタイトルタグを設定する方法|H1タグとタイトルを連動させるテクニック https://programming.awaisora.com/ebd196fa-d7a6-49f7-8d56-91d20f623b92/"><span class="social-icon icon-copy"></span><span class="button-caption">コピー</span><span class="share-count copy-share-count"></span></a> </div><!-- /.sns-share-buttons --> </div><!-- /.sns-share --> <!-- SNSページ --> <div class="sns-follow bc-brand-color fbc-hide sf-bottom"> <div class="sns-follow-message">seseragiをフォローする</div> <div class="sns-follow-buttons sns-buttons"> <a href="//feedly.com/i/discover/sources/search/feed/https%3A%2F%2Fprogramming.awaisora.com" class="follow-button feedly-button feedly-follow-button-sq" target="_blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a> <a href="https://programming.awaisora.com/feed/" class="follow-button rss-button rss-follow-button-sq" target="_blank" title="RSSで更新情報をフォロー" rel="nofollow noopener noreferrer"><span class="icon-rss-logo"></span></a> </div><!-- /.sns-follow-buttons --> </div><!-- /.sns-follow --> <div class="footer-meta"> <div class="author-info"> <span class="fa fa-pencil" aria-hidden="true"></span> <a href="https://programming.awaisora.com/author/seseragi/" class="author-link"> <span class="post-author vcard author" itemprop="editor author creator copyrightHolder" itemscope itemtype="https://schema.org/Person"> <meta itemprop="url" content="https://programming.awaisora.com/author/seseragi/"> <span class="author-name fn" itemprop="name">seseragi</span> </span> </a> </div> </div> <!-- publisher設定 --> <div class="publisher" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img src="https://programming.awaisora.com/wp-content/themes/cocoon-master/images/no-amp-logo.png" width="206" height="60" alt=""> <meta itemprop="url" content="https://programming.awaisora.com/wp-content/themes/cocoon-master/images/no-amp-logo.png"> <meta itemprop="width" content="206"> <meta itemprop="height" content="60"> </div> <div itemprop="name">プログラミングのせせらぎ</div> </div> </footer> </article> <div class="under-entry-content"> <aside id="related-entries" class="related-entries rect-entry-card"> <h2 class="related-entry-heading"> <span class="related-entry-main-heading main-caption"> 関連記事 </span> </h2> <div class="related-list"> <a href="https://programming.awaisora.com/f41dc398-56a7-495b-92df-bc7a24b4aead/" class="related-entry-card-wrap a-wrap border-element cf" title="AIにAIを作らせることは可能か?技術的な背景と未来の展望"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="160" height="90" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-22-160x90.png" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-22-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-22-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-22-320x180.png 320w" sizes="auto, (max-width: 160px) 100vw, 160px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> AIにAIを作らせることは可能か?技術的な背景と未来の展望 </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> AI(人工知能)が自己改善を行ったり、他のAIを生成する能力を持つというテーマは、現在の技術でどこまで実現可能なのでしょうか?本記事では、「AIにAIを作らせる」という概念を技術的に掘り下げ、実現に向けた挑戦や可能性について詳しく解説します... </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> <a href="https://programming.awaisora.com/05e5b00e-cef3-44f8-a1d0-8d8eb640aaf9/" class="related-entry-card-wrap a-wrap border-element cf" title="センター試験の数学2Bプログラミングと共通テストの情報1プログラミングの難易度比較"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="160" height="90" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-160x90.png" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-320x180.png 320w" sizes="auto, (max-width: 160px) 100vw, 160px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> センター試験の数学2Bプログラミングと共通テストの情報1プログラミングの難易度比較 </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> センター試験の数学2Bで出題されていたBASICプログラミングと、現在の共通テストで出題される情報1のプログラミングは、どちらが難しいのでしょうか?この記事では、これらのプログラミング問題の内容を比較し、学習者にとっての難易度を解説します。... </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> <a href="https://programming.awaisora.com/a94d2e65-1189-4ae4-ba0e-92667cd501eb/" class="related-entry-card-wrap a-wrap border-element cf" title="Google ColabでStable Diffusionが立ち上がらないエラーを解決する方法"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="160" height="90" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-18-160x90.png" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-18-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-18-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-18-320x180.png 320w" sizes="auto, (max-width: 160px) 100vw, 160px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> Google ColabでStable Diffusionが立ち上がらないエラーを解決する方法 </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> Stable DiffusionをGoogle Colabの有料プランで使用中に発生したエラー「RuntimeError: Failed to import transformers.modeling_utils...」に悩んでいる方は少な... </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> <a href="https://programming.awaisora.com/ad88fd27-5d34-4acc-8845-28fc5b508ef2/" class="related-entry-card-wrap a-wrap border-element cf" title="プログラミングを21歳から始めるのは遅くない!エンジニアデビューを成功させるためのステップ"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="160" height="90" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-20-160x90.png" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-20-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-20-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-20-320x180.png 320w" sizes="auto, (max-width: 160px) 100vw, 160px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> プログラミングを21歳から始めるのは遅くない!エンジニアデビューを成功させるためのステップ </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> 「21歳でプログラミングを始めるのは遅いのでは?」という悩みを抱える方も少なくありません。特に、若い世代が早期にエンジニアデビューを果たす中で、焦りを感じるのも理解できます。しかし、実際にはプログラミングを始めるのに遅すぎるということはあり... </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> <a href="https://programming.awaisora.com/resuponnsibudezainn-tukurikata/" class="related-entry-card-wrap a-wrap border-element cf" title="レスポンシブデザインの作り方を初心者向けに解説!"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="135" height="90" src="https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V.jpg" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V.jpg 1600w, https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V-300x200.jpg 300w, https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V-1024x682.jpg 1024w, https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V-768x512.jpg 768w, https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V-1536x1023.jpg 1536w, https://programming.awaisora.com/wp-content/uploads/2019/10/gori0I9A9925_TP_V-1568x1045.jpg 1568w" sizes="auto, (max-width: 135px) 100vw, 135px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> レスポンシブデザインの作り方を初心者向けに解説! </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> レスポンシブデザインの作り方を初心者向けに解説していきます。 </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> <a href="https://programming.awaisora.com/3b9edaf9-a641-4e5c-b1d8-007a2076d91d/" class="related-entry-card-wrap a-wrap border-element cf" title="ソフトウェア開発における文系と理系の違いとその影響"> <article class="related-entry-card e-card cf"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img width="160" height="90" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-23-160x90.png" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-23-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-23-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-23-320x180.png 320w" sizes="auto, (max-width: 160px) 100vw, 160px" /> <span class="cat-label cat-label-2">プログラミング</span> </figure><!-- /.related-entry-thumb --> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> ソフトウェア開発における文系と理系の違いとその影響 </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> ソフトウェア開発において「文系も理系も関係ない」という意見がよく聞かれますが、この考え方には根拠があるのでしょうか?また、文系と理系のプログラマーには実際にどのような違いがあるのでしょうか?この記事では、文系と理系のプログラマーの違いや、ソ... </div> </div><!-- /.related-entry-card-content --> </article><!-- /.related-entry-card --> </a><!-- /.related-entry-card-wrap --> </div> </aside> <div id="pager-post-navi" class="pager-post-navi post-navi-default cf"> <a href="https://programming.awaisora.com/3d612a5a-6a3d-4876-9e04-959499aa77f1/" title="エクセルの動作遅延・カクカク現象の原因と解決法|操作のラグを解消するための対処法" class="prev-post a-wrap border-element cf"> <div class="fa fa-chevron-left iconfont" aria-hidden="true"></div> <figure class="prev-post-thumb card-thumb"><img width="120" height="68" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-19-120x68.png" class="attachment-thumb120 size-thumb120 wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-19-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-19-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-19-320x180.png 320w" sizes="auto, (max-width: 120px) 100vw, 120px" /></figure> <div class="prev-post-title">エクセルの動作遅延・カクカク現象の原因と解決法|操作のラグを解消するための対処法</div></a><a href="https://programming.awaisora.com/31106045-b0cb-43ba-baae-14d6130a0a6c/" title="アプリ開発で使われるプログラミング言語とは?主な選択肢とその特徴を徹底解説" class="next-post a-wrap cf"> <div class="fa fa-chevron-right iconfont" aria-hidden="true"></div> <figure class="next-post-thumb card-thumb"> <img width="120" height="68" src="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-120x68.png" class="attachment-thumb120 size-thumb120 wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-120x68.png 120w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-160x90.png 160w, https://programming.awaisora.com/wp-content/uploads/2024/12/image_fx_-21-320x180.png 320w" sizes="auto, (max-width: 120px) 100vw, 120px" /></figure> <div class="next-post-title">アプリ開発で使われるプログラミング言語とは?主な選択肢とその特徴を徹底解説</div></a></div><!-- /.pager-post-navi --> <!-- comment area --> <div id="comment-area" class="comment-area"> <section class="comment-list"> <h2 id="comments" class="comment-title"> コメント </h2> </section> <aside class="comment-form"> <button id="comment-reply-btn" class="comment-btn key-btn">コメントを書き込む</button> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">コメントをどうぞ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/ebd196fa-d7a6-49f7-8d56-91d20f623b92/#respond" style="display:none;">コメントをキャンセル</a></small></h3><form action="https://programming.awaisora.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">*</span> が付いている欄は必須項目です</p><p class="comment-form-comment"><label for="comment">コメント <span class="required">※</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">名前 <span class="required">※</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">メール <span class="required">※</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-url"><label for="url">サイト</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="コメントを送信" /> <input type='hidden' name='comment_post_ID' value='14512' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="67"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond --> </aside></div><!-- /.comment area --> </div> <div id="breadcrumb" class="breadcrumb breadcrumb-category sbp-main-bottom" itemscope itemtype="https://schema.org/BreadcrumbList"><div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://programming.awaisora.com" itemprop="item"><span itemprop="name" class="breadcrumb-caption">ホーム</span></a><meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div><div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="https://programming.awaisora.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/" itemprop="item"><span itemprop="name" class="breadcrumb-caption">プログラミング</span></a><meta itemprop="position" content="2" /></div></div><!-- /#breadcrumb --> </main> <div id="sidebar" class="sidebar nwa cf" role="complementary"> <aside id="search-2" class="widget widget-sidebar widget-sidebar-standard widget_search"><form class="search-box input-box" method="get" action="https://programming.awaisora.com/"> <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value=""> <button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search" aria-hidden="true"></span></button> </form> </aside> <aside id="recent-posts-2" class="widget widget-sidebar widget-sidebar-standard widget_recent_entries"> <h3 class="widget-sidebar-title widget-title">最近の投稿</h3> <ul> <li> <a href="https://programming.awaisora.com/bd513148-ce31-42f1-838f-37b8e15c4ede/">スタンドアロンパソコンのデータをネット技術で盗み出すことは可能か?</a> </li> <li> <a href="https://programming.awaisora.com/2974d158-8da6-4ff3-8d78-62b16c23daec/">セキュリティカメラの動体検出性能を最大化するためのポイントと工夫</a> </li> <li> <a href="https://programming.awaisora.com/48f3b48d-052f-4813-9bd3-7db179499f0a/">インスタのDMで送られてきた動画はダウンロード方式かストリーミング方式か?その違いと視聴方法を解説</a> </li> <li> <a href="https://programming.awaisora.com/bcf9249c-769a-4e19-991b-90a23592b115/">Access VBAでのデータ削除:DoCmd.RunSQLとTRUNCATEの違いと解決方法</a> </li> <li> <a href="https://programming.awaisora.com/2cfa6392-8af9-4ed6-a3b5-45c2af857010/">Oracle Master Silver DBAとSQLの違いと資格取得の選び方</a> </li> </ul> </aside><aside id="recent-comments-2" class="widget widget-sidebar widget-sidebar-standard widget_recent_comments"><h3 class="widget-sidebar-title widget-title">最近のコメント</h3><ul id="recentcomments"></ul></aside><aside id="archives-2" class="widget widget-sidebar widget-sidebar-standard widget_archive"><h3 class="widget-sidebar-title widget-title">アーカイブ</h3> <ul> <li><a href='https://programming.awaisora.com/2025/01/'>2025年1月</a></li> <li><a href='https://programming.awaisora.com/2024/12/'>2024年12月</a></li> <li><a href='https://programming.awaisora.com/2024/06/'>2024年6月</a></li> <li><a href='https://programming.awaisora.com/2024/04/'>2024年4月</a></li> <li><a href='https://programming.awaisora.com/2022/09/'>2022年9月</a></li> <li><a href='https://programming.awaisora.com/2020/04/'>2020年4月</a></li> <li><a href='https://programming.awaisora.com/2020/01/'>2020年1月</a></li> <li><a href='https://programming.awaisora.com/2019/12/'>2019年12月</a></li> <li><a href='https://programming.awaisora.com/2019/11/'>2019年11月</a></li> <li><a href='https://programming.awaisora.com/2019/10/'>2019年10月</a></li> <li><a href='https://programming.awaisora.com/2019/07/'>2019年7月</a></li> <li><a href='https://programming.awaisora.com/2019/06/'>2019年6月</a></li> <li><a href='https://programming.awaisora.com/2019/04/'>2019年4月</a></li> </ul> </aside><aside id="categories-2" class="widget widget-sidebar widget-sidebar-standard widget_categories"><h3 class="widget-sidebar-title widget-title">カテゴリー</h3> <ul> <li class="cat-item cat-item-149"><a class="cf" href="https://programming.awaisora.com/category/office%e7%b3%bb%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2/">Office系ソフトウェア</a> </li> <li class="cat-item cat-item-148"><a class="cf" href="https://programming.awaisora.com/category/os/">OS</a> </li> <li class="cat-item cat-item-151"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba/">アプリ開発</a> </li> <li class="cat-item cat-item-154"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3/">セキュリティ</a> </li> <li class="cat-item cat-item-150"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2/">ソフトウェア</a> </li> <li class="cat-item cat-item-152"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9/">データベース</a> </li> <li class="cat-item cat-item-153"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af%e6%8a%80%e8%a1%93/">ネットワーク技術</a> </li> <li class="cat-item cat-item-136"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3/">パソコン</a> </li> <li class="cat-item cat-item-2"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/">プログラミング</a> </li> </ul> </aside> </div> </div> </div> <footer id="footer" class="footer footer-container nwa" itemscope itemtype="https://schema.org/WPFooter"> <div id="footer-in" class="footer-in wrap cf"> <div class="footer-bottom fdt-logo fnm-text-width cf"> <div class="footer-bottom-logo"> <div class="logo logo-footer logo-text"><a href="https://programming.awaisora.com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">プログラミングのせせらぎ</span></a></div> </div> <div class="footer-bottom-content"> <nav id="navi-footer" class="navi-footer"> <div id="navi-footer-in" class="navi-footer-in"> </div> </nav> <div class="source-org copyright">© 2019 プログラミングのせせらぎ.</div> </div> </div> </div> </footer> <ul class="mobile-footer-menu-buttons mobile-menu-buttons"> <!-- ホームボタン --> <li class="home-menu-button menu-button"> <a href="https://programming.awaisora.com" class="menu-button-in"> <span class="home-menu-icon menu-icon"> <span class="fa fa-home" aria-hidden="true"></span> </span> <span class="home-menu-caption menu-caption">ホーム</span> </a> </li> <!-- 検索ボタン --> <!-- 検索ボタン --> <li class="search-menu-button menu-button"> <input id="search-menu-input" type="checkbox" class="display-none"> <label id="search-menu-open" class="menu-open menu-button-in" for="search-menu-input"> <span class="search-menu-icon menu-icon"> <span class="fa fa-search" aria-hidden="true"></span> </span> <span class="search-menu-caption menu-caption">検索</span> </label> <label class="display-none" id="search-menu-close" for="search-menu-input"></label> <div id="search-menu-content" class="search-menu-content"> <form class="search-box input-box" method="get" action="https://programming.awaisora.com/"> <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value=""> <button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search" aria-hidden="true"></span></button> </form> </div> </li> <!-- トップボタン --> <li class="top-menu-button menu-button"> <a class="go-to-top-common top-menu-a menu-button-in"> <span class="top-menu-icon menu-icon"> <span class="fa fa-arrow-up" aria-hidden="true"></span> </span> <span class="top-menu-caption menu-caption">トップ</span> </a> </li> <!-- サイドバーボタン --> <li class="sidebar-menu-button menu-button"> <input id="sidebar-menu-input" type="checkbox" class="display-none"> <label id="sidebar-menu-open" class="menu-open menu-button-in" for="sidebar-menu-input"> <span class="sidebar-menu-icon menu-icon"> <span class="fa fa-outdent" aria-hidden="true"></span> </span> <span class="sidebar-menu-caption menu-caption">サイドバー</span> </label> <label class="display-none" id="sidebar-menu-close" for="sidebar-menu-input"></label> <div id="sidebar-menu-content" class="sidebar-menu-content menu-content"> <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"><span class="fa fa-close" aria-hidden="true"></span></label> <div id="slide-in-sidebar" class="sidebar nwa cf" role="complementary"> <aside id="slide-in-search-2" class="widget widget-sidebar widget-sidebar-standard widget_search"><form class="search-box input-box" method="get" action="https://programming.awaisora.com/"> <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value=""> <button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search" aria-hidden="true"></span></button> </form> </aside> <aside id="slide-in-recent-posts-2" class="widget widget-sidebar widget-sidebar-standard widget_recent_entries"> <h3 class="widget-sidebar-title widget-title">最近の投稿</h3> <ul> <li> <a href="https://programming.awaisora.com/bd513148-ce31-42f1-838f-37b8e15c4ede/">スタンドアロンパソコンのデータをネット技術で盗み出すことは可能か?</a> </li> <li> <a href="https://programming.awaisora.com/2974d158-8da6-4ff3-8d78-62b16c23daec/">セキュリティカメラの動体検出性能を最大化するためのポイントと工夫</a> </li> <li> <a href="https://programming.awaisora.com/48f3b48d-052f-4813-9bd3-7db179499f0a/">インスタのDMで送られてきた動画はダウンロード方式かストリーミング方式か?その違いと視聴方法を解説</a> </li> <li> <a href="https://programming.awaisora.com/bcf9249c-769a-4e19-991b-90a23592b115/">Access VBAでのデータ削除:DoCmd.RunSQLとTRUNCATEの違いと解決方法</a> </li> <li> <a href="https://programming.awaisora.com/2cfa6392-8af9-4ed6-a3b5-45c2af857010/">Oracle Master Silver DBAとSQLの違いと資格取得の選び方</a> </li> </ul> </aside><aside id="slide-in-recent-comments-2" class="widget widget-sidebar widget-sidebar-standard widget_recent_comments"><h3 class="widget-sidebar-title widget-title">最近のコメント</h3><ul id="slide-in-recentcomments-2"></ul></aside><aside id="slide-in-archives-2" class="widget widget-sidebar widget-sidebar-standard widget_archive"><h3 class="widget-sidebar-title widget-title">アーカイブ</h3> <ul> <li><a href='https://programming.awaisora.com/2025/01/'>2025年1月</a></li> <li><a href='https://programming.awaisora.com/2024/12/'>2024年12月</a></li> <li><a href='https://programming.awaisora.com/2024/06/'>2024年6月</a></li> <li><a href='https://programming.awaisora.com/2024/04/'>2024年4月</a></li> <li><a href='https://programming.awaisora.com/2022/09/'>2022年9月</a></li> <li><a href='https://programming.awaisora.com/2020/04/'>2020年4月</a></li> <li><a href='https://programming.awaisora.com/2020/01/'>2020年1月</a></li> <li><a href='https://programming.awaisora.com/2019/12/'>2019年12月</a></li> <li><a href='https://programming.awaisora.com/2019/11/'>2019年11月</a></li> <li><a href='https://programming.awaisora.com/2019/10/'>2019年10月</a></li> <li><a href='https://programming.awaisora.com/2019/07/'>2019年7月</a></li> <li><a href='https://programming.awaisora.com/2019/06/'>2019年6月</a></li> <li><a href='https://programming.awaisora.com/2019/04/'>2019年4月</a></li> </ul> </aside><aside id="slide-in-categories-2" class="widget widget-sidebar widget-sidebar-standard widget_categories"><h3 class="widget-sidebar-title widget-title">カテゴリー</h3> <ul> <li class="cat-item cat-item-149"><a class="cf" href="https://programming.awaisora.com/category/office%e7%b3%bb%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2/">Office系ソフトウェア</a> </li> <li class="cat-item cat-item-148"><a class="cf" href="https://programming.awaisora.com/category/os/">OS</a> </li> <li class="cat-item cat-item-151"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba/">アプリ開発</a> </li> <li class="cat-item cat-item-154"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3/">セキュリティ</a> </li> <li class="cat-item cat-item-150"><a class="cf" href="https://programming.awaisora.com/category/%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2/">ソフトウェア</a> </li> <li class="cat-item cat-item-152"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9/">データベース</a> </li> <li class="cat-item cat-item-153"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af%e6%8a%80%e8%a1%93/">ネットワーク技術</a> </li> <li class="cat-item cat-item-136"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3/">パソコン</a> </li> <li class="cat-item cat-item-2"><a class="cf" href="https://programming.awaisora.com/category/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0/">プログラミング</a> </li> </ul> </aside> </div> </div> </li> </ul> <div id="go-to-top" class="go-to-top"> <a class="go-to-top-button go-to-top-common go-to-top-hide go-to-top-button-icon-font"><span class="fa fa-angle-double-up"></span></a> </div> <script src="https://programming.awaisora.com/wp-content/themes/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=6.7.1&fver=20220529044302" id="baguettebox-js-js"></script> <script id="baguettebox-js-js-after"> /* <![CDATA[ */ (function($){baguetteBox.run(".entry-content")})(jQuery); /* ]]> */ </script> <script src="https://programming.awaisora.com/wp-includes/js/comment-reply.min.js?ver=6.7.1&fver=20241113064247" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script id="cocoon-js-js-extra"> /* <![CDATA[ */ var cocoon_localize_script_options = {"is_lazy_load_enable":null,"is_fixed_mobile_buttons_enable":"","is_google_font_lazy_load_enable":null}; /* ]]> */ </script> <script src="https://programming.awaisora.com/wp-content/themes/cocoon-master/javascript.js?ver=6.7.1&fver=20220529044302" id="cocoon-js-js"></script> <script src="https://programming.awaisora.com/wp-content/themes/cocoon-child-master/javascript.js?ver=6.7.1&fver=20220518105742" id="cocoon-child-js-js"></script> <div class="copy-info">タイトルとURLをコピーしました</div> <script src="//cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script> (function($){ selector = '.copy-button';//clipboardで使う要素を指定 $(selector).click(function(event){ //クリック動作をキャンセル event.preventDefault(); }); //クリップボード動作 var clipboard = new Clipboard(selector); clipboard.on('success', function(e) { $('.copy-info').fadeIn(500).delay(1000).fadeOut(500); e.clearSelection(); }); })(jQuery); </script> </div><!-- #container --> </body> </html>