その他には、コメントやコメント周りや…

コメント投稿周りを少し変更しました。

ちなみに今、「視覚マーケティング実践講座　～　ブログデザインで自分ブランドを魅せる」を読んでいるんですが、これはまだ実践できていないです。途中です。面白い本ですよ。ブログのデザインに悩んでいるのであれば是非。

視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる

ウジトモコ, ブログデザイン勉強会参加ブロガー / インプレスジャパン ( 2009-09-10 ) /

waviaeiのバインダーで詳細を見る

MediaMarker

日付と併せて、一番知りたいカテゴリとタグの表示です。なお、これはトップページ、個別記事関係なくです。もちろんこれらの情報はページ内のどこかには表示しますが、果たしてこれが記事タイトルと同じ場所に書いてあるかどうかで、皆さんはその記事に興味がわくのかどうか。それよりも、むしろ重要なのは、記事の内容がわかる、良いタイトルなのか。

よろしかったらどうぞ。なお、設置の仕方はtaiさんの記事を参考にさせていただきました。

追記：無駄にエキゾチックなデザインを選んだら、下から2番目と3番目が読みくいですね（汗）。下から3番目は「記事タイトル＋日付＋タグ」。下から2番目は「記事タイトル＋カテゴリ＋タグ」です。失礼いたしました。

「Webの世界に情報発信しよう！」浜俊太朗（ライブドア）

このタイトルと内容を読んで「行ってみよう」と思いました。最近（と言うかいつも）ぐるぐると頭の中で考えている事が「インプットした事をどのように（How）アウトプットしようか」です。もちろんブログでアウトプットする、です。なので、ちょうどタイムリー。

浜俊太朗さんがおっしゃった、ブログで情報発信すべき理由は３つ：（１）勉強になる、（２）仕事になる、（３）打ち解けられる。正直、僕にとっては特に新しく気づかされた事ではありませんでした。それは過去の自分の就職面接体験や、ブログのコメントで交わした他の方の意見を通してだったり、WordPressJapanのオフ会やWordCampに参加して感じが事でもあります。ただし、僕みたいに薄々気づいて感じているのに、それをなかなかアウトプットしてこなかった人間と違い、浜俊太郎さんは実践されてきて今に至っておられるので、そこらへんの差を痛感したしだいです。凄いと思った。特に仕事に繋げると言う事では逆に自分が情けなくなります。

ただし、ちょっと乱暴でおおざっぱですが、今のところ日本では残念ながらこの3点が全て当てはまるのはウェブ業界だけじゃないか感じていますがどうでしょうか？僕みたいにウェブ業界の外にいる人間でも何か実行できるようなヒントが得られたらなぁと思っていましたが、「CSS Nite」ですから特に残念ではありません。自分で実行（＝アウトプット）していき、答えを探しに行くしかないですね。

最後に参加者同士で「どうしたらブログの更新を続けられるのか？」と言う相談大会兼ワークショップがありました。「続きは明日」みたいなのは僕も最近ちょくちょくやります。ちゃんと「明日」に投稿できた試しがないですが（爆）。他には、「ちゃんと書く」タイプの記事と「下手でも良いからとりあえず書いて投稿する」タイプの記事に分けるとか。Twitterが出てきて最近はあまり見かけなくなりましたが、海外のブログで一時期よく見られたのが「Asides」って言うカテゴリ。直訳すると「余談」。ちょっと脇へそれるけど、とか「記事」と言うほどでもないんだけど、って言う感じです。ディフォルトでこれを備えたWordPressテーマもよくありましたね。MattはまだAsidesやってますね。

それからちょっと話が逸れますが、ちょうどつい昨日読み終わった本がREADING HACKS。アウトプットする為に、どのように、どうやって読書をするか、のアイデア等が書かれておりとてもエキサイティングだった。ブログを更新する為のヒントや、何の為にウェブサイトやブログを読むのか等に通じると思うのでオススメです。

「書籍などに紹介されていない display : inline-block について」小山田 晃浩（メタフェイズ）

