{"title":"テンプレートをオーバーライドする","version":"6.0","locale":"ja","docname":"howto/overriding-templates","url":"/ja/6.0/howto/overriding-templates/","canonical":"https://djangodocs.dev/ja/6.0/howto/overriding-templates/","summary":"プロジェクトでは、 django.contrib.admin のような contrib アプリケーションやサードパーティアプリケーションで Djangoアプリケーションのテンプレートを上書きすることができます。…","html":"<h1>テンプレートをオーバーライドする<a class=\"heading-anchor\" href=\"#how-to-override-templates\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>プロジェクトでは、<code class=\"docutils literal notranslate\"><span class=\"pre\">django.contrib.admin</span></code> のような contrib アプリケーションやサードパーティアプリケーションで Djangoアプリケーションのテンプレートを上書きすることができます。 テンプレートの上書きは、プロジェクトのテンプレートディレクトリまたはアプリケーションのテンプレートディレクトリに置くことができます。</p>\n<p>オーバーライドが含まれている app と project の両方のテンプレートディレクトリがある場合、デフォルトの Django テンプレートローダは、まずプロジェクトレベルのディレクトリからテンプレートをロードしようとします。つまり、 <a class=\"reference internal\" href=\"/ja/6.0/ref/settings/#std-setting-TEMPLATES-DIRS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">DIRS</span></code></a> は <a class=\"reference internal\" href=\"/ja/6.0/ref/settings/#std-setting-TEMPLATES-APP_DIRS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">APP_DIRS</span></code></a> より前に検索されます。</p>\n<aside class=\"admonition admonition-seealso\">\n<p class=\"admonition-title\">参考</p>\n<p>そのようなことをしたい場合は、<a class=\"reference internal\" href=\"/ja/6.0/ref/forms/renderers/#overriding-built-in-widget-templates\"><span class=\"std std-ref\">組み込みのウィジェットテンプレートをオーバーライドする</span></a> を読んでください。</p>\n</aside>\n<section id=\"overriding-from-the-project-s-templates-directory\">\n<h2>プロジェクトのtemplatesディレクトリからオーバーライドする<a class=\"heading-anchor\" href=\"#overriding-from-the-project-s-templates-directory\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>最初に、プロジェクトのテンプレートディレクトリに置き換え用テンプレートを作成して、テンプレートのオーバーライドを検討します。</p>\n<p><code class=\"docutils literal notranslate\"><span class=\"pre\">blog/post.html</span></code> と <code class=\"docutils literal notranslate\"><span class=\"pre\">blog/list.html</span></code> というテンプレートを提供している <code class=\"docutils literal notranslate\"><span class=\"pre\">blog</span></code> というサードパーティアプリケーションのテンプレートをオーバーライドしようとしているとしましょう。プロジェクトに関連する設定は次のようになります:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">pathlib</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">Path</span>\n\n<span class=\"n\">BASE_DIR</span> <span class=\"o\">=</span> <span class=\"n\">Path</span><span class=\"p\">(</span><span class=\"vm\">__file__</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">resolve</span><span class=\"p\">()</span><span class=\"o\">.</span><span class=\"n\">parent</span><span class=\"o\">.</span><span class=\"n\">parent</span>\n\n<span class=\"n\">INSTALLED_APPS</span> <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"o\">...</span><span class=\"p\">,</span>\n    <span class=\"s2\">&quot;blog&quot;</span><span class=\"p\">,</span>\n    <span class=\"o\">...</span><span class=\"p\">,</span>\n<span class=\"p\">]</span>\n\n<span class=\"n\">TEMPLATES</span> <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"p\">{</span>\n        <span class=\"s2\">&quot;BACKEND&quot;</span><span class=\"p\">:</span> <span class=\"s2\">&quot;django.template.backends.django.DjangoTemplates&quot;</span><span class=\"p\">,</span>\n        <span class=\"s2\">&quot;DIRS&quot;</span><span class=\"p\">:</span> <span class=\"p\">[</span><span class=\"n\">BASE_DIR</span> <span class=\"o\">/</span> <span class=\"s2\">&quot;templates&quot;</span><span class=\"p\">],</span>\n        <span class=\"s2\">&quot;APP_DIRS&quot;</span><span class=\"p\">:</span> <span class=\"kc\">True</span><span class=\"p\">,</span>\n        <span class=\"c1\"># ...</span>\n    <span class=\"p\">},</span>\n<span class=\"p\">]</span>\n</code></pre></div>\n<p>デフォルトのプロジェクトテンプレートを使ってプロジェクトを作成した場合、 <a class=\"reference internal\" href=\"/ja/6.0/ref/settings/#std-setting-TEMPLATES\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">TEMPLATES</span></code></a> 設定と <code class=\"docutils literal notranslate\"><span class=\"pre\">BASE_DIR</span></code> はすでに存在しています。変更が必要な設定は <a class=\"reference internal\" href=\"/ja/6.0/ref/settings/#std-setting-TEMPLATES-DIRS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">DIRS</span></code></a> です。</p>\n<p>これらの設定はプロジェクトのルートに <code class=\"docutils literal notranslate\"><span class=\"pre\">templates</span></code> ディレクトリがあることを前提としています。 <code class=\"docutils literal notranslate\"><span class=\"pre\">blog</span></code> アプリのテンプレートを上書きするには、 <code class=\"docutils literal notranslate\"><span class=\"pre\">templates</span></code> ディレクトリにフォルダを作成し、テンプレートファイルをそのフォルダに追加します:</p>\n<div class=\"code-block\" data-language=\"none\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">None</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"None code\"><code>templates/\n    blog/\n        list.html\n        post.html\n</code></pre></div>\n<p>テンプレートローダーはまず <code class=\"docutils literal notranslate\"><span class=\"pre\">DIRS</span></code> ディレクトリにあるテンプレートを探します。 <code class=\"docutils literal notranslate\"><span class=\"pre\">blog</span></code> アプリのビューが <code class=\"docutils literal notranslate\"><span class=\"pre\">blog/post.html</span></code> と <code class=\"docutils literal notranslate\"><span class=\"pre\">blog/list.html</span></code> のテンプレートを要求すると、ローダーは先ほど作成したファイルを返します。</p>\n</section>\n<section id=\"overriding-from-an-app-s-template-directory\">\n<h2>アプリのテンプレートディレクトリからオーバーライドする<a class=\"heading-anchor\" href=\"#overriding-from-an-app-s-template-directory\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>プロジェクトのアプリの外部にあるテンプレートをオーバーライドする場合、通常は最初の方法を使用し、テンプレートのオーバーライドをプロジェクトのテンプレートフォルダに配置します。ただし、好みに応じて、オーバーライドをアプリのテンプレートディレクトリに配置することも可能です。</p>\n<p>まず、テンプレート設定がアプリディレクトリ内をチェックしていることを確認してください:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"n\">TEMPLATES</span> <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"p\">{</span>\n        <span class=\"c1\"># ...</span>\n        <span class=\"s2\">&quot;APP_DIRS&quot;</span><span class=\"p\">:</span> <span class=\"kc\">True</span><span class=\"p\">,</span>\n        <span class=\"c1\"># ...</span>\n    <span class=\"p\">},</span>\n<span class=\"p\">]</span>\n</code></pre></div>\n<p>もし <code class=\"docutils literal notranslate\"><span class=\"pre\">myapp</span></code> というアプリにテンプレートのオーバーライドを配置し、オーバーライドするテンプレートが <code class=\"docutils literal notranslate\"><span class=\"pre\">blog/list.html</span></code> と <code class=\"docutils literal notranslate\"><span class=\"pre\">blog/post.html</span></code> である場合、ディレクトリ構造は以下のようになります:</p>\n<div class=\"code-block\" data-language=\"none\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">None</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"None code\"><code>myapp/\n    templates/\n        blog/\n            list.html\n            post.html\n</code></pre></div>\n<p><a class=\"reference internal\" href=\"/ja/6.0/ref/settings/#std-setting-TEMPLATES-APP_DIRS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">APP_DIRS</span></code></a> を <code class=\"docutils literal notranslate\"><span class=\"pre\">True</span></code> に設定すると、テンプレートローダーはアプリのテンプレートディレクトリを探し、テンプレートを見つけることができます。</p>\n</section>\n<section id=\"extending-an-overridden-template\">\n<span id=\"id1\"></span><h2>オーバーライドされたテンプレートを継承（extend）する<a class=\"heading-anchor\" href=\"#extending-an-overridden-template\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>テンプレートローダーが設定されていれば、 <a class=\"reference internal\" href=\"/ja/6.0/ref/templates/builtins/#std-templatetag-extends\"><code class=\"xref std std-ttag docutils literal notranslate\"><span class=\"pre\">{%</span> <span class=\"pre\">extends</span> <span class=\"pre\">%}</span></code></a> テンプレートタグを使ってテンプレートを継承できます。これにより、テンプレート全体を再実装することなく、少しだけカスタマイズできます。</p>\n<p>例えば、このテクニックを使って <code class=\"docutils literal notranslate\"><span class=\"pre\">admin/base_site.html</span></code> テンプレートにカスタムロゴを追加できます:</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"html+django\"><figcaption class=\"code-block-caption\"><code class=\"docutils literal notranslate\"><span class=\"pre\">templates/admin/base_site.html</span></code></figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code> <span class=\"cp\">{%</span> <span class=\"k\">extends</span> <span class=\"s2\">&quot;admin/base_site.html&quot;</span> <span class=\"cp\">%}</span>\n\n <span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">branding</span> <span class=\"cp\">%}</span>\n   <span class=\"p\">&lt;</span><span class=\"nt\">img</span> <span class=\"na\">src</span><span class=\"o\">=</span><span class=\"s\">&quot;link/to/logo.png&quot;</span> <span class=\"na\">alt</span><span class=\"o\">=</span><span class=\"s\">&quot;logo&quot;</span><span class=\"p\">&gt;</span>\n   <span class=\"cp\">{{</span> <span class=\"nb\">block</span><span class=\"nv\">.super</span> <span class=\"cp\">}}</span>\n <span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n</code></pre></figure>\n<p>備考:</p>\n<ul class=\"simple\">\n<li><p>この例では、 <code class=\"docutils literal notranslate\"><span class=\"pre\">templates/admin/base_site.html</span></code> にファイルを作成し、 <code class=\"docutils literal notranslate\"><span class=\"pre\">admin/base_site.html</span></code> を上書きするために、設定されたプロジェクトレベルの <code class=\"docutils literal notranslate\"><span class=\"pre\">templates</span></code> ディレクトリを使用します。</p></li>\n<li><p>新しいテンプレートは <code class=\"docutils literal notranslate\"><span class=\"pre\">admin/base_site.html</span></code> を継承しており、これはオーバーライドされるテンプレートと同じです。</p></li>\n<li><p>このテンプレートは <code class=\"docutils literal notranslate\"><span class=\"pre\">branding</span></code> ブロックだけを置き換え、カスタムロゴを追加し、 <code class=\"docutils literal notranslate\"><span class=\"pre\">block.super</span></code> を使って以前のコンテンツを保持します。</p></li>\n<li><p>残りのテンプレートは <code class=\"docutils literal notranslate\"><span class=\"pre\">admin/base_site.html</span></code> からそのまま継承されます。</p></li>\n</ul>\n<p>このテクニックは、テンプレートローダーが <code class=\"docutils literal notranslate\"><span class=\"pre\">extends</span></code> タグを解決するときに、すでにロードされているオーバーライドテンプレート (<code class=\"docutils literal notranslate\"><span class=\"pre\">templates/admin/base_site.html</span></code>) を考慮しないので動作します。 <code class=\"docutils literal notranslate\"><span class=\"pre\">block.super</span></code> と組み合わせることで、小さなカスタマイズを行うための強力なテクニックとなります。</p>\n</section>","rootId":"how-to-override-templates","toc":[{"title":"プロジェクトのtemplatesディレクトリからオーバーライドする","anchor":"overriding-from-the-project-s-templates-directory","children":[]},{"title":"アプリのテンプレートディレクトリからオーバーライドする","anchor":"overriding-from-an-app-s-template-directory","children":[]},{"title":"オーバーライドされたテンプレートを継承（extend）する","anchor":"extending-an-overridden-template","children":[]}],"breadcrumbs":[{"docname":"howto/index","title":"How-to ガイド","url":"/ja/6.0/howto/"}],"prev":{"docname":"howto/outputting-pdf","title":"PDFファイルを作成する","url":"/ja/6.0/howto/outputting-pdf/"},"next":{"docname":"howto/custom-template-backend","title":"テンプレートのバックエンドをカスタマイズする","url":"/ja/6.0/howto/custom-template-backend/"},"formats":{"html":"/ja/6.0/howto/overriding-templates/","markdown":"/ja/6.0/howto/overriding-templates.md","json":"/ja/6.0/howto/overriding-templates.json"},"source":"https://github.com/django/django/blob/stable/6.0.x/docs/howto/overriding-templates.txt","official":"https://docs.djangoproject.com/ja/6.0/howto/overriding-templates/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11"],"inLocales":["en","sv","zh-hans","ga","fr","ja","id","it","pt-br","ko","es","el","pl"]}