CSSでのパーセント指定まとめ

Facebook にシェア
Pocket

(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・)

一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。
で、CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。
だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。
というわけでまとめてみました。

色系

RGB値

“color”や”background-color”などの色の指定のプロパティで利用する。
それぞれ左から赤、緑、青の値を意味し、0%は0、100%はff(255)をあらわす。

HSL値

CSS3から追加した色の指定方法。
RGB値と同じく、”color”や”background-color”などの色の指定のプロパティで利用する。
左から、色相、彩度、輝度を表し、彩度と輝度を%で指定する。色相は色みを角度であらわす(なので、範囲は0~360)。
jQueryにおいて、HSL値で色を指定すると、rgb指定に変換されてしまうっぽい。

テキスト

font-size

親要素のフォントサイズに対する割合をあらわす。
100%なら、親要素のフォントサイズと同じ。0%なら、何も表示されない。100%より大きければ、親要素のフォントサイズより大きくなる

vertical-align

  • 説明:縦方向の揃え位置を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X%
  • 例:vertical-align:80%
  • 参考:vertical-align – CSS | MDN

その要素のline-heightプロパティの値に対する割合を表すよう。
baseline(初期値)を指定した時の場所を基準に、正の値なら上に、負の値なら下に移動する。
line-heightが100%(もしくは1.0)で、親要素と同じフォントサイズであれば、-100%の時に一段下に、100%の時に一段上になる。

line-height

フォントサイズに対する割合をあらわす。
100%とすると、行の高さが、フォントサイズと同じ高さになる。
なお、数値のみの表記にしてもフォントサイズと同じくフォントサイズに対する割合という意味になるが(1.0は100%と同じ)、子要素への影響が違ってくる。
パーセント表記だと子要素の行の高さは親要素の行の高さと同じになり、数値のみの表記だと子要素にも適用され、子要素のフォントサイズに対する割合となる。
例えば、親要素のフォントサイズが20px、子要素のフォントサイズが15pxのとき、親要素のline-heightを100%と指定すると子要素の行の高さは20pxになり、親要素のline-heightを1.0と指定すると子要素の行の高さは15pxになる。

text-indent

親要素の幅(width)に対する割合をあらわす。今回調べるまで、自分自身の幅と勘違いしてました。
このtext-indentを100%と指定した場合の利用方法として、CSSでテキストを画像に置き換える場合に使うことがある。
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス
つまり、text-indentを100%に、overflowをhiddenに、white-spaceをnowrapと指定してbackground-imageを指定すると、テキストが表示されず、画像のみが表示される。昔はtext-indentに-9999pxと指定する方法がよく利用されていたようなのですが(うちの会社のサイトにもそういう指定があります・・・)、それだとパフォーマンスが悪いということで編み出されたそうです。

横幅と高さ

width

min-width

max-width

  • 説明:幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。
  • 範囲:0以上
  • 指定方法:X%
  • 例:width:80%;
  • 参考:width – CSS | MDN

親要素の横幅(width)に対する割合をあらわす。
最近流行りのレスポンシブウェブデザインでは、widthをパーセント指定で表記することが多い(画面サイズと横幅の比率を同じにするため)。
昔の自分は、imgタグだと実際の画像サイズに対する割合だと勘違いしてたことがありますが、そんなことはありません(width属性も同じ)。
なお、親要素とぴったしあわせたいとwidthを100%と指定しても何か表示がおかしい場合、borderやpaddingの指定がないかチェックしましょう。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。(CSS おれおれ Advent Calendar 2012 – 05日目) | Ginpen.com

height

min-height

max-height

親要素の高さ(height)に対する割合をあらわす。
ブラウザの表示枠ぴったしにレイアウトしたい場合は、bodyすぐ下の階層のタグのheightを100%にするだけでなく、html要素とbody要素のheightも100%にする必要がある。
CSSの「height:100%」について – webデザイナーのナナメガキ

余白

margin

親要素の横幅(width)に対する割合をあらわす。
注意したいのが、上下マージンも高さ(height)ではなく、横幅に対する割合をあらわすということ。
なお、marginはマイナスの指定も可能。

padding

