ブログ投稿のスタイリング

[Discourse]

	概要	Blog Post Styling（ブログ投稿スタイリング）を使用すると、ブログカテゴリを指定でき、そのカテゴリ内のトピックの外観が従来のブログ投稿のように変更されます。
	プレビュー	theme-creator.discourse.orgでプレビュー
	リポジトリ	github.com/discourse/discourse-blog-post-styling
	Discourseテーマは初めてですか？	Discourseテーマ使用の初心者ガイド

このテーマコンポーネントをインストール

Blog Post Stylingテーマコンポーネントは、Discourseのトピックを従来のブログ投稿レイアウトに変換します。カテゴリに適用すると、各トピックの最初の画像がタイトル上にフル幅のヒーローとして昇格され、コンテンツはブログに適したタイポグラフィとメタデータの表示でスタイル設定されます。

設定

このテーマコンポーネントに関連するさまざまな設定を以下に示します。

• ブログカテゴリ: ブログ投稿スタイリングを使用するカテゴリのスラッグです。複数のカテゴリに追加するには、スペースなしのコンマ区切りリストを使用します（例：blog,announcements）。スラッグを見つけるには：

  • カテゴリの場合、/c/の後のURLパスを使用します。したがって、/c/blog/の場合、スラッグはblogです。
  • サブカテゴリの場合、/c/の後のURLパスを使用し、/を-に置き換えます。たとえば、/c/blog/tutorialsにあるカテゴリはblog-tutorialsになります。

• ブログタグ: トピックに適用されたときに、そのトピックにブログ投稿スタイリングを適用する1つ以上のタグを選択します。

• 画像サイズ: ヒーロー画像がヘッダー領域をどのように埋めるかを決定します。

  • 画像なし: 特集画像を非表示にします。
  • フル幅（デフォルト）: 画像がコンテンツ領域全体に広がります。
  • 中央揃え: 画像はアスペクト比を維持し、コンテンツ領域の中央に配置されます。

• 画像の配置: タイトルに対して画像をどこに表示するかを決定します。

  • タイトルの上（デフォルト）: 画像をトピックタイトルの上に表示します。
  • タイトルの下: 画像をトピックタイトルの下に表示します。これを選択すると、タイトルと画像の間に表示される要約を含めることもできます。以下では、画像の配置設定がタイトルの上とタイトルの下に設定されている場合の画像の表示を確認できます。

• ドロップキャップを有効にする: 有効にすると、ブログ投稿の最初の文字が拡大されたスタイルになります。例：
  
  
• モバイルを有効にする: 有効にすると、モバイルデバイスでトピックを閲覧しているときにブログ投稿スタイリングが適用されます。

ブログ投稿の作成

ブログカテゴリを設定した（またはブログ投稿タグを適用した）後、ブログ投稿トピックの動作について注意すべき点がいくつかあります。

特集画像

ヒーロー画像として使用したい画像を、投稿の最初の行に配置し、その後にコンテンツを開始する前に空行を続けます。

![画像の簡単な説明|1100x440](upload://your-image-hash.jpg)

ここに投稿コンテンツが始まります...

コンポーネントは、画像の配置設定（上記参照）に基づいてこの画像を自動的に配置します。画像より前にコンテンツ（空行を含む）が表示されると、ヒーロー位置に昇格されません。

投稿を最初に公開した後、ページを更新して画像が指定された位置に表示されるようにします。（これは最初の公開時に投稿作成者にのみ影響します。投稿にアクセスするメンバーは、画像がすぐに正しい位置に表示されるはずです。）

画像サイジングのヒント

画像コンテナは高さ440px、**幅100%**です。画像サイズ設定がフル幅に設定されている場合の最良の結果を得るには：

• アップロード前に画像を1100x400pxにトリミングまたは使用して、トリミングを回避するか、
• 中央に被写体がある、または非特定のコンテンツ（風景、パターン）を持つ画像を選択し、トリミングによって重要な詳細が失われないようにします。

要約

画像の配置設定がタイトルの下に設定されている場合、ブログ投稿にオプションの要約を追加でき、これはタイトルと特集画像の間、またはタイトルと画像の間に表示されます。

これを行うには、要約として表示したいコンテンツを次のようにラップします。

[summary] ここが要約として表示されるコンテンツです。 [/summary]

スタイル付きブロッククォート

ブログカテゴリでトピックを作成する場合、ブロッククォートには特別なスタイルが適用されます。コンポーザーで>記号を使用するか、<kbd>“</kbd>コンポーザーツールバーボタンを使用してブロッククォートを作成できます。

推奨されるカテゴリ設定

ブログカテゴリの設定で、トピックが読み終わった後に最初の投稿に移動カテゴリ設定を有効にすることを検討してください。これにより、再訪問した読者は、最後に読んだ位置ではなく、ブログ投稿のコンテンツに直接移動します。

Blog Post Stylingとトピックリストサムネイル

このコンポーネントは、ブログ投稿の特集画像をトピックリストでハイライトするTopic List Thumbnailsと互換性があります。

注意: Topic List ThumbnailsコンポーネントはHorizonテーマとは互換性がありません。上記のスクリーンショットはFoundationテーマを使用しています。