« 工事中 | トップページ | 新年 »

苦肉の策

12月8日にココログの記事エリアの幅を動的に変更する方法を書きました。
しかし、新規記事を投稿すると標準のスタイルシートに置き換わってしまうのは既に書いた通りです。コメントの投稿でも同様でした。

styles.cssの中身を書き換えて上書きコピーしていたのですが、検索して調べてみると詞織ブログでスタイルシートを別名で保存しておいて、それを適用する方法があることが分かりました。

しかし、新たな問題が。いや元々からあったのに気付かなかっただけなのですが・・・。
記事中のテキストを部分選択できないのです。
これについても検索してみると、どうやらIE6のバグらしい。スタイルシートでposition: absolute;を使うとそうなるのだとか。

困りました。position: absolute;を使わずにどうやったら記事エリアの幅を動的に変更できるか?

で、散々悩んだ結果、苦肉の策ですが別名スタイルシートを適用する方法を応用してスクリプトを使うことにしました。
勿論、ブラウザでスクリプトの実行を禁止していたり、スクリプトに対応していないブラウザで見た場合には通用しません。

スタイルシート(css)の変更点

「クール」の両サイドメニューを基にして記事エリアの幅を広くするための変更点についてのみ記載します。
----- ここから -----
#container
・width: の値を"100%"に変更

#center
・width: の値を適当に変更。初期値であり、スクリプトが動作しない場合の表示幅。
----- ここまで -----

スタイルシートとスクリプトの設定

ブログタブ・設定タブの「ブログのサブタイトル」に記述します。
----- ここから -----
<link rel="stylesheet" href="http://trueway.cocolog-nifty.com/blog/silver2.css" type="text/css" />
<div><strong>気の向くままの雑記帳</strong></div>
<div align="right">author : TRUEWAY</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function SetWidth() {
var width;
width = document.body.clientWidth;
document.all.center.style.width = width - 360;
}
window.onresize = SetWidth;
document.onmousemove = SetWidth;
// -->
</SCRIPT>
----- ここまで -----
1行目のhrefで新しいスタイルシートのURLを指定します。
2~3行目が本来のサブタイトルです。
9行目で幅から360引いているのは、左右のメニューの幅を其々180pxにしているためです。

一応、IE6では正しく表示できているし、テキストの部分選択も問題ないようです。

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

|

« 工事中 | トップページ | 新年 »

コメント

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: 苦肉の策:

« 工事中 | トップページ | 新年 »