画像の配置とグリッド

Lilly · 2023 年 7 月 13 日午後 5:10


	概要	コンポーザーのツールバーに画像グリッドと配置ボタンを追加します
	リポジトリ	https://github.com/Lillinator/image-alignment
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者の方へ	Discourseテーマの使用に関する初心者向けガイド

← “repoName” と “repoURL” を自動インストールボタンに入力してください →

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

← このテーマ/コンポーネントを1〜2文で説明してください →

このテーマコンポーネントは、新しく実装されたグリッドタグを使用して、投稿コンポーザーのツールバーに画像を左または右に配置するためのボタン、中央揃え、または複数の画像をグリッドに配置するためのボタンを挿入します。グリッドは、画像の数と各画像の寸法に応じて自動的にサイズ調整され、より大きなアップロードされたバージョンへのリンクも提供されます。ボタン/配置機能は、1つの投稿で複数回使用して、さまざまなレイアウトを作成できます。デスクトップとモバイルの両方のビューで機能します。
使用するには、必要な画像配置ボタンをクリックしてから、結果のタグの間（コンポーネント設定で編集可能なプレースホルダーテキストでマークされています）に画像をアップロードします。

このコンポーネントのグリッド部分は、アップロードされた画像用であり、画像リンク用ではないことに注意してください（他の配置オプションはリンク画像でも機能します）。 @Steven の便利な MD Composer Extras コンポーネントから基本的なコードフレームワークの一部を借用しました。

やることリスト：各ボタンに適切なアイコンセレクターを追加します。

← スクリーンショット（該当する場合）を追加してください →

スクリーンショット

コンポーザーツールバーのグリッドボタン（グリッドコード例付き）

画像グリッドの例

コンポーザーツールバーの右揃えボタン（右揃えコード例付き）

テキストの右側に画像を配置

コンポーザーツールバーの左揃えボタン（左揃えコード例付き）

テキストの左側に画像を配置

コンポーザーツールバーの中央揃えボタン（中央揃えコード例付き）

中央揃えされた画像（テキスト付き）

Lilly · 2023 年 7 月 13 日午後 5:32

画像を中央揃えするためのボタンを追加しました。

piffy · 2023 年 7 月 13 日午後 8:20

素晴らしいツールですね！エディターではどのような見た目になりますか？

Lilly · 2023 年 7 月 13 日午後 8:51

@piffyさん、ありがとうございます！

ツールバー付きのコンポーザー／エディタのことでしょうか？それなら、グリッドの例がある最初のスクリーンショットになります。画像周りの他の配置コードを使ったエディタのスクリーンショットを追加します。

thoka · 2023 年 7 月 14 日午前 5:43

Image Alignment の解決策をありがとうございます

Heliosurge · 2023 年 9 月 13 日午後 7:47

素晴らしいコンポーネントです！まさにこのような質問をしようとしていました！

貴重なアドオンを作成するあなたはロックスターです！

Lilly · 2023 年 9 月 13 日午後 7:58

ありがとうございます、ダン。お褒めの言葉に感謝します。お役に立てて嬉しいです

Heliosurge · 2023 年 9 月 14 日午前 1:12

どういたしまして。例えば、左揃えを太字で表示するにはどうすればよいですか？マークダウンを試しましたが、マークダウンコードが表示されます。

では機能しますが、標準の太字は

**テキスト**

では機能しないようです。

Lilly · 2023 年 9 月 14 日午前 1:42

@Heliosurge さん、どういう意味かよくわかりません。

Heliosurge · 2023 年 9 月 14 日午前 3:18

以前試したときはうまくいかなかったのですが、申し訳ありません。何が変わったのかわかりません。これは素晴らしいです、ありがとうございます。

Heliosurge · 2023 年 9 月 14 日午前 4:34

複数の画像を使用している場合、このようになります。

このコードから。各画像に情報を固定するにはどうすればよいですか？ショーンの情報は2番目の画像の横にあるべきです。

どうすれば修正できますか？

Lilly · 2023 年 9 月 14 日午前 4:49

テキストブロックと2番目の\u003cdiv-data-theme...\u003eタグの間に、適切な間隔が空くようにHTMLタグ\u003cbr\u003e\u003cbr\u003eを挿入してください。時間があるときに、ハードリターンか何かをプログラムします。

Heliosurge · 2023 年 9 月 14 日午前 5:22

テキストが適切な画像と揃うまで
の数を追加します。

ご協力いただき、ありがとうございました。素晴らしい#theme-component です！

Canapin · 2023 年 9 月 14 日午前 7:04

ウィンドウサイズによってコンテンツの高さが変わるため、これは信頼性の低い方法だと思います。

任意のコンテンツが横にある場合にフロートをクリアするのは難しいです。ここには明白な解決策があるとは思えません…^[1]

WordPressエディターでも長らく問題でした。

人々は、前のフロートをリセットするためだけに clear: both; を持つ要素を使ったハッキーな方法に頼りがちです。

don が現れるまで ↩︎

Lilly · 2023 年 9 月 14 日午前 7:07

ええ、私もその方法は好きではありません。ホワイトスペースプロパティソリューションを試すことを考えていました。最終的には、配置された画像が別々の投稿である場合に最もよく機能します。残念ながら、テーブル内の画像もあまりうまく機能しません。

don が現れるまで ↩︎

Canapin · 2023 年 9 月 14 日午前 7:15

フロート以外の解決策も検討できるかもしれません。

float を flex に置き換えてみました… 深くは掘り下げていませんが。

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    justify-content: flex-end;
}

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    flex-direction: row-reverse;
}

あるいはグリッドレイアウトについて調べるのはどうでしょうか？それについては何も知りませんが。私のCSSの知識は数年前のものです。

Lilly · 2023 年 9 月 14 日午前 7:17

ハハ、グリッドオプションはこのテーマコンポーネントの一部です

私のものも間違いなく古いと思います .

それは何ですか？クッキーですか？ジャガイモか団子か、何らかのビスケットか分かりません。

Canapin · 2023 年 9 月 14 日午前 7:24

昨日、自家製のあんこを詰めた大福餅を作りました。

Lilly · 2023 年 9 月 14 日午後 3:23

flex align プロパティのソリューションを試しましたが、一貫して機能するものを見つけることができませんでした。ただし、使用可能な回避策は見つかりました。各画像とテキストのセクションをブロック引用にすると、それらが分離されます（ただし、テキストの引用書式設定が含まれます）。

エディター/プレビューア：

結果：

Canapin · 2023 年 9 月 15 日午後 2:46

これは、Discourse では <blockquote> に clear: both; が含まれているためです。

トピック		返信	表示
Introducing image grids in posts Announcements new-feature	42	6833	2025 年 7 月 31 日
Image Alignment Feature	11	11454	2021 年 11 月 2 日
Centering images within a topic and a slider for images Support	6	592	2025 年 8 月 4 日
Image comparison slider Theme component	27	3186	2025 年 10 月 17 日
Masonry Image Gallery Theme component	60	7141	2024 年 3 月 20 日

画像の配置とグリッド

スクリーンショット

では機能しますが、標準の太字は

関連トピック