スマホ表示で右に空白ができる

スマホ表示で右に空白ができる

レスポンシブ対応したページをスマホで表示したところ、上記のように右に空白ができた。ググるとすべてのコンテンツを囲んだ<div>にoverflow: hidden;を適応させれば、空白が消えるそう。しかし、消えなかった。

HTMLを少しずつ削除していって、空白を生み出してる原因を探ったところ、<header>にある<h1>が悪さをしてた。@media screen で<header>に何も設定していなかったのが敗因。ここに<header>と<h1>のwidth設定を加えると空白がでなくなった。overflow: hidden;はいらないし、全体を<div>で囲む必要もなかった。

また、タイトル画像みたいなコンテンツの一部にある画像がウィンドウサイズによって自動縮小しなかったので修正する。

画像の自動縮小

以下が対応に成功したコード例。

<h1><img src=”logo.png”></h1>

h1 {
max-width: 100%;
height: auto;
}

h1 img {
max-width: 60%;
height: auto;
}

<h1>にmax-width:100%を指定して、その中の<img>にmax-width:60%を設定すると、実際の画面幅によって一定の割合で画像が自動縮小されるようになった。この場合<img>が常に画面幅の60%の長さになる。この縮小時の設定は@media screenの中に記載している。

レスポンシブ対応方法がなんとなくわかってきた。

瓦のふるさと公園

瓦のふるさと公園

E-PM1 + LUMIX G 14mm F2.5 菊間 瓦のふるさと公園

勢い+勉強で新しいコンテンツ「瓦のふるさと公園」を作ってみました。まだレスポンシブが上手くできてなく、スマホで見ると右側に謎の空白がある。調整したいところも細々あり。既存のコンテンツもこのレイアウトにしたいけど、取り急ぎここまでで公開する。

【2015年4月12日追記:レスポンシブ対応完了しました】

tweetable_write_widget

WordPressのテーマ「Mystique」をアップデートするとIE6だと表示が真っ白になり何も読めなくなった。“続きを読む”が動かない。デザインのコテコテっぷりにも飽きたのでTwenty Eleven 1.2に変更してみる。シンプルでなかなかよろしい。ヘッダー画像はアップロードした好きな画像をランダムで表示できるようになっていて、写真をアップしたい私の希望にぴったり。

デフォルトのウィジェットでTwitterがないのでプラグインのtweetableを設定したら下記のエラーが出た。

Warning: Missing argument 2 for tweetable_write_widget() in /home/xxx/tweetable.php on line 137

137行目にある関数で使われている2つ目の引数のエラーらしい。tweetable.phpの137行目にある関数の2つ目の引数は$paramsだった。検索してみると、どこにも使われていない模様。さっくり削除してアップロードし直すとエラー文が出なくなり、無事動いた。よしよし。

PhotoshopでPixel Benderのフィルタを使う

「auの庭で。」とか入れていいですか。

Pixel Benderのフィルタを使おうとしたら、準備手順が意外に多かったのでここにメモ。.pbkをプラグインのフィルタフォルダに入れただけでは動かないのだ。ウチの環境はWindows 7 Ultimate 64bitでPhotoshopはCS4(64bit)です。Pixel BenderのフィルタはPhotoshop CS4以上でないと使えないそうなのでご注意ください。

まず、ADOBE EXTENSION MANAGERでPixel Benderのプラグインをインストールする必要があります。Pixel Bender Technology Centerの下の方にある「Pixel Bender plug-in for Photoshop CS4」をクリックしてダウンロード。プログラムからADOBE EXTENSION MANAGERを起動して、「ファイル」→「拡張機能をインストール」でダウンロードした.mxpファイルを選択します。インストール途中で「この操作の実行に必要となる適切な権限がありません・・・」と出た場合は、一旦ADOBE EXTENSION MANAGERを閉じて、起動する際に右クリックで「管理者として実行」を選んで起動すればインストールできます。

インストール後に「ローカル ディスク(C:)」→「Adobe」→「Adobe Photoshop CS4 (64 Bit)」→「Pixel Bender Files」に.pbkファイルを入れればok。Photoshopを再起動すれば「フィルタ」に「Pixel Bender」が追加されて使用できます。Little PlanetsEscher’s Droste Effectが楽しそう。

ちなみに下の2枚の元写真は同じもの。おもしろい。

WordPressのテーマをMystiqueに変更する

気分転換にWordPressのテーマを「Mystique」へ変更してみる。

Twitterのアカウント設定ができずに苦労した。「ダッシュボード」→「外観」→「Mystique settings」→「Navigation」→「Twitter ID」があったので自分のIDを入れてみるも初期登録されているWordPressのTwitterが表示されるのみ。別の場所で設定するのだなと探してみると、「ダッシュボード」→「ウィジェット」→「Twitter」を右の「Default sidebar」にドラッグして「Twitter user name:」に自分のIDを入れると設定できた。よしよし。

WordPress 3.0

変な時間に目が覚めて、ついついWordPressのアップデートを始めてしまったのが運の尽き。.sqlのインポートが上手くいかずに文字化けの嵐になり途方に暮れる。検索しても同じ症状は出てこないので八方ふさがった。このBlogのデータは「はてなダイアリー」と「adiary」を経由しているので、どこかにイレギュラーな小石が混じっているのかもしれない。最後の手段で作っておいたWordPressからエクスポートしたデータを使って手動で修復して、なんとか元の状態に戻ったのだ。バックアップは大切だ。

