2011年12月1日木曜日

JWplayer各種ブラウザ対応の動画再生player

mp4だけでflashplayerがインストールされていればどのブラウザでも表示出来る
JWplayer

(1)インストール
http://www.longtailvideo.com/players/jw-flv-player/

Keep me informed of news, offers & updatesと
Include Viral, a video sharing plugin のチェックは外す。
(インフォメーションが届かないようにするのと再生後にシェアするなどの項目を出さないようにする。)

(2)カスタマイズする。
file:動画のパス;
skin:スキンの場所;

(例)
<script type="text/javascript" src="jwplayer.js"></script>
    <script type="text/javascript">
        jwplayer("mediaplayer").setup({
            flashplayer: "player.swf",
            file: "video_01.mp4",
            skin: "nacht.zip"  
        });
    </script>

(3)その他の設定は以下URLから

スキンは以下からダウンロードしてzipのまま好きなの場所に上げる。
http://www.longtailvideo.com/addons/skins

JW FLV Media Player のオプションの一覧
http://kenknown.blog42.fc2.com/blog-entry-54.html

他に役立つかもしれない
http://dmoon.at.webry.info/201011/article_18.html


2011年11月29日火曜日

(メモ)html5 動画再生について

全ての再生環境に適応させる為には動画の形式が今のところ3つ必要。

h.264 (safari、IE)
WEB-M (Chrome)
.ogg(firefox、opera)

動画プレーヤーのプラグイン
videojs

実装例
http://codingmania.net/contents/213.html

その他
html5を始める下地として使えるサンプルコード
http://css-happylife.com/archives/2010/0609_1305.php


2011年11月22日火曜日

印刷の基本(タペストリ入稿例から)

制作するデータ。
・元データ
・元データのアウトライン化
・元データのepsデータ

画像のリンクがある場合はデザインデータと
同階層のフォルダに入っているとリンクが外れない。


トンボの付け方。
illustoratorメニュー、フィルタ > トリムマークを作成。
※注意点トリムマークを作るときのオブジェクトは線無しの方が良い
線の外側でトリムマークを作ってしまい線の太さ分大きくなってしまう。

ドキュメントの設定をトンボが入るくらいに大きくする。

デザインの端は裁ち落としされないように引き延ばす。
タペストリーの場合は5mmデザインを引き延ばして
上のブブンは取付け器具などを付ける余白があるので10mm延ばしてある。

<epsで入稿(これが一番安定しているらしい)>

epsの保存設定
イラレのバージョンは印刷会社によるので聞いてみる。
[プレビュー]TIFF(8bitカラー)、透明にチェック
[オプション]上から3つにチェック
[AdobePostScript]3

見本用にpdfでも保存
「プレス品質」で保存。
サムネイルの埋め込みのチェックはずす。


入稿データのまとめ方
・フォルダ01 > 入稿.epsと画像(同階層)
・フォルダ02 > 見本のpdf

2011年11月20日日曜日

wordpressのカテゴリの表示順を簡単に変えられるプラグインMy Category Order

wordpressのカテゴリの表示順を
簡単に変えられるプラグイン
「My Category Order」を入れてみた。
流れは以下の通り。

(1)My Category Orderをダウンロードしてwpのpluginフォルダの中に入れる有効化する。
日本語版にしたかったら以下のサイトを参考にする。
My Category Order日本語化する

(2)カテゴリの表示順を変えたい<?php wp_get_archives('type=yearly&cat=11&limit=10'); ?>などの中にorderby=order&title_li=を追加する。
 (例)
 <?php wp_get_archives('type=yearly&cat=11&limit=10&orderby=order&title_li='); ?>

(3)WPダッシュボードの投稿メニューのところに「My Category Order」のボタンが
増えているのでドラッグ&ドロップ→カテゴリー順をクリックで適用される。

(参考URL)
http://netsupman.com/affili/176.html


wordpress IE6でループしたところが階段状になるバグ解決方法

wordpress IE6でループしたところが階段状になるバグになるという
超マイナーでwp独自のIE6バグがあったのでメモ。