親要素の横幅(width)に対する割合をあらわす。
marginと同じで、上下パディングも高さ(height)ではなく、横幅に対する割合をあらわす。

ポジション

left

right

top

bottom

基準となるボックスの幅や高さに対する割合をあらわす。
50%にすると、要素の左上座標位置が、基準となるボックスの真ん中に表示される。
ボックスを上下左右中央位置に表示させたい場合は、leftに50%、topに50%と指定し、margin-leftにその要素のボーダーとパディングを含む幅を2で割った値のマイナス値を、margin-topにその要素のボーダーとパディングを含む高さを2で割った値のマイナス値をいれると上下中央配置になる。
ボックスを上下左右画面中央に – CSS HappyLife

背景

background-position

  • 説明:背景画像の表示位置を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X% Y%
  • 例:background-position:-10% 20%;
  • 参考:background-position – CSS | MDN

この指定は、『何かの割合』と、一言であらわすのは難しいです。
一見、ボックスの幅や高さの割合かとおもいきや、指定を”100% 100%”にすると、ボックスの外側の右下というわけではなく、ボックス内側の右下に表示されるからだ。
“50% 50%”だと、上下左右中央配置となる(ポジションのtopやleftでもこういう仕様だったら、上下中央配置が簡単だったのに!)。
しいていうなら、『ボックスの幅(padding含む。背景領域と同じ)から背景画像の幅を引いた値』の割合らわす。といったところ。
なお、background-positionには、横と縦を別々に指定する方法はないので注意。
後、一つだけの指定だと横方向のみ適用され、縦方向は50%とした時と同じ位置になります。ただし、初期値(何も指定していない時)は”0% 0%”と同じ位置です。

background-size

  • 説明:背景画像の大きさを指定する
  • 範囲:0以上
  • 指定方法:X% Y%
  • 例:background-size:50% 60%;
  • 参考:background-size – CSS | MDN

CSS3で追加されたプロパティ。
背景領域に対する背景画像の幅・高さに対する割合をあらわす。
“100% 100%”とすると、ボックスと同じサイズの背景画像となる。
実際の背景画像ファイルの大きさに対する割合ではないので注意。

ボーダー

border-radius

  • 説明:角丸を指定する
  • 範囲:0以上
  • 指定方法:X% / Y%(等)
  • 例:border-radius:50% / 50%;
  • 参考:border-radius – CSS | MDN

ボーダーボックスの幅と高さに対する割合の半径の楕円と同じ形の弧をあらわす。
/をつけることによって、水平方向と垂直方向の指定もできる。
一つだけの指定の場合は、水平方向・垂直方向とも同じになるようだけれども、その場合、50%以降は変化なし。
キレイな円を描きたいなら、widthとheightを同じにし、border-radiusを50%にすると円になる。
CSSで角丸を表現する方法をちょっと詳しく書いてみる │ Design Spice
なお、Androidの一部端末ではパーセント指定ができないそうなので注意。
Androidの一部端末では、border-radiusで%(パーセント)指定ができない – console.lealog();

ボーダー関連だと他に、”border-image-slice”や”border-image-width”というプロパティもパーセント指定できるようなのですが、自分がよく分かってないうえに対応ブラウザも少ないみたいなのでパスします。
参考:border-image-slice – CSS | MDN
参考:border-image-width – CSS | MDN

変形

transform-origin

  • 説明:2D変形、または3D変形の原点を指定する
  • 範囲:どんな数値でもOK
  • 指定方法:X% Y%
  • 例:transform-origin:10% 20%;
  • 参考:transform-origin – CSS | MDN

変形を適用する要素の左上位置を0% 0%、右下位置が100% 100%となる。
例えば要素をtransform:rotate(回転角度)を使って回転させるとき、transform-originが”0% 0%”なら左上を軸の基準として要素が回転し、”0% 100%”なら左下を軸の基準として要素が回転する。

試しに、jsFiddleで動作サンプルを作ってみました。
説明不足なんで使い方は分かりにくいかもしれませんが、いろいろいじって確かめてみてください。

ここ1年以内(2011年5月以降)に読んだラノベ風ビジネス小説まとめ

