2015-02-13

画像をセル内の上下中央に配置する

CSS

<a>
<img src="aaa.jpg">
</a>

というソースがあったら、

a{
  display: block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

img {
  vertical-align: middle;
}

画像ではなくテキストだと無理。

2014-12-25

画像並べたときの間のマージンを求める式

A=最大横幅
B=サムネイルの数
x=サムネイルの横幅
n=マージンの幅

n=(A-Bx)/(B-1)

これをエクセルでx値をAセルに入れて読み込んで数式を縦にドラッグコピーすると
ちょうどいいマージンが分かる。

2014-12-25

gallerifficとlightboxを掛け合わせカスタマイズ Galleriffic：拡大画像のリンク先URLを指定する方法？

Javascript jQuery

gallerifficの拡大画像はクリックすると次の画像に遷移するけど、
lightboxで拡大表示するためのカスタマイズ

jquery.galleriffic.jsの
630行目あたり

.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
↓
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="'+imageData.slideUrl+'" title="'+imageData.title+'" data-lightbox="gallery">&nbsp;</a></span>')

galleryは適当に変更

「Galleriffic：拡大画像のリンク先URLを指定する方法」って記事がなくなってるんだけど、応用可能と思われ。

2014-12-21

fancyboxで（アンカー）以外で呼び出す

メモ

ヘッダ

<link href="/css/xxx.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/script/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="/script/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/script/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(function() {
    $("li.story1").fancybox({
        'content' : $("#epsode1").html()
    });
    $("li.story2").fancybox({
        'content' : $("#epsode2").html()
    });
    $("li.story3").fancybox({
        'content' : $("#epsode3").html()
    });
    $("li.story4").fancybox({
        'content' : $("#epsode4").html()
    });
});
</script>

アンカー a hrefでなくても
という記述で呼び出せる。

2014-12-05

ｊQueryの画像ギャラリーキャプション、サムネイルつき

Javascript jQuery

けっこう古いプラグインなんですが、カスタマイズができてけっこういい。
Galleriffic
http://www.twospy.com/galleriffic/

使い方などは下記が日本語の解説があって詳しいです。
http://memocarilog.info/jquery/1396

2014-11-18

Firefoxのタブが黒くなる

FireFox

Firefoxのタブが黒くなる現象が起きた。

使えないことはないが結構ウザい。

Google検索のサジェストで「firefox タブ黒くなる」とでるのだけど
addon削除するとかあまり当てはまらなかったので、
Firefoxをリセットした。

Firefox をリセットするには
https://support.mozilla.org/ja/kb/reset-firefox-easily-fix-most-problems

無事修復された。

ツールバーがリセットされたのが残念だが、
その他のプロファイルデータは概ね復元されます。

メモ：プロファイルデータの場所
オプションの[？]マークひらいて
「トラブルシューティング情報」から「フォルダを開く」

2014-11-08

liで横並びをfloatしないでdisplay: inline-block;をul下に余白マージンがつけられて便利。

CSS

↓元記事
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法
http://delaymania.com/201404/web/list-inline-block/

いままでliをfloatしてリストつくっちゃうとulに高さがつかなくて
リスト表示のしたのmarginやらpaddingの設定に苦労してたんだけど、
なるほどこの方法なら楽だなー。

ul {
font-size: 0;
}
li {
background-color: #222222;
display: inline-block;
font-size: 12px;
width: 25%;
}

font-sizeをちょいちょいしないといけないけど。