Skins Under Construction http://itami.info/suc/ ja Nucleus CMS v3.3 ｩ Weblog http://backend.userland.com/rss http://itami.info/suc//nucleus/nucleus2.gif Skins Under Construction http://itami.info/suc/ <![CDATA[フォントスタイルのリセットCSS]]> http://itami.info/suc/index.php?itemid=135 最初は理論的に考えていたが、どうもうまく行かない。
最後は帰納法的CSSとなってしまった。
結果は以下。


/*fonts mono stylize by @itami.info*/

body {margin:0;padding:0;}
body *{
font-family:"MS Pゴシック",Arial,sans-serif ;
font-size: 12px;
*font-size: 11px;
line-height:1.5;
*line-height:1.65;
font-weight:normal;
font-style:normal;
margin:0;
padding:0;
}
table {
font-size:inherit;
font:100%;
}
textarea {
font-size: 100%;
}
img {
vertical-align: bottom;
}



現在も改良中]]> 覚書 http://itami.info/suc/index.php?itemid=135 Fri, 24 Oct 2008 23:59:24 +0900 <![CDATA[IE7で背景画像が表示されない。]]> http://itami.info/suc/index.php?itemid=133 IE7では画像が表示されないというバグに出会った。
FireFoxやその他のブラウザならOKなのに・・・。

そこで色々調べてみると、IEではCSSの記述をシッカリ書かないと表示されない場合があるようだ。
例えば今回の場合

駄目だったCSS
background:url("../images/appearance/bullet1.gif") no-repeat;

表示されたCSS
background-image:url("../images/appearance/bullet1.gif");
background-repeat:no-repeat;
]]> 覚書 http://itami.info/suc/index.php?itemid=133 Fri, 24 Oct 2008 23:48:39 +0900 <![CDATA[無料のフリーのストックフォト（写真素材）]]> http://itami.info/suc/index.php?itemid=127
http://imageafter.com/index.php
Image*After is a large online free photo collection. You can download and use any image or texture from our site and use it in your own work, either personal or commercial.
http://www.linkstyle.co.jp/index.htm
プロカメラマン撮影の無料写真素材・著作権フリー画像素材
http://www.s-hoshino.com/
プリー素材屋Hoshino
http://www.photolibrary.jp/
一部フリー
http://eyes-art.com/pic/
高解像度画像素材集EyesPicの縮小版サンプル画像をフリー素材として公開
http://www.morguefile.com/
A place to keep post production materials for use of reference, an inactive job file. This morgue file contains free high resolution digital stock photography for either corporate or public use.
http://www.pixelperfectdigital.com/free_stock_photos/
海外サイト
http://www.myimager.com/
海外サイト

ここからは有料

http://nihongo.istockphoto.com/
海外サイト

