テーマPaypal Vermilionをいじくる(2)

Vermilionのスタイルシート変更

商品ページの商品詳細(説明文)の文字が小さい

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

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

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


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

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

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

  • このエントリーをはてなブックマークに追加