--- slug: "add-custom-html-to-inline" title: "Django Admin の Inlines に独自HTMLを追加したい" description: "Django Admin の Inline formset (TabularInline / StackedInline) に独自の HTML スニペットや説明文を差し込みたいときの実装パターン。" url: "https://www.ytyng.com/blog/add-custom-html-to-inline" publish_date: "2021-01-26T08:21:08Z" created: "2021-01-26T08:21:08Z" updated: "2026-05-11T13:11:03.543Z" categories: ["Django"] keywords: "" featured_image_url: "https://media.ytyng.com/resize/20240629/471e4d86a56c4a6187dcbeb7574daa82.png.webp?width=768" has_video: false has_music: false video_urls: [] music_urls: [] lang: "ja" --- # Django Admin の Inlines に独自HTMLを追加したい

Django Admin の Inlines に独自HTMLを追加したい場合

Admin や、モデルクラスに独自プロパティを定義して、Inline クラスの fields = とか fieldsets = で扱おうとしてもうまくいきません。

素直に、インラインのテンプレートを延長させるのが良いでしょう。

class MyModelInline(admin.StackedInline):
    template = 'admin/my_app/my_model_inline.html'
    model = models.MyModel
    extra = ...

オリジナルのテンプレートは admin/edit_inline/stacked.html として存在しますが、このテンプレートは継承を想定されていないため {% block %} 等が無く、継承して使うことはできません。

そのため、丸コピして、継承可能なインラインテンプレートを作っておくと良い。

admin/edit_inline/stacked.html をコピペして作った

admin/edit_inline/stacked_extendable.html

{% load i18n admin_urls static %}
{% comment %}
デフォルトの stacked inline テンプレートに、
inline_header, inline_footer のブロックを追加して
継承で使えるようにした
{% endcomment %}
<div class="js-inline-admin-formset inline-group"
     id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="stacked"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
<fieldset class="module {{ inline_admin_formset.classes }}">
  <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
{{ inline_admin_formset.formset.management_form }}
{{ inline_admin_formset.formset.non_form_errors }}

{% for inline_admin_form in inline_admin_formset %}<div class="inline-related{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
  <h3><b>{{ inline_admin_formset.opts.verbose_name|capfirst }}:</b> <span class="inline_label">{% if inline_admin_form.original %}{{ inline_admin_form.original }}{% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %} <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %}">{% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}</a>{% endif %}
{% else %}#{{ forloop.counter }}{% endif %}</span>
      {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% translate "View on site" %}</a>{% endif %}
    {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}<span class="delete">{{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}</span>{% endif %}
  </h3>
  {# 追加 #}
  {% block inline_header %}{% endblock %}

  {% if inline_admin_form.form.non_field_errors %}{{ inline_admin_form.form.non_field_errors }}{% endif %}
  {% for fieldset in inline_admin_form %}
    {% include "admin/includes/fieldset.html" %}
  {% endfor %}
  {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
  {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
  {# 追加 #}
  {% block inline_footer %}{% endblock %}
</div>

{% endfor %}
</fieldset>
</div>

継承先の例

{% extends 'admin/edit_inline/stacked_extendable.html' %}

{% block inline_footer %}
{% if inline_admin_form.original %}
  <p>
  <a href="{{ inline_admin_form.original.admin_change_url }}" target="_blank">
    詳細を表示 ›</a>
  </p>
{% endif %}
{% endblock %}