タグ別アーカイブ: 作り方

ネットショップ用の注意喚起バナー作製の基本

こんにちは。nekonomoridesignのyoshyです。
ネットショップ用にバナーの作製などを日常的にやっている私なのですが、もうかれこれ5年以上そういう仕事をしていると、ちょっとお客様に注意喚起したい事があれば、フォトショップなどですぐにバナーを作ってその日のうちに貼り付けて・・・というのをやっているのですが、その画像はいたってシンプルに仕上げるようにしています。

残りわずか!などの短期間にしか出さないバナーに時間はかけない。
目立つ文字・配色・バランスでさっと手早く作る。

たとえば、今日、在庫が残り少ないと連絡があった商品のページには、「残りわずかです!」とお客様に注意を促すバナーを目立つように配置しました。
文字だけではやはり「視認性」(目に付く)のが少なく、見た人の印象に残らないので、

  • 印象に残りやすい配色(おおむね3色以内)
  • 印象に残る色
  • 印象に残るカラーバランス
  • 文字配置

を意識してつくりました。

※作ったバナーがこちら↓

目立つバナー
目立つバナー

赤を基準に白と黄色と黒で色数少なく、印象に残って欲しい文字を特に強調した文字デザインにした、極めてシンプルで極めて簡単なバナーを10分ほどで仕上げて即アップしました。

パソコン用だけではなく、スマートフォン用にもきちんと配置しよう

今回、私の管理しているのがヤフーショッピングだけだったのですが、ヤフーショッピングの該当の商品ページには、スマホ用の編集ページがあるので、スマホ用の編集にも、もちろんこのバナーを付けました。

いまや、スマートフォン用のページの編集もきちんとする時代

スマホ用のアプリが出ているほど、ネットショッピングはパソコンとスマートフォンで利用している人は増えています。
ですので、こういった注意喚起のバナーなども、スマホ用にもきちんと設定するのが望ましいと思います。

たかがバナー、されどバナー。

バナー1つで、お客様に伝わるメッセージは大きく変わります。
それぞれ、そのバナーの持つ役割に応じたものをすぐに用意できるかが、時間の流れの速いネットショップで成功していく鍵だと思います。

それでは、今日はこのあたりで!

久々に。 photoshop Tips フォトショップで点線を簡単に描く方法 鉛筆ブラシで一発で点線が描ける! CS~CS6、CC版(クリエイティブクラウドクラウド版)も対応!

こんにちは。nekonomoridesignのyoshyです。
今日は久しぶりにフォトショップTipsをご紹介したいと思います。

Photoshopで点線を簡単に描く方法!

フォトショップのバージョンは、おそらくどのバージョンも行けます。
一応、CS以降はすべてこの方法で出来てます。
(クリエイティブクラウド2014、2015でも同じ方法でいけます)

フォトショップで点線を簡単に描く方法
フォトショップで点線を簡単に描く方法

こんな点線を簡単に描く方法です。

まず、「鉛筆ブラシ」を選びます。

フォトショップで点線を簡単に描く方法
フォトショップで点線を簡単に描く方法

次に、わかりやすいように鉛筆の太さを20pの物にしておきます。
(太さは好きな太さにしてください。今回は例題として20pxにしているだけです)

フォトショップで点線を簡単に描く方法
フォトショップで点線を簡単に描く方法

次にブラシメニューを出します。
CS5の場合は横のバーにあるのですが、もしお使いのフォトショップのバージョンで見当たらない場合は、「ウィンドウ」の中の「ブラシ」を選んで、ブラシの詳細メニューを出します。

フォトショップで点線を簡単に描く方法
フォトショップで点線を簡単に描く方法

だしたら、横の効果のところのチェックはすべてはずして、
「間隔」の設定だけいじります。

プレビューが出るので、それを参考に間隔をあけて行きます。
最大999%までいけたかも?
好きな間隔にできたら、

レイヤーを追加して、鉛筆ブラシモードを選んで、色を選んで、描けばOKです。

フォトショップで点線を簡単に描く方法
フォトショップで点線を簡単に描く方法

簡単ですね♪

ネットショッピングなどの商品ページ用の説明画像などをつくって居る時に区切り線などを入れたいときとかに使えます。

