これは私を絶対に狂わせています。私はCSSの経験があまりないので、CSSが単純なものであることを望んでいます。
「TheMorningAfter」をテーマにしたWordpress2.9.2を実行しています。
ページの中央にキャプションを並べて中央に配置した2枚の小さな写真を表示したい投稿を書き込もうとしています。
画像を表示するために使用しているHTMLコードは次のとおりです。
[caption align="alignnone" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
[caption align="alignnone" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]
キャプションの整列に「aligncenter」と「alignleft」を使用してみました。「alignleft」を使用すると、画像は完全に整列しますが、ページの左端まで表示されます。「aligncenter」を使用すると、写真は中央に表示されますが、積み重ねられています。
私の最初の考えは、以下を使用して画像をdivでラップすることでした。
<div style="text-align:center;">image code</div>
しかし、それは機能しません。さて、そのように中央に配置されたdivでラップし、[caption]タグを省略すると、機能しますが、キャプションが必要です。これらのキャプションタグは、Wordpressによってクラスwp-captionの独自のdivに変換されます。また、親を中心としたdivラッパー内の独自のdivで各個別の画像をラップしてみました。
style.cssの関連部分は次のとおりです。他に情報が必要な場合はお知らせください。サポートが必要な場合は、最寄りの橋からのジャンプを延期します。
ありがとう！！
Style.css：
.aligncenter, div.aligncenter { display: block; margin: 14px auto; }
.alignleft { float: left; margin: 0 14px 10px 0; }
.alignright { float: right; margin: 0 0 10px 14px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; }
PS-Wordpressで利用できるギャラリー機能を知っていますが、それを避けたいので、divでラップしてもキット全体が中央に移動しない理由を理解したいと思います。
最後に、完全を期すために、上記のdivラッパーと画像コードを使用してロードしたときのページのソースを次に示します（Wordpressがキャプションタグをどのように変換するかを確認できます）。
<div style="text-align:center;">
<div class="wp-caption alignnone" style="width: 160px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>
<p class="wp-caption-text" style="text-align:center">Protein rest</p>
</div>
<div class="wp-caption alignnone" style="width: 153px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>
<p class="wp-caption-text" style="text-align:center">Saccharification rest</p>
</div>
</div>