そういえばhttp://www.yotophoto.com/が無くなってしまった。。]]> top http://itami.info/suc/index.php?itemid=127 Thu, 3 Jul 2008 14:39:14 +0900 <![CDATA[角丸のあれこれ]]> http://itami.info/suc/index.php?itemid=120 グラフィックデザインでは文字背景のデザインをプレートデザインなどと言ったりもするが、その昔WEBの世界では矩形があたり前だった。
WEBデザインの世界で文章の背景プレート（ボックス）をグラフィック化せずに角丸のデザインを行うには、古くはテーブルによる角丸が考案され、盛んに利用されるようになった。（およそ10年ちょっと前） その後、CSSによる角丸が考案されたりもしたが、、、初期のCSSによる角丸実装は見た目もエレガントとはいえなかったりした。
現在ではJavascriptによる様々な角丸が公開されている。
やっていることは、、やはり面倒なことだが（エレガントに見える白鳥の足が水面下では忙しくバタつかせているように）、JavascriptとCSSにより、利用は格段に手軽なものとなった。
最近では各種のJavascriptライブラリのプラグインとしてもリリースされているので、何れかのライブラリを利用している場合はリッチな角丸が簡易に実装可能となっている。
そこでここでは少しまとめて、必要なときに直に利用させて頂くことにした。

]]> top http://itami.info/suc/index.php?itemid=120 Wed, 11 Jun 2008 09:40:30 +0900 <![CDATA[ページの住所をGoogle マップ へリンク]]> http://itami.info/suc/index.php?itemid=113 既存の地図はクオリティも低く、情報も古いためにGoogle マップへの変換が必要となったのだ。
最初は住所や施設名をURLエンコードしてGoogle マップへの検索へ渡す方法を考えたが、ページに一つ一つ記述するのが面倒そうだったので、住所を直接Google マップリンクへの変換が手間も間違いも少なくする最善の方法と思われた。
そこで検索すると、
shinichitomitaさん
http://d.hatena.ne.jp/shinichitomita/20060713/1152800000 のページを見つけた。
思っていたものに近かったが、電話番号などもリンクが生成されてしまうので、正規表現部分を改造しようと思っていたら、
twk @ ふらっとさんのページ　http://nonn-et-twk.net/twk/node/51　を見つけ、一気に問題は解決した。ご両名には感謝です。

twk @ ふらっとさんのコードはブックマークレット仕様なので、ほんのちょっとだけ変更して、、、 変更は本当にちょっとだけで以下の2点。
  1. スクリプトをリンクしてwindow.onload でページがロードされたときにマップへのリンクを生成
  2. aタグにクラスを指定してレイアウトに自由度をプラス

