*

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

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

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

たま~に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

関連記事

no image

全部の商品ページに同じパーツを表示せる方法

ショップサーブのような開業サービスを使うメリットは、何かと「一括」処理ができる点です。例えば、商品ペ

記事を読む

重ねるCSS

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

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

記事を読む

カートCGI

web shop構築に根強い人気。無料ショッピングカートCGI

Webshopと言えば、昔は、ショッピングカートCGIをよく使っていました。もちろん、今でも使え

記事を読む

サイドナビ

yahoo! shopping サイドナビの編集

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

記事を読む

メールフォームCGI

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

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

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

オンエアー

「今、店長います。」をON AIR画像を使って表示させる方法

確か、10年近く前の、日経MJ「にぎわう専門通販」という記事で取り上げられていたショップサーブユーザ

記事を読む

php無理

phpプログラミングは果てしないのであきらめた

「phpでプログラミングができたらどんなにいいか。APIを使っていろんなことができるし。」という思い

記事を読む

no image

リアルタイム受注状況を表示させる方法(無料CGI提供)

楽天で良く見かけるリアルタイム受注状況の小窓(こんなやつ)ですが、ショップサーブにはその機能はありま

記事を読む

打ち消し線

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

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

記事を読む

Adsense

Adsense

貴重なセミナー終わるかも
貴重なセミナー終わっちゃうかもよ~

ショップサーブを運営するEストアーが、ネットショップの新規開業ユーザー

no image
QUESTの法則ランディングページ

ランディングページを作りるにあたり、消費者行動モデルはどれを適用するか

インスタグラムからのネット販売
インスタからのネット販売

「これ欲しい~」とメッセージもらったのがインスタのキャプチャ。ユーザー

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

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをい

ai
問い合わせの傾向から感じる流通の変化

最近問い合わせが増えてるって記事を書いたんですが、実は、もうひ

→もっと見る

PAGE TOP ↑