Facebook にシェア
Pocket

もしドラ(もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら)以降増えている気がするラノベ風ビジネス小説。ここでいうラノベ風ビジネス小説とは、小説家(ラノベ作家含む)ではなく、ビジネスの専門家(コンサルタントや会計士など)が書いたビジネスに役立つ小説、もしくはビジネス本をもとにした小説とします(たいてい、表紙や挿絵にイラストがある)。

新入社員ヒロと謎の育成メールの12ヵ月
新入社員ヒロと謎の育成メールの12ヵ月 渡瀬 謙

集英社 2011-03-04
売り上げランキング : 74262

Amazonで詳しく見る by G-Tools

新入社員のヒロという子に差出人不明の育成メールが届くというもの(ちょくちょく引っかけがあって職場の先輩に怒られるのだけど・・・。しょっぱなのメールは嘘から始まるわけだし)。
 てっきり表紙に大きく描かれている女の子がヒロという名前の主役かと思ったら、なんと主役は男。じゃあ、いったいこの子は誰なの!?(思い当たる人は確かにいるのだけれども)

会計士マリの会社救出(秘)大作戦! ~経営も、恋愛も、ホント謎だらけ~
会計士マリの会社救出(秘)大作戦! ~経営も、恋愛も、ホント謎だらけ~ 秦 美佐子

すばる舎 2011-07-21
売り上げランキング : 61946

Amazonで詳しく見る by G-Tools

経営が不安定なファッションブランド会社の社長でもある失踪した双子の妹に代わり、姉の会計士マリが変装して妹のふりをして会社をたてなおすというもの。
 続編も出ているそうですが、こっちはまだ読んでません。

社長ルリの踊る(秘)大監査線! ~会社も、恋愛も、ホント粉飾だらけ~ 社長ルリの踊る(秘)大監査線! ~会社も、恋愛も、ホント粉飾だらけ~
秦美佐子

by G-Tools

28歳の仕事術―ストーリーでわかる! 失敗しないフレームワークの使い方 (日経ビジネス人文庫)
28歳の仕事術―ストーリーでわかる! 失敗しないフレームワークの使い方 (日経ビジネス人文庫) 栗野 俊太郎 栗原 啓悟 並木 将央 小川 孔輔

日本経済新聞出版社 2011-08-02
売り上げランキング : 185865

Amazonで詳しく見る by G-Tools

28歳でプロジェクトリーダーを任された主人公が後輩二人とビジネスフレームワークを駆使して新製品の提案や販売をしていくというもの。
 新入社員のお嬢様、モリリンのキャラがあまりこういうラノベ風ビジネス小説にいないタイプだったので、少し面白かった。

ラーメン屋の看板娘が経営コンサルタントと手を組んだら
ラーメン屋の看板娘が経営コンサルタントと手を組んだら 木村 康宏

幻冬舎 2011-08-25
売り上げランキング : 7660

Amazonで詳しく見る by G-Tools

経営の思わしくないラーメン屋の娘が、学校で知り合った経営コンサルタントの先生に頼んでラーメン屋の経営をたてなおしという話。
 そういや、ラーメン屋立て直しの番組ってよく見るけど、なんでなんだろう。

9割がバイトでも最高のスタッフに育つ ディズニーの教え方の物語
9割がバイトでも最高のスタッフに育つ ディズニーの教え方の物語 かみじま 柚水 kaya8

角川学芸出版 2011-11-15
売り上げランキング : 87428

Amazonで詳しく見る by G-Tools

ベストセラーになった『9割がバイトでも最高のスタッフに育つ ディズニーの教え方』の小説版。ところどころ変な改変があるのだけど(ミッキーの喋り方は出てくる度に吹きそうになった)、面白かったと思う。今回紹介する本のなかでは一番おすすめしたい。
 直近だと、東日本大震災時のディズニーの対応をモデルにした話も。

女子高生ちえの社長日記PART-4 ― 国際化?中国?それで、戦略!?
女子高生ちえの社長日記PART-4 ― 国際化?中国?それで、戦略!? 甲斐莊 正晃

プレジデント社 2012-02-14
売り上げランキング : 86917

