*

メーカー小売希望価格や通常価格に打ち消し線を引く(CSS)

公開日: : 最終更新日:2017/01/07 CSSやHTML、CGI

価格に打ち消し線

打ち消しと言えば<s>だったのですが、今はCSSで書きます。

この画像のように、希望小売価格の数字と(税込)に打ち消し線を引きたいと思って、CSSの編集から「text-decoration:line-through」と入力して更新をしたのにいっこうに変化しません。

これはバグ(エラー)だな。しっかりしてくれよEストアーさんよ!

と思ったら、打ち消し線はそこで設定するのではなく別の箇所でした。

「デザイン設定」→「商品詳細ページの設定」と進みます。

んで、これ。
打ち消し線の設定

あるんやないか~い!

わかりにく・・・

ちなみに、せっかくなので、テキストに付ける線関係のCSSについて復習しましょう。

1.text-decoration:none(何にもなし)

何もなし

2.text-decoration:underline(下線)

ここテストに出るよ。

3.text-decoration:line-through(打ち消し線)

小売り希望価格:4億3000万円

4.text-decoration:overline(テキストの上に線)

これいるか?

5.text-decoration:blink(チカチカ点滅)

ちょっと目立たせたいときに
(※点滅で見えている方は、そのブラウザは古すぎです。Chromeに変えましょう。)

さらに、マニアックなことををやってしまいましょう。CSSにはない二重線での打ち消し方法です。意外に簡単で、画像で消すというものです。価格の背景に打ち消し用の画像を入れてしまいます。

.line2
{
background-image:url(画像のURL);
background-repeat:repeat-x;
background-position: center;
}

ただし、このパターンでの、ショップサーブのCSSカスタマイズはちょっとむずかしいのでカット!



Adsense

関連記事

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

フォームメールで売上UP

高機能フォームメールを活用して売上アップ

問い合わせのフォームも、使い方によっては受注数のアップにつながるケースがあります。フォームから受注と

記事を読む

yahooトップテンプレート

yahoo! shoppingトップページ用HTMLテンプレート

yahooさんが用意してくれてもいいのに、無いのがトップページ用のカテゴリー一覧のテンプレート。無い

記事を読む

CGI、PHPフリーのプログラマーの(集客)マーケティング・アイデア

ネットショップを自作する人が超マニアックであるように、レスポンシブ対応の掲示板を探している人

記事を読む

ウェブテクニック

ショップオーナーが知っておくと役に立つWEBテクニック

ネットショップを始めるのにHTMLやCSSとかの知識は、とりあえずいらないです。アプリを借りたなら、

記事を読む

no image

初心者は安易にワードプレスを使うな

脆弱性(ぜいじゃくせい)の話です。脆弱性とは、簡単にいえば弱点のこと。その弱点をつかれても、軽い痛み

記事を読む

EFO

ショッピングカートCGI復活か

10年前は全盛だったショッピングカートCGIですが、もはや絶滅かという域に達しつつあります。

記事を読む

メールフォームCGI

レスポンシブ対応メールフォームCGIを設置した

ショップサーブのメールフォームが気に入らないので、レスポンシブ対応の無料CGIメールフォーム

記事を読む

ハイかイイエか!

するするスクロールするページの作り方

久しぶりにJavascript入りのページを作成。 と言うより、開業時の許認可の必要の有無」が

記事を読む

モーダルウィンドウ

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィン

記事を読む

Adsense

Adsense

AIDMAの法則
消費者の購買決定プロセスAIDMAの法則の例

消費者が商品を購入するまでの心理を5つのステップに分けたのがAIDMA

顧客ランクは3つで良い
顧客ランクって3つくらいでいいんじゃないの?

ショップサーブの顧客ランク設定を見て思ったんですが、ランク無し

シェアの逆転
シェアの逆転

今、ネットショップ運営者にとってブラウザと言えば、Chromeが定番じ

タイムマネジメント
今こそ、受験生から副業希望のビジネスマン、OLまでタイムマネジメントを

前回の記事「副業で成功する人はKPIを使っているのかもしれない

KPI
副業で成功する人はKPIを使っているのかもしれない

KPIとは「key performance indicator」の略で

→もっと見る

PAGE TOP ↑