小山田さんの記事は技術より。inline-blockはCSSのソース眺めてて見かけたことがあるし、その名称からなんとなく想像はできるけど、具体的に何かは全然知らなかった。ちょっとディープな話題でしたがついて行けた。なによりも僕にとっては「おっ！これはブログのデザインで使えるぞ」と思う話題だったのが良かった。

たとえばboxを横に並べるデザインはブログのトップページの「最近の記事」に使える。特に最近はマガジン系のテーマが多くなっているので、それなんかにバリバリ使えそう。それからvertical-alignが使える点。middleとかbottomとかは使い道がなさそうで、ブログだとあるんじゃないかな。サイドバーにいろいろな情報をboxとして置きますから、それらを常にtop揃えすれば良いとは限らないですもんね。

ちょっと試してみようと思う。

（スライドとハンドアウトがアップされてます。）

全体的に

先日のWordCampに続きCSS Nite、ウェブ系のプレゼンを立て続けに聞いたので、プレゼン手法について気づいた事をちょっと。寸劇は良かった！面白かったし、笑いが取れるのが良い上に、印象も残る。浜さんのプレゼンでは強調したいメッセージ（英語で言う”Take home message”）を含んだスライドのページだけ赤のバックグランドで目立たせていましたが、これもメリハリが付いて良いのでは？ただし、赤のバックグランドに白の文字は、プロジェクターを通してでは読みづらいと感じました。小山田さんの#fffに黒も同様にプロジェクターだとちょっと読みづらいと感じました（プロジェクターの設定の関係かも？）。僕が眼鏡は忘れていったので大きな声では言えませんが…（汗）

プレゼン中に挙手でアンケートを取るのはよく有りますが、隣通しで話し合うとは初めて出会った（笑）。

浜さん（と鷹野さんがでしたっけ）が「是非今日の感想を書くことからブログを更新してみよう、ブログを初めてみよう」と言う旨の事をおっしゃってたけど、今現在（10月18日23時45分）公式サイトの「終了しました」記事へのトラックバックはまだ3件だけ。しかも内１つはセッションされてた小山田さん。ウェブ屋では無い僕としては、ウェブ屋の方々がセッションでプレゼンされた内容を、他のウェブ屋の方々がどのように思ってらっしゃるのか—感想、意見、反論、同意、もっと良いアイデア、等々—にとても興味があります。週末過ぎると記事が増えるかな。もしこれらがmixiのみにて書かれ、mixiのみにて意見交換がされているのであれば、残念でならない。

予約もせずに当日参加で行ったので、座れてちょっとびっくり。実を言うと僕はCSS Nite3回目です。1回目は門前払い（満員）、2回目は失望に近いがっかり感が強く、3回目にしてようやく「行って良かった」と思いました。

と言うことで、そのようなきっかけを作って下さった、プレゼンされたお二人に感謝です。

追記：レポートをブログで書いても、必ずしも公式サイトへTBしてるとは限らない事に気が付いた。

READING HACKS

原尻 淳一
東洋経済新報社 ( 2008-10 )
ISBN: 9784492043196
おすすめ度:

waviaeiのバインダーで詳細を見る

MediaMarker

と言うことで、買ったけど未設定の無線ルーターを、無線アクセスポイントとして使うべくひっぱり出してきました。 これにWinXPのノートPCを無線で繋いで、IE検証しつつ、VistaのデスクトップPCで修正させます。

たとえば、「WordPress」 タグは「WordPress」か「ワードプレス」か？

もしくは、「WordPress」と「ワードプレス」の両方をタグ付けするのが良いのか？

それともやはり、サーチエンジンで検索されるかもしれない方でタグ付けすべきか？

たとえば、「川越」を検索する人のほとんどが「川越」と入力して検索すると思います。「Kawagoe」と検索する人はほとんど無いかと。反対に、「WordPress」は、「WordPress」と検索する人もいれば、「ワードプレス」と検索する人も結構いるのでは？

何か最適な法則は無いもんでしょうかねぇ。

TrueTypeフォント パーフェクトコレクションによれば、欧文の行間（レディング）はフォント・サイズの２０％くらいでOKだそうですが、和文の場合は５０％、もしくは７５％くらいが適切だそうです。ちなみに、組版用語では、５０％を「二分アキ」、７５％を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。

そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。

それから、フォントの種類も日本語の場合は和文フォントで表示されるようにしました。特に、記事のタイトルはこれで見栄えがよくなったと思います。

これらを日本語のみに適用する方法ですが、lang 属性を指定した擬似クラスを使っています。もちろん、XHTMLにて言語（lang）属性を正しくマークアップしている必要があります。その変を考慮しているのが、BasicBilingualの良いところの１つ。

[css]
div.entry h1:lang(ja), div.entryBody h2:lang(ja), div.entryBody h3:lang(ja), div.entryBody h4:lang(ja) {
font-family: “ＭＳ Ｐゴシック”, Osaka, “ヒラギノ角ゴ Pro W3″, Verdana, Arial, Helvetica, sans-serif;
}
div.entryBody p:lang(ja) {
line-height: 1.7em;
font-family: “ＭＳ Ｐゴシック”, Osaka, “ヒラギノ角ゴ Pro W3″, Verdana, Arial, Helvetica, sans-serif;
}
[/css]

ただし、これの欠点はIEでは認識されない事。バグではなく、そう言う仕様です。IE７でもその方針（ベータ）だそうで・・・。IEにも適用させるには、今のところ新たなクラスを作る以外方法はなさそうです。

以前、巷で評判のLightboxを入れていました。WordPressの場合、Lightboxの導入を簡単にしてくれるプラグインが幾つか有ります。見た目も格好よくて、まさに今風って感じなのですが、大きな問題点が１つ。読み込むjavascriptのファイルが大きい、つまり、サイトが重くなる事。更に、プラグインを使用するとどのページであろうと、所かまわず読み込みます。Aboutだろうが、Archivesだろうが・・・。

これらの理由で一時的にLightboxをはずしてました。でもやっぱり入れたいなぁと思ったので、プラグインを使用せずにLightbox JS v2.0を入れようと四苦八苦。上手くいったところで、MasayanさんはLiteboxに入れなおした事を発見。おおっ、そういう手があったのか、とこちらに乗り換え。Lightboxの時と全く同じ問題に直面しましたが、問題解決。Lightboxのトータル・ファイル・サイズ、110kbから、Liteboxの30.6kbへとスリムになった。

以下は、LightboxとLiteboxの両方で手こずった点。

フッタ部分の表示が崩れる

画像とタイトルと、「閉じる」ボタンが表示されるフッタ部分。このフッタ部分の表示が小さかったり、白色になったなかったりする問題は、CSSの問題です。このフッタ部分はclass="clearfix"ですが、これは良く使われるクラスで、テーマファイルの方にも使われていたりします。一番手っ取り早い解決方法は、Lightbox又はLiteboxのclass="clearfix"を、別のクラス名に変えます。例えば、class="clearfixLB"。Lightbox.css, litebox-1.0.js（Lightboxの場合lightbox.js)のファイル内でclearfixを検索してclearfixLB等に置き換えます。Lightbox.cssには、下のほうに３箇所。litebox-1.0.js（１９２行目）lightbox.js（２７５行目）にはそれぞれ１箇所ずつあります。

閉じる「x」とローディングの画像が表示されない

フッタ部分の表示が崩れる問題は有る・無しに関わらず、閉じる為の「close X」ボタンと、くるくる回る、ローディング中を示す画像が表示されない時があります。MovableTypeでも同様の問題があるそうで、WordPressを含むダイナミックにコンテンツを作成するCMSの類は全てこの問題が生じるのかもしれません。（もしくはサーバによる問題か？）解決方法は、code>litebox-1.0.js又はlightbox.jsで、これらの画像へのパスを、相対パスからURLに変更する事です。それぞれのファイルの「Configuration」欄、litebox-1.0.jsでは２１行目あたりから、lightbox.jsは６０行目あたりから、の以下の部分です。

[js]
var fileLoadingImage = “images/loading.gif”;
var fileBottomNavCloseImage = “images/closelabel.gif”;
[/js]

これらをそれぞれ「http://」から始まる、画像へのURLに変更します。（参考：Odysseygate.com » Blog Archive » [WordPress]Lightbox JS 2.2を導入してみる）

