カテゴリー別アーカイブ: webデザイン

ヤフーショッピングのページで、トリプル契約をしていなくても画面の左右に縦長のバナーを表示させる方法

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

ヤフーショッピングに無料で出店している方で、トリプルの契約無しと言う方もいらっしゃるのではないでしょうか?
でも、トリプルの契約をしていなくても、なんとなく「売ってるよ!」感を出したいと思うのは出店者としての本音だと思います。そこで、何とかできないかなーと試行錯誤したのがこちら。。。。

<ul>
<li style=”background-color:transparent;
background-image:url(画像のURLをここに記入);background-repeat:repeat-
y;background-position:top
left;background-attachment:scroll;height:7000px;top:230px;z-index:auto;left:0px;position:absolute;width:画像の横幅の大きさを指定;min-height:100%;visibility:visible;display:block;”>
<a href=”リンク先のURLを記入”
style=”display:block;min-height:100%;width:画像の横幅の大きさを指定;visibility:visible;height:5000px;text-indent:-9999px;”>
</a></li>
</ul>

こんな感じのタグを、ヘッダーのフリースペースに入れると出てきます。
ちなみに、これは左側に出したいときのタグです。

ヤフーショッピングの通常版(トリプル契約なし)で、CSSスタイルシート属性を適用したいときは、直接 styleで指定してしまう。

ヤフーショッピングなどのモールでの場合は、通常契約の状態だとスタイルシートは使えません。しかし、裏技的な事になりますが、直接style属性で設定する事はできます。

たとえば・・・

<p>スタイルを適用したいなー・・・</p>

<p style=”font-size:12px;color:#FF0000;font-weight:bold:line-height:20px;”>

スタイルを適用したいなー・・・

</p>

という記載は可能と言うことです。

直接CSSを適用しているので、スタイルシートの最も便利な「汎用性」「更新のやりやすさ」という利点はまったく活かされない

当然ではありますが、外部スタイルシートなどに直接CSSを設定できる場合、そのスタイルシートさえ書き換えれば、各ページも自動的に切り替わるというのがスタイルシートの利点でもあります。

しかし、直接style属性でcssを適用している場合は、当然ながら、書くページの変更をしないといけません・・・。

なので、css設定でしかやりづらい表現をしたいときなどは、この方法を使用しても良いと思いますが、できれば、外部スタイルシートを使用したページ作りができるような契約をしているほうが良いかなとも思います。

家賃無料・自社サイト系のクレジットカード決済よりも決済手数料が低いヤフーショッピングを最大限利用していこう

ヤフーショッピングで取り扱っているクレジットカード決済は、実は、EC-CUBEなどの自社サイト系で契約可能なクレジットカード決済サービスよりも手数料が安かったりします。(契約内容にもよるところはあります)

アフィリエイト負担等ちまちましたものはありますが、ヤフーショッピングは、限りなく0円に近く、それでいて集客もまあまあしてくれるサイトです。
正直なところ、詐欺だのナンだのが流行している時代に、モール以外の自社サイト系でしかも、大手じゃない小さなネットショップでショッピングをする人の絶対数は限りなく少なくなってきている事を考えても、ヤフーショッピングに出店する事はメリットになると思います。

(ヤフーショッピング+自社サイトはまだOK)

無料の範囲でも色々とできる事はあると思いますのでそれを追求し、広告費0円、固定費0円でどこまでやれるかこれからも頑張っていきたいと思います。

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

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

こんにちは。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で組んでいたと言うところは、打ち変えしたほうがよいと思います。

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

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

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

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

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

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

プログラムを習いたい、初心者でも続けられるプログラミング講座 おすすめ。夜間に受講できるレッスン

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

最近、本当、いろんなスクールがありますね。
私は個人的に秋がとても大好きで、秋は色々やる気が起きる季節なのでとてもうれしいです。

そんな中でも、最近凄いなーとおもったのがコレ。

【親子・お子様・大人も一緒に】
土日にプログラミングレッスンが受けられる講座

ZIP-FMクリエイタープログラミングスクール「CODE FRIENDS」開校

愛知県在住の私。仕事をしながらいつも流れてくるのはZIP-FMなのですが、そのZIP-FMがクリエイタープログラミングスクールを開校したということで、受講者の募集と、小中学生を対象にした

スマホゲーム開発コース

というのが10月から開始されるそうです。
しかも、このコース、親子での受講が可能!

お子様のいるご家庭がうらやましい・・・!楽しく学びながらスマホゲームを開発していけるということで、現役プログラマー講師によるレッスンだそうです。