以下の条件の時にループさせている部分が階段状になっていた。

(1)下記の様なループタグの中に
<?php if ( have_posts()):while(have_posts()): the_post(); ?>
<?php endwhile; endif; ?>

(2)赤字の様なテンプレートタグ/bloginfo
をpタグでくくった時に階段状になるバグが出た。(固定ページではバグがなかったが
アーカイブページでバグがみられた。)

<p class="page_top"><a href="#top"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/blog/btn_page_top.jpg" alt="ページトップへ" /></a></p>

※因にstylesheet_directoryはVersion 2.3.1から非推奨なので
template_directoryに替えるのが正しいです。

(参考URL)
テンプレートタグ/bloginfo


2011年11月16日水曜日

ie6の透過png表示(AlphaImageLoaderにて)

wordpressで他のie6対応、透過pngのjsが全く効かなかったので
AlphaImageLoaderを使って透過pngを実装した。

やり方は以下の通り。

【例】
div.sample{
background:url(img/bg.png) no-repeat;
}

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

div.sampleで普通に画像を配置して
その後の記述
* html div.sampleでie6のみに
 AlphaImageLoaderを効かせて透過させている。

【参考サイト】
http://www.yomotsu.net/wp/?p=400

2011年11月15日火曜日

スムーズスクロール JS (今回wordpressで喧嘩しなかった)

jQueryでページ内リンクをスムーズに移動。
そして止まる位置の調整も速さも調整出来る。


(以下の2つを読み込んで)
jquery.js
jQuery Easing Plugin(jquery.easing.js)
 

(以下をheader内に記述)

<script language="JavaScript">
$(function() {
 $('a[href*=#]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
   var target = $(this.hash);
   target = target.length && target;
   if (target.length) {
    var sclpos = 30;
    var scldurat = 1200;
    var targetOffset = target.offset().top - sclpos;
    $('html,body')
     .animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
    return false;
   }
  }
 });
});
</script>

通常のページ内リンクをhtml上に記述すれば完成。
※Wordpressの場合は$をjQueryに変える(4箇所)
 
参考URL
http://www.detelu.com/blog/2008/09/jquery%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/ 

2011年11月9日水曜日

illustoratorのweb用保存がボケるのを直す。

イラレのWEB用保存で画像がぼやけるのは
画像の位置(x.y)軸と大きさ(w.h)が小数点も入っていると
ぼける。

なので以上のものを整数pxにするとキレイに書き出される。



<参考URL>
http://blog.sakurachiro.com/2009/11/illustrator-memo-2/
http://blog.sakurachiro.com/2010/10/illustrator-line-1px/

2011年11月3日木曜日

(wp)mampからサーバーへの移行方法

Wordpressのmamp(ローカルで構築)→サーバへの移行の流れ

(1)
MAMPのphpMyAdminにログインし、データベースを選択し、エクスポートでSQLファイルを出力する。こんなデータが出てくる→「localhost.sql」

