ツイートボタンがIEでエラーになる場合の対処法

文字コードがUTF-8以外の場合にエラーがでるようなのでその対処法。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これを以下のようにする。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.charset="UTF-8";js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

TwitterのウィジェットがIEでエラーを出す際に対処法

dl,dt,ddの擬似テーブルで3pxのずれを直す方法

dtとddを横並びの擬似テーブルにする場合、IE6だと3pxのずれが生じます。
その場合、zoom: 1;などでhaslayoutをtrueにすれば解決していたのですが、今回はdtとddの下にボーダーを入れたかったので、この方法は使えませんでした。。。

そこでいろいろ調べたところ、こんな方法がありました。
Clearfixすごいですね！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

jQuery Lightboxで、PREV/NEXTボタンを常に表示

通常のLightboxのPREV/NEXTボタンを常に表示させるとすると、CSSでhover部分を修正すればいいので簡単です。

しかし、jQuery LightboxはCSSにhoverの記述がありませんでした。
これはjsをいじるしかないのかな・・・と思っていましたが、簡単に表示させる方法を見つけました。

27、8行目あたりの、以下の部分をfalseからtrueに変更します。

// Configuration related to navigation
fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

これでPREV/NEXTボタンが常に表示されるようになりました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

jQuery lightBoxで、PREV/NEXTボタンを常に表示する。

OperaでのLightbox 2のズレ

先日いつものようにLightbox2を導入していたのですが、Opera9でLightboxのウインドウが下にずれて表示されることが判明しました。知らなかった・・・

この現象を回避するため、lightbox.jsの231行目の下に、下記のコードを付け足しました。

if(window.opera){var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 30);}

これでばっちり回避できました！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

OperaでのLightbox 2のズレ

横並びにしたリストを中央揃えにする

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使用します。
display: inlineでも横並びになるのですが、li要素間の改行が入ると隙間があいてしまうのがいやなので自分は通常floatを使用しています。

floatを使用した場合

css
li {
  float: left;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}

表示サンプル

• リスト1
• リスト2
• リスト3

displayを使用した場合

css
li {
  display:inline;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}

表示サンプル

• リスト1
• リスト2
• リスト3

しかし、横並びにしたリストを中央揃えにしたい場合、floatのleftやrightでは実現できません。float: centerがあればいいのにな・・・

という時に、display: inline-blockを使用します。
しかし、inline-blockはIE7以下とFirefox2に対応していないため、プロパティを追加します。

display: inline-blockを使用した場合

css
ul {
   text-align: center;
}
li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 10px;
}
li a {
  background-color: #fff2cc;
}

表示サンプル

• リスト1
• リスト2
• リスト3

/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述になります。
※上記の表示サンプルは、ココログで投稿するとソースが自動的に書き換わってしまうため、IE7以下とFirefox2では横並びになっていません。しかしソースをそのまま使用すればきちんと横並び中央揃えに表示されると思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

横並びリストを中央寄せにする

floatを指定した際に親要素の高さが算出されない場合

floatを指定した際に親要素の高さが算出されない場合clearfixを使用したりしますが、
自分はなんとなくclearfixを使用しないで作成したいので、
そういう場合はfloat、display、overflowプロパティあたりで対応しています。

このプロパティを使用してもあっちのブラウザはOKだけどこっちのブラウザはダメだった・・・
ということが多々ありましたが、こちらにいろいろまとめてありました。
ありがとうございます！忘れないようにメモ。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

clearfixを使わないでやるには。

IE6での透過png

IE6で透過pngを使用すると透過した部分がグレーになってしまうので、IE6でも使用できるものを探してみたところ「DD_belatedPNG.js」が設置も簡単でよさそうでしたので早速使ってみました。

設置は、head内に

<!--[if IE 6]>
	<script src="js/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('img, .png_img,#png_img');
	</script>
<![endif]-->

と記載するだけです。

2行目にDD_belatedPNG.jsへのパスを入れます。

