アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2011年4月

2011年4月23日

CSS3でbackground(背景画像とグラデーションを同時に)指定するときの注意。

成功者になるための必読ブログとは?

CSS3はガシガシ使うべし。

最近、ChromeやSafari、Firefoxなど対応するブラウザも増えてきて、そろそろ積極的に使ってもいいんじゃないか?っていう雰囲気のCSS3。

角丸やドロップシャドウなど、いままでどうしても画像に頼らざるをえなくて、その分余計なコードや作業が必要だったものが、CSSの設定だけであら不思議!?

htmlのコードはそのままに、見た目を簡単に変えることができます。

ウェブ屋にとって、まさに『待ってました』のCSS3ですが、背景画像とグラデーションを同時に指定する場合、注意が必要です。

背景画像が出ない!

今回は透過PNGとグラデーションを指定するという単純なもので、グラフィックツールで作ったカンプをもとに、色の指定をして、んで、背景に画像を指定したら...

...ひょ、表示されない!?

スペルミスをチェックしたり、画像を変えたりしても一向に表示されないんです。
いや、グラデーションは表示されるんだけど、背景画像が出ないんです。

んで、小一時間悩んだところでもう一回チャレンジ。

今度は属性の指定の順番を変えてみたら...

ちゃんと出ました。(汗)

背景(background)の値の順番

基本的にCSSを指定するときは、

#back1 { background: #F00 url(shared/img/headerimg_back.png) repeat left top; }

でも、

#back2 { background: url(shared/img/headerimg_back.png) repeat left top #F00; }

背景色と画像が表示される。

つまり、

『プロパティ(属性)の値は順番が関係ない』

そう思っていたんだけど...。

今回の場合はその順番が原因でした。

×『グラデーションの指定、背景の指定』
○『背景の指定、グラデーションの指定』

という感じです。

具体的には、

#gradient {
width: 900px;
height: 150px;
background: #CCC;
background: -moz-linear-gradient(top, #eee, #999 20%, #eee),
url(shared/img/back.png) repeat 0 0;
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee)),
url(shared/img/back.png) repeat 0 0;
}

↑これは出ない。

んで、こっち↓が正解。

#gradient {
width: 900px;
height: 150px;
background: #CCC;
background: url(shared/img/back.png) repeat 0 0,
-moz-linear-gradient(top, #eee, #999 20%, #eee);
background: url(shared/img/back.png) repeat 0 0,
-webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee));
}

すっごい細かいことだけど、プチはまりしたので備忘録。

 

投稿者 kuro : 01:43 | 固定リンク | ID:842

ページトップ△

2011年4月10日

Google Analyticsで外部へのリンクをトラッキングする方法。(非同期型)

成功者になるための必読ブログとは?

知ってる人にとっては今さら感のあるネタだけど、

そもそも全部のサイトやページを自分で管理できれば、Analyticsのコードを書けばいいので何の問題もない。

んが。

例えば別サイト(ドメイン)や、アフィリエイトやドロップシッピングのカートページなど、どうしてもあちら側(?)にコードを実装できない場合、

「外部リンクへトラッキング」

ということが必要になる。

んで、Googleのヘルプとかにもそのやり方があるんだけど、それがまたややこしい。
ヘルプの中にもいくつかの別の記述のコードが引っかかって、さらにそれが古いコードだったり新しいコードだったり...。

ネットで「Google Analytics 外部」とかで検索してみても、未だに古いコードと新しいコードが両方とも検索結果に引っかかって、いまいち分かりにくいので備忘録ってことで。

とりあえず新しいコードで

いつだったか忘れたけど、Google Analyticsのコードが『非同期型』に変わってます。
もちろん、旧来のコードもそのまま使えるので、古いサイトとかでは変更する必要もなかったんだけど、サイトをリニューアルしたり、今後のことを考えたりすると、新しいコードに変えておくのがいいかと。

ちなみに、Googleのコードは日々(?)進化していて、

「urchin.js」(2005年11月から)
「ga.js」(2007年12月から)
「非同期」(2009年12月から)

といった具合に、いくつかのバージョンがあるようです。