(2)
SQLファイル(ex:localhost.sql)をテキストエディタ(もしくはメモ帳など)で開く、
ローカルのURL(”http://localhost:8888/mysite”など)を自分のドメイン(”http://www.yourdomain.com”など)で置換する。

(3)
WebサーバーのCパネルへログインしてまずphpMyAdmin、データベース新規作成か既にあるデータベースを選択してインポートボタンを押す。SQLファイルをインポートするとローカルで作ったデータべースがアップロードされる。

(4)
そのデータベースの権限などのところからユーザー名、パスワードなどを
設定する。

(5)
自分が設定したドメイン下のディレクトリに
Wordpressのフォルダーをすべてアップロードする。
※ドメイン直下でなくても設定でトップページをドメイン名で表示
出来るらしい。
(参照:http://suirakukai.com/wordpress/22/wordpress-change-in-directory/)


(6)
wp-config.phpがWPのフォルダに入っているのでそれを開き、
Webサーバーの設定にあうようにデータベースの情報を変更。
さっきphpMyAdminで設定したデータベース名、データベースユーザー名、パスワードを
設定する。それを元あった場所に(Wordpressのフォルダーに)アップロードする。

(7)
完成。
自分で設定したドメインやディレクトリの場所(”http://www.yourdomain.com”など)に
アクセスするとログイン画面が出て来て移行完了。

<参考サイトURL>
※以下をみれば必ずわかる。
http://www.webcreatorbox.com/tech/wordpress-theme-uploa/
http://mizushima.ne.jp/Windows/DB/phpMyAdmin/phpMyAdmin-setting.php

※本サーバーアップの時につまずいた点があったのでメモ
固定ページなどが表示されずport80のエラーがでていたのだが
仮アップしていた時の.htaccessのファイルを入れたらみられるようになった。

一応その記述を記載

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index¥.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

※注意2
さくらインターネットサーバーだとwp-configの/** MySQL のホスト名 */の
設定がデフォルトのlocalhostだとデータベースと繋がらない。
コントロールパネルのmyphpAdminから「データベース サーバ」に載っている。
「mysql○○.db.sakura.ne.jp」 (○○の中はそれぞれに割り振られた数字)を
ホスト名として書き換えないと行けない。
<下記キャプチャ参照>

2011年10月27日木曜日

(wp)最終更新日を表示

以下の記述

<?php echo mysql2date('Y/n/j', get_lastpostmodified(), false); ?>

(wpプラグイン)メールアドレス表示時のスパムメール対策「Akismet」

(wpプラグイン)メールアドレス表示時のスパムメール対策「Akismet」

使い方とAPIの取得の仕方は下記
(参考URL)
http://www.seotemplate.biz/blog/wordpress-plug/1034/

(wpプラグイン)記事に挿入する画像のサイズの種類を増やせるAdditional image sizes[超便利]

Additional image sizesがかなり使える。
プラグインをダウンロードしてプラグインフォルダに入れて直ぐ使える。
サイズ指定の設定はメディアのサイドバーのところで出来る。

自動縮小、トリミングも可能。


 (参考URL)
http://kachibito.net/wordpress/additional-image-sizes.html

(wp)カスタムフィールドで改行できるようにする記述

カスタムフィールドを表示させる記述に「nl2br()」を加える。
<?php echo get_post_meta($post->ID,コメント,true); ?>
 ↓
<?php echo nl2br(get_post_meta($post->ID,コメント,true)); ?>

(参考URL)
http://hm-blog.jugem.jp/?eid=106

2011年10月26日水曜日

Custom Field Templateプラグインを使ってカスタム投稿タイプでカスタムフィールドを使いたい(wordpress)[便利]

(1)まずカスタム投稿タイプをつくる。
function.phpに以下のような記述を書く。

すると以下のようなWPの管理画面メニューに「Gallery」というカスタム投稿ボタンが出来る。

(2)(wordpress)カスタムフィールドのプラグイン
「Custom Field Template」を「pluguin」フォルダに入れて
管理画面からプラグインを有効化する。





(3)管理画面メニューの「設定」>「カスタムフィールドテンプレート」で
カスタムフィールドの設定をする。
(4)上記の画面で
テンプレートタイトルを「任意の名前(図例ではギャラリー)」
カスタムポストタイプ(カンマ区切り):をfunction.phpで記述した
(例だと3行目のgallery) を記述する。



(5)以下のような記述でカスタムフィールドを自由にカスタマイズする。

[Hidden Thought]・・・・・フィールド名
type = textarea・・・・・・テキストエリアを作る
rows = 4・・・・・・・・・テキストエリアの高さ
cols = 40・・・・・・・・・テキストエリアの幅
tinyMCE = true・・・・・・テキストにタグをつけられる
htmlEditor = true・・・・・テキストエリアをhtmlベースに切り替えられる
mediaButton = true・・・・テキストエリアにメディアを追加出来る


 <参考URL>
http://8works-web.com/2011/06/29/wordpress_register_post_type_custom_field_template/


(6)それでカスタムフィールドを表示する記述は下記
 
 get_post_meta($post_id, $key, $single);

・$post_id は、メタデータの値を取得する記事のIDです。 $post->ID を使って記事のIDを取得してください。 

・$key は取得する名前の文字列です。 

・$singletrue または false としてください。true に設定されている場合、結果を1つの文字列として返します。falseを設定すればリストを取得します。

(ex)
<?php echo get_post_meta(358, 'lesson_charge_02_2', true); ?>

 <参考URL>
http://wpdocs.sourceforge.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9


2011年10月24日月曜日

(ps)黒を透明にするプラグイン

(参考URL)
http://www.ayatoweb.com/download/down04.html
http://daredemopc.blog51.fc2.com/blog-entry-477.html

2011年10月20日木曜日

cgiメールフォーム、普通のサーバーなら使える!

SYNCKGRAPHICAさん制作のmailformpro3が使える。

1) ファイルをダウンロードしてmailformpro > mailformpro > config.cgi に設定したいメールアドレスを入れる。


2)config.cgi変更後全ファイルをまるっとサーバーに上げる。
説明書(ダウンロードファイルや配布サイトにある)を見ながらcgiなどのデータのパーミッションを設定する。

3)※注意 説明書には書いてないが他のhtml、CSS、画像データなどもそのサーバーに合ったパーミッションにしないとアクセスできない。因に試したサーバーではパーミッション設定777(全部チェック)でいけた。パーミッションで引っかかる事が多い。


