2011年10月

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

div内の要素数に応じてdivの長さや背景を変える。jqueryで。

タイトルからはわかりにくいかもしれない。

たとえば、コーディングでこういうデザインを組むとする。

neko1

写真は入れ替わるため、ボックスを背景において、
そのなかに写真を4つ並べることになると思う。

こんなページがいっぱい出てくる時、あるページでは、
↓こんなだったら。。

neko2

さっきの背景は使えないので、今度は小さい背景をつくって
写真を3つ並べることになると思う。


さて、静的ページだけのサイトなら手動でやってもいいんだけど、
これが動的サイトのコーディングだったのでクマってしまった。
(ie6対応だったので、css3たちは使えない)


そこで、写真の数に応じて、背景を変える、ということがjQueryでできないかなと
やってみたら、すぐに出来たので、ここに書いておきます。

jsはこんな感じ

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imgcount = $('.nekobox img').length;
if(imgcount == 4){
$(".nekobox").css("background-image","bigbox.png");
}
else if(imgcount == 3){
$(".nekobox").css("background-image","smallbox.png");
}
});
</script>


imgcount変数に<div class="nekobox">内のimgの数を取得して代入。

imgcountが4のときは、nekoboxの背景はbigbox.png

imgcountが3のときは、nekoboxの背景はsmallbox.png


cssはこんな感じ

.nekobox{
background:url(bigbox.png) no-repeat left top;
width:400px;
height:100px;
}
 

htmlはこんな感じ。 

<div class="nekobox">
<img src="neko1.jpg" />
<img src="neko2.jpg" />
<img src="neko3.jpg" />
</div>

画像が3つのときも4つのときも、
divのclass="nekobox"を変えなくてもいけるので、
動的サイトのときなどに気をつかってやってあげると喜ばれる。



PC作業で目が疲れにくくなる、仕事専用メガネ

パソコンを長時間やっていると、目がつかれる。

目が疲れると頭痛がする。

僕のようなWEB制作をやっている戦士は、

いかに短時間にたくさんの仕事をこなせるかで収入アップしていくから
頭痛は大敵だ。 


んで、最近話題になっていて超欲しいのが

jinsのPCメガネ
megane

このメガネ、PCの目が疲れる原因となるブルーライトを55%カットして、

目が疲れにくくなる、というIT戦士のための武器。

しかも3990円。安い。



度は入ってないので、コンタクトしてから、このメガネをかける形。

JIN's オンラインショップ


JIN'sオンラインショップで一位。

lightbox風に動画をポップアップで出すjsライブラリ

ceeboxが便利

http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/


jqueryベースで動きます。

リンク先から一式ダウンロードして、組み込むのは楽だと思います。

カスタマイズしたのは、htmlファイルへのリンクのときは、
サイズがウィンドウサイズに応じて画面いっぱいまで広がっちゃうこと。

これを直して固定サイズにするには、
jquery.ceebox.js

をテキストエディタでひらいて

59 htmlWidth: false, //set max size for all html links
60 htmlHeight: false,

 falseの部分にサイズをいれる。

59 htmlWidth: 700, //set max size for all html links
60 htmlHeight: 430, 

僕はこういう風にしました。

あとはグイーンって開いたボックスのデザインの調整なんかは、
ceebox.css

でいじっていく感じです。





Filezillaでダブルクリックすると転送されちゃうのをやめる

一番人気のFTPソフトFilezillaだけど、
困ったことに、最初の状態では、ファイルをダブルクリックしても転送されちゃう。

少しミスしてダブルクリックしただけで、関係ないところにアップされちゃったり、
上書きしちゃったり、問題が起こりかねないので、ダブルクリックは
転送ではなく「編集」にするように設定する


filezilla>設定>ファイル一覧>

をひらいて、

ファイルのダブルクリック操作を編集にする。

これだけ。

MT管理画面の本文フィールドとタイトルを非表示にする

カスタムフィールドを使って、MTをお客さん用にガッツリカスタマイズするとき、
本文フィールドが邪魔になったりする。

本文フィールドってサイズがでかいし。 
でも、表示オプションで消そうとしても、ロックされてて消せないんだ。

なんかそういうプラグインあるのかな?と
思って調べたら、プラグイン使わずに設定ファイルをいじってやる方法が書いてあった。

http://www.tinybeans.net/blog/2011/02/17-151618.html


やりかたも優しく書いてあります。

ただ、バージョンが変わってくると、
edit_entry.tmplの変更する部分の行数が違ったり
Entry.pmの変更する 部分の行数が違ったりするので、
テキストエディタでひらいて、文字列を検索して該当箇所を探したほうがいいですよ。
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

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

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

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