Thursday, November 16, 2006
「続きを読む」をベータに継承

思えば、BloggerがBetaを発表したのは今年8月のこと。その直後にあたしは運良くアカウント移行のチャンスを与えられたので、早速、新しいテンプレート・システムをいじりつつ、難解になった新システムを罵倒する日々が続いていたわけですが、本日、テンプレも新システムに移行してみました。

えーしばらく更新をサボっていましたが、仕事がモーレツに忙しいだけでなく、その間、テンプレをベータ・システムに移行するために最終チェックを行っていました。
Bloggerによると、ここ最近で言語ローカライズ化も一気に進み、すでにベータへの移行がすべての旧アカウント保持者に対して推奨されているようです。日本語が表示できるようになったのを機会に、ベータ移行を決心し、新しいテンプレ・システムを使い始めた方も多いのではないでしょうか。

あたしの場合、ベータ移行してからもかなり長い間、旧Bloggerとまったく同じテンプレが使用できるクラシック・テンプレ・システムを使っていたわけですが、それには2つの大きな理由がありました。

ひとつは、ブログのインポート機能の登場を待っていたこと。
Bloggerでは、Blogger内で書かれたブログ・データをバックアップする方法を使えば、WordPressなどのブログ・ツールにデータをエキスポートすることが可能です。ま、家財道具を抱えて嫁に行くことができるわけですね。
ところが、外部で書いていたブログのデータを、Bloggerにインポートする機能がない。外部からBloggerへの簡易引越しはできないわけです。前夫との思い出を抱えたままの再婚は許されないみたいなもんです。
あたしは別に、外部で書いている他のブログをBloggerにインポートさせたいと思っていたわけじゃないんですが、これまでに書いたエントリの中には、以前使っていたランキング・サイトのバナーとか、いらないものがたくさんある。それを1枚ずつ開いて削除するのは面倒だし、どうせテンプレもベータ仕様に変更するなら、その際にデータをエキスポートして、いらない部分を手持ちのエディタで瞬時に抹殺してからインポートし直してやれば、クリーンな状態で再スタートが切れると思っていたんです。

でも、インポート機能は登場しませんでした。

ふたつ目は、ただ考えるのがめんどくさかっただけなんだけど、「続きを読む」の料理方法。
あたしは、"クリボウのBlogger Tips"で紹介されているこの方法を使って「続きを読む」を実装しています。だもんで、各エントリの中にすでに埋め込まれている<div class="fullpost">や<div class="readmore">に手を加えずに、一発ですべてが継承できる方法じゃないと、これまたエラくめんどくさいことになるわけですね。
そこでちょっと調べてみたら、JavaScriptを使えというアドヴァイスが大量にヒット。でも、別にそんなことしなくても、CSSとBlogger独自のif構文だけで任意のページにアイテムの表示、非表示はできるはず。ただ、<head></head>内の<style></style>に、if構文が使えないことが問題として残りました。

そこでちょっと悩んだわけですが、CSSは別に<head></head>内に入れなくてもいいことを思い出し、<body></body>内に直接CSSを書き入れることですべてが解消。普段は直書きなんてしないので、基本的なことを忘れてました。
あたしと同じように、「続きを読む」の継承が原因で新テンプレ・システムへの移行を渋っている方のために、その方法を紹介しておきます。

まず、テンプレの"htmlを編集"に行き、右上の" ウィジットのテンプレートを展開"にチェックを入れたら、以下の部分を探してください。

    <div class='post-header-line-1'/>
    <div class='post-body'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

でもって、赤字になっている部分を以下のように変更します。

    <div class='post-header-line-1'/>
    <div class='post-body'>
     <b:if cond='data:blog.pageType == "item"'>
       <style>.fullpost {display:block;}</style>
       <style>.readmore {display:none;}</style>
        <p><data:post.body/></p>
      <b:else/>
       <style>.fullpost {display:none;}</style>
       <style>.readmore {display:block;}</style>
        <p><data:post.body/></p>
     </b:if>

      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

そんだけです。