ソースはこちら
注) ソースに日本語が含まれていますので、使用ページと文字エンコードを一致させて保存する必要があります。]]> TIPS http://itami.info/suc/index.php?itemid=113 Tue, 29 Apr 2008 20:28:03 +0900 <![CDATA[ログインできない　Nucleus]]> http://itami.info/suc/index.php?itemid=91
  • nucleusディレクトリにアクセスしたら管理画面にログインできるのに、フロントからのログインができない。再ログインしなければならない。
  • ログインして記事編集中に画像を投稿しようとクリックすると、ポップアップしたウィンドウにページが見当たらない等のエラー表示。
  • その他、再ログインの多発や不可思議なページが見当たらない等のエラーを見かけるとき。
    上記のような症状は『グローバル設定』のパスの設定のホスト部分がバラバラなのかもしれない。

    http://www.itami.info/suc/ の場合　http://itami.info/suc/ でもアクセスできるが、 設定はどちらか一方に統一しないと、上記の様なエラーに見舞われる。
    注意が必要なのは『グローバル設定』以外に『メンバー管理』のWEBサイトのURLも影響する。これらの設定は全て同じにした方が良い。]]> 覚書 http://itami.info/suc/index.php?itemid=91 Tue, 29 Apr 2008 09:21:28 +0900 <![CDATA[FLASHとレイヤーの重なり順の指定方法]]> http://itami.info/suc/index.php?itemid=105 通常、FLASHのswfの前面にレイヤーを配置しても、実際にはFLASHの後に隠れてしまう現象が発生する。
    例えばFLASHコンテンツの上部にHTMLでプルダウンメニューを作成した場合など、表示されたレイヤーがFLASHの後に隠れてしまうのだ。
    これを回避する方法を覚書。 swfを配置している領域と前面配置の領域に適切な z-index を指定する。

    例えばswfには、
    #flash{
       z-index: -1;
    }

    前面のレイヤーには、
    #myMenu{
        z-index: 9999;
    }

    など、

    swf配置のパラメータには wmode=transparent を指定する。

    実際の記述方法はAC_RunActiveContent.jsを使用した場合 、

    -----
    "quality","high", "src","general_head", "pluginspage","http://www.macromedia.com/go/getflashplayer", "type","application/x-shockwave-flash", "wmode","transparent")

    embedタグの場合、

    < embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="general_head.swf" width="654" height="383" type="application/x-shockwave-flash" wmode="transparent" quality="high" /> 

    ]]>     覚書 http://itami.info/suc/index.php?itemid=105 Mon, 31 Mar 2008 10:23:41 +0900     <![CDATA[IE7 インターネット　サイト　・・・・を開けません。　操作は中断されました。]]> http://itami.info/suc/index.php?itemid=103 “インターネット　サイト　・・・・を開けません。　操作は中断されました。”
    とメッセージが表示されてブラウザで閲覧できなくなった。

    ん～っ、、、またIE絡みか。。と思いつつも、原因を調べると
    タグにおかしな部分を見つけた。

    <h1><b>●●●●</h1>

    と、過去のbタグが残り、おまけに閉じていなかった。
    これ以外、IE7はタグの記述の影響を色々受ける様子だ。おかしな挙動の時はタグの記述を見直すのも良いかも知れない。

    追伸
    こちらはIE6でだか、Javascriptの呼び出しなどでも起こる様子。
    例えば、jquery.jsの次にjquery.corner.jsを直に読み込んだ場合に発生する。スクリプトの読み込みが間に合っていない様子。（他のスクリプトを読み込んでいる関係もあるかも・・）
    この場合はjquery.corner.jsの読み込みを</body>の直前へでも移動するとOK.（・・の場合もあり。）

    追伸2
    こんなのもありました。
    no-repeat の前に半角スペースがないとIE6、7、8では背景画像が表示されません。（FFやopers、chromeでは表示されるのですがねぇ、、）
    例: background:url(../../../commonsource/images/appearance/bt_gmap.jpg) no-repeat

    ]]>     覚書 http://itami.info/suc/index.php?itemid=103 Mon, 24 Mar 2008 01:05:32 +0900     <![CDATA[flashからlightviewを呼び出す方法]]> http://itami.info/suc/index.php?itemid=100 Prototype と Scriptaculous が必要だが、画像だけでなくhtmlも動画もflashも再生可能だ。
    先日、flashからlightviewを呼び出そうと思って色々悩んでいたら、lightviewのサイトのトップページにその方法が記されていた。（、、なんだっ、ちゃんと書いてあるじゃん!）
    ぼんやり読んでいたので気が付かなかったのだ。
    キーワード検索してもそれらしい情報がヒットしなかったので、同じ疑問を持った人のためにキーワードを絡めて、ここで覚書。
    FLASHからlightviewを呼び出すとかなりリッチな感じです。

    FLASHのボタンにgetURLを設定してlightviewを呼び出し、HTMLファイルを表示


    on (release) { getURL("javascript:Lightview.show({ href: 'test.html', rel: 'iframe', options: { width: 700, height: 500 }});"); }


    FLASHのボタンにgetURLを設定してlightviewを呼び出し、FLASHファイルを表示


    on (release) { getURL("javascript:Lightview.show({ href: 'myflash.swf', rel: 'flash', options: { width: 500, height: 500 }});"); }
    ]]>     覚書 http://itami.info/suc/index.php?itemid=100 Sat, 8 Mar 2008 17:34:48 +0900     <![CDATA[jQuery と prototype.js のコンフリクト回避]]> http://itami.info/suc/index.php?itemid=95 角丸になるはずのコーナーが角丸にならない!!
    しかし、原因を追うのも面倒だったので、そのままにしていると、こんな記事を目にした。
    ふーん、やっぱりそうだったかと思いながらも、汎用ライブラリを利用して開発する人は$()の扱いに気をつけて開発することもできるが、$()は最もjQueryらしいアクセス方法なので、やはりそのままにしておくと、今度はこんな記事を見つけた。※他の関連記事そうか、シンプル・イズ・ペスト。
    一先ず覚書です。

    ]]>     覚書 http://itami.info/suc/index.php?itemid=95 Thu, 21 Feb 2008 16:15:19 +0900