今回、お客さんのサイトで一番古い「urchin.js」を使っていたサイトがあり、そこで外部へのリンクを計測しなくてはならなくなったので、ついでにAnalyticsのコードも新コードに差し替えをしました。

ちなみに、新しいコードは以下のような感じになっています。

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

Google Analyticsで外部へのリンクをトラッキングする方法。

んで、本題の外部へのリンクをトラッキングする方法ですが、外部へのリンク(aタグ)に以下のコードを追加するだけでOK。

<a href="【リンク先のURL】" onclick="javascript:_gaq.push(['_trackPageview', '【仮想リンク先】']);">

例えば、リンク先が「http://www.hogeohoge.com/」で、仮想のリンク先を「hogehoge/index.html」としたい場合、

<a href="http://www.hogehoge.com/L" onclick="javascript:_gaq.push(['_trackPageview', '/hogehoge/index.html']);">

とすればいいわけです。

アナリティクスには、実は他にもいろんな関数とかもあるので、古いコードを使っている人は、今のうちに新しいコードに差し替えをしておくといいかもしれません。

 

投稿者 kuro : 22:12 | 固定リンク | ID:841

ページトップ△

2011年4月 2日

マッサージチェア専門の通販サイトをローンチ。

成功者になるための必読ブログとは?

経済活動が日本を救う。

今回の震災と連鎖的に起こった原発事故で、世の中はなにかと自粛ムードに包まれています。

もちろん、無駄な電気は使わないとか、無駄な買い物はしないとかは心がけなければならない。被災者の人たちは、それこそ言葉には表せないほどの苦労や辛い思いをしているのだから。

でも、通常の経済活動まで『自粛』してしまうのは、今後の復興のためにもダメなんじゃないかと。

誰かが言ってましたが、

『自粛するのを自粛する』

まずは自分自身がしっかりとすること。

ボクはウェブを作ることが仕事なので、まずは自身が元気に明るく過ごせるように、そして周りのひとたちや、さらにその周りのひとたちを幸せにするために、日々の仕事に邁進します。

...と、前置きが長くなりましたが、経済活動の一環(?)として、マッサージチェア専門の通販サイトをローンチしました。

自宅で簡単リラックス。

調べてみると、最近のマッサージチェアは、かなり高機能で、まるでプロのマッサージ師にやってもらっているような...モノによってはプロを超える心地良さを実現した製品まであります。

価格帯はピンきりだけど、下は5万円代から、上位機種の30万円台まで幅広く取り扱っていて、それぞれ機能や特徴によって、各社がしのぎを削っている状態です。

メーカーごとにウリが違ったり、デザインが違ったりするので、部屋のインテリアやお財布と相談してぜひ決めてくださいw

 

投稿者 kuro : 13:00 | 固定リンク | ID:840

ページトップ△

2011年4月 1日

【4月1日】ご報告。新しいコンセプトのスクールを開校!

成功者になるための必読ブログとは?

ずいぶんとブログをお休みしてしまいましたが、みなさんご無沙汰しております。お元気でしたか?

さて。今日という日に間に合いました。

この度、いつもお世話になっている学校のカリキュラムの改変に伴い、授業のカリキュラムがなくなって、余ってしまう現役講師陣が集まって、新たなコンセプトで業界初のスクールを開校する運びとなりました。

その名も

『モテタルハリウッド』

どこかで聞いたことのあるような名前ですが、全くのオリジナルの、現場に即したカリキュラムの授業内容となります。

私たちのスクール『モテハリ』のコンセプトは、どこかの学校のかっこいいコンセプトとは違い、ただ一言、

「本気で遊ぶ」

でっす!

ウェブという、今後もますます伸びていく業界のなかで、あえてまったく関係のない『モテ』をコンセプトに、業界(なんの?)のフラッグシップとなるスクールを目指して頑張っていきたいと思います。

残念ながら某スクールでは無くなってしまった、ウェブのクラス...今まで取りこぼしてしまっていたものを、当スクールでは丁寧に拾っていきます。

これからもよろしくお願いいたします。

P.S.
※【重要】コンテンツはよく読んでくださいね。
そして、「今日」という日をお忘れなく。

※ということで、2011年度版のエイプリルフールネタでした。

 

投稿者 kuro : 22:59 | 固定リンク | ID:838

ページトップ△