*

メーカー小売希望価格や通常価格に打ち消し線を引く(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

関連記事

売れてる本の表紙デザイン

売れている本は表紙デザインが秀逸

ショッピングカートを作りたい! APIを使えるようになりたい! マッシュアップサイトを作

記事を読む

no image

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

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

記事を読む

EFO

CVRアップのためのEFO5つのテクニック

EFO(エントリーフォーム最適化)のHTML、CSS等の技術情報。 1.入力フォームの拡大 通常

記事を読む

CSSでレイアウト

ショップページをCSSでレイアウトするコツ

TABLEに慣れてるるので、レイアウトもついついTABLEを使ってしまいます。でも、そろそろCSSで

記事を読む

no image

まだまだ売れるホームページビルダー20!

「通販サイト作成 ホームページビルダー20」というキーワードでご訪問。 ホームページビルダーっ

記事を読む

カスタマイズ

WEB MART(KentWeb)カスタマイズ

WEB MART CGIの続き。購入は最低限のスッキリ3ステップなので、カスタマイズもしやすく、かつ

記事を読む

自分で作成

「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイトを作りたい。」という方へのアド

記事を読む

EFO

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

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

記事を読む

CPI

レンタルサーバーの時代はもう終わった

レンタルサーバーを借りてネットショップを作ったりホームページを作ったりしたい人が、2004年に100

記事を読む

jQuery外部ファイル

外部HTMLファイルをjQueryで読み込んでも表示してくれない2つの原因

古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどで

記事を読む

Adsense

Adsense

ニッチジャンルでSEO
ニッチなジャンルで検索結果の1位を狙う方法

「マニアックでニッチなジャンルでSEOを施策し検索結果の1位を狙ってみ

逆境の中で
逆境の中で破壊的改革はできるのか

どんな業界も栄枯盛衰ですね。かなり前から「若者の自動車離れ」というキー

イベントこじつけ
売り上げアップの秘訣の1つは季節のイベントにこじつけたキャンペーン

間もなく3月ですが、3月のビッグイベントは把握して準備されていますか?

常時SSL
がっくりorz…常時SSLを無料で利用できるプラン発見、灯台下暗し

つい2,3日前に、さくらインターネットを使った常時SSLオプションが、

常時SSL化
常時SSL化へ向けてのテスト体験

ホームページビルダーでPC用に作ったサイトが10年経って、レスポンシブ

→もっと見る

PAGE TOP ↑