Amazonで詳しく見る by G-Tools

Part4とあるように四作目。もしドラ以前からあるシリーズなので、表紙や挿絵までラノベっぽいという意味では、ある意味ラノベ風ビジネス小説の先駆け。
 毎度、会社が危機に陥ってなんとか危機を乗り越える話なのだけれども、ずっと高校2年生。3で1年経過してるはずなのに4でも学年が変わってなかったので、サザエさん方式なのかもしれない。

新人OL、社長になって会社を立て直す (青春新書プレイブックス)
新人OL、社長になって会社を立て直す (青春新書プレイブックス) 佐藤 義典

青春出版社 2011-08-30
売り上げランキング : 55435

Amazonで詳しく見る by G-Tools

続編もの。入社して数年たってるというのに(しかも転職組)、いつまで新人OLなのだろうかと。舞台となるのは、飲食店だけど、出てくる用語はマーケティングの基礎なので、どこの業界でも応用できるのではないかと思う。

新人OL、つぶれかけの会社をまかされる (青春新書PLAYBOOKS) 新人OL、つぶれかけの会社をまかされる (青春新書PLAYBOOKS)
佐藤義典

by G-Tools

ソーシャルメディアマーケター美咲 2年目
ソーシャルメディアマーケター美咲 2年目 池田 紀行

翔泳社 2012-03-16
売り上げランキング : 16464

Amazonで詳しく見る by G-Tools

2年目とあるように、二作目。ソーシャルメディアマーケティングについての小説。ソーシャルメディアをマーケティングに利用しない企業にも、ソーシャルメディアにおけるリスクはあるという内容が面白かった。するかしないかに関わらず、従業員へのリスク説明は必要なんですね。

ソーシャルメディアマーケター美咲 新人担当者 美咲の仕事帳 ソーシャルメディアマーケター美咲 新人担当者 美咲の仕事帳
池田 紀行 akikata shiho

by G-Tools

コトラーが教えてくれたこと〈2〉女子大生が変えたブラック企業のマーケティング戦略
コトラーが教えてくれたこと〈2〉女子大生が変えたブラック企業のマーケティング戦略 西内 啓

ぱる出版 2012-01
売り上げランキング : 26603

Amazonで詳しく見る by G-Tools

これまた続編もの(といっても、主役が違うのでそこまでつながっているわけではない)。最近、シリーズ化するラノベ風ビジネス小説が増えてきた気がする。
 この小説の重点は、普通のマーケティングではなくソーシャルマーケティング(ソーシャルメディアマーケティングではない)ということ。世の中の役に立つことをして、その信頼から利益につなげていくというもの。こういう考えをもつ企業は今後増えてくるのだろうか。

コトラーが教えてくれたこと 女子大生バンドが実践したマーケティング コトラーが教えてくれたこと 女子大生バンドが実践したマーケティング
西内啓 福吉潤 北野弘務

by G-Tools

他にも何かあった気がするけど、とりあえずここまで。

ラノベ風というのとはちょっと違うけど、少し前のだと『会計天国』という本が面白かった。

これだけは覚えておきたい。Gmail,Yahoo!メール,Hotmailのショートカットキー

Facebook にシェア
Pocket

僕は現在、GmailとYahoo!メール(ベータ版)、それとInfoseekメール(昨年、Windows liveベースになったので、使い勝手はHotmailと同じはず)を使い分けています。
 で、そういう時に困るのが微妙なショートカットキーの違い。前のメール(受信箱だと上のメール)を見ようと、Ctrl+↑を押しても動かなかったり。というわけで、今回はこれだけは覚えておきたいと思える、三大Webメールのショートカットキーをまとめてみました。なお、ここでいうYahoo!メールはベータ版モードのことです。なお、ショートカットキー欄の『+』は同時押し、『、』は順番に押すことを意味しています。

Gmail Yaho!メール Hotmail
新着メールの確認(受信箱に移動) G、I M F、I
送信者に返信 R Ctrl+R
全員に返信 A Ctrl+Shift+R
転送 F Ctrl+Shift+F
メールの削除 # Delete
下書き保存 Ctrl+S Ctrl+Shift+S Ctrl+S
メールの送信 Ctrl+Enter Tab、Enter Ctrl+Enter
前(上)のメールを見る J Ctrl+↑ Ctrl+,
次(下)のメールを見る K Ctrl+↓ Ctrl+.

