WordPressテーマTCDのカスタマイズを研究するサイト

スマホ表示のトップページ記事一覧のスタイルの調整

Q.スマホでの記事ページのスタイルを調整したい

スマホ表示のアイキャッチ画像の大きさ、位置の調整、説明文の文字の大きさ、行間の調整について教えてください。

A.下記のcssファイルの該当箇所を編集します

編集するファイル:style_sp.css
編集する箇所:

.post_list .image { float:left; display:block; position:relative; width:▲▲%; }
.post_list .image img {  width:100%; height:auto; }

.post_list .desc_area { float:right; width:△△%; }
.post_list .desc_area .desc { line-height:●●●%; font-size:○○px; }
.post_list .read_more { background:url(img/common/arrow2.png)
no-repeat right 2px; padding:2px 22px 2px 0; float:right; }

アイキャッチ画像の大きさは▲▲の数値を調整します。大きくするとカラム落ちしますので、説明文の幅(△△%)も適宜調整する必要があります。
上段画像(横幅100%)、下段説明文(横幅100%)とする場合は以下のようにします。

.post_list .image { display:block; position:relative; width:100%; }
.post_list .image img {  width:100%; height:auto; }

.post_list .desc_area { width:100%; }

説明文の文字の大きさ→○○の数値の調整
行間の調整→●●●の数値の調整

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。