私は基本的にネットショップで使用する画像での説明文はフォトショップで作製するのですが、イラストレーターを使う人もいるのでしょうかね?

イラストレータでは、線の設定でいけますが、クリエイティブクラウド2015からはなんか設定が違ったのでまた需要があればそちらも説明したいと思います。

それでは、今日はこのあたりで♪

 

スマホ用のページ作製はたとえ楽天市場やヤフーショッピングなどのモールであっても、画像のサイズ設定やタグをきちんとスマホ用にした方が良い

こんにちは。nekonomoridesignのyoshyです。
最近、ヤフーショッピングのサイトを作っていたのですが、その作業中、気づいた事がありました。

商品説明文(PC用)のところに、商品説明を画像で作ったものをIMGタグで配置したり、TABLEタグで左に画像、右側に文章を書くという感じの物をつくっていたのですが、それを気にせずにスマホ用の説明文(フリースペース)に貼り付けて商品ページをつくっていました。

スマホで見て見ると、画像が凄く小さかったり文字が凄く凝縮されていて見づらかった

スマートフォンは縦にスクロールするので、画像の右隣に配置した文字とかがぐちゃぐちゃっと寄せられてしまっていました。
さらに、画像の表示大きさ指定をしていなかったので、画像サイズが凄く大きいもの(600pxや800px等)のものはスマホの画面からはみ出していたり、テーブルタグも表示崩れのようになっていたのです。

スマホ用のIMGタグには、画像の大きさを、WIDTHで画像表示サイズを指定しよう

スマホ用の説明文のところにIMGタグを使用して画像を配置する場合は、WIDTH=100%で画像の表示サイズを100%に指定する方が良いと思います。

そうすれば、iphoneやAndroid等さまざまな機種のスマホがあってもそのスマホの表示サイズに合わせて%で比率を変えて表示してくれます。

個人的には100%だといっぱいっぱいでスペースが無いので、95%くらいにしています。

TABLEタグで2列配置にしている説明文は、上下2段での説明文にしよう

どういうことかと言いますと、簡単に言うと下記の図のような感じ。

↓これはパソコン用のタグ。

スマホ用タグとPC用タグの違い
スマホ用タグとPC用タグの違い

 

 

↓こっちがスマホ用。

1002-2

スマホの場合、縦スクロールで見る事を前提にして文字や画像の配置をした方が良いということです。
ですので、TABLEタグで、PCの時に左に画像、右に文字を売っている場合は、スマホ用は、上に画像、下に文字と言うふうに並び替えが必要だと言うことです。

CSSが使えない出店方法をしている店舗は、必ずタグの打ち変えが必要

CSS(スタイルシート)が使える環境での契約で出店している店舗の場合は、DIVタグで画像や文字のブロックを設定しておくだけで、FLOAT設定で右にしたり左にしたり上にしたりで変えられるので楽ですが、TABLEぐらいしか使えない又は昔にTABLEで組んでいたと言うところは、打ち変えしたほうがよいと思います。

今は、スマホからの購入も多いネットショッピング

いまや、各モール専用のアプリが出ているくらい、スマホ経由での購入も多いネットショップです。ですので、スマホ用のページも意識していく事も重要になってきます。

スマホ用ページをいじってない、、という店舗さんは一度見直しを検討されてみてはいかがでしょうか?

スマホでの自分の店舗の見栄えをチェックするのも良いですよ!

それでは、今日はこのあたりで失礼します。

スマホ用サイトの作製などの依頼やタグの打ち変え作業など細かい作業も請け負いますのでご相談されたい方はフォームからのご連絡お待ちしております♪

LINEスタンプをつくっています。早く完成させて販売にこぎつけたい!ラインスタンプを自作

こんにちは。nekonomoridesignのyoshyです。実は、

今コツコツと自分の書いたキャラクターのLINEスタンプをつくっています。無料でクリエイター登録は可能なので、何事もやってみよう!

とおもって、コツコツといま作っています。

LINE クリエイターズマーケット

前から、ずっと作りたいと思っていたのですが、思っているだけではダメだ!と思って、ノートに手書きした自作のイラストをパソコンに取り込んで着々とラインスタンプをつくっています。