覚えておきたい。とかいいながら、自分は最後の二つ(次や前のメールを見る)ショートカットキーしか覚えてません。なんとなくそういうタイトルの記事を書いてみたかっただけです。だいたい、Webメールでメールを送ることはほとんどなく、メルマガなどを見るためだけに使ってるので、その二つぐらいしか自分には必要ないわけです。すみません。

この他にもショートカットキーを知りたいという方は、以下の公式のヘルプページをご覧ください。

Gmail
キーボード ショートカット – Gmail ヘルプ

Yahoo!メール(ベータ版)
Yahoo!メール(ベータ版) ヘルプ – ショートカットキーの使い方

Hotmail
Windows Live Hotmail ヘルプ センター – キーボード ショートカット

このブログで現在使用しているWordPressプラグイン23個まとめ

Facebook にシェア
Pocket

自分用メモ。プラグインの説明文を見ても、だいたいが英語なのでいったいどれが何なのか分からなくなってしまうことがあるので・・・。参考になる日本語で紹介してるウェブページと、インストールページのリンク付き。

AddQuicktag

投稿画面にある<b>とか<i>とかのボタンに、独自のボタンを増やすプラグイン。とりあえず、後で紹介する”Lightbox 2″と”WP-Syntax”用のボタンを追加してる。
お手軽WordPress Tips:コンテンツをサクッと表示させるショートコードを作る & 超絶便利プラグインAddQuicktag – かちびと. net
WordPress › AddQuicktag « WordPress Plugins

Adminer(データベース管理)

phpMyadminを使わず、直接データベースを編集するプラグイン。自分の環境では日本語の説明文と名前になっている。まだちゃんと使ったことはない。正直、どういう経緯で入れたのかすら覚えてない・・・。多分、そのうち使う。
ワードプレス プラグイン Adminer
WordPress › Adminer « WordPress Plugins

Akismet

WordPressに最初から入っている、セキュリティ系プラグイン。登録画面が英語ばかりで最初戸惑った覚えが・・・。
Akismetの使い方とAPIキーの取得方法 – WordPressのプラグイン | コメントスパム対策 | SEOテンプレート比較
WordPress › Akismet « WordPress Plugins

Breadcrumb NavXT

パンくずリスト(階層)表示用。今のところ、ここのブログだと記事エントリーページにしか表示されないように設定。ただたんに上のオレンジの部分の左側に何か入れたいと思って導入した。
Breadcrumb NavXTでパンくずリストを表示 | WPカスタマイズ備忘録
WordPress › Breadcrumb NavXT « WordPress Plugins

Broken Link Checker

リンク切れをチェックしてくれるプラグイン。もうちょっと投稿数増えてから入れようと思ったけど、忘れそうなので入れておいた。
Broken Link Checker(リンク切れ確認用プラグイン)の導入方法と使い方
WordPress › Broken Link Checker « WordPress Plugins

Custom CSS and JavaScript

カスタムフィールドを用いて、CSSやJavaScriptを追加できるプラグイン。いつもCSSやJavaScriptの記事を書くときに、例を書くのに困っていたので導入。今までCSSだとテーマのstyle.cssを編集したり、タグに直接記入していた。JavaScriptは投稿の最後に書いてた(多分、やっちゃいけない)。
WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス
WordPress › Custom CSS and JS « WordPress Plugins

Exec-PHP

記事内でもPHPを実行することができるプラグイン。まだ使ってない。試しに使ってみる。

PHPのバージョン:5.6.40
 できた。
WordPressの記事内でPHPを実行するプラグイン、Exec-PHP – ミblog : レビューや日常など
WordPress › Exec-PHP « WordPress Plugins

Executable PHP widget(PHP Code Widget)

