web-dev-qa-db-ja.com

Markdown Jekyllで画像キャプションを使用する

私はGithubでJekyllブログをホストしており、Markdownで投稿を書いています。画像を追加するときは、次のようにします。

![name of the image](http://link.com/image.jpg)

これにより、テキスト内の画像が表示されます。

ただし、画像の下または上に表示されるキャプションを追加するようにマークダウンに指示するにはどうすればよいですか？

githubmarkdownjekyll
109
orschiro

プラグインを使用したくない場合（つまり、最初にサイトを生成せずにGitHubに直接プッシュできる）、image.htmlという名前の新しいファイルを_includesに作成できます。

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

そして、マークダウンから画像を表示します：

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
85
IQAndreas

これは古い質問であることは知っていますが、画像キャプションを追加する方法はまだ共有すると思いました。 captionまたはfigcaptionタグを使用することはできませんが、これはプラグインを使用しない単純な代替手段です。

マークダウンでは、キャプションを強調タグでラップし、次のように新しい行を挿入せずに画像の下に直接配置できます。

![](path_to_image)
*image_caption*

これにより、次のHTMLが生成されます。

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

次に、CSSで、ページ上の他のemタグに干渉することなく、次のセレクターを使用してスタイルを設定できます。

img + em { }

画像とキャプションの間に空白行があってはならないことに注意してください。代わりに次のように生成されます。

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

em以外の任意のタグを使用することもできます。タグがあることを確認してください。そうしないと、スタイルを設定できません。

237
Andrew Wei

これにはテーブルを使用できます。正常に動作します。

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

結果：

enter image description here

45
Bilal Gultekin

キャプション付きの画像に使用する正しいHTMLは、 <figure> WITH <figcaption> です。

これに相当するMarkdownはありません。そのため、時々キャプションを追加するだけの場合は、Markdownドキュメントにそのhtmlを追加することをお勧めします。

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Markdown仕様では、このような場合にHTMLを埋め込むことを推奨しています なので、うまく表示されます。また、プラグインをいじるよりもずっと簡単です。

他のMarkdown-y機能（テーブル、アスタリスクなど）を使用してキャプションを作成しようとしている場合、Markdownの使用方法をハックしているだけです。

33
bryanbraun

pandocをコンバーターとして使用してみてください。 これはjekyllプラグインです これを実装します。 Pandocは、alt属性と同じ図のキャプションを自動的に追加できます。

ただし、githubではセキュリティのためにGithubページのプラグインを許可しないため、コンパイル済みのサイトをプッシュする必要があります。

4
Chongxu Ren

この質問には、2つの意味的に正しい解決策があります。

  1. プラグインを使用する
  2. カスタムインクルードの作成

1.プラグインを使用する

これを行うプラグインをいくつか試しました 私のお気に入りはjekyll-figure です。

1.1。インストールjekyll-figure

jekyll-figureをインストールする1つの方法は、プラグイングループのGemfileにgem "jekyll-figure"を追加することです。

次に、ターミナルウィンドウからbundle installを実行します。

1.2。 jekyll-figureを使用

マークダウンを{% figure %}および{% endfigure %}タグで囲むだけです。

キャプションは開始{% figure %}タグに挿入され、マークダウンでスタイルを設定することもできます！

例：

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3。スタイルを整える

画像とキャプションが意味的に正しいので、次のようにCSSを適用できます。

  • figure（画像とキャプションの両方）
  • figure img（画像のみ）
  • figcaption（キャプションのみ）

2.カスタムインクルードの作成

image.htmlフォルダーに_includesファイルを作成する必要があります、および MarkdownでLiquidを使用して組み込みます。

2.1。 _includes/image.htmlを作成します

_includesフォルダーにimage.htmlドキュメントを作成します。

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2。 Markdownに、Liquidを使用して画像を含めます

キャプション付きの/assets/imagesの画像：

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

絶対URLを使用した（外部）画像：（src=""をsrcabs=""に変更）

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

クリック可能な画像：（url=""引数を追加）

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

キャプションのない画像：

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3。スタイルを整える

画像とキャプションが意味的に正しいので、次のようにCSSを適用できます。

  • figure（画像とキャプションの両方）
  • figure img（画像のみ）
  • figcaption（キャプションのみ）
3
Robin Métral

トップ投票の回答 についての少しのリフは、クラスを何かに追加するためにjekyll構文を使用し、それをそのようにスタイルすることです。

したがって、投稿では次のようになります。

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

そして、CSSファイルで次のようなことができます。

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

見栄えが良くなります！

3
Cory

Andrewの@ andrew-weiの回答は素晴らしい作品です。また、何をしようとしているかに応じて、いくつかを一緒にチェーンすることもできます。これにより、たとえば、キャプションのさまざまな部分に、改行、太字、斜体のalt、タイトル、キャプションの画像が表示されます。

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

次の<img>マークダウンで：

![description](https://img.jpg "description")
***Image:*** *description*
2
Matthew Bennett

最も簡単な（しかし最もきれいではない）ソリューションは次のとおりです。明らかにスケーリングの問題があるので、画像サイズを簡単に変更できるように、HTMLで例を示します。これは私のために働いた。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
0
ndimhypervol