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

カテゴリー: ネットショップ

ホームページやネットショップで利用できる無料素材


弊社が良く利用する写真・イラストの掲載サイトをご紹介

弊社が良く利用する写真・イラストの掲載サイトをご紹介します。
一部使えない用途などもありますので、各サイトの利用規約を確認してご利用ください。

誤って使用することは少ないとは思いますが、いずれのサイトもスポンサー画像・広告を含む場合がありますので、注意しましょう。

※ このページのリンク先は保護されていないページも含まれます。

写真・素材 類

写真素材 足成
http://www.ashinari.com/

様々なジャンルの写真が探しやすいように分類されて掲載されています。

ぱくたそ
https://www.pakutaso.com/

足成と同様に様々なジャンルの写真が探しやすいように分類されて掲載されています。

BEIZ Graphics
https://www.beiz.jp/

掲載ジャンルは少ないですが、背景に使用しやすい様なベタな素材が多くあります。

Natural Material
https://natural-material.com/

そのまま使える写真もありますが、加工素材として利用するのに適した写真が多くあります。

.foto project ※利用規約に注意が必要
https://free.foto.ne.jp/

使用条件に注意が必要ですが、様々な写真があります。

Pixabay
https://pixabay.com/

世界中の様々な写真、イラストがあります。
Wordpressで利用する場合は、プラグインを使用することで簡単に記事に差し込めます。

イラスト・素材 類

いらすとや
http://www.irasutoya.com/

可愛いイラストが沢山あります。

無料素材倶楽部
http://sozai.7gates.net/

主にアイコンなどの素材となりますが、イラストもあります。

音楽・BGM など

こちらは画像ではなく音楽ですが
Music-Note
http://www.music-note.jp/

BGMやアクションの擬音に使えそうなものとか多数の音楽が掲載されています。使用時に引用元の記載が必要となります。

ボタン・イベント などショップ素材

E.Commerce予備校
http://ec-yobiko.com/

EC design(デザイン)
http://design-ec.com/

無料素材倶楽部
http://sozai.7gates.net/

掲載日:
カテゴリー: ネットショップ

構造化データ > hentry(マークアップ: microformats.org) author/entry-title/updated がありません

Google Search Content 構造化データ マークアップ

構造化データ > hentry(マークアップ: microformats.org)対応について

WordPressで構造化データに対応していない、もしくは対応が不十分なテーマだと、Google Search Consoleで構造化データのエラーが多発する場合があります。

author がありません
entry-title がありません
updated がありません

構造化データのエラーが発生しても直接はSEOに影響するわけではありませんが、検索結果の表示に影響しますので、不適切な構造化データだと、クリック率に影響して、長期的・間接的にSEOへ影響します。Wordpressはデフォルトで<article>に[class=”hentry”]付加してくれますので、折角なので対応します。

対応は、適切な箇所にclass=author/entry-title/updatedを追加するだけ

通常、投稿記事には「author」と「entory-date」は、大概のテーマではあるはずなので、そこのclassにauthorとupdatedを追記すればOKなのですが、この時2つのポイントに注意が必要です。

hentryで囲まれた中であること(通常はこの条件は満たすが、自作テーマやメインコンテンツの外枠に表示するような特殊な構造だと注意が必要)