4) あとは細かな体裁をhtmlやCSSで変えるのみ。


<参考URL>
http://www.synck.com/contents/download/cgi-perl/mailformpro.html



2011年10月15日土曜日

(wordpress)サムネイル画像表示方法

普通に下記のようにする。

function.phpに以下を記述
add_theme_support( 'post-thumbnails' ); //投稿サムネイルを有効

テンプレート部分に(xxx.php)以下を記述
<?php the_post_thumbnail('full'); ?>

※ fullの部分は他に以下の設定がある。

the_post_thumbnail();                  // パラメータなし -> サムネイル

the_post_thumbnail('thumbnail');       // サムネイル
the_post_thumbnail('medium');          // 中サイズ
the_post_thumbnail('large');           // 大サイズ

the_post_thumbnail( array(100,100) );
 
 
※ここで、サムネイルをこのように表示する為には
アップロード時に「アイキャッチ画像として使用」のボタンを押さないと
表示されない。(wordpress3.2現在)分からぬと何時間も時間を取られる。。
 
 添付画像!
 
 

(wordpress)アップロードした大きい写真をリサイズするプラグイン

(wordpress)アップロードした大きい写真をリサイズするプラグイン

「Resize at Upload plus

wordpressの設定画面。最大幅と高さを入れるだけ。


2011年10月7日金曜日

(wordpress)記事を繰り返す記述

query postsを利用したループ。

(例)  
<?php if (have_posts()) :  query_posts('posts_per_page=5&cat=10');  ?>
<?php while (have_posts()) : the_post(); ?>
<div class="">
<?php the_title(); ?><!--タイトルを取得-->
<?php the_content(); ?><!--本文を取得-->
<?php the_time('Y年n月j日') ?><!--投稿の年月日を取得-->
<a href="<?php the_permalink() ?>">詳細を見る</a><!--パーマリンクを取得-->
</div>
<?php endwhile; endif; ?>

(参考URL)
・公式サイト
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts

・スグラボさんのblog
http://blog.sugulab.com/?p=690

2011年10月6日木曜日

(wordpress)特定のページのみに特定のCSSを効かす。

wordpressで生成されたページのソースを見ると
<body class="aaaa bbbb">というようにclass名が自動的についているので
CSSで指定している記述の頭に<body>のclass名を付ければそのページにのみ
特定のCSSが効く。

(例)
.aaaa #header{
width:900px;
margin:7px;
}




(Wordpress)今表示しているページのカテゴリID取得の仕方

 
例)
 
<?php if ( have_posts() ) : 
foreach((get_the_category()) as $cat) {
$cat_id = $cat->cat_ID ;
break ; 
}
$query = 'cat=' . $cat_id. '&showposts=3';
query_posts($query) ; 
?>
<ul>
 <?php while (have_posts()) : the_post(); ?>
 <li>
   <?php the_content();?>
 </li>
 <?php endwhile;?>
 </ul>