私が小学生の頃とかの習い事と言えば・・・せいぜい、ピアノ・・・そろばん・・水泳教室・・書道教室・・・・・くらいだったと思いますが、いまはこんな実践的な習い事があるんですね~。

プログラミングは言語。
言葉と一緒で楽しく慣れる事が一番大事

プログラミングというのは、良く難しくとらえられがちですが、私の感覚では、プログラミング=コンピュータとの会話の言葉
というニュアンスです。

コンピュータさんに、「これやってね」という「言葉(プログラム)」を伝える事で、こちらのしたい事を実現してもらっている、と言う感覚です。

なので、その言葉(プログラム言語)を早いうちから取得する事はとても良いことだと思います。
私も小さい時にそんなレッスンあったらいってみたかったなー・・・なんてうらやましくおもっちゃいます(笑)

【大人・社会人向け】
夜間にプログラムレッスンが受けられる講座


大人になってからでもまだいける!
プログラミングを学ぶなら CodeCamp

このコードキャンプというプログラムレッスンは、大人向けです。
プログラム初心者~キャリアチェンジ希望者まで幅広く受講が可能。

Web上で現役エンジニアによるオンラインレッスンがマンツーマンで受けられるそうです。
レッスンは毎日10時~23時40分まで開講されていて、ビデオ通話を利用した受講方法で習えるそうです。
ビデオ通話なので、おそらく、実際にプログラムを打ち込みながら、教えてもらえるという感じなのでしょうかね?

プログラムだけじゃなくて、PhotoshopやIllustrator等のレッスンもある。

photoshopやIllustrator等のレッスンもこのコードキャンプにはあるので、自分の好きなコースに申し込んで受ける事ができるようです。
他にも、HTML5や、Java等いろんなコースがあって、なおかつ、初心者~キャリアチェンジ(転職)をしたい人まで、いろんな目的に応じた物を教えてもらえるそうなので、とても良いなと思いました。

実際、一般的な夜間スクールだと、均一的に習うことが多くて、「これじゃないんだよね・・・」というような段階からやらないといけなかったりで、それがきっかけで仕事が少し忙しくなってくるとそれを理由にやら無くなったり・・・というのがありそうなので、自分の習いたい範囲から受ける事が出来るのは良いなと思います。

こんな風に、色々なプログラム系レッスンがある中でも、Web経由でひたすら動画だけを見るようなものじゃなくて、実際にやりながらできるプログラム学習は良いなと思います。

是非、キャリアチェンジや、プログラムを習って見たいと思っている人は参考にしてみてくださいね。

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カスタマイズです。

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

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

  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で適当に調整してください。

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

 

Photoshopやデジタルデザインソフトの基本は「道具」なのであって絵が急に上手くなるわけではない。

こんにちは。nekonomoridesignのyoshyです。
今日はデザイナーという仕事をしていてたまに遭遇する「あるあるネタ」を話してみたいと思います。

Photoshopを使えると聞くと、絵が上手いんだ、と思っていませんか?

誤解が多いようなので声を大にしてもう一度言いたいとおもいます。

photoshopが使えたら絵が上手くなるわけではありません

デジタルソフトですので、実際にペンやインク等で色を塗るよりは多少フォトショップのほうがラクです。今では、タッチペンもありますし、直接そこに絵を描くこともあるでしょう。

しかし、それがじゃあイコールで絵が上手くなるのかと言えばそうではありません。
元々、フォトショップは写真加工に優れたソフトであり、色の補正を得意とし、それにプラスアルファしてグラフィカルな絵を描くのにも適しているというソフトです。
ですので、写真が好きで、写真家効用にフォトショップを触り始めた人もいるのです。

そういう人も、「Photoshopを使えます」というと、たいてい
「じゃあ、絵が上手なんですね」と言われる事が多いようです。

絵を書くのが好きで、色を付けたりする道具としてフォトショップを使う

アナログで自分の書いた下絵にペン入れをしたり色を塗ったりすると失敗が聞きません。ものすごく集中力も要りますし、細かい修正なども出来ません。

しかし、フォトショップを使えば、下絵をそのままデジタルデータ化が出来、セル画のように、その線の下にレイヤー(透明な紙みたいなものと思ってください)に色を塗って、気に入らなかったら色を補正したり、塗り足したり、レイヤーを増やして複雑な色を表現してみたりとかが容易に出来ます。

アナログの場合そういった事をあらかじめ自分の脳内で想定、想像し、着色作業をしていく必要があるのです。