entory-date/updatedには、形式のルールがあり、これに則している必要があります。

 $time_string = '掲載日: <time class="entry-date published updated" datetime="%1$s">%2$s</time>';
 if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
 $time_string = '掲載日: <time class="entry-date published" datetime="%1$s">%2$s</time> / 更新日: <time class="updated" datetime="%3$s">%4$s</time>';
 }
 $time_string = sprintf( $time_string,
 esc_attr( get_the_date( 'c' ) ),
 esc_html( get_the_date() ),
 esc_attr( get_the_modified_date( 'c' ) ),
 esc_html( get_the_modified_date() )
 );
 $posted_on = sprintf(
 esc_html( '%s', 'post date' ),
 '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 );

こんな感じ

authorは通常この後に表示される(?)ので、その部分にclass:authorを追記、表示がなければ以下のような感じで、上記の記述に続けて追加します。

 $byline = sprintf(
 esc_html( 'by %s', 'post author' ),
 '<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
 );
 echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; 

最後にentory-titleの対応方法には2つのパターンがあります。

hentryで囲まれた中にTitle表示はある場合は、そのtitleのclassにentory-titleを追加するだけですが、本ページで使用しているテーマのようにhentryのarticleの外にtitle表示はある場合は、別途にhentryに囲まれた中にtitle表示を追加する必要があります。

本ページのテーマの場合は、以下のようにしています。

上記2つの記述に加えて、以下を記述

 <div class="entry-title-style">
 <?php if( is_home() || is_front_page() ) { ?>
 <span class="entry-title"><a href="<?php esc_url( get_permalink() ) ?>" rel="bookmark">home</a></span>
 <?php } elseif ( is_single() ) {
 the_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_archive() ) {
 the_archive_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_search() ) {
 ?><span class="entry-title"><?php the_search_query();?> で検索した結果</span><?php
 } else {
 the_title( '<span class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></span>' );
 }
 ?>
 </div>

これまでのまとめて、functions.phpで関数定義して、適当な場所に差し込みます。

/* 構造化データ post-date/time , author. and title */
function pureframe_posted_on() {
/* 上記3つの記述をここに */
 <?php 
}

で適当な場所に

pureframe_posted_on();

固定ページへの対応方法

投稿ページには、投稿日や執筆者名が通常あるので、上記の方法で通常対応できると思いますが、固定ページの場合は、これらの記載はない場合が多いのではないかと思います。固定ページでは”hentry”をとってしまうのもありなのかもしれませんが、上記の3つの記述は固定ページにも一応対応していますので、「pureframe_posted_on();」を適当な場所に挿入します。

固定ページのarticleを閉じる直前など記事の邪魔が少ない(デザインへの影響が少ない)場所に挿入します。

最後に

この対応は、本テーマでの現時点(2017.10.1)での対応で不十分な部分も多々あると思いますので、流用される場合は自己責任で(^-^;

pure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。


pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

 

ABC

 

A
B
C

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

ABC

A:1、B:2、C:3

BC
A

A:3、B:1、C:2

B
A
C

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。

/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}
掲載日: / 更新日:
カテゴリー: ネットショップ

本サイトテーマで使用している超軽量な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="//i0.wp.com/himeport.co.jp/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  

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

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

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

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

  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などの国内のサービスをお勧めしたい。

固定費無料、クレジットもすぐに使える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/

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

カラーミーショップで、レスポンシブデザイン 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}の外で使えます。)

掲載日: / 更新日:
カテゴリー: ネットショップ

ネットショップ構築・運用にオススメツール

CLIP STUDIO PAINT

ネットショップ運用において、いくつかあると便利なツールがあります。

受注・発送業務において、効率化のためにCSVファイルの取扱いは不可欠です。しかし、CSVファイルをExcelなどで取り込むと、期待しない自動変換がされて支障が出ることが多々あります。CSVエディタを利用しましょう。

SmoothCSV

慣れるまで、多少使い勝手が悪いところもありますが、通常業務で必要な機能はすべて持っています。(カラーミーショップ、ポンパレなどの公式ページでも紹介されています。)

使用する上で、最初に使いにくいと感じるところとして、「セル内の情報が多い場合に見難い」ではないかと思います。列の幅を自動調整で表示される方法もありますが、注文データなどは横長となり都合が悪いです。そんな場合は、編集したいセル(複数セルも可)を選んで、「編集」>「選択範囲をテキストで編集」(Ctrl+T)とするとそのセルだけ別ウィンドウに表示してくれます。この機能を使うことで、商品情報の編集など、CSVファイルの取扱う業務全般で大変便利で強力なツールとなります。

ページ作成において、若干でもhtml/cssの編集は必要になるケースが多々発生します。楽天市場のrms、YahooショップのストアクリエイターProなども、多少のhtmlの補完・エラーチェックなどできますが、別途htmlエディタを使用して作成するのが便利です。

