読者です 読者をやめる 読者になる 読者になる

webjob

ウェブ担当に役立つ情報を発信

楽天ショップのHTTPS化は2017年6月末まで!SSL化は必須です!

こんばんは!

今日も楽天ウェブ担当、がんばりました。

 

楽天モールのHTTPS化、どんどん進んでいますね。

 

 

 

楽天の各ショップは2017年6月末までに作業するように、とのことですが急いでおいたほうがよさそうです。

 

4月上旬、RMSchromeで使えなくなりました

 ↓対応方法はこちら↓

webjob.hatenadiary.jp

 

楽天ショップでのHTTPS化の方法

楽天ショップでのHTTPS化はとても簡単です。

 

HTMLに記入しているhttpアドレスをhttpsに変更するというもの。

 

注意点としては、iframeを使っている場合。

親がhttpsなら子もhttpsにする必要があります。iframeを使っている場合、要注意です。

※自動更新ツールなど使っている場合は、外注先との連携が必要です。

 

 

2017年4月17日現在、商品ページのHTTPS化ができていないようです。

商品ページのHTTP化が終わればサイト全体のHTTPS化を進めるのがよさそうです!

RMSがchromeではじかれた!→楽天HTTPS化で対応

こんにちは!

 

今日、楽天RMSでいつものように作業していたら、登録ボタンではじかれてしまいました。

 

なぜ?(忙しいのに!)

 

理由はHTTPS化に対応していないページがあったからでした。

 

楽天市場を運営しているショップは、iframeタグを使っているサイトがほとんどだと思いますが、iframeで読み込むページの中身もHTTPS化しないといけないようです。

 

楽天HTTPS化はもっと先じゃなかったのか?(3月の発表では2017年6月末までに全ての店舗でHTTPS化完了とのこと)

 

でも、まあしょうがないですね。

 

対応したことをメモしておきます。

 

楽天HTTPS化とは?

通常、サイトをHTTPS化するとなると大変な作業です。

  1. ウェブサーバーをセットアップ
  2. SSLソフトをインストール
  3. SSLサーバー証明書を取得

・・・

などなどいろんな作業が発生する上に、専門知識がないといけません。

 

ですが!

 

楽天ショップの場合、このすべてが楽天側での設定になるので、楽天ウェブ担当がやることはサイト内のタグのURLを変えるだけ。

 

楽天ウェブ担当が実際にやること

ページに記載しているタグを変更

HTML内の、

  • 画像(キャビネット、gold)
  • リンク(商品ページ、カテゴリーページ、gold)
  • javascript/cssファイルのリンクURL

http://→https://

に変更するだけです。

 

注意点①iframeも忘れずに

iframeで見せているページの中身も、https://に変更が必要です。

 

注意点②自動更新ページも忘れずに

自動更新システムを利用している場合も同様に、ページのURL・画像のURL・javascript/cssのリンクをhttps://に変更する必要があります。

外注業者に依頼しましょう。

 

注意点③

RMSで設定する、ヘッダーフッターレフトナビ等についても同様のことがいえます。

RMSではフルパスを記入しているのでHTTPSに変更が必要です。

 

ポイント

①ポイントは、https://●●.htmlのファイルは、その中身のタグもhttps://にすること!

 

②タグを変更した後は必ずブラウザで見え方を確認しておきましょう。

 

さいごに 

2年ほど前から、楽天偽サイトをよく見かけるなーと思っていましたが、ついに楽天もサイト全体をHTTPS化することが決まりました。

 

楽天だけじゃなく、他のネットショップも同様にHTTPS化が進んでいますね(Yahoo Shoppingはすでに対応)。

 

期限は2017年6月末までということですが、早めにやっていたほうがよさそうです。

 

ワードプレス、ログインURLがわからない

こんばんは!

 

ワードプレスで作ったサイトのログインURLがわからない・・・

 

そんな時はこちらのURLを試してみてください。

 

ワードプレスのログインURLはこちら

 

