2007年4月22日日曜日

 

CSSで横三角。「半キャラずらし」

今回はお題の通りインターネット帳面でもやってる「CSSで横三角をやる方法」。2バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。

それを画像を使わずに実現する方法。

サンプル

言葉で言うと「◆を半分隠す」だけ。

意外と不自然にならない。text-indentとかmarginとかで左半分を隠している。
詳しくは参照元を。
ただbefor要素を使っているのでIEだと見れません。

ふつうに横三角

参考までに、ふつうの横三角のコードも書いておきますね!
    » (»)
    « («)

    ▷ (▷)
    ▶ (▶)
    ◁ (◁)
    ◀ (◀) 
そうそう、この中でも &raquo; って結構使えるよ! よくサイドのメニューとかで、CSS を使って <li> の背景左端に、右向き三角っぽい画像を設定したりするよね!

IEでもFirefoxでも大丈夫なようだけど、OSが変わっても大丈夫なのか?


ul {
  list-style:none;
}
ul li{
  overflow:hidden;
}
ul li a{
  margin-left:-0.5em;
}

サンプル

一つ目の方法を、IEでもFirefox大丈夫なように。

結局、リストのひとつひとつに&raquo;&#x25B6;と書かなくてはいけないのは個人的に意味ない気もする。ブラウザ依存はもっとダメだけど

参考

インターネット帳面
http://ima.pandach.com/
ぼくはまちちゃん!
http://d.hatena.ne.jp/Hamachiya2/

ラベル: ,


2007年4月12日木曜日

 

Mac ブラウザの文字化け対策【UTF-8】

サーバーを移行した際、Mac IEブラウザで文字化けが発生。
以下、今回の対応策。

環境

  • データベース:EUCUTF-8に変化
  • ブラウザはMac IE 4.5

Mac IE ブラウザの問題

文字コードが、EUC-JPUTF-8になっていて、Mac IEのフォント設定で、それらのコードに対応した和文フォントが指定されていないことによります。情報発信の技術

ブラウザの初期設定 言語/フォントで、文字コードをUTF-8に、フォントをOsakaに設定。

フォームのテキストが文字化けする

textarea, select, input { font-family: Osaka, "ヒラギノ角ゴPro W3", "MS Pゴシック",Verdana,Arial,sans-serif; } 情報発信の技術

その他

念のためhtmlソースを見てみてみましょう。
ファイル冒頭「html要素の言語名」のlang="ja"が、べつの文字("en"とか)になっていたら、"ja"になおします。PHPファイルでも、あたまのほうに、記述があるはずです。 情報発信の技術
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
外国人がつくったテーマ(スキン)を使ったりすると、こういうことがおきます。

データベースに関係するファイルはすべてUTF-8に変更してアップロード。HTMLheadタグないにも文字コードをUTF-8で宣言しなおす。
Firefoxでは問題ないが、Mac IEHTMLの文字コード宣言がないファイルは文字化けした

参考

情報発信の技術
Mac IE 文字化け防止策

ラベル: , , , , ,


2007年4月9日月曜日

 

Movable Type と WordPress

Movable TypeWordPressの比較
Movable Type WordPress
環境設定ファイルの事前修正が必要(但し設定プラグイン使うと楽)インストールの容易
通常/個人ライセンス,無償の限定個人ライセンスオープンソース(GPL)で商用利用も可能
限定個人ライセンスの場合ユーザー数1名管理人(Administrator)/編集者(Editor)/作者(Author)など複数のユーザーレベルを自由に設定可能
テンプレートの作成画面からページを作成,ページ管理機能なしページ作成メニューがあり独立したページの作成と管理が容易
別途プラグインなどの導入が必要投稿画面にパスワード設定欄があり記事ごとに設定可能
あらかじめ書き出したバックアップデータのみインポート可能管理画面より他のblogツールからのインポートが可能
別途プラグインなどの導入が必要編集中の記事保存でプレビューを表示
別途プラグインが必要ユーザーごとにリッチエディタの指定可能
コメントとトラックバックは別々の管理メニューがありblog上でも分けて表示同じ扱い,別途プラグインが必要
細かい条件でエントリー内の文字列を検索・置換可能 管理画面上の検索機能が貧弱,置換機能なし
caramel*vanilla
WordPress vs Movable Type
Movable TypeWordPressの比較
Movable Type WordPress
デフォルトプラグイン(StyleCatcher)利用。ただし CSS が入れ替えられない制限あり
記事単位にアクセス制限可能
インポート、エクスポートのフォーマット豊富
1インストールで複数ブログ作成可(上限はライセンスに依存)ブログ単位にインストールし、データベースの接頭辞を変更すれば同一サーバで利用可
小粋空間
ブログツール比較(Movable Type / Serene Bach / WordPress)
*Sync
WordPressとMovableType

関連

SPAM対策
WordPress のSPAMフィルター。 Akismet とかSpamKarma2 とか・・・
WordPress Plugin DB Japan

ラベル: , ,


2007年4月6日金曜日

 

HTMLへのPHP変数埋め込み

echo <<< HTML
<div>{$val}</div>
HTML;

変数 $val の値が置き換わる。

ラベル: , ,


2007年4月3日火曜日

 

PHPでCSVファイルを読み込み

fopen でオープンし、while ループを繰り返す ファイルから1行を読み込む際、fgets関数の代わりに、 fgetcsv 関数を用いる。

fgetcsv (fopenで戻るファイル番号, 最大読み込みバイト数, 区切り文字)
戻り値は、区切り文字で区切られた部分文字列からなる配列である。

ループ終了条件は、 fgetcsv 関数が失敗(ファイル・エンド)するまでである。 enctype="multipart/form-data" を指定する。

type="file" の内容は POST METHOD で送られ、PHP側では $_FILE 配列変数で受け取ることができる。
送られたファイル名は、$_FILES[名前]["tmp_name"] に格納される(38行目)。 名前は、input type="file"に付けた名前である。
また、$_FILES[名前]["size"] に、送られたファイルのサイズが格納されるので、この値が 0 だったら、ファイル指定が間違っていたとしてエラーを表示する。

注意: この関数はロケール設定を考慮します。もし LANG が例えば en_US.UTF-8 の場合、 ファイル中の 1 バイトエンコーディングは間違って読み込まれます。
注意: マッキントッシュコンピュータ上で作成されたファイルを読み込む際に、 PHP が行末を認識できないという問題が発生した場合、実行時の設定オプションauto_detect_line_endings を有効にする必要が生じるかもしれません。
fgetcsv()[PHP マニュアル]

参考

関連

ラベル: , ,


This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google