<?php endif; ?>
 
 
参考サイト
http://blog.magical-remix.net/igalog/archives/96 
http://blog.magical-remix.net/igalog/archives/99 

(wordpress)親カテゴリと子カテゴリのID取得

get_category_childrenというタグで子カテゴリIDを取得。


隙間なく自動で配置するスクリプト -Masonry

<div>要素で囲まれたhtmlを隙間無く埋めて表示する事が出来るjQueryのプラグイン。
「Masonry」
まだ検証していないがこのプラグインよりいいかもしれないプラグインメモ。
「masonry」だと上の図のように7の下に隙間が出来てしまう。
順番が前後するかもしれないが隙間を埋めてくれると言うプラグインがある。


<サンプル>
<ソース>

2011年10月5日水曜日

(wordpress)Light Box2 プラグイン

ダウンロードしてwordpressのプラグインフォルダに入れる。
ダッシュボードの設定>Light Boxで自動でリンクが貼られるようにチェックするだけ。

<参考URL>
http://wppluginsj.sourceforge.jp/i18n-ja_jp/lightbox-2-wordpress-plugin/

(wordpress)WordPressでカテゴリーリストを表示するテンプレートタグ

 <?php wp_list_categories(’A&B&C&D’); ?>
このテンプレートタグはパラメータを(A,B,C,Dの部分に)挿入出来る。

(例)
 <?php wp_list_categories('title_li=0&exclude=1,11,12,24'); ?>

のような形、
・title_li=0はカテゴリーというデフォルトで表示されるタイトルを消す。
・ exclude=カテゴリID、は指定したカテゴリを省くの意味

その他パラメータは下記URL
http://www.bizmemowp.com/wordpress-biz272

2011年9月1日木曜日

【wp】Custom Field Template をカスタム投稿でも使えるようにする。

カスタムポストタイプ (カンマ区切り):」という項目に適用したいカスタム投稿タイプを指定
例、(写真では)「test01」



参考URL:http://ja.forums.wordpress.org/topic/5846

2011年8月22日月曜日

wordpressでテンプレートディレクトリまでのパスを表示させる。

例えば下記の相対パスに
<img src="images/picproducts.jpg" />


下記のコードを加える。
<?php bloginfo('template_directory'); ?>/

こういう記述になる。

<img src="<?php bloginfo('template_directory'); ?>/images/picproducts.jpg" />

これで絶対パスで画像が表示される。

詳しくは下記のURLで。
http://ja.forums.wordpress.org/topic/6986

このコードが
<?php bloginfo('stylesheet_directory'); ?>

 

html上では下記のようなパスに書き替わる。
http://localhost:8888/wp2/wp-content/themes/テーマの名前
 
 
 
<トップページまでのパス>
※home.phpまでのパス  
 
<?php echo get_option('home'); ?>
 

2011年7月8日金曜日

特定のhtmlをIE意外で表示、非表示を設定出来るIEの独自拡張。

<!--[if IE ]>
   <p>この表示はIEだけで見えます。</p>
<![endif]-->


<!--[if IE 6 ]>
   <p>この表示はIE6だけで見えます。</p>
<![endif]-->


<!--[if lte IE 6 ]>
   <p>この表示はIE6以下で見えます。</p>
<![endif]-->


<![if !IE ]>
   <p>この表示はIE以外のブラウザで見えます。</p>
<![endif]>


<![if !IE 6 ]>
   <p>この表示はIE6以外のブラウザで見えます。</p>
<![endif]>

リストマークの画像のずれを修正する(backgroundでリストマーク指定)

(例) 
li {
    padding-left: 12px;
    background: url(hogehoge.gif) no-repeat 0px 0.5em;
    list-style: none;
}
 
padding-left は画像を配置する分の余白です。
url の後ろの指定は順に
background-repeat(画像の繰り返し表示)
background-position-x(X軸方向の開始位置)
background-position-y(Y軸方向の開始位置)
 

