ブログ投稿スタイルテーマコンポーネントは、Discourse のトピックを従来のブログ投稿レイアウトに変換します。カテゴリに適用すると、各トピックの最初の画像がタイトルの上に全幅のヒーロー画像として表示され、コンテンツはブログに適したタイポグラフィとメタデータ表示でスタイルされます。
設定
このテーマコンポーネントに関連する各種設定は以下の通りです：
-
ブログカテゴリ: 選択したカテゴリに属するトピックには、ブログ投稿スタイルが適用されます。
-
ブログタグ: 1 つ以上のタグを選択すると、そのタグがトピックに適用された際にブログ投稿スタイルが適用されます。
-
画像サイズ: 特徴的なヒーロー画像がヘッダー領域をどのように埋めるかを決定します：
画像なし: 特徴的な画像を非表示にします。全幅（デフォルト）: 画像がコンテンツ領域全体に広がります。中央揃え: 画像はアスペクト比を維持し、コンテンツ領域の中央に表示されます。
-
画像位置: タイトルに対する画像の表示位置を決定します：
タイトルの上（デフォルト）: 画像をトピックタイトルの上に表示します。タイトルの下: 画像をトピックタイトルの下に表示します。このオプションを選択すると、タイトルと画像の間に要約を表示することもできます。以下では、画像位置設定を タイトルの上 および タイトルの下 に設定した場合の画像の表示例を示します：
- ドロップキャップ有効: 有効にすると、ブログ投稿の最初の文字が拡大されたスタイルで表示されます：
- モバイル有効: 有効にすると、モバイルデバイスでトピックを読む際にブログ投稿スタイルが適用されます。
ブログ投稿の作成
ブログカテゴリを設定（またはブログ投稿タグを適用）した後、ブログ投稿トピックの動作についていくつかの特別な点に注意してください。
特徴的な画像
ヒーロー画像として使用したい画像を投稿の最初の行に配置し、コンテンツが始まる前に空行を1行入れてください：
ここに投稿コンテンツが始まります...
コンポーネントは、画像位置設定（上記参照）に基づいてこの画像を自動的に配置します。画像の前に他のコンテンツ（空行を含む）が表示されている場合、その画像はヒーロー位置に昇格しません。
投稿を初めて公開した後、画像が指定された位置に表示されるようにするには、ページをリフレッシュしてください。（これは、最初の公開時に投稿者本人にのみ影響します。メンバーが投稿にアクセスする場合は、すぐに正しい位置に画像が表示されます。）
画像サイズ調整のヒント
画像コンテナのサイズは**高さ440px、幅100%**です。画像サイズ設定を 全幅 に設定した場合の最適な結果を得るためには：
- アップロード前に画像を1100x400pxに使用または切り取るか、
- 重要な詳細が切り取られないよう、中央に主題がある画像や特定のコンテンツがない画像（風景、模様など）を選択します。
要約
画像位置設定を タイトルの下 に設定した場合、ブログ投稿にオプションの要約を追加できます。これにより、タイトルと特徴的な画像の間に要約が表示されます。
これを行うには、要約として表示させたいコンテンツを以下のように囲みます：
[summary] ここに要約として表示されるコンテンツを入力します。 [/summary]
スタイル化された引用
ブログカテゴリでトピックを作成する際、引用には特別なスタイルが適用されます。コンポーザーで > 記号を使用するか、“ コンポーザーツールバーボタンを使用して引用を作成できます。
推奨されるカテゴリ設定
ブログカテゴリの設定では、トピック読了後に最初の投稿に移動というカテゴリ設定を有効にすることをお勧めします。これにより、リピーターが最後に読んだ位置ではなく、ブログ投稿のコンテンツに直接移動できます。
ブログ投稿スタイル + トピックリストサムネイル
このコンポーネントは、トピックリストサムネイル と互換性があります。これにより、トピックリストでブログ投稿の特徴的な画像が強調表示されます：
注意: トピックリストサムネイルコンポーネントは、Horizon テーマとは互換性がありません。上記のスクリーンショットは Foundation テーマを使用しています。
「いいね！」 105
amotl
(Andreas Motl)
54
[quote=“amotl, post:53, topic:110841”]
定義されたサイズをマークアップ内でわずかに手動で調整したところ、見出し画像の拡大機能が完璧に動作しました–少なくとも、実際に十分な大きさ（幅 690px 以上）の画像であれば。[/quote]
実際、アップロード後に生成された元のマークアップに、適切な場所に 101% のズームレベルを注入することで、この動作を確認できました。
これは、事前に以下の通り画像をアップロードした後に適用されます。
これはとても素敵で、私たちを幸せにしてくれます。
「いいね！」 3
こんにちは、このツールを作成し、無料で公開してくださり、時間を割いていただき本当にありがとうございます。
もし可能であれば、特定の「カテゴリ」の代わりに特定の「タグ」を使って何かを変更することはできるでしょうか？
最近、新しい Discourse サイトを立ち上げましたが、多くの「ブログ記事」を投稿しています。ただ、これらが他の適切なカテゴリにも表示され、より統合されたように見えるようにしたいと考えています。
現在、私は「blog-posts」という独自のカテゴリに投稿しており、そこには自分だけが投稿できるように制限しています。しかし、最近、スタッフのみがアクセスできるタググループを設定しました。
改めてありがとうございます！
「いいね！」 3
Howaids
(Martin)
70
@tshenry さん、どうもありがとうございます。テーマのコンポーネントはすべて完璧でした。また、@sam さん、@codinghorror さん、素晴らしいアプリを共有してくださり、ありがとうございます！メタでのサポートを含め、あなたの寛大さは心から感じられます。Discourse は、確かに未来のより思いやりのあるインターネットのために作られています。
「いいね！」 6
LoganRTW
(Ward)
81
動画を代表コンテンツとして使用することは可能でしょうか？画像ではなく、YouTube や Vimeo などの動画をトップコンテンツとして表示できれば、WordPress サイトを削除しても構いません。何かアイデアはありますか？
「いいね！」 6
Howaids
(Martin)
82
その通り！素晴らしい提案ですね、@LoganRTW さん。@tshenry さんも賛成です。実現可能でしょうか？
「いいね！」 4
tshenry
(Taylor)
86
アップデート 
信じられないかもしれませんが 
コンポーネントのリファクタリングと整理を開始し、プラグインスタイルのファイル構造を採用するとともに、新しいトピックのサムネイルを活用できるようにしました。
さらに、いくつかの新機能を追加しました：
- 新しい設定
-
image_display_style - この設定には 2 つのオプションがあります。デフォルトは、これまでコンポーネントが備えていた動作を維持します。もう一方のオプションは、画像の切り抜きを行わず、画像全体を表示するようにします。どちらが「優れている」かは一概に言えないため、ご自身のワークフローやブログの画像に合わせて実際に試していただき、最適な方を選んでください。
-
mobile_enabled - これはモバイル向けのブログ投稿スタイルの第一弾です。バグ報告や改善案など、ぜひご意見をお聞かせください！
引き続きコードのリファクタリングと整理を進めていきたいと考えていますが、まずはこれで良いスタートが切れたと思います。
現時点ではそのような予定はありません、申し訳ありません！
「いいね！」 16
torstensson
(Per Torstensson)
92
とてもインスピレーションに富み、素晴らしいコンポーネントをありがとうございます @tshenry 
私の評価では、以下の 2 つの問題が確認されました。
-
サブカテゴリにブログ画像が表示されない - さまざまなテーマでのトラブルシューティングや、プラグインおよび他のコンポーネントの有効化/無効化をかなり詳細に行いましたが、サブカテゴリではブログ画像がレンダリングされないことはほぼ確実です。ただし、最初の画像（意図されたブログ画像）は依然として非表示のままです。
-
DiscoTOC との整合性で最初の画像が非表示にならない - ブログ投稿のスタイル設定を DiscoTOC と併用すると、ブログ画像はタイトルの上に正しくレンダリングされます。しかし、元の位置でも引き続きレンダリングされるため、画像が二度表示されてしまいます。
「いいね！」 4
tshenry
(Taylor)
93
@torstensson さん、フィードバックをどうもありがとうございます！ご指摘の 2 つの点は確かにバグであり、現在は修正されています：
https://github.com/tshenry/discourse-blog-post-styling/commit/f56389897998face967dc2f8a0b5555faa0b52a5
引き続き問題が発生する場合は、お知らせください。
このコンポーネントを利用している皆様へ：
現在、すべてのブログ投稿のトップに「注目の画像」を含めていない場合は、このお知らせをご覧ください！
このコンポーネントは、すべてのブログ投稿トピックの上部に画像を表示することを目的として作成されました。そのため、投稿の最初の行に画像を含めなければ、注目の画像を表示しないブログ投稿を作成することも可能でした。しかし、この動作は変更されました。
新しい実装はパフォーマンスを大幅に向上させますが、投稿の内容自体を確認するのではなく、事前に定義された値を使用します。この事前定義された値は、投稿内で最初に見つかった画像から生成されます。以前とは異なり、必ずしも投稿の最初の行に表示される画像に限定されません。つまり、最初の行に画像がない投稿を作成した場合でも、投稿の下部に単一の画像を含めていれば、その下部の画像がトピックの上部にも表示されるようになります。
「注目の画像」をオン/オフできるすべてまたはなしの設定を追加しました。これにより、ご好みに応じて、注目の画像を除いたすべてのスタイルを適用することが可能です。
新しい考慮事項と推奨事項をすべて OP（最初の投稿）に更新する予定ですが、要約すると、投稿の最初の行に画像を含めるようにしてください（この配置は、画像が重複しないようにするために引き続き使用されます）。画像が提供されていない場合にデフォルトとして使用できるよう、カテゴリのトピックテンプレートにプレースホルダー画像を使用すると役立つかもしれません。
「いいね！」 6
torstensson
(Per Torstensson)
94
「いいね！」 3
core
95
最近発表された機能は、このテーマコンポーネントの代替として機能する可能性があります。興味のある方のためにここに残しておきます。
「いいね！」 2
nityeshaga
(Nityesh Agarwal)
102
@tshenry このコンポーネントを本当にありがとうございます！
私たちはこれを トピック一覧のプレビュー プラグインと併用して、Dataquest コミュニティ向けの学生用記事セクション を作成しています。
今後のバージョンアップで検討いただきたい機能リクエストがあります。記事に 正規化 URL (Canonical URLs) を追加する機能を追加していただけますでしょうか？
検索エンジンは正規化リンクを使用して、コンテンツの最終的なソースを特定し優先順位を付けます。同じドキュメントが異なる場所に複数存在する場合の混乱を解消するために役立ちます。
ありがとうございます！
「いいね！」 3
sebastianh
(Rebastion)
103
とても優れたコンポーネントだと思います。実際にライブの Discourse で試してみています。特に順序は気にせず、最初の感想とフィードバックをお伝えします。参考になれば幸いです。いくつかは質問に近い内容もあるかもしれませんが、お許しください。
- 著者の表示方法が少し場違いに感じられます。タイトルやカテゴリタグなどとより密接に関連させ、スペース効率を改善できるかもしれません。また、著者情報の行と本文の開始部の間に、かなり余白が多すぎます。
- ブログ記事に直接アクセスした訪問者には、自分がどこにいるのか分かりにくいです。明確なパンくずリストや類似の要素がないためです。主な理由は、タイトルバーが無効化されているように見える点です。通常のトピックではタイトルやカテゴリなどを含めて変形しますが、ここではそうなりません。
- カテゴリビューをブログ風の見た目（小さなプレビュー画像など）に変更できると素晴らしいですが、それは難しいでしょうか？
- カテゴリビューにカテゴリの説明が表示されていないようですが、どうなっていますか？
「いいね！」 2
sebastianh
(Rebastion)
104
わあ、そのカテゴリ表示に使われているテーマコンポーネントは何ですか？かっこいいですね。
「いいね！」 2
tshenry
(Taylor)
105
フィードバックをありがとうございます 
著者やタイトルの周りに余白が多いという点には同意します。次回このコンポーネントを作業する際にこのフィードバックを踏まえ、何か改善策がないか検討してみます。
ここでのご指摘の意図を完全に理解しきれていません。画像とブログタイトルの下をスクロールすると、ヘッダーがタイトルやパンくずリストを含むように切り替わるようになっています。ただ、おっしゃる通り、ページの最上部ではそれが特に明確ではない点はご指摘の通りです。これも頭に入れておきます。
これらは本コンポーネントの範囲外となります。カテゴリビューについては、こちらを参照してみてください: Topic List Thumbnails
「いいね！」 2
sebastianh
(Rebastion)
106
フィードバックをありがとうございます ほとんどの点は解消されたと思いますし、カテゴリの説明も今では確認できます。以前見えなかった理由はわかりませんが、コンポーネントに関係しているのかと思いました。引き続き試行錯誤し、後ほどさらにフィードバックを投稿します。素晴らしいお仕事ですね！
「いいね！」 3
画像がブログ記事のヘッダーに「移動」された後に残る余白が、上部の余分なスペースの原因ではないかと考えています。これにより下部にスペースが増えるのではなく、単に空いた状態になっているのです。
しかし、実際の問題に気づきました。そのようなブログ記事へのリンクを他のトピックに投稿すると、サムネイルが表示されません。こちらをご覧ください
「いいね！」 1
sebastianh
(Rebastion)
108
以下は私が意図していることを示すスクリーンショットです：
「いいね！」 2
tshenry
(Taylor)
109
画像アップロードリンクと最初の段落の間に改行を省略したことが原因だと、私はかなり確信しています。以下の形式に合わせて編集してみてください。
<b>while</b> 世界中には投稿やブログ、共有、ツイートなどを行うのに十分なスペースがありますが、スパゲッティ・ウェスタンについて皆さんとアイデアを交換する私の一番のお気に入りは、このフォーラムです。何人かの方は数年前に行われた取り組みを覚えているかもしれません。それは「Planet Spaghetti Western」と呼ばれており、インターネット上のあらゆるスパゲッティ・ウェスタン関連のブログから投稿を自動的に集約し、ダイジェスト形式で提示するというブログを作るというアイデアでした。技術的にはかなり複雑で、結局のところそれに見合う価値がなかったため、私はそれを停止せざるを得ませんでした。
これでうまくいけば、OP（最初の投稿）にその要件について追記します。
「いいね！」 3
sebastianh
(Rebastion)
110
こんにちは。確かに、それによりマージンが少し縮まりますね、ありがとうございます。エディターでは全く逆の操作をしていました：画像とテキストの開始部分の間のスペースを最小限に留めることでした。
「いいね！」 1
両方の問題がアップデートで解決したことを喜んでお伝えできます 
また、機能的だけでなくインスピレーションとしても本当に素晴らしいコンポーネントを提供してくださり、心から感謝申し上げます 