ところで、あたしは以前から新テンプレ・システムに対して懐疑的。ウィジットなどの機能面は向上しましたが、ほんの小さなデザインの変更でも、ウィジットに対応するBlogger独自のマークアップをある程度理解していなければならないので、一般ユーザにとってはデザイン面の制限が増え、大きく後退したと思っています。
htmlなどの最低限の知識だけで、誰もが気軽に個性的な"自分だけのブログ"を作れるのが理想なんだけどなぁ。また、そのせいでBloggerユーザが離れていかないことを祈りつつ、早いとこベータにも対応したテンプレ配布を実現させたいと思ってます。ただ、忙しくて時間がね・・・



6 comments | コメントを書く | コメントの表示

Tuesday, October 17, 2006
廃品稼動中

アフロのブルース・リーとっても気に入ってたんですけど、さすがに何度も見てたらクドくなってきたので、今回は味付けの薄いものを作ってみました。
久々に左右両側にサイドバーを付けた、中央のエントリ部分のみがモニタ・サイズに合わせてストレッチする3カラムです。

実は、あたし自身が未だに800×600のモニタを使っているため、ストレッチするテンプレ作っても、それ以上大きなモニタで果たしてちゃんと表示されるのかよくわかりません。とりあえず勘だけでバババと作ってから、Browsershotsなんかでモニタ・サイズを指定してスクショ撮って確認するしかない。そんなわけで、ウチのモニタでもピッタリおさまるように、これまでのテンプレは幅が固定サイズになってるやつが多かったんですね。
しかもウチの極小モニタ、友達が「道に落ちてたの2台拾ったから1台あげるよ」と言ってタダでくれたやつなんですよ。

っつーか、落ちてたんじゃなくて、捨ててあったんだと思いますけど。

ま、ウチのモニタサイズを基準にしてテンプレ量産してもどうかと思ったんでストレッチにしたんですが、そうなると3カラムじゃないとバランスが取れなくなる。んで、3カラムにしたら今度は入れるものがない。そこで、半年ぶりくらいにアマゾンのアフィを貼ることにしました。
インデックスとアーカイヴのページではCSSをキーワードに生成した広告が表示されるようにしてみたんですが、日本にはCSS関連のHowto本がたくさんあるんですね。

ぶっちゃけた話、あたしはアフィでこづかい稼ぎするつもりなんてまったくないし、広告内に表示される書籍は1冊も読んでませんが、ランダムでたまに表示されるCSS Zen Gardenの書籍版だけはかなり気になってます。
もともと、CSS Zen Gardenはネット上で展開されているデザイン・プロジェクト。単一のhtmlを使い、CSSの変更だけでどれだけ魅力的なデザインとヴァリエーションが実現できるかを実践しているサイトです。ここの秀逸なデザインの数々を見れば、CSSの威力が体感してもらえるはず。
知名度が高いのですでにご存知の方もたくさんいると思いますが、まだご覧になっていないようならぜひ覗いてみてください。CSSは同サイト内のメニューをクリックすれば切り替わります。

それにしてもアレですね、世の中には才能あるデザイナさんがたくさんいますね。
彼らのように華々しく活躍できるとは思いませんが、この先もデザインを楽しむのであれば、あたしも多少はコンピュータの環境を整えるべきなのかもしれません。次回、コンピュータや周辺機器を新しくするときは、道に落ちてるやつじゃなくて店で売ってるやつにしようと思います。


Friday, September 29, 2006
リーさんとラーメン

仕事でストレスが溜まり放題なので、気晴らしにカンフー映画を2、3本観ているうち、とんでもないことに気づきました。

もしかして、ブルース・リーはアフロが似合うのではないか。

なので、早速やってみました。あまりにも自然。さらに磨かれた気迫。
デザインに使った柄がラーメンどんぶりのフチに描かれている例のアレになってしまったあたりが、あたしの発想の貧困さを象徴しています。ま、こんなテンプレはあたしとラーメン屋しか使わないと思いますが。

ところで、中国の人口は約13億人なわけですが、すでに国外で別な国籍を取得してる中国人もたくさんいるのはすでにご存知の通り。あたしが暮らしているニュージーランドにも中国人移民者が非常に多いんですね。
彼らの場合、家族のひとりが永住権を取得すると、両親、祖父母を含めた3世代が丸ごとゴソっと家族申請して移住するので、比較的永住権の取得が楽だった数年前は、まさにネズミ算式に中国人人口が増加しました。