3行目にpngを使用している要素名(img等)、id名(#png_img等)、クラス名(.png_img)を入れます。
複数指定する場合はコンマで区切ります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

IE6用透過png対応策、DD_belatedPNGの使用法と注意点

IE6でのmin-height

使う機会がたびたびあるのでメモ。

IE6ではmin-heightがきかないため、少々ハックする必要があります。

.sample {
  min-height: 100px;
  height: auto !important;
  height: 100px;
}

IE6では、

• min-heightは無視される
• 同一ブロック内の!importantは無視される
• ボックスサイズが内容物に合わせた大きさへ強制的に調整される

というバグがあるため、コンテンツが100px以下の時は100ｐｘで、100px以上の時はコンテンツにあわせて高さを拡張します。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

IE6のmin-width、min-heightハックに関して

GBrowserIsCompatibleを使用した際のIEでの「オブジェクトを指定してください」エラー

Google Map APIを使用する際、GBrowserIsCompatible() の行でIE6と7で以下のエラーが発生しました。

ライン:　00
文字　:　00
エラー:　オブジェクトを指定してください.
コード:　0
URL　 :　http://xxxxxxxx.com

このエラーの場合、Googleのスクリプトを読んでいるscriptタグに「charset="utf-8"」を追加することでIE6、7で正常に動作しました。

<script type="text/javascript" charset="utf-8" 
src="http://maps.google.com/maps?file=api&v=2&key="></script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

GBrowserIsCompatible で 「オブジェクトを指定してください」エラー＠IE

wordpressでページ毎にデザインを変える

wordpressでサイト構築をする際、どうしてもデザイン的に例外のページが発生してしまったので以下の方法でテンプレートを作成しました。

使用しているThemeディレクトリの中に、任意の名前.php　のテンプレートを作成します。

テンプレートには

<?php
/*
Template Name: About
*/
?>

と入力します。「About」の部分は任意で、ページ投稿画面の属性に「テンプレート選択のドロップダウン」が追加され、選択が出来るようになります。
今回設定した「About」はドロップダウン部分に表示される名前です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

WordPress　ページ毎にデザインを変える

3キャリア共通のサイトを作成する場合のDOCTYPE宣言

携帯サイトを作成する場合、キャリア別に作成する場合はそれぞれDOCTYPE宣言が異なります。
しかし、3キャリア共通のサイトを作成する場合には以下のように記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

この場合、拡張子は.htmlで保存します。
しかし、docomoのみ拡張子が.xhtmlでないと動作しませんので、.htaccessに以下を記述しサーバへアップします。

AddType "application/xhtml+xml; charset=Shift_JIS" .html

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

モバイル機器向けXHTML仕様

携帯サイトの作り方

auで画像に文字を回り込ませる場合

携帯サイトで画像を左に配置し、文章を右に回り込ませたい場合、以下のように記述するかと思います。

<img src="img.jpg" style="float:left;" align="left" />
<div style="color:#ff0000;">回り込む文章</div>

auではfloat指定ができないので、同時にalign="left"を指定します。

これでうまくいくかな？と思ったのですが、文章が回りこまず。。。
調べてみたところ、auでは回り込む文章にdivなどのブロック要素を使うと、画像のalignがクリアされてしまい回り込まないのだとか。

そのため、以下のように記述したところうまく文章が回りこみました。

<img src="img.jpg" style="float:left;" align="left" />
<span style="color:#ff0000;">回り込む文章</span>

これを知らずtableでレイアウトしていた頃がありました。。。

IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け

javascriptでスライドショーを使用するのに、xfade2.js というのを使用していたんですが、jpg画像でIEのみ、白くドット抜けのような現象が起こりました。

jpgだから透過になっているわけでもないし、元画像を確認しても何もないし。。。IEのみなのでjsのfilterかな？と調べていた所、どうやら特定色（#02050a)のみドット抜けするという記述を見つけました。

IE6/7でjpgにfilter:alpha(opacity)をあてたときに出るバグ？

これ、ほんとにそのとおりで、jpgの#02050a部分が透過jpgになってるんです！
IE6～8でこのバグを確認しました。

背景色に#02050aを指定することで、とりあえず回避しました。

解決法としては、

1. #02050aをなくす
2. pngにする

等があげられるそうです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

他にもこちらを参考にさせていただきました。

続・IEの「White Noise」バグ

LightBoxのバグ

高さの異なるカラムを揃えるスタイルシート

2カラムや3カラムで背景色などが入っている場合、
片方が短かったりすると背景色が途中で途切れたりしてしまいます。

今まではjsで揃えていたのですが、あるシステムへ組み込みしなければならず、jsを使うのが大変そうだったので調べたところ、それを解決できる、高さの異なるカラムを揃えるCSSがありました！

[CSS]高さの異なるカラムを揃えるスタイルシート

それぞれのカラムに、同じ数値で、プラス値のpadding-bottomと、マイナス値のmargin-bottomを指定し、そのカラムを囲っているdivへ「overflow: hidden;」を指定するだけ。

これでばっちりできました！
IE、Firefox、Safari、Opera等で動作確認できました！


iframeのcss

iframeを使用する際、frameborder="0",scrolling="no"としたい場合、

<iframe src="xxx.html" frameborder="0",scrolling="no"></iframe>

とします。

これをcssで実現したい場合、

<iframe src="xxx.html"></iframe>

iframe {
border: 0;
overflow: hidden;
}

でFirefoxではうまく表示されました。

でもIEではだめなんですね。
おもいっきりボーダーやスクロールバーが表示されてました。
cssで実現できないタグがあるなんて…と驚きました。

Mozilla Thunderbirdのアドオン

私は通常メールソフトにMozilla Thunderbirdを使用しているのですが、常々こんな機能があったらな…と思うことがありました。

それを解決してくれるアドオンがありましたのでメモ。

●Quicktext

Thunderbirdの定型文の入力をサポートしてくれるアドオンです。毎回「お世話になっております～」と同じ文章を書くことが多く、これが簡単に入れられたらな、と思っていたんです。

こちらを参考にさせていただきました。

マイコミジャーナル-Thunderbirdの定型文の入力をサポートしてくれるアドオン「Quicktext」

●Quote Colors

メール/ニュースメッセージ中のテキスト色と背景色を、引用レベルごとに設定します。
引用の装飾を無効にすることで、従来の ' > ' を使用した引用表示にすることができます。

いままで返信の引用が見づらくて見づらくて仕方なかったので、これで見やすくなりました！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

Quote Colors Japanese Translations

PHPからパラメータをJSへ渡しPHPへ表示する

前回の「CSS・JSファイルの外部読み込みにPHPを使う」のエントリーでも書いたのですが、外部ｊｓを読み込む際、

<script src="script.js" type="text/javascript"></script>

だともちろんOKなのですが、

<script src="script.php" type="text/javascript"></script>

とphpを読み込むことができます。

このソースを記述しているファイル（仮にindex.php）からscript.phpにパラメータを渡し、その結果をindex.phpで表示するということができないか調べた所、

<script src="script.php?param=1" type="text/javascript"></script>

とすればパラメータを渡し、index.phpに結果を表示することができました！

param=1の部分は変数等も使えます！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

Web Artisan Blog - PHP:JS(JavaScript)からPHPを呼び出しHTML上に出力する方法

CSS・JSファイルの外部読み込みにPHPを使う

html内に外部cssやjsを読み込む場合は通常このように記載すると思います。

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>

普段はこれで問題ないのですが、今回cssやjs内でphpのスクリプトを入れるという状況になりました。
もちろんcssやjsにphpのスクリプトを記載しても動かないので、そのままファイルの拡張子を

style.css→style.php
script.js→script.php

とし、ファイル中にphpスクリプトを記載しました。

で、htmlから読み込むには

<link href="style.php" rel="stylesheet" type="text/css" />
<script src="script.php" type="text/javascript"></script>

とするだけ。

ただ、cssはそのままだときちんと読み込んでくれないので、style.phpに

<?php header('Content-Type: text/css; charset=utf-8'); ?>

と記述しておきます。

拡張子がcssやjsのファイルしか読み込めないと思っていたら、phpでも読み込めるんですね！
私には目からウロコだったので、忘れないうちにメモ。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

今日もガクリ('A`)　CSS を PHP のヒアドキュメントとして

Movable Type4.12のサーバ移行

MT4.12でサーバを移行したので、手順をメモ。

サーバ：heteml→heteml
MT：Movable Type4.12→Movable Type4.12
DB：MySQL4.0.25→MySQL5.0.51

新サーバの設定をする

1. FTPでサーバにMTのcgi等をアップロード
2. 新サーバのDBの設定をする

旧サーバDBのバックアップ

1. 旧サーバのphpMyAdminのトップ画面でエクスポートを選択
2. 保存するDBを選択。上部メニューからエクスポートを選択
3. 以下の項目にチェックを入れる
   　　・構造のIF NOT EXISTSを追加
   　　・構造のAUTO_INCREMENT 値を追加する
   　　・構造のテーブル名やフィールド名を逆クォートで囲む
   　　・データの完全な INSERT 文を作成する
   　　・データの長い INSERT 文を作成する
   　　・データのBLOBに16進数表記を利用する
   　　・データのエクスポート形式は、INSERT
4. ファイルに保存にチェック、エンコーディングnonにチェック後、「実行する」をクリック

新サーバDBのリストア

1. 新サーバのphpMyAdminのトップ画面でリストアするDBを選択
2. 上部メニューからインポートを選択
3. インポートするファイルを参照から選ぶ
4. 「実行する」をクリック
5. 新サーバのMTへログイン、設定

DBのインポートがうまくいかなかったので、DB内の全テーブルをエクスポート→インポートする形でデータを移行しました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

小粋空間：MySQL + phpMyAdmin によるバックアップ

MySQLバックアップ・phpMyAdminでエクスポート手順 by ウェブライフハック

PCで携帯サイトを確認する

PCで携帯サイトを確認したい場合、User AgentがIE、Firefox等のPCのブラウザだとはじかれて見れない場合があります。
そういった場合はFirefoxのアドオン「User Agent Switcher」を使い、User AgentをDoCoMo、Softbank、au等の携帯にすれば、ブラウザで確認することができます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こちらを参考にさせていただきました。

Firefox Add-ons　User Agent Switcher