で投稿ページテンプレートを作成する方法Zero Block
もっと見る
もっと見る
もっと見る
もっと見る
もっと見る
もっと見る
「Zero Block 」を使えば、フィード投稿用の独自のページテンプレートをデザインできます。フィードごとに独自のスタイルを設定し、ブログを視覚的に魅力的なものにすることができます。
公開後に投稿ページテンプレートが正しく表示されるようにするための推奨事項:

  • すべての要素は、「オブジェクト」タイプを使用してグループ化する必要があります。
  • グループでは「自動レイアウト」を有効にし、「自動」に設定する必要があります。
  • アートボードのグリッドコンテナの高さは「自動」に設定してください。
投稿ページのテンプレートは、最新の変更を反映した状態で公開する必要があります。
フィードに投稿ページテンプレートを割り当てる
後でフィード投稿のテンプレートとして割り当てる新しいページを作成してください。ページの内容は空のままでも構いません。スタイルの設定や構成は後でいつでも行えます。
Site dashboard: the "+ Create new page" button in the upper right.
フィード設定に移動し、カスタムフィードの場合は「テンプレート」タブを、情報フィードの場合は「ヘッダーとフッター」タブを開きます。「投稿ページテンプレート」で、先ほど作成したページを選択し、変更を保存します。
The "Template" tab in the "Feed Settings" pop-up window, accessed from the feed settings menu in the left panel.
投稿ページテンプレートは、ページ一覧に「テンプレート名」として表示されます。そのテンプレートが割り当てられているフィードが、その横の括弧内に表示されます。投稿ページテンプレートを編集するには、一覧からそのテンプレートをクリックしてください。
Project dashboard: the created feed template page in the "Services header and footer" section.
投稿ページテンプレートの編集
新しいページに「Zero Block 」を追加します。テンプレートにリンクされたフィード投稿のタイトルが、ページの左下隅に表示されます。

テンプレートの編集中に、投稿タイトルをクリックして、プレビューに使用する投稿を選択します。その横にある鉛筆アイコンをクリックすると、フィード画面に切り替わり、その投稿の内容を編集できます。
Page editor: the post selector button in the bottom panel.
エディタで投稿ページテンプレートを開くには、「ブロックエディタ」をクリックしてください。
Page editor: "Block Editor" button in the upper-left corner of the Zero Block.
Zero Block エディタで、プラスアイコンをクリックして新しい要素を追加します。ドロップダウンメニューから任意の要素を選択し、フィード投稿フィールドにリンクさせることができます。また、「投稿テンプレート」を選択してすべての投稿フィールドを一度に追加することも、各フィールドを個別に表示することも可能です。
In Zero Block: the "Add All Fields" button in the "Post Template" submenu of the element adding panel.
要素を投稿フィールドにリンクさせる
テキストなど、任意の要素をページに追加します。
Zero Block editor: the list of basic elements, from "Text" to "Gallery", in the "+" menu on the left.
要素をフィード投稿フィールドにリンクするには、その要素を選択し、「フィードにリンク」アイコンをクリックします。
In Zero Block, the "Link to Feed" icon in the "Element Settings" panel on the right.
リストから必要なフィールドを選択してください。
Zero Block: "Title" under "POST FIELDS" in the field connection dropdown in the right panel.
要素がリンクされると、設定パネルに「コンテンツ」フィールドが表示されます。このフィールドには、その要素がリンクされている投稿フィールドが表示されます。
In Zero Block: the "CONTENT" field set to "Title" in the "ELEMENT SETTINGS" panel on the right.
このフィード内の他の投稿で、各フィールドがどのように表示されるかを確認できます。確認するには、エディタの下部にある投稿を切り替えてください。
Zero Block editor: selecting another post from the preview dropdown menu in the bottom-left corner to preview content in the template.
切り替え後、テンプレートには選択した投稿の内容が表示されます。
Zero Block editor: a text element on the artboard and the post selector at the bottom of the left sidebar.
投稿フィールドとリンクさせる必要のない他の要素(お問い合わせフォームなど)も、投稿ページテンプレートに追加できます。この要素は、すべての投稿ページに表示されます。
Zero Block editor: custom post page template layout with the "Layers" panel on the left and "Artboard Settings" on the right.
すべての投稿フィールドを追加する
すべての投稿フィールドをすばやく表示するには、プラスアイコンをクリックし、ドロップダウンメニューから「すべてのフィールドを追加」を選択してください。
In Zero Block, the "Post Template" section in the left panel and the "Add All Fields" button.
投稿コンテンツの表示に関わるすべてのフィールドは、Zero Block に追加されます。フィールドのレイヤーの順序を変更したり、デザインをカスタマイズしたり、新しいフィールドを追加したりすることができます。
In Zero Block: the "LAYERS" panel on the left with a selected flex group containing template post elements.
投稿の一部フィールドが入力されていない場合、対応する要素は値が空の状態で表示されます。Zero Block 別の投稿に切り替えると、入力済みのフィールドが自動的に表示されます。
また、エディタ内でフィールドを削除したり、その値を再割り当てしたりすることもできます。たとえば、以前はタグを表示していた要素を、「作成日」というシステムフィールドにリンクさせることができます。
Zero Block editor: the "Creation date" option in the "CONTENT" field on the Element Settings panel.
個別の投稿フィールドを追加する
Zero Block で特定のフィールドを表示するには、プラスアイコンをクリックし、ドロップダウンリストから必要なフィールドを選択してください。
Zero Block editor: "Title" under "Post Template" in the left-hand elements menu.
この機能を使用すると、独自の投稿ページテンプレートを作成できます。追加したすべての要素は、Zero Block エディタでスタイルを設定できます。
Zero Block editor: a custom post body flex container with text and images, and the "AUTO LAYOUT" settings panel on the right.
ページテンプレートに投稿タイルを追加する
ページテンプレートに投稿タイルを表示するには、「新しい要素を追加」アイコンをクリックし、「フィード」を選択します。次に、ドロップダウンメニューから必要なフィードを選択してください。
In Zero Block, the "Feeds" item in the add elements menu, selecting a feed name and the "All posts" category.
投稿タイルはすぐにページに表示されます。タイルグループをクリックして、表示方法を設定してください。
In Zero Block: the "My new Feed (FEED)" structure expanded under "Object 1" in the "Layers" panel on the left.
製造元
Tilda