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%; }
説明文の文字の大きさ→○○の数値の調整
行間の調整→●●●の数値の調整
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！