CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

サムネイル下のテキストについて (No. 1822)

回答日: 2016-04-13

質問

不動産物件情報更新ツールについてですが、
一覧ページ article_list.html に表示されるサムネイルの下に
商品説明や価格などをセンタリングで表示したいのですが、
.item について text-align: center と指定しても、サムネイルから
かなりずれて表示されてしまいます。
各サムネイルに対して文字をセンタリングで表示させるには
どうしたらいいでしょうか。
投稿日時: 2016-04-13 14:53

回答

「すぐ使えるCGI」のご利用誠にありがとうございます。

■製品の確認
まず、お使いいただいている製品を確認させていただきたいのですが、下記ページからダウンロードできるサンプル製品をお使いですね。
http://sugutsukaeru.jp/support/386/

■CSS編集のヒント
具体的なCSS編集方法は、Webサイトの全体的な設定や、どのタグの中に要素を追加したかに依りますので実際にコードを拝見しない場合は何とも言えません。

ここでは、上記サンプルの初期設定の状況や、編集のヒントとなりそうな点をお伝え致します。

1. サムネイルのサイズと .item のサイズ

.item の幅は中に表示するサムネイルの幅に合わせてあります。
追加した要素が「サムネイルからかなりずれて」表示されるという事は、サムネイル同士の間に空間が空いてしまっているのかと思います。もしそうであれば、まずは .item の幅とサムネイルの幅の組み合わせが適当かご確認下さい。


2. 入れ子にする要素

初期設定では、.item の中にさらに <div> を配置し、テキストやサムネイルはそれら下層の <div> の中に入っています。
つまり、.item 自体に text-align: center を設定しても、それはその下の階層の <div> の中の要素までは及ばないのです。

もし、商品説明や価格を、これら下層の<div>の中、例えば <div class="description"> の中に配置したのであれば、text-align: center はこのクラスに設定して下さい。


以上の情報がお役に立てますと幸いです。

CSSの詳しい技術情報は、一般の参考書等をご参照下さい。
また、テンプレートの編集サポートは有料で請けたまわっておりますので、御見積をご希望の場合はお問い合せ下さい。
回答日: 2016-04-13