jQueryでCSS3(2) 擬似クラスを使う | チバのブログ
ｊQueryをつかってIE6でもCSS3の恩恵にあずかるための解説第2弾。 前回は属性セレクタを扱いましたが、今回はCSS3の便利な疑似クラスをIE6でも使えるようにしてみましょう。 といっても、$()でCSSとおなじ指定をするだけなんですが･･･CSS3の疑似クラス CSS3にはいろいろな疑似クラスがありますが、jQueryで簡単に使えるようになるものとして、以下の疑似クラスについて解説したいと思います。 :nth-child(n) :first-child :last-child :empty jQueryだとこうなる :nth-child(n) ある要素のうち、その親要素のn番目の子要素にのみスタイルを指定する疑似クラスです。 たとえば、以下のようにかくと<div>のなかにある7番目の<p>要素にのみスタイルを指定することができます。 div p:nth-child(7) {
チバのブログ: CSSでも黄金比
デザインをする際に黄金比を取り入れると綺麗な感じになるというのは聞いたことがあるんですが、それをCSSに取り入れたい場合はどうすればいいんでしょうと思っていたらモダンCSSにおける黄金比とは？という記事で英語のブログ記事（Golden Ratio in modern CSS）の紹介があったので早速このブログにも一部取り入れてみました。 取り入れたのは行間とかマージンとかの部分。サイトにはこう書いてありました。 line-height = font-size * 1.62 paragraph margin = paragraph line-height * 1.62 / 2 header's margin-top = headers line-height * 1.62 CSSに黄金比を取り入れた具体例 このブログは縦のマージンは全部em、line-heightは単位なしでやっているので計算
チバのブログ: IE6で背景画像に透過pngを指定してリピートさせる
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
jQueryでCSS3(1) 属性セレクタを使う | チバのブログ
jQueryではいろいろなセレクタが用意されています。これらのセレクタを使う事でIE6でもCSS3の恩恵にあずかれるということで数回に分けてまとめてみようと思います。 最初は属性セレクタについて。 jQueryで属性セレクタ jQueryでCSS3の属性セレクタを使う場合は以下の6つの属性フィルタ（Attribute Filters）を使います。 これらのフィルタを使って指定した要素に適当なクラスの追加や削除をして、その後CSSでそのクラスに対するスタイルを定義するようにすると楽かなーって思います。 Element[attribute] 特定の属性を持つ要素にのみスタイルを指定する方法です。 サンプルではclass属性を持つp要素にのみclassというクラスを追加しています。 $("p[class]").addClass("class"); Element[attribute="val
MT4でプラグインを使わないカテゴリーの並べ替え方 | チバのブログ
MT4から追加になったregex_replaceというもディファイア（正規表現で置換が出来るモディファイア）を使えば、カテゴリーの並び順の変更がノープラグインでできるのでは？ と思い、試してみたらできちゃいました。 MT3のやり方で 基本的な並び替え方はMT3の時にやっていた「カテゴリーの頭に数字をつける」方法です。 頭に数字をつけておけば数字順にカテゴリーが並び替えられて表示されるのでそれを利用します。 ただ、そのままではカテゴリー名に数字が付いたまま表示されてしまうため、どうにかしてその頭の数字を消す必要があります。 MT3の時にはFirstCutCharやpmHeadChangerなどのプラグインを使って数字を消していましたが、MT4ではregex_replaceもディファイアを使います。 regex_replaceを使うと正規表現による置換ができるので、とても便利です。 カ
MTの再構築の高速化 | チバのブログ
最近、MTの再構築が重い！という相談があり、「こうすれば多少良くなるのでは？」見たいな事をえらそうに言っておきながら実は不安な部分もあったのでこのブログで検証してみました。 最近ダイナミックパブリッシングに移行したばかりなのですが、スタティックに戻し検証。 結論から言いますと、とても効果がありました。 記事の数がとても少ないのであまり参考にならないかもしれないですが、少ない記事でも効果があったので、もっと記事が多かったら凄いんじゃないの？って感じです。 やったこと MovableTypeをめっちゃ高速化する20の方法。とかMovableType, 再構築の高速化(<$MTInclude file...$>とBackground Rebuilder Plugin)。を参考にしながらやってみました。 テンプレート内の不要なMTタグの削除・置換 PHPインクルードでモジュール・ウィジェットを
JavaScriptを圧縮して少しでも軽くしてみる | チバのブログ
JavaScriptを圧縮できるということは結構前から知っていたんですが、それを結構簡単にできてしまうというのを最近知りました。 もっと前に調べておけば良かったです。 このブログも最近レイアウトを変えたのでそれほどでもないですが、以前はJavaScriptを結構使っていたので、今度のことを考えてJavaScriptの圧縮を試してみました。 圧縮方法 まず最初にWinGZip utilityというソフトをダウンロード・インストールします。 ソフト自体は英語ですが、結構簡単に扱えるので英語だって全く問題ありませんでした。 インストールが終わったら、WinGZip utilityを起動してください。起動すると上にタブが3つあるのでCompressと言うタブを選択します。Compressを選択したら、Input file nameの一番右にあるボタンをクリックし、圧縮したいファイルを選んでくだ
Zend_ConfigでなるべくわかりやすいPHPの設定ファイルを扱う
PHPでアプリケーションを作る時にいろんな設定ファイルを書くと思います。 よくある設定ファイルの形式として、単純にPHPの配列になっていたり、define文が列挙されていたりとかと思います。 制作中はPHPがわかる人が作っているのでどんな形式でもよいと思うのですが、納品後はそうじゃないので設定の変更ですら先方では困難という場合があります。 簡単な設定の変更くらいはクライアントにやって欲しい。そんな場合に便利なのがZend FrameworkのZend_Configです。 Zend Frameworkのライブラリは単体でも組み込むことが出来るので、Zend Frameworkを使ったアプリケーションじゃなくても問題ないんです。 Zend_Configを使うとini形式とxml形式の2つの方法で設定ファイルを扱うことが出来るようになりますが、わかりやすいのはini形式だと思うので、ini
携帯サイトを作るのに便利なfirefoxアドオン
携帯サイト制作の際にあったら便利なアドオンを紹介します。 ここで紹介したもの以外に他にも便利なものがあれば教えてください！ Mobile BarCoder 実機確認するときに便利なアドオンです。 携帯電話のテンキーでURLを打ち込むっていうのはかなり面倒な作業ですが、MobileBarcoderをインストールしておくと、表示しているURLをQRコードで表示してくれます。 インストールすると、firefoxのウィンドウ右下にバーコードのアイコンが表示されるのでそのアイコンにマウスを乗せるだけです。 Mobile Barcoder :: Firefox Add-ons FireMobileSimulator 実機で確認しようにも個人で全ての携帯を揃えることは難しいですよね。趣味であればなおさら。 そんなときに役立つのがFireMobileSimulatorです。 [ツール]→[メニュー]
チバのブログ: PHPを使って携帯からMTに記事を投稿する
携帯電話を使ってMTに記事を投稿するスクリプトを作ろうという事で、現在携帯用の簡易管理画面を開発中です。プロジェクト名は「M2MT（仮）」。 すでに行き詰まった感が出ているので、気分転換にXML_RPCを使って記事を投稿する部分について書こうと思います。 MTでXML_RPC APIについてはMovable Type で使える XML-RPC APIにまとめられていたので、そちらを見てください。 M2MTの投稿部分で使うAPI 今回の投稿部分で使うAPIは以下の4つです。使う順番に並べてみました。 mt.getCategoryList metaWeblog.newPost mt.setPostCategories mt.publishPost これらをPEARのXML_RPCを使って呼び出します。 処理の流れ これらを使った処理の流れはこんな感じになります。 mt.getCategor
Movable Typeに携帯から投稿。絵文字付きで。 | チバのブログ
MTでサイトを作るというとき「携帯から投稿したい」「絵文字を使いたい」という要望をたまに言われることがあります。 携帯からの投稿だけだったら、モブログ用のサービスやスクリプトがいっぱいあるので全く問題ないのですが、「絵文字」に対応させようと思うとなかなか良いものが見つかりません。 MTのケータイキットとか絵文字プラグインなんかは、PCから絵文字を入力してそれを携帯用に変換するものがほとんどで、携帯で絵文字を入力してPCでも表示というものと違います。 PHPでも何でもいいからどうにかならないか、と探していたらMobilePictogramConverterというものを見つけました。 MobilePictogramConverterだったら、入力された絵文字の変換も出来そうなので、これとMTを組み合わせた実験結果を書きたいと思います。 使った携帯はauのW53S。結論から言うと、auの場
blog.chibatch.jp（チバのブログ）: 複数台のPCでデータの同期が取れるDropbox
Dropboxというオンラインのストレージサービスを使えば、複数台のPC間でデータの同期やバックアップが簡単にできるようになってしまいます。 自宅で作業したファイルをノートPCに移動させて・・・とか外出先で使うファイルをUSBメモリに転送して･･･とかっていうのがなくなるだけでかなり便利ではないかと思います。 Dropboxの存在は知ってはいたものの、今まではクローズドベータで招待してもらえそうな人がいなかったために試せなかったんですが、昨日久しぶりにサイトを見てみたら一般公開されてたっぽいので使ってみました。 Dropbox ローカルPCのフォルダを自動で同期 基本的にオンライン上にファイルを保存してあるようなのですが、クライアントソフトをインストールすることで特に「ストレージサービス」ということを意識せずに使えるようになります。どういうことかというと、クライアントソフトをインストー
チバのブログ: カラム数によってクラスを振り分ける EC-CUBEカスタマイズ
EC-CUBEは管理画面からレイアウトの変更が簡単にできるようになっています。 レイアウトが簡単に変更できてしまうのでテンプレートも柔軟なレイアウトに対応出来るような書き方がされているのですが、よく見るとメインコンテンツの前に左カラムが出力されるような書き方になっています。 とても便利な機能なんですが、これではあまりSEO対策としてはよろしくないですよね・・・。 カラム数に応じて<body>にクラスをつけることができれば後はCSSだけで何とかなると思うので、PHPを修正して<body>にクラスを付けられるようにしたいと思います。 bodyに付けるクラスを決める とりあえずこんな感じでbodyにクラスを付けてレイアウトを振り分けてみようと思います。 2カラムのの場合は左カラムとメインコンテンツ・右カラムとメインコンテンツの組み合わせがあると思うので、2つに分けたいと思います。 １カラム
チバのブログ: MT4.2・ノープラグインで年度別月別リスト表示をしてみる
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
携帯サイトのデザインアーカイブ | チバのブログ
Wassr ActionStreamプラグイン | チバのブログ
絵文字をMTで表示する方法について
チバのブログ: 携帯から投稿するためだけのスクリプト
Smartyで連続する改行を<p>タグに変換するプラグイン
チバのブログ: Movable Type4.2リリース！