解決済
デザイン「タイル」の３カラム化について、
また、記事範囲の拡張方法について、
です。
こんにちわ、今回は「３カラム化」について質問させていただきます。私はデザインに「タイル」を使っており、前々から３カラム化を考えて色々調べておりました。
実際に色んなページをみて実践してみたのですが、記事範囲がずれたり、カラムが下に落ちてしまったりと全然上手くいきません。
ということで、
「タイル」を３カラム化する方法を教えて欲しいです。
なお、本文が載る範囲も拡げたいのですが、
よかったついでに宜しく御願いします ＞＜
回答(3)
3.
画像urlの例)
自分のブログ名/1.jpg
書き換える場所の例)
background:#fff url( ) no-repeat 50% 0%;
書き換えた後の例)
background:#fff url( 自分のブログ名/1.jpg) no-repeat 50% 0%;
さて、私が作例を作った手元のコンピュータではうまく表示されていた、段組みの境目は、アップロードするとずれてしまいました。試行錯誤してみてください。
もう一つ、ポイントを書いていくと今回のレイアウトでは、200pxを追加して、980pxにしました。いわゆるXGA、横幅1024pxで有効に使える横幅は、WindowsXP、Internet Explorerの場合、980pxぐらいが良いようです。982pxとしたのは、元のデザインが782pxとなっていたためです。
私の作例では、スタイルシートを強引に下へ追記する形をとっていますが、本当は、書き換えた方が良いということも書き添えます。
1.
ブログの投稿画面で、上のメニューから「カスタマイズ/管理」を選び、左側「デザインの設定」を選びます。一番右下、「カスタマイズ」を選びます。表示されているのがスタイルシートになります。
CSSは、一番最後に書かれたものが優先される特性を逆手に取り、一番最後に次の例を全部追加してみてください。
CSSの例)
#container{
width:982px;
margin:0;
text-align:left;
background:url(http://image.blog.livedoor.jp/testuser1/imgs/6/5/657e8abb.gif) repeat-y 50% 0;
word-break:break-all;
}
#banner,#subbanner{
width:982px;
height:99px;
text-align:left;
margin:0;
background:#fff url( ) no-repeat 50% 0%;
}
.blogtitle{
font-size:14px;
padding:35px 76px 2px 76px;
}
.description{
color:#c60;
font-size:11px;
padding:0px 76px;
}
#blogcontainer{
width:982px;
background:url(http://image.blog.livedoor.jp/testuser1/imgs/8/5/854a5f5f.gif) repeat-y 50% 0;
margin-top:15px;
}
#wrapper{
width:782px;
float:left;
text-align:center;
}
#content{
width:572px;
float:right;
text-align:center;
margin:0 auto;
}
#blog{
width:542px;
margin:0 auto;
text-align:left;
}
#left{
width:200px;
float:left;
}
#right{
width:200px;
float:left;
}
「この内容で保存する」ボタンを押して保存が確認できたら、次は「トップページ」のテンプレートを変更します。「設定が完了しました。」と書いてある下に「スタイルシート(CSS)」の右隣、「トップページ」を選びます。
「<div id="blogcontainer">」を探して後ろへ、「<div id="wrapper"> 」を追加、閉じるタグが必要になるので、「<!-- End of blogcontainer-->」の後ろへ「</div>」を追加します。同じく、「この内容で保存する」ボタンを押します。
仕上げは再構築です。左上、「ブログに設定を反映(再構築)」を選び、下の方に「再構築する部分を指定」があるので、「全てのページ」を選んで「ブログを再構築する」というボタンを押せば完了です。
2.
少なくとも3点の画像を修正します。以下に説明を書きますが、上のurlは元、下のurlは私が改造してみた例です。ご自身で細かく調整、作り替えるもよし、私のものをダウンロードして使うもよし、好きな方法を選んでください。
横幅を982pxへ修正して、間延びした分は白地のままで大丈夫です。
横幅982pxへ修正し、間延びした分は、元画像を2枚並べて境目が分からないよう、うまく配置します。よく見ると、右の端は消えかかったようなあしらいになってますね。
段組み用。同じく982pxへ修正します。左右の段組みは200pxが確保されています。若干ここは試行錯誤しながら、うまく配置してみてください。私の作例は、取り急ぎ作ったものなので、若干ずれているかもしれません。
コメント(22)
丁寧な回答を有難うございます。
とてもわかりやすかったです。
後ほど、作業が完全に終了したら「ベストな回答」に選んでおきたいと思います。
↓
実際に試験利用者さんに言われたとおり、自分で画像を保存し、編集したことによって段組部のズレは解消されました。
しかし、段組部と本文の袖に表れる線の濃さに差が出てしまいます。
↓
これはどうして起きるのでしょうか？
また、どうすれば解決できますか？
参照画像：http://image.blog.livedoor.jp/migimo_hidarimo/imgs...
↓
さらに、上に関連して
左カラム袖には、区切り線自体が見いです。(本文に被ってるのかor元からないのか)
よかったらこれらの解決にも是非アドバイスをいただけたら、と思っております。
宜しく御願いします。
更にゆゆしき自体になってしまいました。
リンクを区切って、右カラムに移動させようとしたのですが「links2」が上手く右に移せなくなってしまいました^^；
>>#5 プラグインの部分だと思うのですが、区切らない方が良いですよ。プラグインの編集画面から操作します。links2というのがよく分かりません。適当に区切ってもうまく表示されないはず。
>>#6
コメント有難うございます。
http://junike.livedoor.biz/archives/33322.html
参考にして「</div></div><div id="links2"><div>」
というプラグを入れたりしたんですができませんでした･･･。
試行錯誤して、「links2」が#wrapperの範囲に含まれているため右に寄ってくれないのでは、という仮説にたどり着きました。
「links2」を「wrapper」のからはずすにはどこをいじればよいのでしょうか(？_？；)
私だったら、メモ帳に元のデザイン、トップページ、スタイルシートなどをとっておいて、もう一度やり直すと思います。divタグがどこだろうと探すのは大変なので。
ちなみに挑戦するなら、links2とやらは、トップページなどは放置しておいても問題ありません。問題はスタイルシートで、links2の指定を削除しないといけません。簡単な方法といえば、links2をlinks3に変えます。
トップページは放置されているので、link2が指定されていて、スタイルシートは、link3が指定されていることになるので、設定が無効になります。
ながながと付き合わせてしまい申し訳ありません。
なんとかトップページは３カラム化に成功しました。
個別記事でも同じように３カラム化はできるのでしょうか？
ほぼ同じ要領です。元をメモ帳にでもバックアップしておけば、何度でも挑戦できるのでやってみてください。各ページは修正点も少ないので大丈夫だとは思いますが。
はい、挑戦中です。
柱はokなんですが、なぜだか本文が右によってしまいます。最後にこれを改善する方法だけご教授いただけないでしょうか？
寄ってしまっていますね。ひとまず、確認してます。
私、おっちょこちょいですね。原因が分かったとき、もっと早くにアドバイスできたと後悔しております。
トップページを直すのと同じ手順で、テンプレート「個別記事ページ」も修正してください。「カテゴリアーカイブ」、「月別アーカイブ」も同様に修正が必要です。
できました！
試験利用者さんのおかげです。ほんとに助かりました。
有難うございました！
なんどもレスを返してくれてとても助かりました(´；ω；`)
うまくいって良かったです。私も回答した甲斐がありました。ベスト回答もありがとうございます。