2011年7月7日木曜日

ie6、7バグ。
  • が階段状になる
  • li a {
    display:block;
    float:left;
    width:100px;
    }

    だと階段状に表示されるバグがある。
    なので以下のようにすると解決する。

    li a {
    display:block;
    width:100px;
    }
    li {
    display:block;
    float:left;
    }


    <参考URL>
    http://docs.yumeka.org/bg_g/709.html

    2011年7月6日水曜日

    ie6 でposition:fixed;を実装する。

    <!--[if lt IE 7]> 
    <style type="text/css">
     #fixed {
      position: absolute;
      top: expression(eval(document.documentElement.scrollTop+50));
      left: 100px;
     }
    </style>
    <![endif]-->
     
    をhtmlに表記、cssや数値は状況によって変える。
    body {
      background: url(null) fixed;
    }
    スタイルシートに記述する。
    これだけ。。

    2011年7月2日土曜日

    2011年6月6日月曜日

    MT。htdocsの中でcgiファイルを動かす。.htaccessの記述方法

    CGIを使えるように設定する Options +ExecCGI … CGIを実行できる領域に設定
    AddType application/x-httpd-cgi .cgi … 拡張子が .cgi のファイルをスクリプトとして認識させる
    AddType application/x-httpd-cgi .pl … 拡張子が .pl のファイルをスクリプトとして認識させる

    .cgi と .pl を同時に設定したい場合は、次のように記述します。
    AddType application/x-httpd-cgi .cgi .pl

    記述例

    Options +ExecCGI
    AddType application/x-httpd-cgi .cgi .pl


    2011年6月4日土曜日

    MovableTypeのフィード出力に改行を反映させる

    <$MTEntryBody$>これに
    
    
    nl2br="xhtml"を加える。
     
    
    
    <$MTEntryBody nl2br="xhtml"$>
    こうするとカスタムフィールドの文章に<br>が自動的に加わり改行される。
     
     

    2011年3月18日金曜日

    tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

    <table cellspacing="0" cellpadding="0">
     <tr>
      <th>見出し</th>
      <td>コンテンツ</td>
     </tr>
     <tr>
      <th>見出し</th>
      <td>コンテンツ</td>
     </tr>
    </table>
      
    <では無くて。。。CSSでやると ▼>
    <style type="text/css">
    table {
     border-collapse: collapse;
    }
    </style>
    
    <table>
     <tr>
      <th>見出し</th>
      <td>コンテンツ</td>
     </tr>
     <tr>
      <th>見出し</th>
      <td>コンテンツ</td>
     </tr>
    </table> 

    2011年3月15日火曜日

    dreamweaver テンプレート使い方


    ・テンプレート機能を使ってみよう 
    パート1:「編集可能領域」と「オプション領域」の使い方

    ・ドリ、テンプレート関連まとめサイト
    http://blog.cgfm.jp/garyu/archives/1198 

    2011年2月3日木曜日

    [JS]jQueryのプラグイン33+1選

    ・スライド式ギャラリー
    ・リッチな動きのナビゲション
    ・ファードインでコンテンツが読み込まれるエフェクトとか。

    http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-jan.html





    2011年2月1日火曜日

    DVD Studio 4 ビットレートの設定

    Final Cut でチャプターをつけてDVDに焼こうとしたところ「構築/フォーマット」で失敗しましたとのエラーメッセージ。
    はて?
    で、ログを見てみると、ビットレートが高すぎますっていってます。
    標準だとビットレートが4.0Mbps、最大ビットレートが7.0Mbps。
    エイやってマックスにしたのが問題でした。
    最大ビットレートが9.0Mbpsはまずいみたい。
    今のところ最大ビットレートが8.5Mbpsでビットレートが7.2Mbpsが最高かも


    2011年1月27日木曜日

    少しのコードで実装可能な20のCSS小技集




     

    1. マウスオーバーで画像を変更
    2. 外部リンクを別タブで開く
    3. ページトップへスクロールする
    4. Div全体をクリックできるようにする
    5. テーブルの偶数・奇数の行の色を変える
    6. リンク切れ画像を差し替える
    7. CSSハックを使わずブラウザーごとにCSSを変更
    8. 画像のプリローダー
    9. IE6以下ユーザーにメッセージを表示
    10. Divを消す
    11. フォーカスしているフォームのラベルにクラスをつける
    12. フォームにテキストを入れておき、フォーカスで消す(文字色も変更)
    13. 入力文字数をカウント
    14. ラジオボタンとチェックボックスを装飾する
    15. スライドパネル
    16. アコーディオン
    17. ツールチップ
    18. プリントダイアログを表示
    19. Twitter最新のTweetを表示
    20. 効果音を入れる

    css classを2つ以上指定する書き方

    サイトをコーディングしている時、classを2つ以上指定できる事を忘れがちです。
    これ知っていると便利ですね。
    ちなみに、idは1つしか指定できません。

    設定方法は半角スペースで区切って指定します。
    例えば
    <p class="red blue">テキスト</p>
    という風に。

    同じ内容のCSSを指定していた場合、CSSの記述で後に指定した方が優先されます。

    swf、z-indexをIEで効かす方法。

    (1)htmlに書き込む方法
    (2)jQweryで解決する方法
    の2つメモ。


    (1)htmlに書き込む方法
    http://d.hatena.ne.jp/riricon/20100319#1268968793
    flash表示のコードを書くところに、<param name="wmode" value="transparent" />を追加したら、ちゃんとz-indexどおりに表示してくれるようになった。

    追加したのが、赤い部分
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="####" width="1000" height="350" scale="exactfit" align="middle" wmode="transparent">
    <param name="allowScriptAccess" value="sameDomain" value="transparent" />
    <param name="movie" value="####" wmode="transparent" />
    <param name="wmode" value="transparent" />
    <param name="quality" value="high" wmode="transparent" />
    <param name="bgcolor" value="#ffffff" wmode="transparent" />
    <embed src="####" quality="high" bgcolor="#ffffff" width="1000" height="350" scale="exactfit" name="####" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
    </object>

    (2)jQweryで解決する方法
    jQueryプラグインbgiframeプラグインは簡単に実装できるらしい。

    2011年1月26日水曜日

    swfのhtml読み込み:SWFObject

    http://www.e-ssp.net/how_to_03.html

    ※IE6.7では下部にマージンがでる現象あり。

    例)
    <div id="headerFlash">
    <script type="text/javascript" src="js/swfobject.js"></script>
    <a href="www.adobe.com/go/getflashplayer"><img src="images/top/get_flash_player.jpg" alt="" /></a>
    <script type="text/javascript">
    var so = new SWFObject("index.swf", "topmovie", "900", "350", "9", "#000000");
    so.write("headerFlash");
    </script>
    </div>



    SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
    埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
    ※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
    1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
    解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
    ダウンロード ⇒  http://blog.deconcept.com/swfobject/#download
    2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
    3)HTMLページにJavascriptを記述します。
    このページを例にしたFlashムービーを埋め込む為の記述が以下です。
    <div id="headerFlash">
    <script type="text/javascript" src="js/swfobject.js"></script>
    <img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
    <script type="text/javascript">
    var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
    so.write("headerFlash");
    </script>
    </div>

    以上が、このページで記述しているJavaScriptです。
    4)それでは各コードを説明します:
    <div id="content_swf">
    <script type="text/javascript" src="js/swfobject.js"></script>
    <img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
    HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
    swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。
    var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
    新規にSWFObjectをつくり、必要なパラメーターを渡します。
    "menu_n.swf"  埋め込むswfのファイル名をパスで指定します。
    "ssp"  オブジェクトやembedタグのIDとなります。任意の名前で構いません。
    "600"  Flashムービーの幅 (width)
    "120"  Flashムービーの高さ(height)
    "6"   必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
    "#000000"  背景色(background color)を指定できます(例:#FFFFFF)
    so.write("content_swf");
    (ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。
    以上です。
    SWFObjectは現行のの全てのブラウザに対応しています。
    PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。
    SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。