合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

作者別: himeport

Instagram(インスタグラム)の店舗様向け簡単運用マニュアル


Instagram インスタグラムってなに?

まぁ、これは今更でしょうけど……

店舗様、事業者様から見た場合、写真を媒介とする広告媒体の一つになります。ただ、通常の広告媒体とは、少し異なります。

Facebook、Twitterなどは、投稿記事に直接リンク先が付けられますので、1つ1つの記事が直接の広告媒体としての機能も持ち合わせていますが、(有料広告は除いて)Instagramの場合は、あくまでも投稿写真のファンを作り、その中からプロフィールを見て頂いたり、検索をして頂いて初めて直接つながる。どちらかというとじっくりとコアなファンを育成する感じの媒体となります。

さて、いくつかのポイントを押さえながら、Instagramを始めてみましょう!

Instagramを始める

最低限必要な機材など

タブレットもしくはスマートフォンが必須となります。PC用のInstagramもありますが、現状では保存した写真を投稿する機能がありませんので、実用的ではありません。

Instagramのアカウントを取得

店舗様、事業者様がアカウントを取得する場合、全くの個人事業で担当の継承がない場合を除き、Instagram専用のメールアドレスを用意して、このメールアドレスで登録することをお勧めします。個人で登録される場合は、Facebookアカウントで利用できます。

https://www.instagram.com/ or スマートフォン/タブレットで専用ソフトを起動

  • フルネームは、知ってもらいた店舗・会社名など
  • ユーザーネームは、Instagramでユニークな名前、御社を連想させ、覚えてもらい易い文字列(英数字とアンダーバー)

