« ココログのカスタマイズに挑戦 | トップページ | F-Xはスーパー・ホーネット »

ココログの記事エリア拡大方法

ココログをカスタマイズ出来たと書いたけど、それだけではなんなので方法を書いておきます。
カスタマイズの目的は記事エリアの幅を広くしてウィンドウ全体を有効に使うこと。と言っても、ただ広くするのではなく、サイドメニューの幅は固定でウィンドウサイズに応じて記事エリアの幅を動的に変更可能にすることです。

カスタマイズの大まかな手順は次の通りです。

1.『デザイン』タブで標準のテンプレートから基になるテンプレートを選んで、列数やコンテンツの表示位置といった基本のデザインを決めて、ブログに反映させておきます。
因みに、このブログのデザインは「クール」の両サイドメニューを基にしています。

2.『ファイル』タブでblogフォルダ内のstyles.cssを右クリックして「対象をファイルに保存」でダウンロードします。

3.ダウンロードしたstyles.cssをテキストエディタで開いて編集します。詳細は後述。

4.編集したstyles.cssを『ファイル』タブの「新規ファイルのアップロード」でblogフォルダにアップロードして既存のファイルと置き換えます。

スタイルシート(css)の編集

「クール」の両サイドメニューを基にして記事エリアの幅を広くするための変更点についてのみ記載します。

----- ここから -----
#container
・全体を削除

#banner
・position: absolute; を追加
・top: 0px; を追加
・left: 0px; を追加
・height: 90px; を追加
・width: 95%; を追加

#left
・float: left; を削除
・position: absolute; を追加
・top: 120px; を追加
・left: 0px; を追加

#right
・float: right; を削除
・position: absolute; を追加
・top: 120px; を追加
・right: 0px;  を追加

#center
・float: left; を削除
・position: absolute; を追加
・top: 120px; を追加
・left: 200px; を追加
・right: 200px; を追加
・width: の値を"auto"に変更
----- ここまで -----

スタイルシートを編集することで文字のフォントや大きさを変えたり、背景色や背景画像を設定したり出来ますが、その辺りについてはスタイルシートの解説本を参照すると良いでしょう。

尚、スタイルシートを編集してカスタマイズするのはココログ(プロ以外)ではサポート外の行為です。実践する際は自己責任でどうぞ。上手くいかなくても@niftyに問い合わせてはいけません
表示が変になってにっちもさっちも行かなくなっても、既存のテンプレートを選択し直せば良いだけです。


12月26日 追記
上記の方法では記事やコメントを投稿するとスタイルシートが元に戻ってしまいます。
別名で保存して、ブログのサブタイトルの部分でそれを参照するようにすれば大丈夫ですが、IE6で表示するとテキストの部分選択が出来ないという問題もあります。
この記事の内容には誤りがあるので本来ならば削除すべきなのですが、苦闘した記録として残しておきます。

|

« ココログのカスタマイズに挑戦 | トップページ | F-Xはスーパー・ホーネット »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/90249/7528256

この記事へのトラックバック一覧です: ココログの記事エリア拡大方法:

« ココログのカスタマイズに挑戦 | トップページ | F-Xはスーパー・ホーネット »