2012年12月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

Nivosliderで画像にaタグでリンクをつけたときにIEでうまくいかない件

Nivosliderを使っていて、トップページのスライドショーを組み込んだら、
お客さんから「スライドショー画像がクリックできませんよ」という指摘がはいっちゃいまして、調べてみたら、ほんとだ、IE9でもIE8でもクリックできない。

ソースにはちゃんとaタグが入っているのに。。

ってんで、サクリと調べたらこんなブログで解決策がのっていました。
http://eds-samuraiz.com/archives/528

nivo-slider.cssの

 .nivoSlider a.nivo-imageLink{}



background-image(a);

を追加すればいいみたいっすね。 

もちろん(a)というのはダミーというか、エラー起こしちゃうけど、そこは気にしない。
IEだけに適用だから、

/background-image(a);

としてもいいかもしれない。



ところで、僕の場合、これでもうまくいかなくて、MAKESHOPっていうASPに組み込んだこともあり、なんかもともと組み込まれてるASPのjavascriptとバッティングしちゃったかなぁーって2時間もはまって、解決したのは、

aタグに高さを持たせたら解決したっていうこと。

 具体的には以下の記述をcssに足しました。

 
.nivoSlider a.nivo-imageLink {
/background-image: url(a) ;
/height:200px;
こんかいスライドショーしている画像の高さが200pxだったので200にしたけど、300だったら300に設定する。

aで囲んでいるimgが絶対配置されてるためか、aの高さがなくなっちゃってることを見つけて、応急処置でimgと同じ高さをaに持たせて解消しましたよ。



cookieで訪問者によってdivを表示したり消したりする条件分岐。jqueryが便利。

お仕事で、
「クッキーを使って、一度でもログインしたことのあるユーザーには、トップページに特定の画像を見せたい」

という依頼があった。

cookieの操作は、やったことがなかったのだけど、まぁなんとかなるだろ、と引き受けて、なんとかなりました。最低限cookieでdivを見せたり非表示にしたりするためのことを書いておくね。


■cookieの構造

 cookieは、最低限では
・箱の名前
・箱の中身
・有効期限

でできている。

aiueo という箱の中身に 1111を入れておく、有効期限がくるまで。みたいな感じね。


■cookieの保存
クッキーを食べさせるとも言うね(ほんとに?)
javascriptで一文でOK

<script>
document.cookie = "aiueo=1111; Tue, 31-Dec-2030 23:59:59;"
</script>

aiueoという箱に1111を保存する。
有効期限は2030年の年末まで!

ということ。これでユーザーがブラウザのクッキーを消さない限り、2030年までは残り続ける。

怖い子。。



■cookieを読んで条件分岐する。

ここはなんだか面倒だったのでjqueryを使った。

jquery.cookie.js というのを使う。

ここで手に入れた


もちろんjquery.js本体も忘れずにね。


それらを読み込ませる。

んで、こんな感じ。

<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
cookiename = $.cookie("aiueo");
if(cookiename == "1111"){
$('#box1').css({display:'none'});
$('#box2').css({display:'block'});
};
});
</script>

①cookienameという変数に cookieに保存してあるaiueoという箱の中身を入れるよ。
②それが1111だったら次のを発動!
③id="box1"を消して、代わりにbox2を表示!

こうすることで、cookieを使って別のものを見せられる。


■cookieの削除

訪問者のブラウザに保存されてしまったcookieを削除したいときはどうするのか。
なんと、cookieを削除する、ということはできないらしいんだ。

cookieを削除はできないので、代わりに
「有効期限を過去にする」ということをやる。

そうすることで、期限切れにして、削除されたのと同じことにするってーわけさ。


やり方はこれ、

<script>
var date1 = new Date();
date1.setTime(0);
document.cookie = "aiueo=;"+date1.toGMTString();
</script>

 
ちょっと時間がないので、解説はあとで。

とにかくこれで、cookieのaiueoは期限切れになる(削除されたことになる)よ!

macでPSDをphotoshopを開かずにjpgにする

デザイナーさんからPSDデータで渡されたファイル。

デザイン確認用のjpgに変換したいとき、これまで、いちいちphotoshopで開いて、jpgで保存しなおしていた。

ただ、photoshopはそれなりに重いソフトだから待ち時間が嫌だった。


そしたら、なんと、macでは、photoshopを開かなくても、psd → jpg 変換ができるらしい。

何かソフトをダウンロードする必要もない。

すでにmacに入っているソフト「プレビュー」を使う。

以下が手順。



①プレビューを立ち上げる。
②psdデータをプレビューのアイコンの上にドラッグ&ドロップする
③プレビューでpsdがひらかれる。
④ファイル → 書き出し → フォーマットをjpgにして保存

これでphotoshopを立ち上げずにjpgに書きだされるよ!


記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