でも、確かに街を歩いていると中国人とすれ違う機会は多いし、中国人経営の商店もたくさんあるので買い物に行った先で話をする機会はあるものの、これだけ多くの中国人がいる街で、なぜかあたしには個人的な知り合いや友達がほとんどいません。
おそらくその理由は、彼らのコミュニティがあまりにも完成されすぎていて、他人種との接点をそれほど必要としていないからのような気がします。

移住者の数が多いから当たり前なのかもしれませんが、彼らのコミュニティは衣住食はもちろん、メディアや娯楽においても発達しているため、中国人の不動産屋から家を買い、中華マーケットで食材を手に入れ、中国人をターゲットにしたビジネスを展開し、その気になれば間違いなく中国語だけで暮らしていけるわけです。
最近は政府発行の各種パンフレットや申請書類にも中国語版が用意されているし、民放TVの放送枠をドカーンと買って、地上波でも中国の番組を英語字幕なしで放映していたことがありました。ま、これはさすがに批判が殺到して中止になりましたが。

ここまでくると、もうニュージーランド国内に中国ができてしまったようなもので、中国人以外から利益として得られた"外資"(や、実際は同じNZドルなんだけど)は、さらに彼らのコミュニティを潤していきます。
もちろん日本人にも似たような傾向はありますが、絶対数が違うので全然お話になりません。そして、コミュニティ内ですべてが完結してしまう彼らとの接点も、ビジネス以外ではほとんど得られないのが現状です。

まぁニュージーランド生まれの2世、3世になると事情も変わってくるんですが、その全員がコミュニティ外と積極的に接触するわけではないし、その結果、あたしのように多くの中国人に囲まれながらも「中国っつったらあんた、カンフー、赤、黄、ラーメンどんぶり」みたいなステレオタイプの人間ができあがってしまうんですね。あ、あと爆竹ね。

どうでもいいけど、ウマいラーメン食いたくなってきた。


Tuesday, September 19, 2006
テンプレ依存症

師匠のクリボウさんにテンプレ職人と記述いただき、もう目の前にニンジンがぶら下がった馬のような状態になってしまい、また新作を作ってみました。

今回のキモは、右側の雪の結晶部分の色がスクロールに合わせて変化すること。
ま、背景画像を固定することで実現する簡単な視覚効果なんですが、実際に作り始めてみたらIEではbody以外の要素に背景固定の指示ができないことがわかり、最初の予定を大幅に変更したものになりました。
しかも、固定幅でないと問題が出る構造にしてしまったので、600×800のモニタでもキレイに表示させようとしたら本文が入る部分が異様に小さい。

ダメだ。これは失敗作。

ところで、ここんとこ毎週月曜日になるとテンプレを新しいものに変えてますが、なんとなくコツがつかめてきたこともあって、デザイン決定から実際に機能するテンプレに仕上げるまでは3、4時間程度。これはあまり負担になりません。ただ、肝心のデザインがなかなか決まらない。
んで、デザインを決めるまでは常に配置と配色のことで頭がいっぱいなので、メモリ食いまくりの常駐ソフトを入れているような状態になってしまい、生活にも影響が出てきました。

CSSのみを使った配置では特にそうなんですが、Webサイト制作やテンプレ制作なんて、箱の中にコンテンツをギッチギチに詰め込こんでテトリスやってるようなもんですから、あんまり考えすぎると、目に入るバランスの取れていないすべてのスキマがだんだん邪悪なものに見えてきます。
壁からちょっと離れている机とか、歩道からあまりにも離れて縦列駐車している車を見ると気になって仕方ない。

「marginゼロにして詰めてやりたい」と本気で思います。

しかも、なぜか今朝起きたら20年ぶりくらいに鼻血がドバドバ出たんですが、ティッシュペーパーが猛烈に赤く染まるのを見ながら、びっくりするより先に色番号が#990000であることを認識しました。

立派なテンプレ依存症になりました。


Tuesday, September 12, 2006
シーサラマン・ナラヤナン

なんだかもう、ブログ書くためにブログやってんだか、テンプレ作るためにブログやってんだか微妙な状態になってまいりました。あたし何やってんでしょうね。

あたしはテンプレ制作の際、Photoshopで全体的なイメージを決めてから、のちに色違いを制作することを考慮して各パーツはIllustratorで作ります。その後、出来上がったものを再びPhotoshopでWeb用に加工するんですが、Adobe製品ってのはプログラムが起動する際に、そのプログラムの開発に携わったスタッフの名前が表示されるんですね。

