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

191

毎月号で記事を掲載しているサイトを作っています。それは簡単で、Markdownエディター（ここではStack OverflowのWMDエディターなど）を使用するのが最適だと思います。

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

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

html  css  markdown 
— ジェディジャ
ソース
2
「私は毎月発行される記事を発行する非営利サイトの友達を手伝っています」のない質問をしてみませんか？
— JGallardo 2014年
11
@JGallardo明確にしたいので、システムを完全に制御することはできませんでした。また、あらゆる種類のソリューションを購入することもできませんでした。質問の言い方を変えることもできたと思います。
— Jedidja 14年
1
、あなたは素晴らしい使用することができ値下げエディタに関するstackedit.io/editor#を、それで書くことが素晴らしいです:)
— AbdelHady
1
@AbdelHady（2008年に利用可能であった場合のみ）:)
— Jedidja
1
@iPython 2008年の質問は、4年後（2012年）の質問の複製になりますか？
— Jedidja

回答:

196

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

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

Continue markdown text...
— グレッグ・ヒューギル
ソース
43
不要なものを取り除き、タグにdiv終了スラッシュを追加してimg、それぞれをクリーンアップして標準化します。つまり、<< img style = "float：right" src = "whatever.jpg" />
— ma11hew28
代わりに、インラインインデントにdiv使用spanすることを好みます。段落全体の中央揃えdivは良いですし、シンプルな場合もあるでしょうp。
— 2012
21
これは、GitHubのような一部のサニタイズされたインタープリターでより効果的に機能します：<img align = "right" src = "whatever.jpg" />
— 2013
19
@MattDiPasqualeスラッシュを閉じる必要はありません。それはHTMLではなくXHTMLです。
— CaptSaltyJack 2013
ゴーストブログの投稿に画像を埋め込むためにこれを試しました。<div style = "float：right"> <img ...> </ div>を使用すると、画像の周りに次の段落が正しく流れましたが、<img style = "float：right" ...>は段落と画像を配置します並んでいる箱の中。
— Martin DeMello、2015年
58

純粋なMarkdownに、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;
}
— オジーチェコ
ソース
1
CSSはMkDocsディレクトリのどこに配置する必要がありますか？@YannDuran
— Ivan Huang
2
@IvanHuang は、MkDocsのドキュメントに従ってextra.cssファイルを追加し、CSSをそのファイルに追加することを確認してください。
— Yann Duran、
54

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

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

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

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

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

.callout {
    float: right;
}

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

— ゲルヴィッツ
ソース
あなたがこれをすべて書くときまでに：！花 {：.callout} <img src = "/ flowers.jpeg" class = "callout" />
— lfalin 14
1
私は同意しますが、Markdownは* MLリテラルでないユーザーのために選択されることが多いため、他の任意の構文よりもHTMLを優先する理由はありません。
— ゲルヴィッツ
4
（もちろん、「理由なし」は単純化しすぎです。最終的なHTMLレンダリングからエディターを近づけたり遠ざけたりすることを望むUXの理由はたくさんあります。あるいは、 'Markdownを選択して、レンダリング手法を抽象化しました。）
— gerwitz
33

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タグの誤用ではありません。また、追加の拡張機能も必要ありません。左右にフロートしたり、必要に応じてその他のスタイルを作成したりします。

— 身震い
ソース
1
まさに私が探していたもの。あなたは救世主です。追加したいのは、 `` `h1 h2 {clear：both}` ``なので、次の見出しが新しい行で始まる（画像と重ならない）
— bhar1red
私が探しているように見えますが... CSSを作成するにはどうすればよいですか？マークダウンでそれをどのように呼び出すのですか？
— トニーD
これも私のものと同じ素晴らしいソリューションです:)
— OzzyCzech
3
@OzzyCzech-確かに、ソリューションは画像の「alt」タグを誤用しますが、これはページのアクセシビリティ準拠に悪い可能性があり、このソリューションはsrcタグによる非侵入アプローチを使用します。
— 微動
24

CSSの埋め込みは不適切です：

![Flowers](/flowers.jpeg)

別のファイルのCSS：