LINEスタンプは

  • メイン画像
    必要数:1個
    フォーマット(保存形式):PNG
    画像保存サイズ:W240 x H240 px
  • スタンプ画像
    必要数:40個
    フォーマット(保存形式):PNG
    画像保存サイズ:w80~370 x H80~320 px
    ※サイズはスタンプ1個のサイズ
    ※自動縮小のため、縮小率は偶数のサイズで
  • トークルームタブ画像
    必要数:1個
    フォーマット(保存形式):PNG
    画像保存サイズ:w96 x H74px

と言う設定で作らなくてはいけません。
PNGで保存というのがアレですね。
透過設定で保存しないと、背景の白とかが出たままのスタンプになりそうです。。このあたりは少しデジタルデータの事を理解していないと厳しいものがありそうです。

過去に、画像の保存形式についてご説明している記事があります
参考までに良ければ読んでみてください。

PNG8? PNG24?
知っているようで知らなかった透過PNG形式ファイルについて

下書きの時は凄くイイカンジだと思っていたのですが、なぜか色を塗っていくと何だかなー・・・というかんじになって、ちょっとショックを受けていますが、男女関係なく使ってもらいやすいようにということであまりかわいくない感じでキャラを描いています(´_ゝ`)

完成したらお知らせします♪

それでは、今日はこのあたりで!

EC CUBE 2.13.3カスタマイズ 注文確認メールに支払い方法別に振込先などの情報を表示・挿入したメールを自動作成する方法

こんにちは。nekonomoridesignのyoshyです。
勤務先のEC CUBEサイトのカスタマイズで相変わらずひーひーいうてますが、いよいよ、運用に向けて動き出しているのですが、テスト注文をしたりしていたとき、ふと、気になった事がありました。

銀行振り込みとかの場合で入金先の連絡とかどうすればいいの?

あらかじめEC CUBEに備えられている注文確認メールでは、銀行振込先なんて記載はありません。かといって、支払い方法によってテンプレートを変えて送信できるというような某モールのような便利機能も見当たらなかったので・・・・ふたたび自作カスタマイズとなりました。(泣)

メールテンプレートの格納場所は・・・
data/Smarty/templates/defalt/mail_templates/

この中のテンプレートの、order_mail.tplをいじっていくのですが、いじる前に必ずバックアップやコピーを作製しておきましょう。

order_mail.tplで、支払い方法が「銀行振込」だった場合は、入金先をメール内容に入金先の案内を挿入させるカスタマイズ

━━━━━━以下コピー ━━━━━━━━━━━━━━━━

<!–{if $arrOrder.payment_method == “銀行振込” }–>
————————————–
【お振込先のご案内】
銀行名 :●●●銀行
支店名 :▲▲支店
口座番号:普通 xxxxxx
振込先名:★★★ ★★★

※お振込手数料はお客様ご負担でお願い致します。
※ご注文後1週間以内にお振込ください。予めご了承下さい。
————————————–
<!–{/if}–>

━━━━━━ここまで ━━━━━━━━━━━━━━━━

↑この内容で、  == “銀行振込”  のところを、支払い方法に登録してある支払い方法にする事で、その支払い方法のときだけ、 if で囲んである中の内容が表示されるようになります。

これを、order_mail.tplの、
<!–{if $arrOther.title.value}–>

↑こういうのが書いてある真下くらいに挿入すると良いです。(おそらく38行目あたりだったかと・・・・)

こうしておけば、ご注文があった時点で自動返信でいくこの注文確認メールに、すでに振込先を掲載出来るのでとてもラクチンです。

是非ためしてみてくださいね♪

EC CUBE 2.13.3 カスタマイズ トップページにスライドショーを設置する方法 動きのあるトップページを作る方法

こんにちは。nekonomoridesignのyoshyです。
本日はEC CUBEカスタマイズです。

トップページにスライドショーを設置する方法

トップページにスライドショーがあると、動きもあって何だかソレっぽい感じになりますよね?ということで、設置したいなあとおもってやってみましたので、備忘録兼ねて記事にしておきます。
簡単な流れはこちら。

  1. スライドショー用の画像を設置
  2. スライドショー用のブロックを新規作成
  3. 必要タグをそのブロックに記載
  4. 完成したボックスをレイアウトで配置

という簡単な流れです。

1.スライドショー用の画像の準備
/html/user_data/packages/default/img/(新規作成したフォルダ)
に画像を保存する。

ではまず、画像を用意します。
適当・・・というわけでもありませんが、1000x400位の大きさで私は作りましたが、画像の大きさは、設置されるサイトのサイズによると思いますので詳しくは割愛します。

作った画像を保存するのですが、保存場所は、私の場合、わかりやすいように「top_slide」という名前の専用フォルダを以下のに作製してそこに保存していきました。
スライドショーで流したい画像はすべてそこに入れるという感じです。

保存フォルダ
/html/user_data/packages/default/img/top_slide(※新規作成したフォルダ)

上記フォルダにFTPサーバ経由で画像をアップロードしておきます。

2&3.スライドショー用のブロックを新規作成してタグも記入。

スライドショーを表示させるためのブロックを新規作成します。
タグも一緒に書いてしまいます。

【作業場所】
デザイン管理>PC>ブロック設定
【登録内容】
ブロック名:トップスライドショー(※任意で決めてください)
ファイル名:top_slideshow(※任意で決めてください)
【タグ】
———————————————————————————–

<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/default.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/module.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/bloc.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/jquery.bxslider.css” type=”text/css” media=”all”>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.min.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.bxslider.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
mode: ‘horizontal’,
pager:true,
prevText: ‘<‘,
nextText: ‘>’
});
});
</script>

<div id=”slide_page”>
<ul class=”slider”>
<li><a href=”./products/list.php?category_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像1枚目” alt=”スライド1” /></a></li>
<li><a href=”./products/detail.php?product_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像2枚目” alt=”スライド2″ /></a></li>
<li><a href=”./products/list.php?category_id=2″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像3枚目” alt=”スライド3″ /></a></li>
<li><a href=”./products/list.php?category_id=3″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像4枚目” alt=”スライド4″ /></a></li>
</ul>
</div>

————————————————————————————
タグの解説
<a href=”./products/list.php?category_id=3″>
↑これは、リンクURL。カテゴリへ飛ばしたいときは、ここの id= のあとの数字を変えれば使えます。

<a href=”./products/detail.php?product_id=1″>
↑これもリンクURL。こちらは商品ページにダイレクトです。id= のあとの数字を、表示したい商品管理番号にすればダイレクトにリンクします。

<div id=”slide_page”>
スライド全体をcssのスタイルシートで指定しています。
このcssは、/html/user_data/packages/default/css/contents.css
に、新しいcssを追加作製しています。

———————————————————————————-

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

こんな感じでかいていって、「登録する」を押します。

4.完成したスライドをレイアウトで配置します。

【作業場所】
デザイン管理>PC>レイアウト設定

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

未使用ブロックに、先ほど3でつくったブロックがあるはずなので、ソレを任意の位置にレイアウトすれば完了です。

お教えしたままのタグだと、スライドを表示させているところが<div>でくぐってクラス設定をしているので、そこは、CSSで適当に調整してください。

以上で、簡単なスライドショーの設置方法でした!

 

ネットショップ運営において重要なのは在庫の管理能力

こんにちは。nekonomoridesignのyoshyです。
今日は久しぶりにネットショップについて語りたいと思います。

ネットショップ運営において大事なのは「在庫」をどう回すか

言うまでも無くなのですが、物販をするネットショップにおいて何よりも重要なのは【在庫】のあり方です。
売れる時期に在庫がないと商機を逃しますし、
売れない時期に在庫があっても不良在庫になり、商品価値も下がります。

その在庫の管理が上手く出来てこそ売り上げも変わってくるといても過言ではありません。

新商品を入れたくても在庫が圧迫して入荷できないというジレンマは非効率

断捨離の話にも共通しますが、、新しい物を手にするためには「古いもの」を捨てなければ決して良い物が巡ってこないと思っています。

在庫もそうで、「いつか売れるかもしれないから」という保険のためだけに在庫をおき続けているのは、あまり好ましい状態ではないと私は思います。

倉庫など保管場所に余裕があり、管理もきちんとされているようなところであれば問題ないかもしれませんが、たいていの会社の場合、自社在庫倉庫に加え、外部倉庫とも契約して荷物を保管していることもあると思います。

外部倉庫を使用するほどおいておかなければならないのか、もう一度見直すべきだと思います。

新しい物を入荷できるスペースを確保し、古い在庫は、腐ったり劣化しにくい商品であったとしても商品価値が下がっていくと言う認識を。

「いつか」の為においてある在庫は、永遠使える物とは限りません。たとえ劣化しない商品を取り扱っている場合であっても、すべてのものに「経年劣化」は生じます。

それでも価値が下がらず売れるものなのかもしれませんが、やはり、本当の意味では商品価値は下がっているのです。

そして、「いつか」の時の為においてある在庫が本当に必要かどうか、その在庫を処分して、新しい物を作ったり入荷できる余裕があるほうが、新しい商品で更なる売り上げアップも見込め可能性があるわけです。

劣化していない&いつか売れたときのため

と言う商品を今一度見直して、新しいフレッシュな商品を常に問い入れられる余裕作りが、ネットショップでの物販を成功させていく秘訣です♪

是非、参考にしてみてくださいね。

それでは今日はこのあたりで。

EC CUBE 2.13.3 クロネコヤマトB2のプラグインが動かない。ボタンが配置されない CSVがダウンロード出来ない

こんにちは。nekonomoridesignのyoshyです。
本日また、勤務先で躓きました・・・。
EC CUBE 2.13.3です。

ようやく、運送会社も決まり、配送システムの環境も整ったので
EC CUBEに、プラグインでクロネコヤマトB2用のを入れたのですが・・。

受注管理画面にクロネコヤマト用B2のボタンが表示されませんでした。

プラグインの競合として、ソニーペイメントサービスがあがっていたので
それも無効化してみたりもしたのですがぜんぜんダメ・・・。

苦肉之策で、クロネコヤマトB2用のプラグインを配布なさっている会社様(ボクブロック株式会社様)に連絡を取ったりもしてみたのですが、色々デバッグ(プラグインを削除してみたり入れなおしてみたり他のプラグイン無効化したり)したのですが、結局ダメでした。

プラグイン開発会社さんも初めての経験だそう

開発会社さんの担当様によると、ボタンが現れないというのは初めてだそうで、前例が無く、プラグインの不具合なのか、何と競合しているのかもわからないと言う事で、さじを投げられる格好になりました。

結局のところ、デバッグするほか無く、

  • 新しいサーバに新品のEC CUBE2.13.3をインストール
  • クロネコヤマトB2 2.13対応版プラグインをインストール
  • 受注管理画面を確認

これで受注管理画面にボタンが出なかったらプラグインの不具合なので修正しますということでした・・・。

今日は職場のサーバー管理者がいなかったので新しくインストール出来るようなサーバがあるかわからなかったので検証出来なかったのですが、2.13.3って、2.13.1とか用のプログラムじゃ動かないこともある気がするんですよね・・・・。

EC CUBEはバージョンで違いすぎて困る・・。

EC CUBE2.13.3を使っている人が少ないのか、まだ本とかもほとんど無いですし不具合報告も少なくて、かなり困っている自分はレアケースなのか?とすら思ってしまっていますが、とりあえずクロネコヤマト形式のプラグインが使えない事実には変わりませんし、新しいサーバにインストールしてプラグインが表示されなかった場合、プラグインの修正を依頼するにしても不具合解消までのタイムロスを考えれば、クロネコヤマトB2用のCSV出力をSQLで自作するほうが早いですよね・・・。

高度なCSV設定のところでクロネコヤマトB2のならびに応じたCSVを作製するようにがんばるしかない

結局プラグインのほうでどうにもならない事が判明してから、この足りない脳みそでクロネコヤマトB2用のCSV出力のSQLを考えていたのですが今日はうまく行きませんでした。

2.13.3対応のクロネコヤマト用B2 CSVが出来たら報告します・・・(泣)

今週は何だかピリっとしない終わり方でした。悲しい・・・。

Filemaker ファイルメーカーで絞込検索をする方法、ボタン・スクリプトの作り方 カスタマイズ

こんにちは。nekonomoridesignのyoshyです。
今日は、ファイルメーカーのお話をしてみたいと思います。
当たり前のように自分が使っているファイルメーカーなのでついついブログとかでそういった情報を書き漏れしている事に気づきました・・・。
元々、ファイルメーカー得意なので、良く考えてみたら、そういった知識もお伝えしていれば、いつか誰かのお役に立てるかも?ですよね。

では早速、今日は手始めに簡単&便利な3分クッキング的なファイルメーカーカスタマイズをご紹介します。

ファイルメーカー3分クッキング♪
検索のあと更に絞り込んで検索をしたいときに便利なスクリプトとボタン
を作る方法

検索モード、またはCtrl+Fで検索画面にして、入力されているものを探すときってありますよね?
その検索結果から更に絞り込みたい時、ファイルメーカー以外のソフトの場合たとえば・・・エクセルとかだと、画面を開いた状態でCtrl+Fをすれば検索窓みたいなのが出てきたりして見つけられたりしますが、ファイルメーカーで、検索結果表示画面の状態からCtrl+Fを押しちゃうと、自然と検索モードに切り替わってしまいます。

これは、Filemakerになれていない人だと案外ストレスのようです・・・。
よく、Filemaker導入直後ぐらいでたいてい、
「この検索結果から更に絞り込んで検索したいのにCtrl+Fおしたらまた検索にもどっちゃうんだけど?」

という苦情が相次ぎます(´_ゝ`)・・・・。

