商品ページの商品詳細(説明文)の文字が小さい
Welcartで商品を登録し、商品ページを確認してみる。
商品名表示位置や、商品名の文字の大きさ、カートボタンの位置は私好みでOK!
商品説明文(商品詳細)は、なんか外国のカタログっぽくて良い。
が、文字が小さいなぁぁ。
この世に生を受けて、まもなく半世紀の私には、ちと辛い大きさです。
調べてみると11pxのよう。
う~ん、ここは高齢者の為にも文字サイズを大きくしてみよう。
テーマオプションには変更メニューは無いので、ここはCSSをいじくります。
※cssファイル、phpファイルを変更する場合は必ずバックアップをとって下さい。
FTPソフトで接続した自分のPCにフォルダ毎落とせばよいです。
今回はWPインストールフォルダ内の/wp-content/themes/にあるpaypal_vermikionフォルダを丸ごとPCにダウンロードします。
さて以下から変更方法です。
usces_cart.cssを変更します
「メニュー」→「外観」→「テーマの編集」を開きます。
画面右上の「編集するテーマを選択」で「peypal vermilion」をプルダウンから選んで「選択」
次に、テンプレート一覧のずーと下にあるスタイルシート一覧の中のusces_cart.cssをクリック。
299行~309行あたりにある
.entry_block .item_page_title {
font-size: 12px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}
.entry_content {
width: 100%;
font-size: 11px;
}
を変更します。
.entry_block .item_page_titleは商品ページのタイトル部分
(オリジナル)
.entry_block .item_page_title {
font-size: 12px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}
(変更)
.entry_block .item_page_title {
font-size: 17px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}
フォントサイズを12pxから17pxに変更しました。
残りはそのままです。
.entry_contentは商品ページの商品詳細部分
(オリジナル)
.entry_content {
width: 100%;
font-size: 11px;
}
(変更)
.entry_content {
width: 100%;
font-size: 15px;
line-height: 1.8;
}
フォントサイズを11pxから15pxに変更しました。
そして行間の設定line-height: 1.8;を一行追加しました。
追加する場合、最後の } が無くなっていないか注意しましょう。
変更をしたら最後に「ファイルを更新」ボタンを押して、ページを確認です。
↓↓↓タイトル文(ブラウンの文字)が大きくなりました。
↓↓↓商品詳細の本文の文字が大きくなり、さらに行間を広げて見やすくなりました。
これで高齢者にも見やすい商品ページになった。かな?