結論。アナログで絵を描ける人じゃない限りはフォトショップを使えても絵が上手になるわけでもないし、いきなりデジタルで絵を書き始めてもアナログで絵を描き続けるのと成長スピードはそれほど差がないと思います。

ですので、絵が描けるようなデザイナーを欲しているときの面接の際は、フォトショップが使える=デザイナーだ!
という幻想は早くやめて、実際にアナログでの絵を見せてもらうとか技術的試験を少しはしたほうが良いと思います。

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

 

退職した会社で自分の顔が入った写真が使われる事について 肖像権を掘り下げて考えてみた

こんにちは。nekonomoridesignのyoshyです。
本日、友人から、こんな相談がありました。

「退職された方の顔写真が使われた画像を再び使用しようとしている人が居たので私は使うのは良くないと思うし、許可も得ずに使うのはどうかと思う、写真をとり直したほうが良い、と提案したが、と伝えたが意に介してもらえなかった。」

という相談でした。

肖像権、とりわけパブリシティ権については社員である事が前提で本人が許諾していると普通は考えるべき

さてここで疑問なのが「肖像権」の問題です。
モデルという職業でもない一般人ではあるものの、ネットショップなどに使用される画像にモデルとして社員が撮影をしている事はネットショップ業界では良くあることではあります。

しかし。

自社の商品が売れやすい魅力的な写真が撮れるようにと言う事で協力し、営利目的(商業目的)で写真を使用する事はパブリシティ権も絡んできます。それはあくまで「そこの社員」だったという場合のみ、本人も許諾していることではないのでしょうか?

退職した人が写っている写真や画像の使用は、本人の許諾がない場合は使用を控えるべき

元社員・なのですから部外者です。
写真の所有権がその会社にあったとしても、「肖像権」の譲渡の契約の確認をしていない以上、私はその肖像権を破棄されておらず、肖像権はその社員個人固有の物になります。

ましてや、本人に許諾なく過去の写真だからといって使うのは、人権侵害にもなる行為となると私は考えます。

過去に撮影させてもらった写真については、本人に必ず使用許可を得るべき

私が在職していたときに、会社に残っていた写真で退職した人がモデルをしていてくれた商品の画像を再使用する時は、必ず本人に許諾を得ていました。

ただし、許可を得られるのも、円満退職の場合や本人との信頼関係がある場合しかそれもかないません。私が使用させていただいた場合はモデルの本人を知っていたし個人的なお付き合いもあった方だったので良かったのですが、今回の場合、退職後に入社したメンバーが使用した事であったり、内部事情的にそのモデル本人への連絡が難しい状態であるので、そういった場合は、やはり許諾を得ないうちは使用するべきではないと私は思いました。

社員をモデルにして商品の撮影を行うときは事前に契約を交わすべし。
可能であればモデル料として割り増し賃金を支払うべき

日本はどうしても肖像権など、物理的に減らないもの、物理的に価値の図りにくい物に関して無頓着であり、「堅い事いうな」という風潮が強くあるがゆえに、軽視されがちですが、肖像権は人格・人権を守る立派な権利であります。

しかし一方で、「写真ぐらいなら・・」と善意でモデルになってくれることもあるでしょう。

そういった人の厚意・善意を無碍にしてはいけませんし、そういってくれた人には相応の報酬を与えるべきだと私は思います。

プロのモデルをつかっているんじゃないんだし・・・という経営者さんも居るかもしれませんが、「モデル」として商品の紹介の一約を担ってくれている以上、素人もプロも関係なく商業目的のモデルとして捉え、報酬を支払うべきです。

報酬を与えた上で、退職後の写真の使用許可についても契約を交わしておくべきです。

使用許諾を得て居ない過去の写真を使用し続けた場合、最悪の場合は訴えられることもある

極端な例ではありますが、過去の写真をどうしても使われたくはなかったのに使われている事がわかった場合、肖像権の侵害・人権侵害などで訴えられることもある可能性がある事を肝に銘じて欲しいと思います。

過去の従業員なのに・・・という甘い考えでは通用しません。

そのあたりをきっちり踏まえて、写真を使う場合、元いたデザイナーが残していってくれた過去の製作物を使う場合はきちんと話し合いで使用許諾範囲を話し合っておくほうが良いと思います。

あまりに肖像権の問題を軽く考えている事にびっくりしたので警告の意味もこめて発信しておきました。
参考人あれば幸いです。

