Seesaaブログのデザインリニューアル

essay 】 2011 / 09 / 20
 ご覧のとおり、衰弱堂雑記のデザインが新しくなりました。何か意味があるのか、といわれれば答えを持ち合わせていないのだけれど、ずっと衰弱堂雑記のデザインがしょぼいなあ、と気にはなっていたんですよ。それを言い訳にして更新しないくらいには意識していたわけです。その理由、すごく重たくないか? いやいや、しょせん言い訳ですから。
 
 そんなある日のこと。偶然Webベースのブログテンプレート作成ツール、CSSEZなるものを見つけて、Seesaaブログにも対応していたことから、「やあマイク! これならぼくにでも簡単にリニューアルできるんだ。こいつは驚きだよ!」などと思ったわけです。ところがところが……。そう現実は甘くない。ビヨンビヨンするバーみたいな器具、ドンキで買ったけどぜんぜん使ってないもんな。
 
 それはさておき。いやはや、Seesaaブログのカスタマイズはほんとうにつらいです。いくつかの理由で、CSSEZで生成したテンプレートはそのままでは動作しませんでした。
  • SeesaaブログのカスタマイズはHTMLテンプレート、CSSの他に、HTMLからヘッダ、フッタ、記事、サイドカラムのコンテンツ要素などを、独自記法を用いたHTMLベースのスクリプトで記述する必要がある。
  • このため、カスタマイズにあたっては例えばメインのコンテンツエリアでは、ひな形になるサイト全体のHTMLテンプレート、CSS、記事のコンテンツ要素の出力をトップページ、記事ページカテゴリ別、過去ログなどに合わせて整形するスクリプト、この3つのファイルを確認して整合性を取る必要がありものすごく手間がかかる。
  • 上記の構造による理由から、ローカル環境でのデザインチェックは無理。別々のサブメニューに格納された3つのファイルを実環境でアップデートをかけては目視するか生成されたソースを取って、おかしい箇所を修正していくしかない……。
  • そもそもリニューアル前の衰弱堂雑記のテンプレートがつぎはぎでカスタマイズされていた上、新たにタイトルをh2要素に指定しようとした(デフォルトでは日付がh2に指定されていた)り、ページナビゲーションをナビゲーションエリアを新設して入れ込もうとした(断念)ことで、CSSEZが出力したSeesaaブログ向けテンプレートも大きく修正せざるを得なくなった。
  • フッタをカスタマイズしてカテゴリー一覧を表示しようとしたところ、スクリプトに制限があるらしく呼び出し不能のエラーが出た。サイト内検索の検索結果画面で、エントリのカテゴリ表示を入れようとしたところ、これも呼び出し不能のエラー。
  • そもそも、以前は2カラムのデザインだったものをメイン+右2カラムの3カラムに変更したものの、どうも3カラムは時代遅れっぽい、と思い右サイド1カラムの2カラムデザインに変更することにした。するとCSSの指定がおかしくて右カラムが下に落ちた。笑い。divタグのネスティング地獄を追うのはほんとうにつらい。これを仕事にされている方、尊敬の念を新たにいたしました。
 

苦労しても苦労苦労

 そんなわけで、そこからは塗炭の苦しみ。楽をしても苦労苦労、苦労しても苦労苦労(意味不明)。やめときゃよかった。
 
 でもせっかくここまで作ったんだし、という未練が誘うは泥沼。いったい何をやっているのだろうという自問自答。七転八倒。九転十起。とりあえず、フッタのカスタマイズを断念。一方、ソーシャルメディア関連の計測に対応すべくFacebookのLikeボタンをXFBML版に差し替えようとしたところ、アカウントの認証を求められる。ところが携帯電話のメールアドレスを入力して、送信された認証コードのリンクをクリックする必要があるみたいなんですが、DoCoMoのスマートフォンでMoperaのみ契約しているぼくは認証コードを取得できない有様。これは結局Google Analytics Social Tracking Demoのコードを参照してなんとか対応。
 
 ともかく右カラム落ちの修正は思ったような効果をもたらさず、エリアの背景色を変えておかしい場所を確認(その間、実環境のデザインは惨憺たる有様になっている)。そして差し込むほのかな希望の光。おお、落ちていた右カラムが浮上した! いいぞいいぞ(結局、絶対指定のwidthでwrapper要素の幅が不足していただけ)。
 
 右カラムに入れるコンテンツ要素をだいたいで整え、Amazonのアソシエイトバナーなんか追加したりして、さらにヘッダ要素のカスタマイズに挑戦。
 
 ありゃ、タイトルとdescriptionにCSSが効かない。descriptionはコピーを修正したのになぜか古いままで表示される(コンテンツ要素がきちんと記述されていない場合、「ブログ設定」の説明文を挿入する仕様らしい)。右側の検索窓とアイコンによるクイックエリアの要素がまた下に落ちた。はぁ……。ヘッダ要素にCSSを直に指定してもだめ。抗うべきか、さにあらず、ここが思案のしどころじゃい。
 
 実環境に反映した崩れたデザインのHTMLソースを確認し、ようやく気づく。ヘッダ要素に書いているヘッダ部をHTMLテンプレートに直書きすればいいんじゃね? 正解。さらにCSSのネスティングを見直すと無事クイックリンク浮上。これ、ひょっとしてコンテンツ要素は使わずに全部HTMLテンプレートに記述すれば、数々のエラーは回避できたんじゃ? まあいいや。とりあえずこのくらいで勘弁してやるか。もうやめて! 衰弱堂のライフはゼロよ! でも衰弱してるし、もともとほとんどゼロなんじゃ?
 

今回のデザインリニューアルのポイント

 最後に、興味ないと思いますけど改めて今回のリニューアルのポイントをざっと説明。
  • ただでさえペダンティックで読みづらいエントリばかり公開しているので、せめてフォントサイズを上げて読みやすくしてみた。
  • Googleアナリティクスのタグを非同期タグに変更。その一方で、gaAddons.jsの非同期タグ対応版がjQuery必須で面倒だったため、現状外部リンクのクリック数とダウンロード数の計測が入っていません。サイト内の一部リンクについてはonClickで取得しています。この際、カグア!さんのエントリ、「非同期トラッキングコード移行マニュアル」にお世話になりました。また、ga_social_tracking.jsも組み込んでみましたが、あまりに人気がないため計測できているかどうかわかるまで時間がかかりそうです。笑い。
  • 以前、苦労して対応させたはてなスターはもういらないかなあ、と勝手に判断して削除。
  • サイト内検索とソーシャルメディア等のクイックリンクのアイコンを見やすいヘッダ右に配置。
  • Amazonのアソシエイトリンクを大幅増量。これでウハウハだぜ(※本エントリに記載されている業績見込みは衰弱堂が現在入手している情報及び合理的であると判断する一定の前提に基づいており、実際の業績は様々な要因により大きく異なる可能性があります)。
  • するとAmazonは、「僕は友達が少ない 」なんてのを紹介しやがって涙目。わかってるよ。少ないよ。大きなお世話だよ!
  • だいたいカスタマイズを終えてチェックしてみると、やたら読み込みに時間がかかる。なんだろう、とページを下まで送ってみると……これ、やたら長くね? 書きすぎじゃね? というわけで新着記事の表示を5件から3件に減らしてみると少し快適に。いやあ、我ながらこんなものを書いたり読んだりしている人の気がしれない。ほんとうにありがとうございます。

タグ:design





Comment(0) | TrackBack(0) | essay

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。