ブログツールsb移行奮闘記／4日目
2004-09-26 Sun[ブログ > sb]
どーもども。
今回はJUGEMのテンプレとスタイルシートを、sb用にレイアウトを整えるところからです。それではレッツゴー。激動の4日目。
というものは、今現在の毎日考レイアウトでいうと
こんな感じの2カラム（2列）構成になっている。大まかだけれど。
title部分が毎日考のタイトルがある部分、descriptionのあたりはカレンダーがあったりするところ。contents部分には日記本体がずらっと並び、side部分は右メニューのあたりである。人によっては、もしくは選ぶテンプレートによっては3カラムになっていたり、サイド部分が左にあったりするが。
TABLEタグなどHTMLだけでレイアウトを記述するのに慣れているといささか面食らうのだが、ブログでのHTMLというのは、単に「body」とか「title」とかの要素をマークアップするだけ。色、フォント、インデントやマージンなどの位置情報などはぜーんぶスタイルシート。だから上記の例はTABLE組みで書いてあるが、実際のHTMLソースは
こんな風にマークアップしてあるだけなのである。タグも単純かつ明快。それぞれのDIVタグ内には、独自タグと呼ばれる、ページを出力するための処理が入る。そしてスタイルシートで、各属性（bodyやtitleなど）の位置や大きさ、幅、フォントの見ばなどを指定するのである。そのほか、H1やH2などの見出しタグを使っているためSEO的に言っても検索エンジンにひっかかりやすい。また、読み上げリーダーなどにも優しい作りとなっている。
sbのデフォルトもこれと同じ組み方なので、元のJUGEMテンプレのbody部分をどっこいしょ、title部分をどっこいしょ、とコピペしてテンプレートを詰め込んでいく。スタイルシートは、とりあえずフォントの大きさや色に関するものだけを移行する。微調整はその後。
前回プレビューしたときにずれていた部分も、この時点で調整していく。曰く、titleとdescription部分の間に微妙な空白行ができる。曰く、side部分のAmazonリコメンド欄のスタイルシートが効かない。曰く、ブラウザの文字サイズを小から中にすると幅が広がっちまう、などなど。だいたいは余計なナニかが入っていたり、スタイルシートが指定されていなかったりするのが原因だ。いそいそ。
IEでだいたい表示が確認できたら、Netscape7での確認。Macを持っていなくても、これだけである程度Macでの表示のズレを直すことができるのだ。が、さいわいにしてMacユーザでもある私はMacのIE、Safari、Netscape7で確認してみるのである。が。
Safariは優等生だ。ちょいとぬるいスタイルシートでも、ほぼWindowsのIEと同様の表示が期待できる。が、何回やってもMacのIEではcontents部分のテキストがびろーんと右のサイドバー部分に重なってしまう。うーむ、なぜ。
試しに、レイアウトを全部キツキツのTABLE組みにしてみた。幅も全部指定したので、これなら広がりはしないだろうと思ったら甘かった。なじぇ。
ちなみに私、フォント指定を以下のようにしていた。
どうやら元凶は、2行目の字間を決めるスタイルシートにあった。すこーしだけ字間を空けたほうが読みやすいかと思ったのだが、emだろうがptだろうがpxだろうがどんな単位にしても同じ現象が出てしまうのだ。うーん、これは使えない。少ないMacのユーザの中でもSafariとIEはシェアを二分しているし、私自身がそのMacユーザであるということもある。しょうがない。コレは切ろう。
テストで新規投稿をしてみると、投稿時間がずれていた。うーん、これはナニを直すのだ。そう思ったら、環境設定でタイムゾーンを設定できた。デフォルトで「+0900」となっていたのを「-0900」に修正、事なきを得た。これはサーバの仕様のせいであろう。
プロフィールページ、ブログの説明（ディスクリプション）、リンクなどについては移行できないので、元ページを見ながらせっせとコピペする。管理者画面を舐め回し、プレビューを愛しそうに見つめていたりしたらあっという間に深夜も3時だ。ちくしょう、今日こそは明るくなる前に寝てやる。
なにやらやっているうちに、sbのベータ版は1.04Dに進化していた。む、出遅れるわけには行かない。アップデートしなければ。
レイアウトもだいたい落ち着いて、後はもろもろの公開準備を進めるだけ…だと思う。
がんばれがんばれ私。寝不足の5日目に続く。
→ブログツールsb移行奮闘記／5日目
今回はJUGEMのテンプレとスタイルシートを、sb用にレイアウトを整えるところからです。それではレッツゴー。激動の4日目。
そもそもブログのレイアウト
というものは、今現在の毎日考レイアウトでいうと
body部分（大枠）
| ||||||
こんな感じの2カラム（2列）構成になっている。大まかだけれど。
title部分が毎日考のタイトルがある部分、descriptionのあたりはカレンダーがあったりするところ。contents部分には日記本体がずらっと並び、side部分は右メニューのあたりである。人によっては、もしくは選ぶテンプレートによっては3カラムになっていたり、サイド部分が左にあったりするが。
TABLEタグなどHTMLだけでレイアウトを記述するのに慣れているといささか面食らうのだが、ブログでのHTMLというのは、単に「body」とか「title」とかの要素をマークアップするだけ。色、フォント、インデントやマージンなどの位置情報などはぜーんぶスタイルシート。だから上記の例はTABLE組みで書いてあるが、実際のHTMLソースは
<DIV id="body">
<DIV class="title"></DIV>
<DIV class="description"></DIV>
<DIV class="contents"></DIV>
<DIV class="side"></DIV>
</DIV>
こんな風にマークアップしてあるだけなのである。タグも単純かつ明快。それぞれのDIVタグ内には、独自タグと呼ばれる、ページを出力するための処理が入る。そしてスタイルシートで、各属性（bodyやtitleなど）の位置や大きさ、幅、フォントの見ばなどを指定するのである。そのほか、H1やH2などの見出しタグを使っているためSEO的に言っても検索エンジンにひっかかりやすい。また、読み上げリーダーなどにも優しい作りとなっている。
元のテンプレをコピペしていく
sbのデフォルトもこれと同じ組み方なので、元のJUGEMテンプレのbody部分をどっこいしょ、title部分をどっこいしょ、とコピペしてテンプレートを詰め込んでいく。スタイルシートは、とりあえずフォントの大きさや色に関するものだけを移行する。微調整はその後。
前回プレビューしたときにずれていた部分も、この時点で調整していく。曰く、titleとdescription部分の間に微妙な空白行ができる。曰く、side部分のAmazonリコメンド欄のスタイルシートが効かない。曰く、ブラウザの文字サイズを小から中にすると幅が広がっちまう、などなど。だいたいは余計なナニかが入っていたり、スタイルシートが指定されていなかったりするのが原因だ。いそいそ。
IEでだいたい表示が確認できたら、Netscape7での確認。Macを持っていなくても、これだけである程度Macでの表示のズレを直すことができるのだ。が、さいわいにしてMacユーザでもある私はMacのIE、Safari、Netscape7で確認してみるのである。が。
字間のスタイルシートは使えない
Safariは優等生だ。ちょいとぬるいスタイルシートでも、ほぼWindowsのIEと同様の表示が期待できる。が、何回やってもMacのIEではcontents部分のテキストがびろーんと右のサイドバー部分に重なってしまう。うーむ、なぜ。
試しに、レイアウトを全部キツキツのTABLE組みにしてみた。幅も全部指定したので、これなら広がりはしないだろうと思ったら甘かった。なじぇ。
ちなみに私、フォント指定を以下のようにしていた。
font-size:95%;
letter-spacing:0.1em;
どうやら元凶は、2行目の字間を決めるスタイルシートにあった。すこーしだけ字間を空けたほうが読みやすいかと思ったのだが、emだろうがptだろうがpxだろうがどんな単位にしても同じ現象が出てしまうのだ。うーん、これは使えない。少ないMacのユーザの中でもSafariとIEはシェアを二分しているし、私自身がそのMacユーザであるということもある。しょうがない。コレは切ろう。
投稿時間のズレ
テストで新規投稿をしてみると、投稿時間がずれていた。うーん、これはナニを直すのだ。そう思ったら、環境設定でタイムゾーンを設定できた。デフォルトで「+0900」となっていたのを「-0900」に修正、事なきを得た。これはサーバの仕様のせいであろう。
移行できないものは手作業で
プロフィールページ、ブログの説明（ディスクリプション）、リンクなどについては移行できないので、元ページを見ながらせっせとコピペする。管理者画面を舐め回し、プレビューを愛しそうに見つめていたりしたらあっという間に深夜も3時だ。ちくしょう、今日こそは明るくなる前に寝てやる。
なにやらやっているうちに、sbのベータ版は1.04Dに進化していた。む、出遅れるわけには行かない。アップデートしなければ。
レイアウトもだいたい落ち着いて、後はもろもろの公開準備を進めるだけ…だと思う。
がんばれがんばれ私。寝不足の5日目に続く。
→ブログツールsb移行奮闘記／5日目
<< あなたのお名前、なんてーの？ | main | 最近終わったドラマについて >>
同じカテゴリの新着記事
- BACK TO THE FUTURE！ (2006-01-23)
- Wikipedia「今日は何の日」を設置 (2005-05-10)
- sbを複数設置、1.10Rにバージョンアップするテスト (2004-11-06)
- 徹夜明けにsbのバナーを作る (2004-10-07)
- sb1.08Dアップデートとベータ版の話 (2004-10-01)
- ブログツールsb移行奮闘記／最終章 (2004-09-28)
- ブログツールsb移行奮闘記／5日目 (2004-09-27)
- ブログツールsb移行奮闘記／4日目 (2004-09-26)
- ブログツールsb移行奮闘記／3日目 (2004-09-25)
- ブログツールsb移行奮闘記／2日目 (2004-09-23)