WordPress 3.0 は動きがキビキビと早い気がする。パフォーマンスが目に見えてアップするのはうれしい。

やりたいことが多いんだけど割り込みが多くて片づかない。ToDoを書いて一つ一つ潰していこう。

「はやぶさ」カプセル、1mm以上の試料は無し”  残念だ。

Premiere CS4 で .mpg を .avi にエンコード。音が出ない。

taipei_town

ビデオ編集する前に Premiere CS4 で.mpg を .avi にエンコードしているのですが、Premiere をバージョン4.01に上げてから書き出し後に音が出なくなった。調べてみると MPEG2 を Premiere に読み込んだ時点で音が出ない。コーデックもいろいろ試してみたけどダメ。検索しても似たような症状は見つからず・・これはバージョンアップ待ちか。

クリスマスイブ?動画編集の日に決まっている。

[videopop vid=”1230139705″ vtitle=” ” vinline=”true”]臭豆腐[/videopop]

2年前のエントリー参照。毎年この時期は動画熱が高まるのでしょうか。なぞ。というわけで先週日曜日に行ってきた戴記獨臭之家のビデオをまとめました。まとめたと言っても字幕と音楽付けただけですが。総制作時間1時間。音楽は「Hits – CC Hits」よりダウンロード。

このお店は手作り臭豆腐をひたすら作っています。世に広がるまがい物が許せないために菌を育て独自の臭豆腐を作っているそうです。かもすぞ。

イヤイヤついて行ってのですが、あまりの臭いに限界を超えて覚醒しました。臭豆腐イケる身体になりました。最初の一口は強烈な臭いで動きが固まってしまったのですが、それ以降は臭いに慣れて食べられました。むしろひょいひょいと箸が進んで自分でもびっくり。これは珍味だ。台湾マスターにまた一歩近づいた。もっと参考になる旅々台北の記事はこちら

以下よしなしごと。

  • イヴはどうしようかとふらーんふらーんしてる暇があったら早めに連絡するべきだった。反省。いや悪い結果にはならなかったんですけどね、たぶん、きっと。もっと気を配っていきましょう。
  • パソコンはメモリ1GBを追加して完成。よりサクサク動き始めた気がします。
  • Adobe CS4 の修正ファイルが 500MB ありました。回線細いんだからやめてくれ。
  • ビデオカメラ用の大容量バッテリーが死んでた。購入して2年経った ROWA モノだから仕方ないか。大体、ステッカーに印字されている品名がリチウムイオソ電池になってるしなッ。

来年は勝手にブラシとフィルタ年

PhotoShop のブラシ

The 100 Most Popular Photoshop Tutorials 2008

チュートリアルを見ながら PhotoShop  のお勉強。なるほど、こうやって作ってたんだ。わりと複雑で手順を忘れそう。来年は積極的にブラシとフィルタを使って質感を上げていきたいところ。まー、とかなんとか言ってもデザインよりアイディアと中身の方が重要なのですが。今後はネタの切り口をもっと考えよう。

企画通ったのがスゲー

函館が始まってます。

ニコニコ動画でツッコミながら見た方がおもしろい。俺の実家がー、とか。無駄に秘密兵器っぽい土偶の立ち位置が好きです。

元々ははこだてCM放送局 ~HakoTube~で運営は函館市観光コンベンション部
ブランド推進課。どうでしょうじゃないけど道民は恐ろしい。

After Effects CS4 と Premiere CS4

[videopop vid=”1229703796″ vtitle=” ” vinline=”true”]CS4-first-test[/videopop]

CS4 のインストール終了。で、早速 After Effects を試してみたんですが、コイツはずるいねぇ。思わず顔がゆるむ。上の動画で最初の3秒ぐらいのタイトル文字と背景エフェクトは準備されてるものをそのまま使ってます。パラメータも訳わからないほど多くてこれは遊びがいがあるなぁ。

earthed の植物がニョキニョキと生えて出てくる小粋なタイトルがあるじゃないですか。(上の動画参照)。あーいうのがやりたくて一式揃えてしまったとも言います。

VMware で VineLinux 4.2

Cygwin さんが思った通り動かないので VMware Player で VineLinux 4.2 入れてみました。Apache と PHP の環境も構築完了。X 立ち上げて動かしてみてもサクサクです。VMware 内での FireFox 起動もストレスなし。Windows と Linux の切り替えで少しもたつくけど2~3秒なので気になりません。

当初の目論見では、動きがもっさりしてて Core 2 Quad 買っちゃおうか、これじゃあ仕方ないなぁ・・えへへ、日曜日に光華商場へ行こう、という流れだったのですが崩れ去りました。文句の付けようがない。ひょっとして Pentium Dual-Core E2180 は恐ろしくできる子なのでは。ちなみに Photoshop CS も Illustrator CS3 も SD 画質の Premiere 動画編集でも不自由してません。

最近、Core 2 Quad の Q9550 に載せ替えようか、と考えてたのですが決心が揺らぎます。こっちで調べた Q9550 の価格はほぼぴったり1万元。絶賛円高継続中で1台湾元は2.85円なので28,500円。価格.comでの最安値は33,657円。今後、HD動画を触ることもあるだろうし、この価格差は・・ありか?。こうなりゃ Vista Ultimate の 64 bit にしちゃおうかなー。メモリ4GBの壁も破れるし。Windows 7 は2010年発売だし USB 3.0 のドライバは Vista 以上じゃないと提供されないそうだし、膨らむ無駄遣い妄想。