(メモ)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

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

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

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


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

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

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

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

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

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


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

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

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

スムーズスクロール 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/ 

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/

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

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

(１)
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」 (○○の中はそれぞれに割り振られた数字)を
ホスト名として書き換えないと行けない。
<下記キャプチャ参照>