誰でも簡単ホームページ
一覧＆詳細に特化
テンプレートパーツの解説（※上級者向け）
テンプレートや、管理画面の編集で選べるパーツプルダウンに関する解説になります。
マニュアル用に、配布中の初心者向け（beginner9_white）を使っています。同じファイルをDLして読まれるとより理解できると思います。
※htmlまたはcssの半分以上をオリジナルに変更する場合
CMS事業者料金がかかりますのでご注意下さい。
当サイトで配布中のCMS、またはTemplate Party(htmlテンプレサイト)をCMS化される分には無料でご利用頂けます。
当サイトで配布中のCMS、またはTemplate Party(htmlテンプレサイト)をCMS化される分には無料でご利用頂けます。
themes/beginner9/white/直下にあるファイル・フォルダの説明
- cssフォルダとjsフォルダ … テンプレート用のcssとjsです。（imagesがあるテンプレもあり）
- partialsフォルダ … index.htmlとpage.htmlのプレースホルダーで実際に使うhtmlや、管理画面のパーツプルダウン用のhtmlが入っています。
- theme.formdef.json … 管理画面の「サイト基本設定」で設定できる情報をここで設定します。
- index.html と page.html … それぞれトップページ用、その他ページ用の骨格用ファイルです。他のhtmlは使えません。
index.html と page.htmlで使えるプレースホルダー
以下のプレースホルダーを使って、骨格の中身を配置します。
使えるプレースホルダーは決まっています。
- {{META_TITLE}} … 管理ページのページ編集画面の最上部にある「サイトタイトル」を出力します。
- {{META_DESCRIPTION}} … 管理ページのページ編集画面の最上部にある「サイト説明」を出力します。
- {{HEADER}} … partialsのheader.html（またはトップ専用header.index.html）を読み込みます。実際のデータ入力は、管理画面の「サイト基本設定」です。theme.formdef.jsonのHEADERに設定したものが管理画面で入力できるようになります。
- {{MAINIMG}} … partialsのmainimg.htmlを読み込みます。実際のデータ入力は、管理画面の「サイト基本設定」です。theme.formdef.jsonのMAINIMGに設定したものが管理画面で入力できるようになります。
- {{CONTENT}} … 管理画面のページ編集の「パーツ選択」プルダウンを使って積み上げた情報がまとまって入ります。
- {{NAV}} … 管理画面の「メニュー設定」で、１つ目のチェックが入ったものだけを出力します。<li>〜</li>で出力されるので、親要素はhtml側（index.htmlとpage.html）で準備して下さい。
- {{NAV_SUB}} … メインメニューとは異なる構成でメニューブロックを作りたい場合に使用します。使わなくても構いません。管理画面の「メニュー設定」で、２つ目のチェックが入ったものだけを出力します。<li>〜</li>で出力されるので、親要素はhtml側（index.htmlとpage.html）で準備して下さい。
- {{FOOTER}} … partialsのfooter.htmlを読み込みます。実際のデータ入力は、管理画面の「サイト基本設定」です。theme.formdef.jsonのFOOTERに設定したものが管理画面で入力できるようになります。
- {{FREE_AREA}} … partialsのfree_area.htmlを読み込みます。実際のデータ入力は、管理画面の「サイト基本設定」です。theme.formdef.jsonのFREE_AREAに設定したものが管理画面で入力できるようになります。
theme.formdef.json について
- theme.formdef.jsonは、以下の２ブロックに分かれています。
site_fields（共通設定）
site_sections（テーマ専用設定）
site_sectionsは、HEADER、MAINIMG、FREE_AREA、FOOTERの４つしか扱えないので注意。 - site_fieldsで使えるtype … text / textarea / file
- site_sectionsで使えるtype … text / textarea / file / radio / select / table
- 補足：checkboxも使えるのですが、１つのkeyに対して１つのチェックボックスしか使えないので、あまり用途がありません。radioのようにvalueの出力もできないので、IFに使用するぐらい（チェックがあれば、何かを出力など）かと。clinic6でこの切り替えに使っています。
↓ 全部入りのデモコード。（※これだけではサイト側には出ません。htmlの設定も必要です）
partialsフォルダ内の各htmlファイル
index.htmlとpage.htmlのプレースホルダーで実際に使うhtmlや、管理画面のパーツプルダウン用のhtmlが入っています。
基本的に必須なhtml
- contact_form.html … フォーム用。
- credit.html … ライセンス管理用。勝手に削除すると重大な規約違反になるので注意。
- footer.html … フッター用。theme.formdef.jsonでFOOTERを使っている場合に適用されます。（※パーツプルダウンには出ません）
- header.html … ヘッダー用。theme.formdef.jsonで、HEADERを使っている場合に適用されます。（※パーツプルダウンには出ません）
- mainimg.html … メインイメージ用。theme.formdef.jsonで、MAINIMGを使っている場合に適用されます。（※パーツプルダウンには出ません）
- news_archive.html … お知らせ（一覧ページ）用。
- news.html … お知らせ（トップページ）用。
トップページだけヘッダーを変更したい場合 デザインによって、トップページだけヘッダーを変更したい場合もあると思います。その場合、header.index.htmlというファイル名で準備すれば、トップページにだけそのファイルが適用されます。
どのhtmlが管理ページのパーツ選択プルダウンか知りたい場合は、FAQを参照して下さい。
上記以外のhtml内のコード解説（主に管理画面のパーツプルダウン用）
主に、「１回のみ使用パーツ」「繰り返し登録できるROWSパーツ」「TABLEパーツ」の３タイプが使えます。
１回のみ使用パーツの解説。
- beginner9/white/partials/img.htmlを見てみましょう。
<!-- tpcms-form: {と} -->は、管理画面のフォームとして出力させるために無条件に必要なコードです。 - labelは、管理画面のプルダウンに出力される文字列。
- categoryは、プルダウン群をカテゴリー別にまとめたい場合に使います。
labelとcategoryの冒頭の2桁の数字とアンダーバーは並び順の指示で、小さな順に並びます。なくても構いません。（数字は管理画面には出ません） - fieldsが管理画面に実際に出力される入力フォームの設定箇所です。fieldsで使えるtype（フォームの種類）は、text（１行テキスト入力）、textarea（複数行テキスト入力）、radio（ラジオボタン）、checkbox（チェックボックス ※Ver202510-9以降）、file（ファイルのアップロード）です。
textareaの使用例：keyは、任意の文字列で構いません。大文字の英字、数字、アンダーバーが使えます。同じkeyを同一html内で使わないように。
{ "key":"TEXT", "type":"textarea", "label":"文章を入力します" }
fileの使用例：
{ "key": "FILE", "type": "file", "label": "画像をアップロードします", "image_max_width": 2500, "image_quality": 82 }
radioの使用例：
{ "key": "SHOW_BTN", "type":"radio", "label":"ボタンの表示指定", "options":[["show", "表示する"],["hidden","表示しない"]]}
checkboxの使用例：（※Ver202510-9以降より使用可）
{ "key": "ICONS", "type":"checkbox", "label":"アイコン選択", "options":[["male", "男の子"],["female","女の子"]]},
checkboxだけは、htmlへの出力方法が２通りあり、上記の例で２つともチェックした場合に
{{ICONS_HTML}}と書けば、
male female
と出力され（classなどに向く）、
{{ICONS_SPANS_HTML}}と書けば、
<span class="male">男の子</span><span class="female">女の子</span>
とspanに囲まれた状態でそれぞれ出力されます。
いずれかご希望に合う方でご利用下さい。（その他の出力方法はありません）
尚、IFを使う場合は、上記の場合は、
{{#IF_ICONS}}{{ICONS_HTML}}{{/IF_ICONS}}
や、
{{#IF_ICONS}}{{ICONS_SPANS_HTML}}{{/IF_ICONS}}
として下さい。HTMLやSPANSの部分はIFには入れません。
labelは、フォームの上に出る水色の見出しです。
image_max_widthやimage_qualityは、このあと解説する「オプション」を読んで下さい。 - 一番最後の、imgの行は、htmlタグです。管理画面で入力したデータがここに出力されます。今回は画像だったので、.uploads/とフォルダを参照して、keyを指定しています。
{{と}}の間にkeyを入れて使います。 - よくある質問：「partialsで新しいパーツブロックを作ったのですが、管理ページのプルダウンに出ません。」
繰り返し登録できるROWSパーツの解説
- beginner9/white/partials/list_row1.htmlを見てみましょう。
<!-- tpcms-form: {と} -->は、管理画面のフォームとして出力させるために無条件に必要なコードです。 - labelは、管理画面のプルダウンに出力される文字列。
- categoryは、プルダウン群をカテゴリー別にまとめたい場合に使います。
labelとcategoryの冒頭の2桁の数字とアンダーバーは並び順の指示で、小さな順に並びます。なくても構いません。（数字は管理画面には出ません） - fieldsとrepeatersが管理画面に実際に出力される入力フォームの設定箇所で、repeatersが繰り返し登録できるブロックになります。
repeatersのkeyは必ずROWSと入力します。
sortはハンドル（☰）での並び替えで、通常はtrueにしておきます。
その他の使い方は、「１回のみ使用パーツ」と同じです。
（fieldsは１回のみ使用パーツと同じで、ROWSタイプにはなくても構いません。）
- section以降の行は、htmlタグです。管理画面で入力したデータがここに出力されます。
{{と}}の間にkeyを入れて使います。
繰り返し表示させるブロックは、{{#ROWS}}〜{{/ROWS}}で囲みます。
{{#IF_key}}〜{{/IF_key}}について（※１回のみパーツも同様）
その値がある場合のみに出力したい場合に、{{#IF_key}}と{{/IF_key}}で囲みます。（keyは実際のkeyを入れます）
H2というkeyを使ったフォームに入力があった場合のみ、サイト側に出力させる場合の例は、以下です。
h2の見出し用に作ったkeyなので、h2要素で囲んでおり、その外側をIFで囲みます。
{{#IF_H2}}<h2>{{H2}}</h2>{{/IF_H2}}
typeがfileの場合
画像なら{{#IF_IMAGE}}〜{{/IF_IMAGE}}、動画なら{{#IF_VIDEO}}〜{{/IF_VIDEO}}を使います。
もし出ない場合、keyを#IF_の最後に繋げてみて下さい。
（例：{{#IF_IMAGE PHOTO}} {{PHOTO}} {{/IF_IMAGE}}） - よくある質問：「partialsで新しいパーツブロックを作ったのですが、管理ページのプルダウンに出ません。」
TABLEパーツの解説
- beginner9/white/partials/table1.htmlを見てみましょう。
<!-- tpcms-form: {と} -->は、管理画面のフォームとして出力させるために無条件に必要なコードです。 - labelは、管理画面のプルダウンに出力される文字列。
- categoryは、プルダウン群をカテゴリー別にまとめたい場合に使います。
labelとcategoryの冒頭の2桁の数字とアンダーバーは並び順の指示で、小さな順に並びます。なくても構いません。（数字は管理画面には出ません） - fieldsが管理画面に実際に出力される入力フォームの設定箇所で、tableで使う場合は、typeにtableと入力します。
- colsは列に関する指定です。このテンプレの場合は２列仕様だったので、HEADとDESCの２行です。
keyとlabelは任意の文字列でOK。keyは表には出ず、labelは入力フォームの上部に薄いグレーの見出しになります。
- rowsは管理画面で予め出しておく行数です。この場合は２行デフォルトで出ます。
- thead
topをtrueにすると、１行目がtheadになり、thになります。
leftをtrueにすると、１列目がthになります。
falseにするとtdになります。
また、theadの指定は管理画面の以下にも反映され、チェックを変更することで切り替えもできます。
このチェックボックスはデフォルト表示なので、htmlからtheadの行を削除しても管理画面にチェックボックスは出ます。（チェックなしになるだけ） - よくある質問：「partialsで新しいパーツブロックを作ったのですが、管理ページのプルダウンに出ません。」
管理画面で一回だけ選べるパーツ
"once": true,
特殊なレイアウト用などで、複数使うと崩れるような場合は、一回だけ使用を許可する指定があります。（一回使った場合は、パーツプルダウンから非表示になる。）
以下は、artist2のnews.htmlの使用例です。
オプション
- text と textareaには、required（入力必須）、maxlength（最大文字数）、placeholder（予めエリアに入れておく見本テキスト）が使えます。
- file（画像）には、image_max_width（最大幅）、image_max_height（最大の高さ）、image_quality（圧縮）が使えます。
image_max_width / image_max_heightについては、JPEG / PNG / WebP に対応（サーバーにGD必須）。
image_qualityは、JPEGに対応。1–100の値で設定。※image_max_width または image_max_heightの設定も必須です。単体では効きません。 - selectには、allow_emptyとplaceholderが可能。allow_emptyはセレクトの先頭に「空の選択肢（value=""）」を追加する指示。placeholderはその空の選択肢の表示テキスト。
（※使えるのは、「ページ編集」の方のみ。サイト基本設定画面では使えません。）
↓ 以下使用例。