完全に起動するまではなんとなく手持ちぶさたなので、どうしてもこの名前の羅列をじーっと見てしまうわけですが、Photoshopのクレジットの中にどうしても気になる人がいる。
GeorgeとかChrisとかありがちな名前の中、ひときわ目立つ長い名前。それは、 Seetharaman Narayanan。シーサラマン・ナラヤナン…シーサラマン・ナラヤナン…。

まるで呪文。

もうSeetharaman Narayanan氏のことが気になって気になって仕方がなかったので調べてみたら、"Seetharaman Narayananで催眠術にかかった"というブログ記事を発見。

やっぱり呪文だった。

さらに探してみると、Flickrにも"Seetharaman Narayananファン・クラブ"が存在することが判明。クラブ紹介の説明文には「Photoshop起動画面で絶対に目をそらすことのできない名前、Seetharaman Narayananをたたえよう」とのこと。スゴイ催眠術効果です。

こうなると、実在するSeetharaman Narayanan氏がいったいどんな人なのかどうしても知りたい。んで、Adobeオフィシャルのサイトを掘ってみたらこんなものが出てきました。

社内でも催眠効果全開。

Photoshopをお持ちの方はただちに起動して、Seetharaman Narayananをご確認ください。


Thursday, September 07, 2006
Blogger Betaテンプレ攻略

あれだけBloggerベータのテンプレ・エディタをクソミソに言っておきながら、やっぱり気が変わったので泣きながら攻略してみました。
人間、やれば結構できるもんです。このブログのオリジナル・テンプレをほぼ完全に移植してみました。興味のある方は下記へどうぞ。

有限会社 ウラヤマシ

あたしが作業している間にもBloggerの中の人たちが設定をイロイロいじっていたらしく、同じテンプレなのに突然表示が変わったり、タグに関するヘルプ・ページがいきなり消滅して見れなくなったりで、まさにBloggerとの戦いでした。

マジ、もう2度とこんなめんどくさいことはしたくない。

移植作業をして気づいたことは、配置、配色、画像など、ほぼすべての要素をCSSで記述することが要求されること、metaタグを含めたテンプレ内の記述には日本語が一切使えないこと、Wedgit(Web2.0なドラッグ&ドロップでレイアウトや表示コンテンツを変更する機能)に対応させるために大量のタグを埋め込まなければならないことでしょうか。普通にページのソース開いても見えないですけど。
CSSでの統括的なデザインは今や主流になりつつありますが、なんせブラウザによって表示方法が違うので、Firefoxだとキレイに見えてもIEだとメチャクチャになったりするし、そろそろ企業が足並みを揃えてくれないとややこしいですな。

ま、今回の移植は、新エディタに対応したテンプレでないとラベル機能やツリー形式のアーカイヴ表示ができないことから、オリジナル・テンプレでどこまでできるかを試してみたわけですが、んなことをしてる間に昨夜突如として立ち上げられた"Blogger Betaでわかっている問題点"という公式ブログで、「そのうち旧Bloggerスタイルのエディタでもこれらの機能が使えるようになります」と書かれていました。

ふざけんな。

あたしの2日間を返してくれ。


Sunday, September 03, 2006
逆襲のテンプレート

このブログをBloggerベータに移行させて以来、新機能に対応したhtmlエディタの登場を楽しみに待ってたんですけど、8月末日にやっと公開された待望のエディタに激しく失望。
テンプレと新機能を連動させるための指示表記や、これまでのBloggerタグに代わる新しいタグなど、理論はわかりやすいんですが記述が恐ろしくめんどくさい。Bloggerのためだけにこれらの新しい記述方法をマスターするなんてアホらしいし、なんとなく、「シロウトはオフィシャルで配布してるテンプレ使って、背景色や文字色だけ変えて満足してな」的雰囲気が漂ってて、どうしても好きになれません。
ああ、Bloggerがこれまでの良さを捨てて、まったく逆の方向へむけて爆走し始めたような気がして悲しい。

というより、なんか腹立ってきた。

