札幌のITベンチャー企業、株式会社アンタスデザイナーのブログ。雑談ばかり…

書いてる人

sako@アンタス札幌
デザイン担当。
Xmas生まれ。B型。
父は広島県民の道産子。
本当はMac派。
２次元も大好きなニコ厨。
札幌で暮らし始めて日。
Booklog：そっとお気に入りをしまう。

最近のエントリー

• ショッピングサイト構築サービス 繁盛EC(7/24)
• リストの画像の隙間(4/16)
• EC-CUBE　階層のあるカテゴリーの数値について(4/15)
• ちょっとカワイイ色つきQRコード(3/31)
• EC-CUBEはじめました。(3/27)

アーカイブ

• 2010年07月(6)
• 2010年06月(4)
• 2010年05月(2)
• 2010年04月(2)
• 2010年03月(6)
• 2010年02月(6)
• 2010年01月(3)
• 2009年12月(3)
• 2009年11月(4)
• 2009年10月(1)
• 2009年09月(3)
• 2009年08月(5)
• 2009年07月(8)
• 2009年06月(8)
• 2009年05月(11)
• 2009年04月(5)
• 2009年03月(1)
• 2009年02月(12)
• 2009年01月(8)
• 2008年12月(3)
• 2008年11月(3)
• 2008年10月(4)
• 2008年09月(7)
• 2008年08月(5)
• 2008年07月(9)
• 2008年06月(4)
• 2008年05月(3)
• 2008年04月(9)
• 2008年03月(6)
• 2008年02月(5)
• 2008年01月(5)
• 2007年12月(3)
• 2007年11月(3)
• 2007年10月(5)
• 2007年09月(4)
• 2007年08月(5)
• 2007年07月(10)
• 2007年06月(7)
• 2007年05月(6)
• 2007年04月(4)
• 2007年03月(3)
• 2007年02月(1)
• 2007年01月(3)

カテゴリ

• CSS(1)
• EC-CUBE(5)
• web系(84)
• にっき(69)
• アンタスのこと(25)
• グラフィック系(7)
• モバイル(3)
• 作品(3)
• 札幌(9)
• 素材(2)
• 読書(8)
• 料理(3)

アンタス社員ブログ

• ロングテールをめぐる冒険
• つれづれ
• キータッチは強めに。
• 技の蔵之介
• やまかわのログ

アンタス検定

ANCHOR・採用情報

▲成功する採用。採用ホームページ作成CMS アンカー

▲採用情報 アンタス採用HPリニューアルオープン！ 名古屋サポートグループにて積極採用！

ブログパーツ

Powered by
Movable Type 3.33-ja

EC-CUBEアーカイブ

2008年04月15日EC-CUBE　階層のあるカテゴリーの数値について

EC-CUBEでは、カテゴリーは最大5階層まで増やすことができます。（パラメーター設定のLEVEL_MAXで増減を管理できます）
登録した商品の数が、表示画面で数値として出てくるのですが、最初はちょっと落ちやすい落とし穴（？）があります。

例えば以下の商品がこのようなカテゴリがあったとして

■花
　□春の花
　□夏の花

「たんぽぽ」という商品を「花」「花>春の花」のカテゴリで登録したとします。
管理画面ではこうなりますね。

すると表示はこのようになります。

なぜ花(2)かというと、たんぽぽで２つのカテゴリを指定しているからです。
さらに「ひまわり」という商品を「花」「花>夏の花」で登録したとする。すると、

と、なります。一見、花に４つの商品があるように見えますが、表示されるのは２つです。
さらに、「ばら」という商品を「花」「花 >春の花」「花 >夏の花」で登録したとします。

2つのカテゴリのものが2つ、3つのカテゴリのものが1つありますので、
(2×2)+(3×1)=7で、花（7)になるのです。

これはちょっといただけないな〜ということで、大カテゴリの「花」を選択しないようにします。
「たんぽぽ」という商品を「花 >春の花」で登録
「ひまわり」という商品を「花 >夏の花」で登録
「ばら」という商品を「花 >春の花」「花 >夏の花」で登録

んむむむむ。花(4)になっています。今までの現象を見れば納得ですが。
登録されている商品は３つなのですけども、「ばら」が２カテゴリで登録されていますので。
確かに春の花(2)、夏の花(2)で、足して4なので間違いではありませんよね。
これがEC-CUBEの仕様です。

本来なら花(3)にはなってほしいですね。
カスタマイズを行えばここは解決する問題かもしれませんが、デフォルトだとこうなります。

ちなみにブログのカテゴリの場合は、大抵花(3)でしょう。
Movable Type4.1も同じです。

上↑はMT4.1の例。（注：MTのカテゴリの順位はコード順になるので、夏の花が上にきています）

EC-CUBEで階層をもったカテゴリーで登録するときは注意しましょう。
大カテゴリは選択する必要はありません。

2008年04月16日リストの画像の隙間

モリモリとブログを書きすぎのような気がします。が、気にしません。
最近のマイブームはEC-CUBEです。
自分メモもかねて。（たまにどうだっけ、と考えてしまうので）
割と陥りやすいのですが、画像（ボタンとか）をリストにした場合。
ありますね。縦ナビゲーションのときは大抵このように作るでしょう。

【html】
<ul>
<li><img alt="ｘｘｘ.gif" /></li>
<li><img alt="ｘｘｘ.gif" /></li>
<li><img alt="ｘｘｘ.gif" /></li>
</ul>

【CSS】
ul{
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
}

この場合、下のように画像と画像の間に隙間が生じてしまいます。

そこで魔法のCSSを、リストの中の画像に対して１つ追加します。

【CSS】
ul{
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li img{
vertical-align:top;
}

すると下のようにぴたっとくっつくのです（IEも含め）。

vertical-align:top;ではなく、vertical-align:bottom;でも可能です。
vertical-align:middle;は変化ありません。

EC-CUBEの利用ガイドブロック内のボタンもリストになっていまして、Firefoxでは隙間なく見えるのですが、IEですと離れて見えます。（IEでデザイン崩れなく見えるようにしてほしいな…）
↓IEで見たもの

それもどこかのCSSに追加で解決できます。（大部分の見た目を制御しているmain.cssが妥当かと）
ボタンのデザインによっては必要がない場合もありますけどね。

ちなみにliにfont-size:0;を入れてでも可能です。

【CSS】
ul{
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 100%;
border: 0;
font-size:0;
}

ですがfont-size:0;は実際本来の目的ではない、文字に対しての指定ですし、ちょっとかっこ悪いのでvertical-alignのほうが理想的ではないかと思います。

話は変わって、ニコニコ動画等で性転換シリーズがいろいろとヒットしています。（結構前からですが）
アニメや漫画（ときには実写）の登場人物のキャラクターを、すべて性別を変えてしまう、ものです。
元のイメージはそのままに、ただ性別を変えたらどうなるか、というものを楽しむのです。
（例えばモーニング娘。が全員男だったらジャニーズみたいになるのかどんなふうに売れるのかとか！）
エヴァンゲリオンなど良い出来ですが、涼宮ハルヒの憂鬱版はたいへん良い。
むしろそっちの方が好きかも。
それでゲームを作ったらどうなるか…OPを作ったらどうなるか…アニメを作ったらどうなるか…MADムービーをニコニコ動画やYouTubeに投稿して、結構人気があるんですよね。
それをヒントになにかビジネスにつなげられるかもしれませんねぇ（あるかな…思いつかないのですが）。
それこそ発想の転換？