backとnextが表示されない

セットされた画像上でカーソルをホバーすると表示される「back」と「next」が表示されないのは、lightbox.cssに記されているこれらの画像ファイルへのパスが間違っている可能性が高いです。ディフォルトでは相対パスで指定されています。もしも画像ファイルを置く場所を変えたりしたのであれば、ここを修正してください。場所は５３行目と５４行目のあたりです。

[css]
#prevLink:hover, #prevLink:visited:hover { background: url(./images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./images/nextlabel.gif) right 15% no-repeat; }
[/css]

おまけ：特定のページでのみ読み込む

LightboxからLiteboxに変えたとは言え、このエフェクトを使用することが無いページでも読み込むのは、はっきり言って無駄です。例えば、アーカイブスのページで使用することはまず無いと思います。そこでWordPressのコンディショナル・タグを使って条件分岐します。ここでは、ホームと個別記事を表示したときのみLiteboxを読み込むようにしてみました。

まず、Liteboxに必要なジャバスクリプトを読み込む箇所（header.php）をコンディショナル・タグで囲んでやります。

[php]

[/php]

更に、Liteboxの場合body onload=”initLightbox()”が必要なので、その箇所もコンディショナル・タグで囲みます。

[php]
>
[/php]

これで少しは軽くなるかと

このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。

解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。

IE7

今回この「IE Doubled Float-Margin Bug」はIE7では修正せれているみたいだ。少なくともbeta2の段階で、Waviaeiのデザインを試した限りでは問題なかった。

このバグを含め、他にIEに悩まさせれたのは２つ。１つはアイコン画像の透明部分がPNG24の為、表示がおかしくなる問題。IE7ではサポートされているけど、IE6以前ではサポートされていない事は分かっていた。PNG8でも試したけれど、アイコンの画質が落ちすぎるので諦めた。もう１つは、liにlist-style-position: insideと一括指定した上で、後でlist-style: noneと指定しても、list-style-position: insideが適用されたままになる。

この２つの解決方法は簡単。せっかくなので、IE7ハックを調べてみる。参考にしたのはLucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめと、Stylesheet Stylebook：IE用CSSの指定方法。

IE用のCSSファイルを用意して、問題のある箇所をバージョン6以下のIEにのみに適用するハックを使って、修正の為のCSSを記述。* html bodyを使用。

IEのみにこのCSSファイルを読み込ませるには、「Conditional Comments」を利用する。これはハックではなく、マイクロソフトがIEに組み込んだ機能。

[css]
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" /><![endif]–>
[/css]

このようにヘッダに記述すると、IEでのみie.cssが読み込まれるようになる。このときに、後で指定されたCSSは先のそれを上書きする仕様を忘れないように注意。つまり、読み込ませるCSSファイルのリストの一番最後にこれを記述する。WordPressだったら、style.cssへのリンクの後になる。この「Conditional Comments」については、MSDNに詳細な記事がある。英語が苦手な方は、古いけどこの記事が分かりやすい。

今回のデザイン、レイアウト、そして色に関するインスピレーションのネタなどを少し書いてみようと思います。

デザインのインスピレーション

Waviaei Design ver.1を作成した時、シンプルだけど「和」を感じさせるデザインを目指しました。けれども、出来上がったデザインは「和」っぽい部品をゴテゴテと並べただけに成ってしまった、と今は思ってます。レイアウトはシンプルに出来ましたが、バランスが悪いと言うかなんと言うか、要は自分が下手だっただけですけどね。ちなみに最近、ああいう東洋の墨っぽい画像をデジタル（パソコン）で作るのは非常に難しいと知りました。デザイナーの技量もあるけど、そういうソフトウェアを開発するのは技術的に難しいらしい。

少し話しがそれましたが、今回「和」を感じさせるデザインのインスピレーションと成ったのが、以前にも書いたCSS Reboot 2006で目に留まったBureauBlumenbergとkogakure.deです。全体的にはシンプルで綺麗なグッド・デザインですが、ロゴやバックグラウンド画像などに「和」を感じる。それらをさりげなく、ワンポイント的に使う事で全体的に「和」っぽい雰囲気をかもし出している。（と個人的にはおもうのですが、どうでしょうか？）