ので、絞り込み検索、標準装備されていたら良いなーなんて思いながら、毎回Filemakerでプログラムを組むときは真っ先に作るスクリプトです。

絞込検索のボタン&スクリプトの作り方

  1. スクリプト新規作成。名前は適当でいいが、判りやすく「絞込検索」とかにしておくといいかも?名前をつけたら、
    左側のスクリプト一覧から
    「検索モードを表示」
    を選んでダブルクリック
  2. つぎに、「対象レコードの絞込」を探して、ダブルクリック。
  3. 右側のスクリプトの順番が

    検索モードを表示

    対象レコードの絞込

    となっていれば完成。

  4. スクリプトを保存して閉じる。スクリプト作成画面を閉じる。
  5. 対象レコードの絞込をしたいレイアウトに変えてから、
    レイアウトモードに。(Ctrl+L)
  6. ボタンを適当に作り、ボタンの動作設定で「スクリプト実行」を割り当てる。割り当ての時にどのスクリプトを実行するか選べるので、先ほど作った「絞込検索」のスクリプトを指定して、ボタンに名前を付けて出来上がり。

たった2行のスクリプトです。
これだけで絞込検索になります。

ためしに、Ctrl+Fまたは検索モードで何か検索し、その検索結果の状態から、先ほどは位置した「絞込検索」のボタンをクリックすると、再度検索モードになります。
絞り込みたいワードを入力すれば、検索が更に絞り込まれた状態で出来ているはずです。