ウィジェットにPHPを実行できるプラグイン。名称が二つあるようで、最初検索してもよく分かりませんでした。今も使ってるのですが、なぜかPHPは使ってません・・・。テキストウィジェットの存在に気付かなかった・・・。
PHP Code Widget – ウィジェット(Widget)サイドバーでPHPを使えるようにするプラグイン
WordPress › PHP Code Widget « WordPress Plugins

Google Analytics for WordPress

WordPressのページのコードに、自動的にGoogle Analyticsコードを埋め込んでくれるプラグイン。いろいろ設定項目があるけど、正直まだよく分かってない。
Google Analytics for WordPress | プラグイン | WordPressの歩き方
WordPress › Google Analytics for WordPress « WordPress Plugins

Google XML Sitemaps

sitemap.xmlを自動で作成してくれるプラグイン。更新すると、検索エンジンに通知してくれるらしい。
【Google XML Sitemaps】sitemap.xmlを自動作成し、サイトマップ登録がスムーズに完了するプラグイン – ひなログ
WordPress › Google XML Sitemaps « WordPress Plugins

Head Cleaner

<head>内や、フッタ領域を整形してくれるプラグイン。表示が速くなるらしい。
Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン
WordPress › Head Cleaner « WordPress Plugins

HeadSpace2

SEO系のWordPressプラグイン。最初使い方分からなくて、間違えてすべてのページのタイトル(<title>内)をブログタイトル名と同じにしてしまった。有名な『All-in-one SEO Pack』よりいいとも聞いたので導入したのだけれども、まだあまり活用できていない。
WordPressのSEOに千手観音プラグイン、HeadSpace2・使用方法まとめ – かちびと. net
WordPress › HeadSpace2 SEO « WordPress Plugins

Lightbox 2

画像をクリックすると、実際の大きさの画像が前面に表示されるプラグイン。言葉で説明するのは難しいので、下の画像をクリックしてみてください。
一
こんな感じです。
クリックするとギューンと画像が大きくなるWordPressのプラグイン「Lightbox 2」の使い方 – オレンヂ
WordPress › Lightbox 2 « WordPress Plugins

MO Cache

.moファイル(翻訳ファイル)のキャッシュを作成するプラグイン。
WordPress をたった3分で3倍高速化する方法 [MO Cache] – カワイイはつくれる
WordPress › MO Cache « WordPress Plugins

RSS Footer

RSSフィードの最後に、ブログタイトルなどを載せるプラグイン。コピーブログ効果があるんだとか。一応、そういうサイトにパクられるような記事を書いていこうとは思っているので・・・。
RSS FooterでWordPressのRSSに情報を入れてコピーブログを防ぐ | 秋元
WordPress › RSS Footer « WordPress Plugins

Search Meter

ブログ内検索で何が検索されたか分かるプラグイン。今回整理していて存在を思い出した。けど、今見てみたら”Summary”に何も表示されないほど、ほとんど検索されてなかった・・・。
ワードプレス プラグイン Search Meter
WordPress › Search Meter « WordPress Plugins

Twitter Goodies

Twitterを表示するプラグイン。右のサイドバーにあるやつ。
Twitter Goodies Twitterを表示するプラグイン | tomoがWordPressを使ってみる
Twitter Goodies(ツイッターボタン/ウィジェット)の日本語説明 | WordPressのプラグインを使い倒そう!
WordPress › Twitter Goodies « WordPress Plugins

WP-DBManager

データベースの内容をバックアップするプラグイン。便利そうと思っていれたものの、まだちゃんと使ってはない。
バックアップ用プラグイン WP-DBManager
WordPress › WP-DBManager « WordPress Plugins

WP-Syntax

ソースコードをそれらしく表示してくれるプラグイン。

こんな感じで。
WP-Syntax | ソースコードをハイライト表示 WordPressプラグイン
WordPress › WP-Syntax « WordPress Plugins

WP File Cache

高速化用プログライン。上にも書いた、WordPress をたった3分で3倍高速化する方法 [MO Cache] – カワイイはつくれるで知った。
WordPress Plugin WP File Cache 使用報告 | mrta26.com
WordPress › WP File Cache « WordPress Plugins

WP Multibyte Patch