事実、両サイトとも日本にインスピレーションを得、それを目指したデザインにしたとそれぞれコメントしてくれました。

そこでまずベースとなるデザインには一切「和」を入れませんでした。ロゴとかワンポイント画像で「和」の雰囲気を作ろうと…　でもやはり難しいですね。ご覧のとおりそれらしき画像はまだ入れていません。BureauBlumenbergのYoram氏はロゴ・デザインを日本の家紋風にしたそうで、「自分の家紋を使ってみては？」と言われて、「それは良い考えだ！」と思い色々スケッチしてるんですが、もう一つしっくりきません。一応いまは仮と言う事で「Neverwinter」と言うフォント（URL忘れた:oops:）でサイト名をそのままロゴとして使っています。あっ、でもこのフォント自体は気に入ってますよ。RPGのPCゲームでは最高傑作の１つ、「Neverwinter Nights」のパッケージフォントですが、古い時代のはねつきペン（？）で書かれた感じは最高です。

さりげなく使うワンポイント画像についても、追い追い探します。最近WordPress用（まだベータ）も作られた、Typo用のテーマ「Origami」は参考になりますね。

レイアウトのインスピレーション

前回はシンプルにと思い、wrapperで全体を囲み、中央に揃えて、左にサイドバーにしてました。でも使っているうちに、記事の情報（日付、タグ、カテゴリ、などなど）は左か右にまとめて表示した方が便利だなぁと感じてきました。それから、記事を個別に表示させた時にサイドバーに最近のコメントやカテゴリのリスト、月別のリストもいらない。記事とは関係ないし、邪魔になるだけ。そこで、以前使っていたHemingwayのテーマを再度見直し、Ordered Listあたりも参考にして今のレイアウトになりました。

アクセス解析を見ているとほとんどの方が1024×768以上の解像度だったので、思い切って横幅をワイドにとりました。具体的には、960pxにしてあります。なぜこんな中途半端な数字かと言うと、960は3でも4でも割り切れるのです。

• 960/3 = 320
• 960/4 = 240

ちょうどグリッド・デザイン・システムを取り入れようとおもっていたので「おっこれはちょうど良い」と思ったわけです。その時はまだ記事の個別表示ページ以外は３分割にしようか、４分割にしようかと迷っていたのもあります。最終的にはほとんど３分割になったのですが。

色のインスピレーション

デザインのインスピレーションでも上げたBureauBlumenbergですが、もう１つ気づかされたことがあります。それは色です。具体的には赤色なんですが、彩度が落としてあります。日本の色と言うのは彩度が強くないそうで、それは自然界の色と共通する特徴だとか。そのような色をさがしていたところ、目に留まったのがこのＣＭです。あの緑に惹かれました。小雪さんが着ている着物の色とのコントラストも。

壁紙がダウンロードできたので、画像から色パレットを作成してくれるオンラインのサービス、Color Palette Generatorを使って幾つかのパレットを作成。そこからひっぱってきた色でサイト全体を作成しました。今回初めて知ったのですが、緑色と言うのはウェブ上では非常に使いにくい色だそうで、事実コントラストを十分付けられる文字色を探すのに苦労しました。背景が彩度を落とした緑色は、最適な文字色が白色か、それに近い色に限られてしまうのです。特に通常の文字を白系色とすると、リンクをどうするかが問題で、使用している黄土色っぽい色は実際にColor Palette Generatorからはじき出された数値よりもわざと彩度を上げています。

ワンポイント画像ではうまくいきませんでしたが、色についてはそこそこ思い通りになった気がします。ちなみに記事本文の部分は、やはり白地に黒の方が見やすいと思うので、そうしてます。

どうでしょうか？問題点なんかも指摘して頂くと嬉しいです。

早急に原因を解明して直します。また、良い機会なのでIE7でも使えるCSSのブラウザ振り分けとハックを実践してみようかと。

WaviaeiへのアクセスはIEとFirefoxが同じくらいですが、わずかの差でIEがトップ。以外にも（失礼！）Safariからのアクセスも結構あります。でもMac持っていないので、Safariでもおかしかったら教えてください。