めちゃくちゃ便利ですので是非、この絞込検索ボタンとスクリプトはおすすめです。

このスクリプト、自動で表示されるようにならないかなー・・・・(´_ゝ`)・・・。

それでは今日はこのあたりで!

 

EC CUBE 2.13.3 カスタマイズ 商品のステータスを増やして表示アイコンも増やす方法

こんにちは。nekonomoridesignのyoshyです。
本日もEC CUBEのカスタマイズです。

商品状態のステータスを増やして、アイコンも増やす方法

これも、案外簡単でした。さっくり説明しまっす。

  1. EC CUBE管理画面のシステム設定>>マスタデータ管理をクリック。
    プルダウンから「mtb_status」を選んでから「選択」をクリックします。
    下記写真のように、一覧で出てくるので、追加したい値を入力して
    「この内容で登録する」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  2. 今度は同じく
    EC CUBE管理画面のシステム設定>>マスタデータ管理をクリック。
    プルダウンから「mtb_status_image」を選んでから「選択」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  3. mtb_statusで追加したIDと同じIDを「ID」に入力。
    その隣の「値」に、アイコン画像へのパスを入力し
    「この内容で登録する」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  4. 今度は、画像が保存されているところに移動します。
    eccube-2.13.3 >> html >> user_data >> packages >> defalut >> img >> icon
    (defalutのところは、カスタマイズフォルダの人は、そのフォルダです)

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  5. photoshop等の画像編集ソフトで、
    幅60px、高さ17px
    の大きさでアイコン画像を作り、先ほど、3で指定した画像の名前で保存します。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  6. あとは、管理画面>>商品管理>>商品マスターで新規登録などでみてみると、ステータスがちゃんと増えているのがわかると思います。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法

意外と簡単ですね!
是非やってみてくださいね!