ブログ記事のスタイル

[Discourse]

	概要	ブログ投稿スタイルにより、ブログカテゴリを指定でき、そのカテゴリ内のトピックの見た目を従来のブログ投稿風にカスタマイズできます。
	プレビュー	theme-creator.discourse.org でプレビュー
	リポジトリ	github.com/discourse/discourse-blog-post-styling
	Discourse テーマ初心者の方へ	Discourse テーマの利用に関する初心者ガイド

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

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

設定

このテーマコンポーネントに関連する各種設定は以下の通りです：

• ブログカテゴリ: 選択したカテゴリに属するトピックには、ブログ投稿スタイルが適用されます。

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

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

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

• 画像位置: タイトルに対する画像の表示位置を決定します：

  • タイトルの上（デフォルト）: 画像をトピックタイトルの上に表示します。
  • タイトルの下: 画像をトピックタイトルの下に表示します。このオプションを選択すると、タイトルと画像の間に要約を表示することもできます。以下では、画像位置設定を タイトルの上 および タイトルの下 に設定した場合の画像の表示例を示します：

• ドロップキャップ有効: 有効にすると、ブログ投稿の最初の文字が拡大されたスタイルで表示されます：
  
  
• モバイル有効: 有効にすると、モバイルデバイスでトピックを読む際にブログ投稿スタイルが適用されます。

ブログ投稿の作成

ブログカテゴリを設定（またはブログ投稿タグを適用）した後、ブログ投稿トピックの動作についていくつかの特別な点に注意してください。

特徴的な画像

ヒーロー画像として使用したい画像を投稿の最初の行に配置し、コンテンツが始まる前に空行を1行入れてください：

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

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

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

投稿を初めて公開した後、画像が指定された位置に表示されるようにするには、ページをリフレッシュしてください。（これは、最初の公開時に投稿者本人にのみ影響します。メンバーが投稿にアクセスする場合は、すぐに正しい位置に画像が表示されます。）

画像サイズ調整のヒント

画像コンテナのサイズは**高さ440px、幅100%**です。画像サイズ設定を 全幅 に設定した場合の最適な結果を得るためには：

• アップロード前に画像を1100x400pxに使用または切り取るか、
• 重要な詳細が切り取られないよう、中央に主題がある画像や特定のコンテンツがない画像（風景、模様など）を選択します。

要約

画像位置設定を タイトルの下 に設定した場合、ブログ投稿にオプションの要約を追加できます。これにより、タイトルと特徴的な画像の間に要約が表示されます。

これを行うには、要約として表示させたいコンテンツを以下のように囲みます：

[summary] ここに要約として表示されるコンテンツを入力します。 [/summary]

スタイル化された引用

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

推奨されるカテゴリ設定

ブログカテゴリの設定では、トピック読了後に最初の投稿に移動というカテゴリ設定を有効にすることをお勧めします。これにより、リピーターが最後に読んだ位置ではなく、ブログ投稿のコンテンツに直接移動できます。

ブログ投稿スタイル + トピックリストサムネイル

このコンポーネントは、トピックリストサムネイル と互換性があります。これにより、トピックリストでブログ投稿の特徴的な画像が強調表示されます：

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