CSS

「ねんがんの iPhone 4 をてにいれたぞ」ということで。

iPhone / iPod touch 向け、はてブ検索Webアプリ「HatebuSearch」を Retina Display 対応にしました。

対応しました、といってもほとんどHTMLなので、Webclipとアイコン5つのサイズを縦横2倍づつにして、CSSで以前のサイズを指定しただけ(つまり画像のサイズを16×16→32×32にして、CSSで width: 16px; height: 16px; を指定)。

作業に1時間もかからなかった割には、かなりきれいになって満足。すこしは画像の容量増えるかと思ったけど、全部で5.6KB→6KBならまったく問題ないでしょ。

参考

• 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
• iPhone / iPod touch 向け、はてブ検索Webアプリ「HatebuSearch」をリリース – 情報と音楽

※基本的に記事やブログのトップページへのアクセスは新しいほうへリダイレクトされるはずですが、残念ながらフィードへのアクセスはどうにもできませんでした。FC2ブログのフィードを購読されてる場合、面倒ですが http://penguinlab.jp/blog/feed を購読するようにしてください。あと、FC2ブログがいつまで残っているかはわからないので、ブックマークしている場合は、新しいURLのものをブックマークしなおしてもらったほうがよいです。どうも、面倒かけてすみません。

長年、FC2ブログを使わしてもらってましたが、やはりレンタルブログ(まあいろいろ定義はあると思うが、おおむねあなたのイメージで間違ってないはず)ではカスタマイズにも限界があるので、今年の初めから借りてるレンタルサーバにWordpressをインストールして、そこに移行することにしました。(ついでに長年痛いと思ってたブログのタイトルを変えました。新しいのも痛いという指摘は甘んじて受けます。)

だいたい手順としてはこんな感じだった。

• Worpressをインストール
• テーマを探すも、リキッドレイアウトでいいものがない
• リキッドレイアウトでもいけそうな、CarringtonにCSSを追加して使うことに
• FC2ブログのエクスポート
• エクスポートしたデータの修正
• FC2ブログの画像をダウンロード(サムネイルも)
• いっかいWordpressにインポート(MovableType形式として)
• WordPressからエクスポート(WXR形式)
• wp:post_nameをFC2ブログのblog-entry-***.htmlの***部分と一致するようにする
  
  ※ここは残念ながら完全に手作業、まだ記事が200件ちょっとだからできたこと。傷は浅いうちに、です。
• WordPressのパーマリンクをpost/%postname%に変える
• 新しい記事についてはPost IDがスラッグになるように、Auto-Slugを一部改変して使う
• FC2ブログのテンプレートを編集して、リダイレクトするように設定

完全にリダイレクト用となったFC2ブログをFC2がいつまで残しといてくれるかは不安ですが、この不安はまあレンタルブログを使い続けた代償ですかね。これで、今後URLが変わる可能性はかなり低くなったので、まあ、良しとします/してください。

なお、Carringtonテーマをリキッドレイアウトにするために加えた変更は以下の通り。これをcss.phpの末尾に追加した。

.wrapper { width: auto !important; margin: 0 1.5em !important; } .section { min-width: 0 !important; } #sidebar{ float:right !important; width:198px !important; } #content{ margin-right: -250px !important; width: 100% !important; } #content > *{ margin-right: 250px !important; } .full-content{ width: auto !important; } .full-title{ width: auto !important; } #all-categories{ width: auto !important; } #header .wrapper{ margin: 0 !important; padding-left: 20px !important; }

参考になったページ:

• fc2ブログからWordPressへ移行 « いつかきっと役に立つ
• FC2ブログの正しい退会(移転)方法 – 青い心の灰色猫
• クールなURIは変わらない — Style Guide for Online Hypertext
• yohei-y:weblog: 良い URI の設計
• たとえ個人の趣味のブログであっても独自ドメイン上でやるべき8つの理由
• URLを変えるな！(1) – 後悔しないためのWebデザイン
• URLを変えるな！(2) – 後悔しないためのWebデザイン
• URLを変えるな！(3) – 後悔しないためのWebデザイン
• PearBlog – スラッグ自動生成

Web制作に関わる人必携のFirefoxプラグイン「Firebug」の機能の一つに、HTML中の要素にカーソルを合わせると、ページ中の対応する部分が半透明のボックスで示される、というものがある。複雑なページをハックするときや、CSSによるレイアウトの確認などに非常に便利だ。

しかし、一部のサイトでそのボックスがずれて表示されてしまう場合がある。調べてみた結果、対象となるページのCSSで以下のような記述があった。

div { margin-bottom:15px; margin-left:10px; margin-right:10px; }

どうも、Firebugのボックスはdivで表示しているらしく、ページ中すべてのdivにかかる上のcssが適用されてしまい、本来の位置とはずれて表示されてしまうらしい。

普通、クラスもidも指定せず、すべてのdivにマージンを設定することはめったにないと思うので、これが問題となることは少ないだろうが、一応、解決策を書いておく。

解決策は、Firebugが表示するdivブロックのcssにmargin:0;を設定する、というものである。対象となるcssファイルは以下の位置にある(Windowsでデフォルトの設定の場合)。

C:\Documents and Settings\(ユーザ名)\Application Data\Mozilla\Firefox\Profiles\(英数文字列).default\extensions\firebug@software.joehewitt.com\content\firebug\highlighter.css

これの51行あたりからを、以下のように変更する。

.firebugLayoutBoxOffset { z-index: 2147483647; position: absolute; opacity: 0.8; margin: 0; } .firebugLayoutBoxMargin { background-color: #EDFF64; margin: 0; } .firebugLayoutBoxBorder { background-color: #666666; margin: 0; } .firebugLayoutBoxPadding { background-color: SlateBlue; margin: 0; } .firebugLayoutBoxContent { background-color: SkyBlue; margin: 0; }

これで正しく表示されるはず。