【研究所公式】ショップできすぎくん編集が上手くいかないときはブラウザを変えてみるのも手

2016年11月16日

穏やか暮らし研究所

URLをコピーしました！

こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。

Tour of Alberta 2016 / IQRemix

どろっぷしっぴんぐ研究所では12月1日に開講するドロップシッピング3ヶ月集中講座『研究生制度』の募集を開始しました。

□12月1日開講！ドロップシッピング3ヶ月集中講座『研究生制度』

『研究生制度』は全国どこからでも受講できる
ドロップシッピングのショップ運営ノウハウが学べる通信講座です。

スキルに応じて3つのコースからお選びいただけます。

・ステップアップコース（売上経験があり月商10万円以上が目標の方向け）
・ノウハウ初級コース（ショップが作成でき、初売上達成を目指す方向け）
・ショップ作成入門コース（パソコン操作に不安がある初心者の方向け）

いずれのコースも先着順で定員に達しましたら締切りとなります。
お早めにお申込みください。

さて、今週の執筆者は岡田祐子さんです。

今回は、ショップできすぎくんの編集の際に、使っているブラウザによって書き出されるHTMLコードが異なってしまうというトラブルが出てしまった場合の対処方法についてです。

ショップできすぎくんで思うように編集ができないという経験がある方はぜひ参考にしてください。

ブラウザによって書き出されるHTMLコードが異なるショップできすぎくん編集

皆さま、こんばんは。岡田です。

ショップできすぎくんのページ編集機能では、文字を大きくしたり色を変えたりなどの文字修飾が、ボタン操作で簡単にできるのはよくご存じだと思います。

指定したとおりに表示されるよう、自動的にHTMLコードとCSSコードが書き出される便利な機能です。

でも、時たま思い通りにいかなくて、イライラした経験ありませんか？
もしかするとそのイライラ、ブラウザを変えると解決するかもしれません。

皆さんはブラウザ、何をお使いですか？

Internet Explorer、Google Chrome、Firefox、Safariなど、好みで選んでいる方もいらっしゃるでしょう。

また、PCを購入したときにインストールされていたソフトをそのまま、という方も多いのではないでしょうか。

実は、前回の記事ではHTML・CSSを習得する際の便利なツール、Internet Explorerの開発者ツール、Google Chromeのデベロッパーツールを紹介しましたが、初心者の方にちょっとハードルが高かったかなと、思っていました。

そこで、今回は初心者の方向けにショップできすぎくんのページ編集で利用できるHTML編集機能を例に、基本的なHTMLの説明をしようといろいろと試していた所、困ったことに気づきました。

ブラウザによって書き出されるHTMLコードが異なってしまうのです。
（使用したOSはWin7、各ブラウザは現時点での最新版）

文字色・文字サイズ・背景色を指定してみたら

「もしも」の３文字を、色を赤、文字サイズを32px、背景色を黄色の順に指定してみました。

その結果書き出されたHTMLコードは、Internet Explorer、Google Chromeでは

もしも

Firefoxでは

もしも

と差がでました。

ちなみに
color=”#ff0000″・・・・・文字色＝赤
size=”6″・・・・・文字サイズ＝6番目の大きさ（32px相当）
background-color: rgb(255, 255, 0)・・・・・背景色＝黄色
を表します。

それぞれの表示は？

Internet Explorer、Google Chromeでは、希望どおり32pxの大きさの赤い文字の「全体」が黄色い背景になりました。

ところが、Firefoxでは32pxの大きさの赤い文字の「下半分のみ」が黄色い背景となってしまいました。
これは書きだされたHTMLコードの順番に原因があります。

もし、文字色、文字サイズが先に指定された形

もしも

のようになっていれば、問題なく表示されます。

表示例はこちらのサンプルページをご覧ください

□ブラウザによる書き出されたコードの違い

まとめ

ショップできすぎくんのFAQでは動作環境としてはFirefox 最新版を推奨としています。

□「動作環境について教えてください。」よくある質問(FAQ)

しかしながら今回の検証では、Firefoxのみ問題がありました。
指定する項目、順番により差が出てしまうのかもしれません。

Enterキーによる改行をした時も、
タグが挿入されるもの、

タグまたはタグが挿入されるものとブラウザによって違いがありました。

すべてのパターンを検証したわけではないので断言できませんが、もし編集が思うようにいかないときは、ブラウザを変えてみるのも一つの方法と言えるでしょう。

———————————————————–
【今週の執筆者】岡田祐子

（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。

□ホームページ制作｜エヌツーエヌコミュニケーション

□ぐるめ通販トライアルのブログ
———————————————————–

それでは、次号もお楽しみに。

※この記事は2016年11月10日に配信した『どろっぷしっぴんぐ研究所公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。

メルマガのご登録はこちら