かなりゴーインにカスタムブルーテンプレのHTMLをいじっちゃいました。
以前から、サイドバーは右側にあったほうが、窓を小さくしていても、本文を読むときにスクロールさせなくて良いのになぁ、と思っておったのです。
先日追加されたシンプルテンプレートは、テーブルタグが少ない、理想的なテンプレであるものの、カスタムブルーとはCSSのセレクタが若干違うようで、新たに理解するのが面倒なものだから、思い切ってカスタムブルーのHTMLを変えてみることにしました。
難しそうに思えるかもしえませんが、HTMLを少しだけ分かっていれば、実は結構簡単です。テーブルタグの縦のラインをまるごと入れ替えるだけですから。
JAVASCRIPT::BOOKMARKLETから、Ctrlキー+Fキーを押して「Table」を検索しましょう。「Table部分を表示」というブックマークレットがあるので、それをブラウザのお気に入りに登録。
カスタムブルーにしてある自分のブログ(他人のでもいいけど)を表示させて、そのブックマークレットを使用すると、そのブログのテーブル構成が把握できます。
イメージを作ったら、後はプレヴューを繰り返しながら、テーブルタグの移動を繰り返すだけです。
でもgooブログの編集画面のプレヴューって、なんだか反応が遅いですよね。
そこで利用したいのが、高機能HTMLエディタのez-HTMLです。記事を書く時便利なソフトでも紹介したソフトですね。
このソフトを使って、白紙の状態のファイルに、自分のブログの編集画面のHTMLをコピペします。このとき、通常はCSSへのリンクが独自のモジュールになっているはずですが、http://から始まるフルパスに書き換えておいてください。
この状態でez-HTMLでプレビューすると、文字化けが見られるものの、ブラウザで見たときの画面にかなり近い感じで表示されるはずです。
テーブルタグで囲まれた部分のうち、なんとなく怪しいタグの有効範囲を確認したら、その部分をまるごと切り取り、入れ替えしたい部分に貼り付けしちゃいましょう。僕の例で言うと、右サイドバー部分はまるごと消してしまいました。プレビューしてみると、何箇所か不具合があるものの、細かい修正を繰り返すうちに、理想のデザインが出来てくるはずです。
今回は、ブラウザのエクスプローラーバーの表示・非表示にかかわらず、記事部分が固定幅になるよう変えてみました。
大きな表や画像を使った時に表示が乱れそうですが、カスタムブルーでメニューバーを右に持って行くことには、何とか成功したようです。
Geckoエンジンでの表示がおかしいのは、これから改善していきたいところですが、バレンタイン仕様のCSSを元に戻せば、いくぶん解消されるはず。
う~ん、遊べますね、アドバンスの編集機能!
以前から、サイドバーは右側にあったほうが、窓を小さくしていても、本文を読むときにスクロールさせなくて良いのになぁ、と思っておったのです。
先日追加されたシンプルテンプレートは、テーブルタグが少ない、理想的なテンプレであるものの、カスタムブルーとはCSSのセレクタが若干違うようで、新たに理解するのが面倒なものだから、思い切ってカスタムブルーのHTMLを変えてみることにしました。
![]() 変更前 |
![]() 変更後 |
難しそうに思えるかもしえませんが、HTMLを少しだけ分かっていれば、実は結構簡単です。テーブルタグの縦のラインをまるごと入れ替えるだけですから。
JAVASCRIPT::BOOKMARKLETから、Ctrlキー+Fキーを押して「Table」を検索しましょう。「Table部分を表示」というブックマークレットがあるので、それをブラウザのお気に入りに登録。
カスタムブルーにしてある自分のブログ(他人のでもいいけど)を表示させて、そのブックマークレットを使用すると、そのブログのテーブル構成が把握できます。
イメージを作ったら、後はプレヴューを繰り返しながら、テーブルタグの移動を繰り返すだけです。
でもgooブログの編集画面のプレヴューって、なんだか反応が遅いですよね。
そこで利用したいのが、高機能HTMLエディタのez-HTMLです。記事を書く時便利なソフトでも紹介したソフトですね。
このソフトを使って、白紙の状態のファイルに、自分のブログの編集画面のHTMLをコピペします。このとき、通常はCSSへのリンクが独自のモジュールになっているはずですが、http://から始まるフルパスに書き換えておいてください。
この状態でez-HTMLでプレビューすると、文字化けが見られるものの、ブラウザで見たときの画面にかなり近い感じで表示されるはずです。
テーブルタグで囲まれた部分のうち、なんとなく怪しいタグの有効範囲を確認したら、その部分をまるごと切り取り、入れ替えしたい部分に貼り付けしちゃいましょう。僕の例で言うと、右サイドバー部分はまるごと消してしまいました。プレビューしてみると、何箇所か不具合があるものの、細かい修正を繰り返すうちに、理想のデザインが出来てくるはずです。
今回は、ブラウザのエクスプローラーバーの表示・非表示にかかわらず、記事部分が固定幅になるよう変えてみました。
大きな表や画像を使った時に表示が乱れそうですが、カスタムブルーでメニューバーを右に持って行くことには、何とか成功したようです。
Geckoエンジンでの表示がおかしいのは、これから改善していきたいところですが、バレンタイン仕様のCSSを元に戻せば、いくぶん解消されるはず。
う~ん、遊べますね、アドバンスの編集機能!