WordPress日本語版に初めから同梱されているプラグイン。マルチバイト文字に対応してくれているらしい。
WP Multibyte Patch | EastCoder;

WP Social Bookmarking Light

ソーシャルブックマーク等のボタンを設置してくれるプラグイン。エントリー記事の上のほうにつけてます。
Twitterやはてなブックマーク、Facebookボタンをブログに設置する方法 – WordPressのプラグイン | WP Social Bookmarking Lightの使い方 | SEOテンプレート比較
WordPress › WP Social Bookmarking Light « WordPress Plugins

WP to Twitter

WordPressに記事を投稿すると自動でTwitterに投稿してくれるプラグイン。他にもいろいろ試してみたのだけれども、うまく投稿できなかった。
Re: » WPとtwitterを連携させるプラグインWP to twitter
WordPress › WP to Twitter « WordPress Plugins

整理してみて思ったけど、これって別に必要なくないかと思うプラグラインもいくつか・・・。使ってないのは早く使うかアンインストールするかしろよと自己突っ込み。後、英語読めるようになれよと。

navigatorオブジェクトによるブラウザ識別まとめ

Facebook にシェア
Pocket

JavaScriptには、navigatorオブジェクトという、ブラウザ等の利用環境を識別するオブジェクトがあります。なんとなく気になったので、”appCodeName”と”appName”と”appVersion”と”userAgent”をそれぞれのブラウザで見たときの動作を、バージョンなどバラバラですが、調べれた分だけまとめてみました。なお、appVersionやuserAgentのかっこ内は、利用しているパソコンの環境によっても異なることがあります。

appCodeName
appName
appVersion
userAgent
IE6 Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
IE7
(IE9の開発者ツール使用時)
Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPDTDF; BRI/2; .NET4.0C; .NET4.0E)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPDTDF; BRI/2; .NET4.0C; .NET4.0E)
IE8 Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; BTRS122159; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; BTRS122159; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
IE9 Mozilla
Microsoft Internet Explorer
5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPDTDF; BRI/2; .NET4.0C; .NET4.0E)
Firefox4.0.1 Mozilla
Netscape
5.0 (Windows)
Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Firefox9.0.1 Mozilla
Netscape
5.0 (Windows)
Mozilla/5.0 (Windows NT 5.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Chrome12.0.742.122 Mozilla
Netscape
5.0 (Windows NT 5.1) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30
Chrome16.0.912.75 Mozilla
Netscape
5.0 (Windows NT 5.1) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
Safari5.0.5 Mozilla
Netscape
5.0 (Windows NT 5.1) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Safari5.1.2 Mozilla
Netscape
5.0 (Windows; U; Windows NT 5.1; ja-JP) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7
Opera11.11 Mozilla
Opera
9.80 (Windows NT 5.1; U; ja)
Opera/9.80 (Windows NT 5.1; U; ja) Presto/2.8.131 Version/11.11
Opera11.60 Mozilla
Opera
9.80 (Windows NT 5.1; U; ja)
Opera/9.80 (Windows NT 6.1; U; ja) Presto/2.10.229 Version/11.60
あなたの環境

appCodeNameはいったいなんなんでしょう。ブラウザのコードネームを示すそうなのですが、全部”Mozilla”って・・・。多分中には、”Mozilla”以外を返すものもあるのでしょう。
 ところで、パッと見userAgentを見たら何のブラウザを使ってるか判別できそうですが、どうもこの値は偽装できてしまうそうです。でも、userAgentを使わなかったら、Firefoxを判別できない・・・。

これで終わるのはなんなので簡単に、navigatorオブジェクトを見てリンク先を変える関数作ってみた。

使用例

クリック!

第三引数に、navigatorオブジェクトの検索結果、第一引数に真だった時のリンク先。第二引数に偽だった時のリンク先。ものすごい、使う人にとって親切じゃない関数! もっと使いやすい関数が書けるようになりたい。後、変数名もうまくつけれるよになりたい・・・

応用例

クリック!

まどろっこしいにもほどがある!!

余談ですが、WordPressが勝手に'(シングルクォテーション)を”(ダブルクォテーション)に変換するので困りました。上記の”クリック!”というリンクはJavaScriptで制御しています。