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;を一行追加しました。

追加する場合、最後の } が無くなっていないか注意しましょう。

変更をしたら最後に「ファイルを更新」ボタンを押して、ページを確認です。

↓↓↓タイトル文（ブラウンの文字）が大きくなりました。

↓↓↓商品詳細の本文の文字が大きくなり、さらに行間を広げて見やすくなりました。

これで高齢者にも見やすい商品ページになった。かな？