こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

wordpressでキャプション内で改行するには

どなたか教えてください。

wordpressでサイトを作っているのですが、
photospaceというプラグインで写真とその説明文を表示するページを作成中です。

写真に説明文を表示させるのに、画像にキャプションを表示させているのですが、
キャプション内の文章の改行や文字揃えなどは可能でしょうか。
現状は文章が右揃えで羅列されています。
<br>タグはそのまま文字列として表示されてしまい、ダメでした。

方法があれば教えてください。
もしくは、ギャラリーページに、写真を表示させると同時に、長めの説明文が表示できる方法(プラグインなど)があれば教えていただきたいです。
よろしくお願いいたします。

投稿日時 - 2014-02-17 17:00:40

QNo.8479077

困ってます

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

例えば、HTMLが次のような場合・・・
>写真に説明文を表示させるのに、画像にキャプションを表示させているのですが、キャプション内の文章の改行や文字揃えなどは可能でしょうか。
 white-space:pre;が抜けている。改行は\Aです。

 また、次のようにきちんとマークアップされているなら
<div class="figure">
 <img src="" width="" height="" alt="">
 <div class="figcaption">
  <p></p>
  <p></p>
 </div>
</div>
HTML5でしたら
<figure>
 <img src="" width="" height="" alt="">
 <figcaption>
  <p></p>
  <p></p>
 </figcaption>
</figure>

ならそれぞれ、
div.figure{psition:relative;}
div.figure div.figcaption{display:none;}
div.figure:hover div.figcaption{position:absolute;top:-10px;left:0;background-color:white;width:20em;padding:0.5em 1em;}


figure{psition:relative;}
figure figcaption{display:none;}
figure:hover figcaption{position:absolute;top:-10px;left:0;background-color:white;width:20em;padding:0.5em 1em;}

HTMLさえきちんと書かれていればいかようにも出来ます。

投稿日時 - 2014-02-17 18:02:50

あなたにオススメの質問