http://ワードプレスをインストールしているURL/wp-login.php

 

ログイン画面が表示されます。

 

 

 

webデザイナーのデザインアイデア

webデザイン、うまく進まないなーというときは他のサイトを見て参考にしたり研究したりします。

 

そんな時役立つのが「Pinterest

jp.pinterest.com

 

ピンタレスの画像はそもそもセンスが良いので、webデザインも世界中のセンスの良いレイアウトや配色を見ることができるのです。

 

おススメの検索ワードは

「webデザイン」

あとは気に入った画像をピンしていくと、それに類似したデザインがたくさん見ることができます。

 

また、スマホのアプリもあるので、ちょっとした隙間時間に参考デザインをためておくと、いざという時に困りませんよ。

 

webデザイナーはアカウントを持っておいて損はないアプリです。

スマートフォン楽天商品ページでjavascriptを使う方法

楽天の店舗運営は本当に面倒です。

 

その一つが、javascriptの設置が自由にできないこと。

楽天gold(FTPサーバー)ではjavascriptの設置はできるのですが、商品ページなどRMSで作成するページでは設置できません。(タグがはじかれてしまいます)

 

ただし、スマートフォンサイトでは商品ページ、RMSのトップページでもjavascriptも使えます

スマートフォンjavascriptを使用する際のタグと設置場所は下記を参考にしてみてください。

 

javascriptのタグ

<script src="http://www.rakuten.ne.jp/gold/●ショップID●/javascript.js" =""></script              >

<script src="http://www.rakuten.ne.jp/gold/●ショップID●/javascript.js" =""></script              >

 

②設置場所

RMSにログインし、デザイン設定へ

商品ページにjavascritpを設置する場合

デザイン設定メニュー(スマートフォン)>スマートフォン用商品ページ 商品ページ設定>商品ページ共通説明文

 

カテゴリページにjavascriptを設置する場合

デザイン設定メニュー(スマートフォン)>スマートフォン用カテゴリページ カテゴリページ設定>カテゴリページ共通説明文

 

スマホjavascriptを設置してもっと便利なサイトへ

スマホ、商品ページカテゴリページでjavascriptが使えるといろんな機能が使えます。

  • iframeの高さを自動取得できるjava
  • ページトップをスムーズスクロールで移動できるjava
  • 任意の場所にHTMLを挿入できるタグ

 

 

 

スマホ画面を即確認できる、chorome アプリ

 10年ほどウェブ担当のしごとをしていますが、昨年2016年は大きな出来事がありました。

 

それはスマホユーザー数がパソコンユーザー数を超えたということ。

 

それまでパソコン優先でデザインをしてきたのが、いっきにレスポンシブへ加速。そんな年でした。

 

なので、スマホで画面確認することが急増しました。

手打ちでURLを入力するのが手間だったのですが、

このツールを使って数秒でスマホ画面を確認することができるように。

chrome.google.com

 

これからますます使用頻度が増えそうです。

iframeの高さを一発記入して時間短縮に

iframeはあまり乱用はしたくないタグですが、楽天市場当、モールのネットショップを運営するときに、必ず必要になってきます。

 

iframe作業のデメリットは時間のロス

iframeタグを使う際、時間がかかるのが、iframeの高さを調整する作業。

ピクセル単位で調節して確認して、の繰り返しだと時間の無駄でてしまいます。

 

それを解消してくれるのが

Page Rulerというchromeのアプリ。

chrome.google.com

 

このツール、webデザイナーにはかなり便利なツールです。

ドラッグすると高さや幅、起点終点等いろろわかります。

 

iframeの高さをしる、一番簡単な方法は

ページの一番下をクリックするだけ

上部の一番右にあるテキストボックス「Bottom」に書かれてある数値がiframeの高さになります。

 

ただし、このツールはローカルのページではアプリ自体が使えません。

ネット上にあるURLのみ高さをはかることができます。

 

できるウェブ担当は、数秒の時間のロスも見逃さない!

是非インストールしてみてください。