そこで、蚊取り線香とワサビにインスパイアされたのをきっかけに、怒りにまかせて旧Blogger形式で新しいテンプレをガーっと作ってみました。
このブログのバカっぽさが微塵も感じられないスカしたテンプレになってしまい、デザイン的には失敗ですが、そろそろCSSのみでコントロールするページ組みを試してみたいと思っていたので、ちょうどいい機会になりました。一応、FirefoxとIEでは動作、表示確認をしていますが、Safari、Operaあたりで崩れた場合はぜひご一報ください。

ブログってのはとても私的なものだし、特に日本人はモノに対して自己のアイデンティティを反映させたい人種なので、あたしもオリジナリティにこだわるわけですが、便利さを優先して没個性になるくらいなら、あえて不便を選んでもいいのかもしれません。
ま、そのうちラベル機能なんかがどうしても使いたくなって、新しい記述方法を泣きながら勉強することになるのかもしれませんが、しばらくは従来のテンプレ形式を使っていくことに決めました。

また、CSSは引き続き勉強していきたいので、今後も別なデザインのテンプレや色違いなどを制作するかもしれません。いくつかたまったら配布でもしますかね。



2 comments | コメントを書く | コメントの表示

Friday, December 02, 2005
便秘解消テンプレ

あたしは快便快食女ですがねえぇ。テンプレ変えました。今回も自作です。

以前のやつ気に入ってたんですけどね、サイドバーに入れたいコンテンツが増えたんで3カラムのレイアウトにしたいなぁと思ってたんですよ。しかも、前のデザインではサイドバーの下に画像を敷いてたから上に乗った文字が読みにくくて。昨日の夜、「ちきしょー読めねぇよ」とブチギレし、一気にガーッと作ってみました。色気ないね、今回の。
各記事の文字数が多いからブラウザ一面がモジモジモジモジって感じですな。本屋に行くと文字が並んでいる圧迫感からトイレに行きたくなる人が多いように、このブログを読んで便意をもよおす方もいるかもしれせん。

ぜひ、便秘解消にお役立ていただきたい。

このくらいシンプルなやつだったらいくらでも作るけど、需要あるんだろうか。テンプレ配布でも始めるかな。


Saturday, November 12, 2005
できたー。やっとできたー。

自慢じゃないけど、数年前に始めた最初のblogは3日で終了。で、その次に始めたのは7日で終了。そしてきっと今回は10日で終了。なのに、こんなにレイアウトに命かけてどうするつもりなんでしょうか。丸2日費やしてカスタマイズしまくり。煙草吸いまくり。
この、「ダメなの、ダメなの!あたしだけのオリジナルじゃないとイヤなの!」と執拗にオリジナルにこだわる理由は、幼い頃に受けたトラウマが原因だと確信しています。

小学校の低学年だった頃のこと。ある日、学校の近くの文房具屋がハンコを売り始めました。三文判のように苗字ではなく、一般的な名前がローマ字で彫られた、ピンクやブルーのインクが入った子供用シャチハタ。クラスメイトはそれをこぞって購入し、授業中に先生に内緒で回ってくるノートの切れ端に書いたメッセージ、教科書のカバー、交換日記、出席簿など、とにかく紙なら何でもハンコ押しとけって感じの空前のハンコ・ブームが到来したのです。
ところが、今じゃ「子供につけたいかわいい名前ランキング」なんかで堂々と1位を獲得しているあたしの名前も、当時は「ご両親、勇気あったわねー」と近所のオバちゃんに感心されるほど珍しかったので、当然のようにできあいのハンコは売られていなかったんですよ。でも、みんなの持っていたハンコがどうしても欲しくて欲しくて。
数週間後、「こうなったらオーダーメイドしかない」と決断し、必死で貯めたなけなしのおこづかいを握り締めて文房具屋へ行くと、「特注だとねー、書体、インクの色、ケースの色、好きな組み合わせができるよー」とのこと。こうしてあたしは世界にひとつしかない、自慢のハンコを手に入れたわけです。
オーダーメイドだったんで手元に届くまでに更に数週間かかったから、その頃にはハンコ・ブームなんかとっくに終わってて、カレーの匂いがする消しゴムが代わりに大流行してましたが。

このblogも世界にひとつしかないオリジナル。あたしの会社のロゴからとった蝶々が飛んでます。



0 comments | コメントを書く | コメントの表示