*

ショップサーブオリジナルページへのカートボタン他

公開日: : 最終更新日:2018/05/18 CSSやHTML、CGI

この記事は約4分で読むことができます。

オリジナルページ物忘れがひどくなるのは年齢のせい?

たま~にHTMLやCGIをいじってページを作るのですが、とにかく忘れているんですよね。検索すれば何でも出てくるのですが、記憶しておくに越したことはないです。

というわけで、今日忘れていたこと2つを復習して記憶に定着させたいと思います。ただし、記憶が定着しやすいのは、寝る直前のことだとか。ん~夜はまだまだ先だ。

ショップサーブカートボタンをオリジナルページへ埋め込む

ショップサーブのオリジナルページが作成できる機能を使って、スマホ用ショッピングサイトを作っています。というのも、ショップサーブのモバイルのあれ、使いにくいんですよね・・・ま、HTMLわからない人にはいいんですが、HTMLのすいも甘いも知り尽くすとちょっとね。

さて、カートタグです。通常は一行じゃないんです。<form>はいくつかのタグのセットなんで、通常のHTMLやCSSより覚えにくいです。リンクだけでもいけるんですが、これだと数量やオプションの選択ができない。にするとボタンがダサすぎる。

調べてみると「CSSを使ってボタンを画像化する方法」紹介されていました。「これはカッコいい!CSSでこんなことができるんだ!」と大喜びで採用しようとしたのですが、何度やってもうまくいかない・・・原因不明。

結局、<input type=”image” src=”./****.jpg”>という昔ながらの方法にしました。なぜだ・・・

画像のテキスト回り込み

つい「iimg align=”left” hspace=”2″」なんてやってしまいます。これでも一応表示はされるけど「終わったタグ」なんで、できれば使いたくない。最新のHTML5で行きたいって思うから時間がかかってしまいます。

さて、テキストの回り込みは「float:left」を使います。これだけでは画像にテキストがべたっとくっついて見栄えが悪いので余白を作ります。CSSはタグに直接書く方法と外部ファイルに書く方法がありますが、今回は直で書きます。

こんな感じです。

<img src=”./***.jpg” style=”float:left;margin-right:1em;>

で、これで終わらないのがCSSのややこしいところです。「float」の解除をしないといけないんです。画像にflaotさせたままにすると、後続のモノすべてが画像に回り込んじゃいます。

解除するところで、<p style=”clear:both;”>を入れます。bothと入れることで、leftもrightも解除できる仕組みでございますな。

ま、このように一度は憶えてるはずのことを、調べながら「ああ、こうだった!「」なんて作業をすすめるのもなかなか楽しいものです。



Adsense

関連記事

重ねるCSS

商品写真の上に文字や画像を重ねるCSS

初めての沖縄旅行にテンション上がりまくりの女の子ちゃん 商品写真に文字を入れる場合、基

記事を読む

エクセルCSV変換

もしもドロップシッピングのCSVファイルの列にあるカテゴリーを小分けにする方法

「そんなこと誰が知りたがっているのか!?」というような内容ですが、意外にいるかも? というわけ

記事を読む

メールフォームCGI

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

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

記事を読む

サイドナビ

yahoo! shopping サイドナビの編集

動画付き解説版できました~ デザイン設定で、「とりあえずお店らしく」と考えた場合、ヘッダー

記事を読む

no image

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

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

記事を読む

カウントダウン

繁盛感の演出~注文が入りました!自動スクロール~

楽天ショップなどでよく見かける「注文が入りました!」逆スクロールをショップサーブに導入しよう!企画?

記事を読む

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

レスポンシブWEBデザイン

レスポンシブ・デザインへの移行に際し学んだこと(その1)

自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経

記事を読む

EFO

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

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

記事を読む

no image

ショップサーブを予約システムとして転用してみる方法

ショップサーブといえば、物販用のネット販売システムですが、これを予約システムとして使えるのではないか

記事を読む

Adsense

Adsense

ECサイト運営者の思い込み
ECサイト運営者の間違った思い込み。。

「コンテンツマーケティング」と言う言葉もすっかり馴染みましたが、その重

メディアEC
ネットショップの基本「メディアEC」

ここ数年、コンテンツマーケティングとかメディアECという言葉が取り

no image
「フレーミング効果」の事例や活用方法

ネット販売をするなかで、◯◯の法則だの、△△効果など、よく使います。キ

常時SSL
常時SSL化(https://)進めていますか?

ショップサーブのクライアントさんは少なめですが、すでに関わっていな

ネットショップは電話対応しない
「ネットショップは電話対応しないのが基本」の法則

ネットショップが電話を受け付けない3つの理由といった定番記事があります

→もっと見る

PAGE TOP ↑