img[alt=Flowers] { float: right; }
67
何？マークダウンコンテンツを変更するたびに、突然、外部ファイルを編集する必要がありますか？私には良い解決策のように聞こえません。
— ジョーダンライター2011
9
@JordanReiterここの誰もが、ロジックが多くの場所に分散/整理されている複数のファイルで構成されるプログラムを書いています。メンテナンス性を目的として行っています。なぜこれほど痛くてひどく違うのですか？
— z5h
8
Markdownを使用すると、プログラマー以外のユーザーがコンテンツを作成できます。サーバーで直接アクセスして編集する必要があるファイルに依存する必要はありません。別の例：データベースのフィールド名をコードにハードコードすることは完全に正常ですが、データベースのフィールドの値に基づいてハードコードするのは間違いif product.name == 'Tulips'です（つまり、値の安定性。誰かが変わるだけFlowersでFlower、突然そのイメージが見えなくなります。また、画像を追加するたびに電話をかける必要があります。
— ジョーダンライター
24
@cboettigこれは、altタグの重大な誤用です。画像を見ることができない人のための、画像のテキストによる説明となるはずです。
— Nathan Grigg、
5
この解決策について多くの人が泣いていることに驚いています。これは特定のホスティングサービスの問題を解決するために必要な美しいハックです。この美しいハックを与えたポスターは今なくなっており、代わりにコミュニティは泣き虫に任されています。
— アーロンロビンソン
22

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

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

または

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

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

— 学ぶ
ソース
2
私はこのスタイルがとても好きです。残念ながら、それはgithubでは動作しません（とにかくまだです）
— Eliot
3
私はGitHubでこの構文を試したところ、現在は機能しているようです。
— Ege Rubak 2014
6
これは興味深いハックですが、レイアウトにテーブルを誤用しています。1999
— 。– jxpx777 2015年
3
githubフレーバーマークダウンの場合は、で行を追加し|-|-|ます。これは、テーブルがあることをパーサーに伝え、最初の行はヘッダーです。例：goo.gl/xUCRiK
— Kayla
10

さらにすっきりするのp#given img { float: right }は、スタイルシートに入れるか、に入れ<head>てstyleタグで囲むことです。次に、単にmarkdownを使用し![Alt text](/path/to/img.jpg)ます。

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

markdownMarkdown内の属性の可能性。

— ピーターモーテンセン
ソース
1
私に働きました。私はgithubを使用していません。@raphoxに感謝します。
— Hugo Tavares
罰金を作品michelfのバニラ値下げPHPパーサ
— ローナン
2
これは一部のコンテンツ管理システム（Drupalなど）に含まれているMarkdown Extra機能ですが、Markdown自体には含まれていません。
— Tim
7

Learnvstの答えが好きだったテーブルが非常に読みやすい（Markdownを 1つの目的である）ため、テーブルを使用することについて。

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

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

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

— イカリート
ソース
7

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. */
}
— ジャメ
ソース
2

グレッグが言ったようにがように、MarkdownにHTMLコンテンツを埋め込むことができますが、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コンテンツでもっと多くのことができます...（この特定のケースでは、imgdivでタグをラップすると、他のテキストがイメージに対してラップされなくなります...これは単なる例です）が、MarkdownのポイントはIMHOです CSS / HTMLの内外に技術的な知識を持たない人が入り込むことを望まないということです。ページをラップするCSSコンテンツをできるだけ汎用的でクリーンなものにするかどうかは、Web開発者次第です。ここでも、編集者はそのことを知る必要はありません。

— 略奪
ソース
1

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

<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">
— ズハ・カリム
ソース
私はこれを試しましたが、現在は機能しています。画像は整列していますが、HTMLテキストは表示されます。
— フィザカーン2018
-16

最も簡単なのは、イメージを中央タグで囲むことです。

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Markdownで行うことは何でもここでテストできます- ://daringfireball.net/projects/markdown/dingus

もちろん、<center>廃止される可能性もありますが、それは簡単で機能します。

— ヨーヨー
ソース
1
OPが正しい配置を要求していることに気づきました。この答えに出くわしたときに、画像を中央に配置しようとしていました。
— ヨーヨー
14
いいえ、使用しませんcenter。
— ジョーダンライター
12
私は実際に@yoyoを支持<center>するつもりです—意味があります。HTMLはコンテンツのみを記述することになっているため、HTMLからは非推奨になりました。スタイルはスタイルシートにある必要があります。ただし、Markdownには別の目的があります。テキストメッセージを伝えるために必要な十分なスタイルを含め、残りはレンダラー/サイトに任せることです。<center>CSS widths、floats、margins…を考えるよりもはるかに自然なようです。Markdownパーサーに<center>タグを適切なCSSで裏付けられた要素に置き換えて、現在の段落をインテリジェントに理解する方法と同様です。
— Slipp D. Thompson 2012
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.