ブログ投稿ページは、単一のブログ投稿を表示する Web ページです。製品やサービスの宣伝、またはその他のさまざまな目的に使用できます。
OS 2.0 Shopify テーマであるConceptを使用すると、すべてのページにさまざまなセクションを追加できます。つまり、必要なセクションを追加することで、404 ページの外観を完全にカスタマイズできます。 [セクションを追加]ボタンをクリックして、ページに表示するセクションを選択するだけです。
これにより、訪問者の関心を引きつけ、情報を提供し続ける、視覚的に魅力的なブログ投稿ページを作成できます。
A. デフォルトのブログ投稿
1. ブログ投稿バナーセクション
| 説明 | ||
|---|---|---|
| ブログ投稿バナー | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます。 | |
| 注目の画像を表示 | ブログ投稿の注目の画像を表示します。 最良の結果を得るには、アスペクト比 16:9 の画像を使用してください。 もっと詳しく知る。 | |
| 画像 | 断面画像を選択/アップロードします。 デフォルトは注目の画像です。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングを0px から 120px まで 4px 刻みで調整できます。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 視差方向は次の 3 つのオプションから選択できます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 1.1 ブログ投稿のタイトル
- 1.2 ブレッドクラム
- 1.3 空きスペース
1.1 ブログ投稿のタイトル ブロックの設定。
| 説明 | ||
|---|---|---|
| ブログ記事のタイトル | ||
| タイトルサイズ | タイトルのサイズ: | |
| タグを表示 | 管理ブログ投稿のタグを画像付きで表示します。 | |
| 上映日 | ブログ投稿の公開日を表示します。 | |
| コメント数を表示 | 公開されたコメントの総数を表示します。 | |
| 著者を表示 | ブログ投稿の作成者を表示します。 | |
1.2 ブレッドクラムブロックの設定。
このコンテンツは、ブログ投稿の編集にあるブログ投稿からのものです。
1.3 空きスペースブロックの設定。
| 説明 | ||
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 40px です。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 28 ピクセルです。 | |
2. ブログ投稿
| 説明 | ||
|---|---|---|
| セクション | ||
| 上部パディングと下部パディングを0px から 120px まで 4px 刻みで調整できます。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを狭くする | 容器が狭くなってしまいます。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 2.1 シェア
- 2.2 次および前のブログ投稿
- 2.3 コメント
- 2.4 カスタムリキッド
- 2.5 空きスペース
2.1 共有ブロックの設定。
| 説明 | ||
|---|---|---|
| 共有 | ||
| 文章 | ブロックにテキストを追加します。 ソーシャル メディアの投稿にリンクを含めると、ページのアイキャッチ画像がプレビュー画像として表示されます。 もっと詳しく知る。 プレビュー画像にはストアのタイトルと説明が含まれています。 もっと詳しく知る。 | |
| コメント数を表示 | 公開されたコメントの総数を表示します。 | |
2.2 次および前のブログ投稿ブロックの設定。
- 日付を表示- ブログ投稿の公開日を表示します。
- コメント数を表示- 公開されたコメントの総数を表示します。
- 作成者を表示- ブログ投稿の作成者を表示します。
2.3 コメントブロックの設定。
- コメントアバターを表示- コメントアバターを表示できるようにします。
2.4 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
2.5 空きスペースブロックの設定。
| 説明 | ||
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 40px です。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 28 ピクセルです。 | |
3. ブログ投稿セクション
| 説明 | ||
|---|---|---|
| ブログ投稿 | ||
| ブログ | ブログ投稿を表示するブログを選択します。ブログが選択されていない場合は、「ブログ」ページのアルファベット順で最初のブログが使用されます。 | |
| 表示するブログ投稿の数 | セクションに表示するブログ投稿の数 (0 ～ 12)。 | |
| デスクトップ上の列の数 | デスクトップに表示される列の数を 1 から 5 までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | デスクトップ ブラウザ上のコレクションからブログ投稿のカルーセルを表示します。 | |
| 「すべて表示」ボタンを有効にする | ブログに指定された制限を超える投稿がある場合は、ブログ ページにリンクする[すべて表示]ボタンを表示します。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| ブログ投稿カード | ||
| 画像比率 | ブログ投稿画像の画像比率:
| |
| タグを表示 | 管理者のブログ投稿のタグを画像付きで表示します。 | |
| 上映日 | ブログ投稿の公開日を表示します。 | |
| コメント数を表示 | 公開されたコメントの総数を表示します。 | |
| 著者を表示 | ブログ投稿の作成者を表示します。 | |
| 以外を表示 | ブログ投稿の抜粋を表示します。 ブログポットを編集して抜粋を変更します。もっと詳しく知る。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングを0px から 120px まで 4px 刻みで調整できます。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。
