ナチュログ管理画面 キャンプ キャンプ 九州・沖縄 アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

2009年06月13日

教えてブログ改造 1

どなたかお詳しい方教えてください。

現在3カラムのテンプレートに変更したいと考えています。

一番左のフレーム(カラム?)は幅を広くできたのですが、右のフレームまで一緒に大きくなってしまうのです。

希望は右フレームの幅を小さくし、真ん中のフレームを少しでも幅広く取りたいのです。

ページ全体の幅が広くなってもかまいません。

僕は全く知識がありません。HPソフトでHPは作ったことがありますが、プログラムはさっぱりです。

下の画像はテンプレートの数値を一つ一つ変更しながら、どこが変わるのか試したものです。
間違いがあるかもしれません。テンプレートを別ソフトに移して自分なりに解説したものです。

----------------------------------------
その後

いろいろやってみましたが、幅の変更は結局諦めました
Kawatombo Kenさんのアドバイスによると、幅の変更は詳しくない者がやるのは止めた方がよいみたい。

というわけで、現在の2カラムにしました。
ただ今後の事も考えて、改造の記録のためにこのページは録っておきたいと思います。

なお、ここを見て参考にするのは危険です。文字の色、サイズの変更くらいなら大丈夫だと思うけど、責任は持てないのでご注意を。

Kawatombo Kenさんのやりとりは下に記録しておきます。

教えてブログ改造 1

質問テンプレートでの「3カラム、幅100%」を利用したくて、いろいろいじったのですがお手上げです。

いちばん左のフレームは広げることが出来たのですが、同時にいちばん右のフレームまで幅広くなってしまいます。

真ん中のフレームも狭くなり、画像が途切れてしまいました。

なんとか、一番右のフレームを狭めて、真ん中のフレーム幅を広げられないでしょうか?。


お詳しい方よろしくお願いいたします。

解答
表示幅の改造方法は、無い訳では無いのですが・・・
仮にうまく行っても、IE7やFireFoxなどのユーザーの方から閲覧すると、フレームがはみ出したり、記事の表示がおかしくなったりと
色々不具合が出るようです
(もしかしたら解決方法があるかも知れませんが・・・)

3カラムで、本文の表示幅を広くする手っ取り早い方法は
【N.I.R】にて夕焼けを眺めた瞬間
【N.I.R】にて釣りをはじめた男
など、元々幅広のテンプレートをベースに改造することです(私のブログが、この方法を使っています)

回答になっていないかもしれませんが・・・(;^^A

解答
追記です
友人よりの情報では、最近IE7では上記不具合が解消されたと言う、不確定情報を得ました
一応、簡単に改造方法を記しておきます

ブログ全体の幅を広げずに、左右のカラムの幅を変更してしまった事が、原因です
#container{・・・・}ブログ全体の幅
#content{・・・・}中央部の幅
main{・・・・}記事の文字や写真の幅
この三箇所の{}内にあるwidth:に続く数値を増やす事で幅広に出来るはずです

ただし、結構な微調整が必要だと思いますので、頑張ってみてください

返信
Kawatombo Kenさん
返事が遅くなって申し訳ありません。
アドバイスしていただいたとおりにやってみると、真ん中のフレームは幅広くすることが出来ました!。

ただ一番右のフレームの幅を縮めることが出来ません。もしかすると出来ないのかも・・・。

解答
3カラム100%のテンプレートはあまりお勧めではありません。
理由は見る人の環境に左右されやすいからです。
ブログやサイトを作る場合は自分のPC環境ではなく、見る人の環境を考えて作らないといけません。
出来れば、普通の3カラムを改造して横幅は最高でも950以下で作られた方が良いと思います。
それと、幅を広げる改造ですがプロパティを変更して広げるだけでは使うブラウザによってデザインがおかしくなります。
これはCSSの記述を無視したやり方です。
ボックスプロパティのマージン・パディング・ボーダーの変更などなど色々やらないと見る人のブラウザによってデザインが滅茶苦茶になります。
ナチュラムのブログを色々みると、プロパティだけ変えて改造しているブログが沢山ありますが、綺麗に見えるのはIE6からだけで他のブラウザからみると記事自体が読めないというのが殆どです。
CSSに記述に対しては一言では書けません。
ttp://www.tohoho-web.com/css/reference.htm
↑のようなサイトを参考にして下さい。

解答
こんばんは!
「教えて!・・・」にも書きましたが、シンプルスタイルですと、表記の仕方が多少異なるので
具体例を書いておきますね
#container{ の width:980px
#content{ の width:580px
#links{ の width:180px
#links2{ の width:180px
.main{ の width:552px
で、大体バランスが取れるはずです

他にも、
.sidetitle{ や、.date{ の背景画像など色々と変更しなければならないでしょうが・・・
とにかく試してみてください

PS.
その他の質問は、当ブログのカスタマイズ関連記事にしていただければ
出来る限りのお答えをしますよ





このブログの人気記事
コロナワクチン接種
コロナワクチン接種

香取り・虫除けを整理その1
香取り・虫除けを整理その1

同じカテゴリー(教えてブログ改造)の記事画像
教えてブログ改造 2
同じカテゴリー(教えてブログ改造)の記事
 教えてブログ改造 2 (2011-12-01 09:22)
この記事へのコメント
こんばんは!
「教えて!・・・」にも書きましたが、シンプルスタイルですと、表記の仕方が多少異なるので
具体例を書いておきますね
#container{ の width:980px
#content{ の width:580px
#links{ の width:180px
#links2{ の width:180px
.main{ の width:552px
で、大体バランスが取れるはずです

他にも、
.sidetitle{ や、.date{ の背景画像など色々と変更しなければならないでしょうが・・・
とにかく試してみてください

PS.
その他の質問は、当ブログのカスタマイズ関連記事にしていただければ
出来る限りのお答えをしますよ
Posted by Kawatombo Ken at 2009年06月15日 08:07
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
削除
教えてブログ改造 1
    コメント(1)