無料でHTML、PHP、CSS、Ruby、jQueryのプログラムを勉強する方法 動画でもなく実践で必ず身につくプログラム勉強サイト紹介

こんにちは。nekonomoridesignのyoshyです。プログラミングを勉強したいけどどうしていいかわからない。webデザインは出来るけどプログラムは出来ない、やってみたい。そんな人におすすめのサイトを今日は紹介したいと思います。

プログラミングレッスンサイト
Progate 無料プログラムレッスンサイト

最初、私もこんな無料で勉強出来るサイトがあるとは知りませんでした。このサイトを知ったきっかけは、今の会社に入社するまえ、プログラミングの勉強を自主的に行うようにと言うことで教えられたサイトなのです。このプログラミングレッスンサイトの特徴は・・・

  • 簡単な登録(Eメールと名前だけ)で即開始できる。
  • HTML+CSS(基礎)、HTML+CSS(応用)、PHP、Ruby、jQuery、を無料で学べる。
  • 初歩からやっていけるので基礎力が身につく
  • 独学でやってたことを復習できる
  • ヒント機能があるので自主勉強形式でも行き詰らない
  • 実際にプログラムを手打ちして覚えて行くので忘れにくい
  • エディターなどソフトも必要ない状態でプログラムを実際に打ち込みながら覚ええる形式でより実践的

という至れり尽くせりなプログラム勉強サイトなのです。

動画レッスンよりも、実際に出された課題をこなしていくほうが覚える

動画レッスンも最近はやっていますが、個人的に私の場合は、見ているだけでは覚えられないたちなので、このProgateが良かったです。
入社した会社(Webプログラム会社)が薦めてくるだけあって、本当に実践的で良いレッスンが受けられるのは凄いと思います。

プログラムは自分でプログラムを入力してみて、で、思い通りに動かなくて
「あれ・・なんで動かないの・・表示されないの・・・」
という絶望感を味わったほうが成長は早いです(笑)

手打ちでプログラム言語を打ち込んでいくと、50%くらいの確立でタグの打ち間違え、単語ミス、開始括弧l、閉じ括弧のミスなどが原因だったりします。
そういうのは、動画を見てるだけでは無理です。実際にやってみて、ミスって、初めて自分の癖みたいなのもわかりますし、タグの1つでプログラムが動かなくなる事を肌で覚えたほうが早いです。

デバッグ力(直す力)がある人は成長できる

プログラムの仕事を少しやってわかった事があります。
Filemakerでのプログラムのときでもそうですが、自分が組んだものが動かなかったとき、または、思い通りではなかったとき、表示が思うように出来なかったとき、プログラムソースを見て、バグ(間違え)を見つけなければなりません。

その時に、ミスった経験がない場合、たった1個の文字のうち間違えに多大なる時間がかかる場合もあります。絶対こんなとこはミスしないだろうと言うところが意外と間違えているパターンが、プログラムの場合は多く存在します。(コピペでもってきて途中までしかコピペされてなかったとかいう悲しいパターンとか・・)

普段から、デバッグを見つける能力を高める事こそが、より正確なプログラムを打てる用にもなりますし、そのためにもやはり独学だけでなく「基礎力」を最初からもう一度体に叩き込むのも良いと思います。

独学で勉強していた人が再復習するにもこのProgateでのプログラミング練習はおすすめ

私も独学でHTMLもCSSもやってきましたが、このProgateでの復習は今に役立って居ます。是非、プログラミングをやってみたいけど何からしたらいいかも判らない。独学でやってきたのを確かめたい、新しいプログラムを触ってみたいけど何からしていいかもわからない、と言う人は、このProgateでプログラムを練習したり、触ったりしてみると良いかもしれません。

おすすめです!

 

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 商品のステータスを増やして表示アイコンも増やす方法

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

EC CUBE 2.13.3 カスタマイズ おすすめ商品の表示件数を増やしたい

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

おすすめ商品の表示件数を増やしたいときの増やし方

案外、簡単でした。管理画面だけで出来ました。

  1. EC-CUBE 管理画面の「システム設定」をクリック

    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
  2. RECOMMEND_NUMというところの数字を任意の数に変更するだけです。

    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
  3. おしまい。

こんな感じで簡単に出来ました。

あとは、管理画面の「おすすめ商品」の登録画面にいけば、設定した数字の分だけ、作製枠が出来ていると思います。

あまりに簡単すぎてびっくりしちゃいました。

でも、忘れそうなのでメモメモ….。

今日は短いですがここまでっ!

良いEC CUBEカスタマイズライフを!!