プロフィールを登録しよう(重要

プロフィールはファンと繋がる重要な情報となるので、必ず登録しましょう。プロフィールの編集画面で、

  • ユーザーネームの修正(必要に応じて)
  • ウェブサイト

唯一直接つながる情報なので、見てほしいページ(ホームページやECサイト)のURLを記載。専用のLPなども良い。

  • 自己紹介

150文字以内で会社・ブランドの説明や、どんな写真を投稿するか投稿policyなどを記載するとよい。

  • プロフィール写真

人物感のある写真が好まれますが、集合写真やイメージキャラクターなどでも良いでしょう。

Instagramに投稿する

ポイントは、興味を持ってもらえる写真はもちろんですが、キャプションとハッシュタグ、特にハッシュタグは必ず入れましょう。

  • キャプション

写真が説明不要な場合はなくても良いですが、なにか印象付けるアクションを感じさせるキャッチとしてあった方が良いでしょう。但し、長いものはダメ。

写真が説明があった方が分かり易い、楽しんでもらえる場合は、250文字程度の範囲で記載しましょう。

出来れば、次回の投稿を期待させるようなキャプションが良いでしょう。

  • ハッシュタグ

キャプションを入力する欄に半角#のあとにキーワードを記入します。アプリ上にそのキーワードでどれ位の投稿があるか候補が表示されるので多く投稿されているキーワードを選ぶと良いでしょう。

  • 単語でも短文でも可
  • ハッシュタグの間は必ず半角スペース
  • 英数字、日本語の混在はOKだが、記号・半角スペースは使用できない。
  • 必ず5個以上、できれば10個以上(30個以内)登録しましょう。
  • 投稿写真にはpolicy/傾向があるはずなので、ハッシュタグのうち、いくつかは必ず登録して、探しやすくしましょう。(ハッシュタグ付けも少し楽になる。)
  • 位置情報

店舗など写真と関連した場所を登録しましょう。facebookとの連携が必要となります。

フォローしよう

いいね!やフォローしてくれた相手には、明らかに不適切と思われる場合を除いて、フォローを返しましょう。相互フォローでないとメッセージ通知などがされず、折角のコミュニケーションの機会を逃してしまいます。

SNSを使用する場合、競合する同業者と繋がることを嫌がる方がいらっしゃいますが、基本的には繋がっていくべきと思います。繋がることを拒否されるぐらいなら、SNSには手を出さない方が良いかもしれません。同業者の周りには未開拓のファンになる可能性がある人たちが必ずいます。単独でファンを増やすより圧倒的に効率的です。また、他の同業者がどうしているのかもわかりベンチマークとして自分たちのやるべきこともより見えてくるはずです。比較されて顧客を失うことを恐れるばかりでなく、自分たちの売りが一つでもあれば、それをアピールして、必要なところは改善していく姿勢をみせてファンを増やす努力が大事だと思います。今の時代、殻にこもった事業では疲弊してしまいます。

コメント問合せに返信しよう

コメントをもらった場合は必ず返信しましょう(公開されるので内容には注意)。中傷的なものも可能であれば、形式的な返信をして受け取ったことだけ通知しましょう。極力Openにして削除は好ましくないですが、第三者に不快にさせるような場合は、削除もやむなしでしょう。

ツール紹介

画像を補正したい

Snapseed

画像の補正だけでなくテキストの挿入、iphone6以降であればRAWファイルの現像までできてしまう優れたアプリです。iOS/Android用無料

画像に文字入れしたい

Phonto

様々なフォントで簡単に文字入れ出来ます。iOS/Android用無料

※積極的に広告を表示するので、誤って余分なものをインストールしないように注意しましょう

複数画像を1枚の画像にしたい(コラージュ)

Layout from Instagram

コラージュメーカー

その他

Facebook配下となり、急速に有料広告の利用が増えています。こちらについては機会があれば……

本サイトテーマで使用している超軽量なCSSフレームワーク Pure について


CSSフレームワークpureの概要

CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。

 

PUREの機能概要

BASE

Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。

Hiding Elements

class=”hidden”; /* display: none !important;  */

 

Responsive Images

class=”pure-img”;/* responsive imge */

example:

<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />

 

クリスマスの並木道

FORMS

各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。

.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea 

コンパクトな 1 lineの入力フォームならこんな感じで簡単に記述できます。(「pure-button*」は後程記述する)

<form class="pure-form">
<fieldset>
<legend>A compact inline form/ログインフォーム</legend>

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">

<label for="remember">
<input id="remember" type="checkbox"> 記憶する
</label>

<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>

 

 

A compact inline form/ログインフォーム

ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。

.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。

こんな具合に

<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>

<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須  </span>

<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">

<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select>

<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>

<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>

 

A Stacked Form/ラベル付きアカウント入力フォーム

必須

入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。

こんな具合に

<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>

<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>

<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>

 

必須項目

‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。

このような具合に

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>

 

レシポンシブ 入力フォーム 用例

テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。

このような具合に

<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>

<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

To be continue  

ロリポップ レンタルサーバーが無料の独自SSLを提供開始


ロリポップが無料の独自SSLを提供開始!

待ってました!
実は、最近重くなったので、サーバーごと引越しを検討していました。どういうわけか、動作が重かったのも急に改善されたようで、高速を謳っているZ.comと性能差は感じないレベルまで回復しています。暫くは引越しは見送りとなりそうです。

いつもロリポップ!をご利用いただき、ありがとうございます。
ロリポップ!では本日より、無料独自SSLの提供を開始いたしました!
それを記念して、10日間限定の【全プラン初期費用無料キャンペーン】を開催中です。
詳細はこちらをご確認ください。
訪問者も安心できるホームページをお得につくるチャンスです♪

「Let’s Encrypt」なので、個別認証のSSL認証ではありませんが、手軽にSSL化できるのは大変ありがたい。

問合せページや、現時点でのSSL差別化の動きには十分なSSL化が無料でできるのは大変うれしい。他社も無料・格安提供を始めているのでいずれはとは思ってましたが….

早速、主なページや、お客様のページもSSL設定をしました。

ん~、完全に対応させるには、最低限以下の設定が必要なので、まだ完全に安全表示は一部だけ.....

SSL化にあたりやること

  • WordPressの設定(WordPress アドレス (URL)、サイトアドレス (URL))の変更。変更すると一度Logoutさせられるが、慌てない。ただ、ミス修正は直接変更が必要になるかもしれないので、DBの修正箇所くらいは事前に確認しておくと安心です。
  • 301の対応、SEO対策ですね。

RewriteEngine On RewriteBase /
RewriteCond %{HTTP_HOST} ^himeport.co.jp
RewriteRule ^(.*)$ https\:\/\/www\.himeport\.co\.jp\/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

こんな感じ、下の2行が今回追加。これで、httpでアクセスが、httpsに

  • 画像やリンクで、httpsでないものは、httpsへ変更。

(ほとんどの画像はあらかじめ相対アドレスにしていたつもりですが、漏れがいっぱい。外部リンクはダメなのがいっぱいなのでどうするか検討中。)

まぁ、こんなところで、最低限、問合せページと出来れば導入ページはグリーン▲(保護された通信・安全な接続)にして体裁を整えましょう。

ECショップ・モールも、BASE、Yahoo、楽天、ポンパレとSSL化しています(Amazonは以前から)。この流れ乗り遅れると気が付けば訪問者が1/10なんてことになるかも

同じドメインでメールを使わないWordpressだけなら、SSL化100円のこちらもおススメです。Wordpressで必要なことはすべて料金内で設定済み、あとは中身を作るだけ。メールも使うなら、Z.comのレンタルサーバーも契約してこちらでメールを使用することになります。このレンタルサーバーは企業向けクラウドサーバーの延長線の感じで、こちらでWordpressなど様々なAppを動作させることもできますが、すべて自身で設定が必要となりますので、やや専門的な知識が要求されます(ロリポップの自動で7世代バックアップが当たり前となった私的にはバックアップが一番問題で、当面はロリポップへ定期バックアップで運用予定。将来的には事務所のファイルサーバーに….)

ホームページの管理会社変更する場合の確認事項と注意点

ビックリ価格で、素敵なホームページを持つなら、ひめぽーと

ホームページの管理会社変更について

ホームページやネットショップの運用管理を外部の会社に委託されている場合に、何らかの理由で、委託先を変更したいとき…..

  1. 契約書を確認しましょう。(重要

注意したいのは、解約条件と著作権です。万が一、作成物(ホームページ・ショップ)の著作権が制作会社(管理会社)にある場合は、現状のデータの利用は出来ないので新規に作成するか、著作権を持つ会社から譲渡(購入?)が必要になります。譲渡の場合は、もめない為に念書を交わすのが良いでしょう。あと、解約後のデータ、アカウントなどを破棄する念書も交わすと安心でしょう。

  1. ドメインの所有者を確認しましょう。(重要

もし所有者が制作会社(管理会社)である場合は、譲渡してもらうか、ドメインだけ管理してもらうことになります。基本的には、譲渡で、ドメイン管理会社(お名前ドットコムやムームードメイン)のアカウントと支払いは自身で行うか、新しい管理会社に委託するのが良いでしょう。

  1. ホームページのあるサーバーの所在・権利者を確認しましょう。(著作権がある場合)

制作会社(管理会社)の共有サーバー上にある場合は、新しいサーバーへのデータ移管が必要となりますので、現状のデータを入手しましょう。具体的に何が必要かは、新しい管理会社に事前に相談するのが良いでしょう。

単独レンタルサーバーの場合は、「契約サービスの譲渡」を行うことで、新規にサーバーを構築しないで、現状のままで管理会社だけを変更できる場合があります。新しい管理会社に事前に相談したうえで現状の管理会社に譲渡・移管を交渉するのが良いでしょう。

具体的な解約、管理会社の変更を現行の管理会社に伝えるのは、事前に変更先の管理会社と相談の上で伝えるようにしましょう。ドメイン・データともに新規に作成する場合はこの限りではありませんが、ある程度、認知度があるドメインであれば、極力ドメインは変えない(スラッグも極力合わせる)ようにするのが良いでしょう。

更新が遅いなどの理由で管理会社を変更される場合で、現行ページがHTMLでダイレクトに記述されているのであれば、変更の機に現状の資源を有効活用しつつ更新がやりやすいCMS(content management system)を導入することも検討されると良いでしょう。

無料ホームページ作成サービス Ameba Owndを使ってみました


以下の条件を満たす、ホームページ作成サービスということで、「Ameba Ownd」を使ってみました。

作成したサンプルサイトはこちら

◇条件

  • 初期費用・月額無料
  • 商用利用可
  • ネットショップを設置できる
  • スマホ対応
  • 余分な広告の掲載が少ない
  • 独自ドメインが利用可能(設定が無料)

テンプレートをベースに機能ブロックを貼り付ける手順で作成していきますが、WIXほどの自由度はありません。

ただ、htmlも挿入可能ですので、アフィリエイト広告なのども簡単に入れられます。

使ってみて、以下が不足と感じました。

◇不足

  • 問合せのパーツがない
  • ショップ機能は最低限で、送料は固定となる。(=BASEで基本にAppカテゴリ管理追加)

BASEに入ってBASE App送料詳細設定を追加することで、地域別送料も設定できました。

  • Owndの広告が最上部とPoweredに入る
  • 段組みができない(大きなレイアウトは、テンプレートで決まってしまう。)
  • 独自ドメインでは、SSL対応できなくなる(BASEショップは出来る。)
  • すでにあるBASEとアカウントは共有できるが、商品は共有できない(NG

ショップ作成時にすでにOpenしているBASEショップのアカウントで連携してしまいました。すでに発売中の商品がOwnd側で見えないので問合せした結果、不具合が発生する可能性があるので、既存のショップとは別に新規アカウントで連携してくださいとのことでした。すでにBASEショップをお持ちの方は注意が必要です。

優れていると感じたのは、

◇特徴

  • 標準でAMP対応(但し、独自ドメインには未対応の模様)
  • SSL対応(Owndドメインの場合)
  • 簡単にスタイリッシュなページができる
  • BASEの商品ページより詳細な商品説明が作れる

 

結論:

ショップ機能は、詳細商品説明文はBASEに対して優れていますが、商品検索機能がないので、商品数が一画面に収まる程度の場合にしか実用的ではありません。

受注案件で作成した 農業法人 株式会社 FFT様のホームページ 赤の元気

上下とBlogページの下側に広告がありますが、見栄えも機能も必要十分な出来栄えと思います。純粋なホームページや商品数が1ページに収まるショップを構築する場合の事例となります。

先に記載したようにAmeba Owndでは、カテゴリ・商品検索が標準の機能としてはないので、カテゴリ・商品数が多い場合は、BASEが良いでしょう。また、ホームページとショップを二つ運用するのは、手間がどうしても増えるので、現状では、比較的ホームページ的な要素を盛り込みやすいテンプレート(例えば、「DEPARTMENT」)を使いBASEで構築するのが良いと思います。商品説明が弱い部分は集客対策も兼ねてBASEのBlogで補うことで対策できる(もともとそういう意図の作りになっている)と思います。

無料で綺麗なホームページが作れるWiXを使ってみました


WiXは、無料で簡単にきれいなホームページができるそうです。

ん、確かに簡単にきれいなホームページができます。

作り方は簡単

  1. アカウントを作る
  2. テンプレートを選ぶ
  3. テンプレートに中身を入れていく
  4. 配置・サイズはつまんで簡単に変更
  5. 足らなコンテンツパーツは、アプリ追加で簡単
  6. 全部中身を埋めたら公開

作成にあたり、絶対やってないと後悔するのは、編集する度にセーブすること。勝手に再読み込みで編集途中のデータがロストすることが平気で発生します。実は、私はほぼ完成していたのですが、これで完成させる意思を消失しまいました。

WiXは、確かに簡単にきれいで、まるでデザイナーズのホームページができますが、余程のこだわりがない方でないと無料では使えないように思います。自前の独自ドメインを使用する場合でも416円/月が必要となり、これではWiXの広告が表示されます。個人利用でもコンボ814円/月が最低ラインのように感じます。

簡単で、きれいにできること以外にネットショップ機能が使えるのもWiXの魅力と思います。eコマース1641円/月が必要となりますが、完全にホームページとショップの一体化ができますので、格安感を感じます。

海外を対象としたページつくりには、外せないサービスと思います。ただ、海外のサービスですし、日本語のサンプルページでも少々重い感じがするので、国内向けに限定したサービスの場合は、カラーミーやBASEなどの国内のサービスをお勧めしたい。

避けて通れない、Windows10 Creators Updateして


四月から始まったWindows10 Creators Updateした結果

ん~

個人的にはしないでOKならしたくない結果となった。

手持ちのパソコンすべて、問題なくUpgradeは出来ましたが、肝心のメインのデスクトップパソコンが不調となってしまいました。

一番痛いのは、マイクロソフトのEdge移行を促す陰謀ではないかと思いたくなるほど、Internet explorerがエラーを吐く頻度が上がってしまい、止む無くEdgeに切り替え....でも銀行などまだEdgeは使えない.....

このおかげで、何本記事を書き直したことか(-_-;)

標準のメールソフトが機能アップしてやっと使えるものになったりで、機能アップも良いのだけれど、入力モードの変更のたびにポップアップ(Microsoft IMEの設定で無効にできる)してきたり、ポップアップする説明が邪魔な場所に出る場合が増えたりとあまりうれしくない。(設定を変えることで対処は可能なようだが、Updateというのなら、現状の操作環境はそのままで、機能アップした部分は使うなら使える的な設定にしてほしいものです。)

Windows10になってから、どうもマイクロソフトの将来に向けての思惑を感じます。万が一、マイクロソフトが悪意をもった行動をとったら…..と思うと怖いと感じるこのころです。

固定費無料、クレジットもすぐに使えるBASEでショップを作ってみた。


BASEでショップを始めました。

カスタマイズ性が高く、無料のテンプレートでレスポンシブデザインのShopが比較的簡単にできてしまうカラーミーショップ押しの最近の私ですが、無料で簡単にショップができることが売りのBASEで、ショップを作ってみました。

まずは、BASEについて簡単に

  • 初期費用 無料
  • 月額無料
  • クレジット決済とコンビニ決済が標準でついてくる
  • 標準でSSL対応(これからは有利?)
  • Blogが同じドメインで作成できる。(これはseo上メリット)

 

早速、作ってみました。

噂通り、簡単にできてしまいました。

驚いたのは、今年からSSL対応は必須と言われていますが、独自ドメインでも無料でSSL対応になったこと。

が、…..見慣れたショップに比べると寂しい。

無料の範囲では、

  • 商品画像は5枚まで
  • 商品説明はテキストのみで、画像追加できない。
  • 共通説明文が物に用意できない。
  • 商品・カテゴリーバナーなど置けない。
  • トップページやフッターなどにお買い物ガイドなど挿入できない。
  • ファビコン(ブラウザのタブに表示されているアイコン)が変更できない。
  • 必ずBASEのロゴが表示される
  • 送料設定が、地域別しか設定できない。
  • 熨斗やメッセージカードオプションを設定できるようになっていない。

など、さすがに制限が多い。

但し、有料のテンプレートが比較的低価格ですし、有料テンプレートを使用することでここで書いた制限事項の多くは緩和されますので、本気で売るお店にするには、レスポンシブデザインの有料テンプレートの適用が必須と思います。

HTML編集機能もありますが、月額費用900円が発生してしまいますし、折角簡単なBASEなのに残念なことになります。

ファビコンやBASEのロゴに関しては月額費500円必要ですが、BASEロゴを非表示にしてファビコンも設定できるようになり、オリジナルECショップぽくなります。(ちなみにテンプレートを編集して非表示することは禁止されています。)

ホームページを別に持っている場合は、BASEはカートとしてだけ利用して、ホームページに商品説明ページを用意して、ショップカート<iframe>をはめ込む利用が良いかもしれません。但し、この場合は、<iframe>で表示されることを意識した商品画像を用意しないとロゴや文字入れした画像では見栄えが良くありません。

決済機能が標準で付いてくること、独自ドメインでSSL無料、BlogのURLがShopと同じというこの3点は大きなメリットですので、BASEの簡単という部分を多少犠牲にして、有料テンプレート+BASEロゴ非表示(500円/月)、有料テンプレートで不足なら、+HTML編集(900円/月)で運用しても良いかもしれません。

あ!作ったショップは、こちら⇒ https://shop.ehime.website/

お試し程度に商品を登録しただけなので、登録商品もボチボチ増やしていければと思います。

インターネット環境のない母屋にネットワーク環境を構築


隣接する分家にはインターネット環境があるのですが、母屋にはインターネット環境がなく、いろいろと不便があったので、分家からネットワークを拡張して対応しました。

幸い分家には無線LAN環境があり、母屋の分家に最も近い部屋では、十分接続可能な状態ですが、主に使用する部屋では残念ながら、安定して接続できず、iPadのOS updateなどは全くできない状態でしたので、これ↓を導入しました。

 

無線LAN 中継器 11ac/n/a/g/b 433+300Mbps 11ac対応 RE200

無線LAN中継器はいろいろありますが、親のAPを選んだり、電波が混線して思ったほど安定して接続できず、性能も出ないものが多いように思います。これは優れモノでした。

2.4GHz + 5GHz 高速のデュアルバンドですので、親機のAPとは、2.4GHzで接続して、拡張範囲では5GHzで接続するなども可能となります。また、有線LANポートも持ってますので、有線LANの口しかないテレビなども容易に接続できます。

WPSボタンを使って簡単セットアップはもちろん対応していますが、有線LANにPCを接続してマニュアルで設定可能で、今回の親機となる接続対象のAPはかなり古い規格の無線ルーターでしたが、マニュアルで検索して親機のSSIDにキーを入力するだけで、2.4GHzで無事接続できました。

有線LANには、ストレートケーブルでスイッチハブに接続して、ハブからテレビとビデオの2系統に接続しました。また、もともとの目的のiPAD Airは、5GHzで無事安定接続できました。

最新の規格11acに対応している一方、今回のように相当に古い規格のAPにも接続可能で、守備範囲の広い優れたおすすめできる無線LAN中継器でした。

集合住宅(マンション、コーポ)などで、2.4GHzが入り乱れて、3LDKくらいの広さでも無線がつながらない、安定しない事があります。実は、我が家もこれに相当する状況ですが、無線環境を増やすことでより被害者を増やすことになりかねないので、デュアルバンドの無線ルーターの設置場所を工夫することで対応しています。工夫しても改善できない場合は、今回紹介しました手段が利用できると思います。

カラーミーショップで、レスポンシブデザイン ECサイトを作成する その3


カラーミーショップをカスタマイズするには、いろいろな無料のテンプレートの中身を見てみると参考になる部分が沢山あります。

Previewしながら、良いところを見つけたら中身を見て、参考にしちゃいましょう。

無料のテンプレートを他の無料のテンプレートの良いとこどりで、有料のテンプレート相当のものにUpgradeもできると思います。有料テンプレートにしかない画面いっぱいのスライドショーなどは、有料テンプレートのサンプルページなどのソースを見ることで、実現方法もわかると思います。

カラーミーショップは、SmartyというPHP用のテンプレートエンジンを使用しているそうで、テンプレートの中身を見るときにsmartyの公式ページのドキュメントが役に立ちます。(なかなか全部読んで理解するのは大変なので、いろいろなテンプレートや実際に表示させてみると大体は理解できるとは思いますので、わからないところや不安なところ、応用したいときなどに参考にするだけでも良いと思います。)

あと、テンプレートを理解して応用するには、カラーミーショップの独自タグを概要だけでも見ておいた方がよいでしょう。なんとなくでも意味が分かるような表記にはなっているので、すぐわかると思いますが、このカラーミーショップの独自タグの説明ページだけ見ただけでは、どうやって使うのかわからないことがあります。

例えば、「フリーページを1から100まで利用する場合」で、フリーページ98のURLはというと”<{$freepage[98].link_url}>”といった感じになります。これもテンプレートの中身を見ているとわかると思います。(昔、「プログラムを覚えるのに良いプログラムを読め」と言っていたのを思い出します。)

さて、テンプレートを見ているとよくある構文をいくつかあります。

1つは、ループ、もう1つは、分岐(if)これを知っていれば、流れの部分はカバーできると思います。あとは、ループを使う上で、ループの中の状態を知る方法でしょう。この3つを知っていれば、ほとんどのテンプレートは読めると思います。もちろん、html/CSS/Javascriptなどもある程度は理解できる知識が必要です(^-^;

<ループ section>

以下は、カテゴリリストを表示する処理です。「<{section……}>  ~  <{/section}>」

      <{section name=num loop=$category}>
        <{if $smarty.section.num.first }>
          <div>
            <h3 class=”pad_l_10″>カテゴリーから探す</h3>
            <ul class=”unstyled bor_b_1 mar_b_20″>
        <{/if}>
              <li class=”pad_10 bor_t_1″>
                <a href=”<{$category[num].link_url}>” class=”show txt_c_333″>
                  <{if $category[num].img_url != “”}>
                    <img src=”<{$category[num].img_url}>” class=”show hidden-phone mar_b_5 cat-left” />
                  <{/if}>
                  <{$category[num].name}>
                </a>
              </li>
        <{if $smarty.section.num.last }>
            </ul>
          </div>
        <{/if}>
      <{/section}>

<分岐 if>

以下は、ショップ会員機能が有効であれば、ログインしているかどうかで表示を変える部分です。

          <{if $members_use_flg == true}>
            <{if $members_login_flg == false}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-login”></i>ログイン</a>
              </li>
              <{if $members_register_flg == true}>
                <li class=”header-link”>
                  <a href=”<{$members_regi_url}>” class=”btn btn-01″><i class=”icon-w icon-adduser”></i>会員登録</a>
                </li>
              <{/if}>
            <{else}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-logout”></i>ログアウト</a>
              </li>
            <{/if}>
          <{/if}>

<ループ状態 smarty.section>

<{smarty.section.xxx.yyyyy}> : section name=xxxのなかのプロパティyyyyyの値となります。

yyyyy:iteration(ループの現在の反復回数),index(ループのインデックスでしてしない場合は0から始まります),first(1回目の処理時にtrue),last(最後の処理時にtrue),rownum(iterationと同意,1から始まる),loop(ループの最後のインデックス番号,{section}の外で使えます。)


ホームページ、ネットショップの作成管理などのお役立ちリンク