web-dev-qa-db-ja.com

マークダウンと画像の配置

私は毎月号の記事を発行するサイトを作っています。それは簡単で、Markdownエディター（Stack-Overflowの WMD oneなど）を使用するのが完璧だと思います。

ただし、特定の段落内で画像を右揃えにする機能が必要です。

現在のシステムでそれを行う方法がわかりません-それは可能ですか？

htmlcssmarkdown
163
Jedidja

MarkdownにHTMLを埋め込むことができるため、次のようなことができます。

<img style="float: right;" src="whatever.jpg">

Continue markdown text...
164
Greg Hewgill

多くのMarkdown「追加」プロセッサは属性をサポートしています。そのため、次のようなクラス名を含めることができます（PHP Markdown Extra）：

![Flowers](/flowers.jpeg){.callout}

または、代わりに（Maruku、 Kramdown 、 Python Markdown ）：

![Flowers](/flowers.jpeg){: .callout}

その後、もちろん、適切な方法でスタイルシートを使用できます。

.callout {
    float: right;
}

あなたの構文がこの構文をサポートしている場合、両方の長所が提供されます。埋め込みマークアップがなく、コンテンツエディタで変更する必要がないほど十分に抽象的なスタイルシートです。

50
gerwitz

純粋なマークダウンでちょっとしたCSS 3ハック :-)で素敵なソリューションを見つけました

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

image altが<または>で終わる場合、左側または右側のCSS 3コードフロート画像に従います。

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}
38
OzzyCzech

CSSの埋め込みが悪い：

![Flowers](/flowers.jpeg)

別のファイルのCSS：

img[alt=Flowers] { float: right; }
22
user142019

テーブルを使用して画像を垂直パイプ（|）構文に揃えることで、非常に怠け者になりたいです。これは、いくつかのMarkdownフレーバーでサポートされています（また、ボートが浮いている場合は Textile でもサポートされています）。

| I am text to the left  | ![Flowers](/flowers.jpeg) |

または

| ![Flowers](/flowers.jpeg) | I am text to the right |

最も柔軟なソリューションではありませんが、私の単純なニーズのほとんどに適しています。マークダウン形式で読みやすく、CSSや生のHTMLを覚える必要はありません。

20
learnvst

ALTタグとaltタグのCSSセレクターを使用した上記のメソッドの代替手段があります...代わりに、次のようなURLハッシュを追加します。

まず、Markdownイメージコード：

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

追加されたURLハッシュ#centerに注意してください。

CSS 3属性セレクターを使用してこのルールをCSSに追加し、特定のパスを持つ画像を選択します。

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

クラス名を定義するのとほとんど同じように、このようなURLハッシュを使用できるはずであり、一部の人々がそのソリューションについてコメントしたようなALTタグの誤用ではありません。また、追加の拡張機能も必要ありません。左右にフロートする場合や、必要に応じて他のスタイルで行う場合もあります。

18
tremor

さらにクリーンなのは、スタイルシートにp#given img { float: right }を入れるか、<head>に入れてstyleタグでラップすることです。次に、マークダウン![Alt text](/path/to/img.jpg)を使用します。

9
ma11hew28
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Markdown内の属性markdown可能性。

8
raphox

learnvst's answer は、テーブルが非常に読みやすいため（Markdownを書く目的の1つです）、テーブルを使用するのが好きでした。

ただし、GitBookのMarkdownパーサーの場合、空のヘッダー行に加えて、テーブルを認識して適切にレンダリングするために、その下に区切り線を追加する必要がありました。

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

区切り線には、少なくとも3つのダッシュ---を含める必要があります。

6
icarito

Pythonで実装する場合は、HTMLキー/値のペアとクラス/ IDラベルを追加できる 拡張子 があります。構文は次のとおりです。

![A picture of a cat](cat.png){: style="float:right"}

または、埋め込みスタイリングがボートを浮かせない場合、

![A picture of a cat](cat.png){: .floatright}

対応するスタイルシートstylish.css：

.floatright {
    float: right;
    /* etc. */
}
6
jameh

Greg said として、HTMLコンテンツをMarkdownに埋め込むことができますが、Markdownのポイントの1つは、CSS/HTMLマークアップに関する広範な知識（またはそのことについて）を必要としないことです。これが私がすることです：

Markdownファイルでは、すべてのwikiエディターに、すべての画像を次のように埋め込むように指示します。

'<div> // Put image here  </div>`

（もちろん、彼らは<div>が何を意味するのか知らないが、それは問題ではない）

したがって、Markdownファイルは次のようになります。

<div>
![optional image description][1]
</div>

[1]: /image/path

そして、ページ全体をラップするCSSコンテンツでは、イメージタグで何でもできます：

img {
   float: right;
}

もちろん、CSSコンテンツでもっと多くのことができます...（この特定のケースでは、imgタグをdivでラップすると、他のテキストが画像にラップされなくなります...これは単なる例です）私見Markdownのポイントは、潜在的に非技術的な人々がCSS/HTMLに出入りしたくないということです。 Web開発者は、ページをラップするCSSコンテンツをできる限り一般的かつクリーンにする必要がありますが、編集者はそのことを知る必要はありません。

2
abbood

私は同じタスクを持っていて、これを追加して画像を右に揃えました：

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

画像を左または中央に揃えるには、

<div style="text-align: right">

と

<div style="text-align: center">
<div style="text-align: left">
1
Zuha Karim