Crescent Eve

大変シンプルで汎用的なエディタとしても利用でき、プレビュー機能などもあり小規模な商品説明の作成には大変向いています。ただ、最小限の機能しか備えていませんので、機能不足を感じることもあるかもしれません。そんな場合は、次に紹介するNotepad++が使ってみましょう。

Notepad++

高機能で、動作も軽く、大規模なソースの記述も可能な優れたツールですが、オープンソースで開発されていますので、商用でも無料で使用できます。文法の補完・チェックはもちろん、プラグイン機能を使うことで、さらに多機能・便利に自分好みのツールにできます。タブ表示なので、CSS/html/javascriptなどを同時編集しながらデバッグなどにも便利です。

オススメのプラグインは、

  • Plugin Manager 名前の通りプラグインの管理ツールです。
  • Preview HTML 表示IEを選んでプレビューできます。
  • Quick Color Picker 画面に表示された任意の場所のカラーコードを取り込めます。
  • その他にも、converter、Nppftpなど様々便利なプラグインがあります。

その他にも、国産HTML/CSSエディタ StyleNote5(SN5)などがあります。機能が豊富で使いやすいと評判ですが、私自身が現状使用していないので、ここでは紹介だけに留めます。

ショップページ、商品ページ作成で、画像編集は不可欠で、商品画像、イベントバナー、説明画像などの作成、編集、縮小、色彩調整など必要になります。

有料ソフトであれば、illustrator/Photoshopがありますが、月額では低価格になりましたが、薄利なショップ運営には負担に違いはありません。また、少々専門的で直感で利用できるソフトではありません。フリーソフトならInkscape/gimpですが、Inkscapeは比較的使いやすいですが、まだ開発途上で機能不足や不安定な部分があり、gimpは操作に癖があり、Linuxでは軽いですがWindowsでは起動時時間を要したりで、この組み合わせは非常に強力ではありますが、ショップ運用のために覚えるには少々敷居が高いように思います。

そこでお勧めしたいのが(私自身が愛用しています)

CLIP STUDIO PAINT PRO です。漫画を描くためのソフトで有料ではありますが、この種類のソフトとしては低価格で、動作も軽く安定しています。このソフトの本来の使用用途とは違いますが、ショップ運用時に必要な機能は必要十分にもっています。レイヤーも使いやすいので、複数の画像と文字をレイヤーごとに作成しておくことで、簡単に画像の差し替え、文字の変更もできてしまいます。ポスターの作成などにも利用できますが、pdfは直接書き出せませんので、印刷を外注する場合、別のソフトでjpegからpdf変換が必要となります。(MS officeのPowerpoint / LibreOffice Impressあたりに貼り付けてpdfにエキスポートするのが確実でしょう。)

なにより、操作が直感的で、覚えることが負担にならないと思います。

illustratorから入った人には機能不足や使い勝手が悪いと思う部分があるようですが、難しいことを考えないで、紙に書いて重ねていく感覚で使えますので、パソコンは苦手という人でも使っていただけるのではないかと思います。アニメーション機能も追加されましたので動くバナーなども容易に作成できると思います。

欠点も多少ありますが、ショップ運用においては問題ないでしょう。

  • GIFが扱えないこと、GIFの代わりにPNGを使いましょう
  • illustratorのファイルが取り込めないこと(逆にベクターとラスターが混在して使用できる)

その他、画像を見たり、サイズ変更、切り出し、フォーマット変更など、気軽に行うのに便利なツールとして、IrfanViewが直感的で使いやすく良く紹介されますが、商用利用は無料ではありません。同様の機能を持っていて無料のソフトとしては、MassiGraがあります。IrfanViewほど直感的な操作性ではありませんが、慣れると使いやすいソフトだと思います。

その他、ftpソフトですが、以前は、ffftpが主流でしたが、最近ではオープンソースで頻繁に更新されセキュリティ対応も十分ということでFileZillaが良く使われています。