ここでは livedoorBlog を３カラム化する手順を画像つきで紹介いたします。
これから紹介する３カラム化は制限があります。
・説明するカスタマイズ方法はデフォルトのテーマを利用してます。(他のテーマでも応用可能)
・画面サイズの横幅が1024ピクセル以下の場合は横スクロールバーが登場。
(アクセス解析の結果9割以上が1024ピクセル以上を使用なので特に気にしない)
(気になる場合は横幅指定の数字を変える事により対応可能)
これから紹介する３カラム化の特徴。
・左カラムはLivedoorBlogのプラグインにて調整が可能。
・中央カラムはLivedoorBlogのコンテンツを表示。
・右カラムはHTMLの直接編集にて対応。
・テーブルタグの使用でJAVAが扱えないブラウザにも対応。
・テーブルタグを読めない場合は表示されなくなる･･･。
それでは説明といきましょう。
2005年02月11日
livedoorBlog にて３カラム化(その１)
Blogの設定/管理 > デザインの設定 > スタンダード のページを開く。
CUSTOM を開くと テーマの設定 のページとなる。
ここで テーマの読み込み を行う。default を選択して読み込む。
※当ブログでは｢default｣のテーマを使用し､カスタマイズしていきます。
読み込みが完了したらスタイルシート(CSS)を直接書き換えてゆく。
CUSTOM を開くと テーマの設定 のページとなる。
ここで テーマの読み込み を行う。default を選択して読み込む。
※当ブログでは｢default｣のテーマを使用し､カスタマイズしていきます。
読み込みが完了したらスタイルシート(CSS)を直接書き換えてゆく。
|
１.左側メニューのサイズ固定 現在､左側メニューはブラウザの27%になっている。その箇所を200にする。 200とはピクセル数であり､数字を変えると大きさが変わる。当ブログは200を使用。調整に余裕があれば数字を変えて､ブログに合うサイズを探すと良い。 | |
 |
|
|
↑実行前 / 実行後↓ |
|
| 実行前にはブラウザのサイズによって左側メニューのサイズが変化していたが､200と書き換えた事によってサイズを固定した。ブラウザのサイズを変更しても左側メニューのサイズは変わらない。 |
|
２.中央にあるコンテンツのサイズ固定 現在､中央のコンテンツはブラウザの70%になっている。その箇所を600にする。左側メニューと同じく数字を変えると大きさが変わる。当ブログは600を使用。 | |
|
|
|
|
↑実行前 / 実行後↓ |
|
| 実行前にはブラウザのサイズによって中央のコンテンツのサイズが変化していたが､600と書き換えた事によってサイズを固定した。ブラウザのサイズを変更しても中央のコンテンツのサイズは変わらない。画像を見ても良く分からないかもしれないが下の画像では中央のコンテンツの横幅が600(ピクセル)に固定されている。 |
とりあえず書き換える場所は２箇所のみ。
書き換えたあとに保存を実行して、｢CSS｣の再構築を行う。
再構築を行った後にブログを見るとサイズが固定されているのがわかるはず。
続く。
Posted by aspbb at 08:38│Comments(9)│TrackBack(4)
この記事へのトラックバックURL
この記事へのトラックバック
今日から始めるアフィリエイト！さんを参考に３カラム化に挑戦しとります。
んー・とりあえず成功。手間はかかるけど図解が親切だったんで意外とカンタンに出来た。default以外にも、black,peppermint,citrus(つまりdefaultと同一の配置のもの)はそのままＯＫみたいです
３カラム化【じぇどぶろぐ。】at 2005年02月16日 16:01
Blogの模様替えしました☆
４時間くらいかかったよ。。。(;つД｀)
こういうのいじりだすと、どうも凝ってしまう体質で(･Θ･；）ｱｾｱｾ…
めったに書かないBlogなのにね
なぜか３カラムにこだわってるので、一回やったものの
やり方忘れちゃって、時間がかかって
模様替え。。【moca*Blog】at 2005年03月07日 01:51
のんびりペースになってしまうかもしれませんがアフィリエイトの情報を紹介していきたいと思います。これから頑張っていきたいと思いますので皆さんよろしくお願いします。
アフィリエイト情報【アフィリエイト情報】at 2005年07月05日 01:25
お初です。whitecamelと申します。
とてもためになって、わかりやすかったです。
ありがとうございます。
トラックバックさせていただきますが、お邪魔でしたら削除ください。
３カラム化【アフィリエイトって何？・・・・・＿|￣|○】at 2005年07月11日 02:24
この記事へのコメント
TBぁりがとちゅんです！
今回ゎ暫くこのままでぃきます。
また新たに素敵なカスタムバージョンあったら教えてくださぃね。
今回ゎ暫くこのままでぃきます。
また新たに素敵なカスタムバージョンあったら教えてくださぃね。
Posted by つきちん at 2005年02月12日 11:06
はじめまして!トラバありがとうございます!
あの妙な空間をどうしようかと思っていたので、助かります!
あの妙な空間をどうしようかと思っていたので、助かります!
Posted by ito at 2005年03月02日 15:35
トラックバックありがとうございます！
お互いにカスタマイズがんばりましょうー！
お互いにカスタマイズがんばりましょうー！
Posted by Cynthia at 2005年03月03日 00:59
TBありがとうございます！
３カラム化したのはいいけど、ガクガクするーと思ってたので、
参考にさせていただきます！
知識ないので、実行できるかどうか不明ですが・・・（悲しい）
じっくりと読ませていただきますね♪
３カラム化したのはいいけど、ガクガクするーと思ってたので、
参考にさせていただきます！
知識ないので、実行できるかどうか不明ですが・・・（悲しい）
じっくりと読ませていただきますね♪
Posted by ミヤコ at 2005年03月03日 12:57
TBと、有意義な情報ありがとうございます〜♪
HTMLとかの知識が全然無いので、上手くできるか不安ですが、時間を見つ
けて挑戦していきたいと思いますｗ
HTMLとかの知識が全然無いので、上手くできるか不安ですが、時間を見つ
けて挑戦していきたいと思いますｗ
Posted by CATAN at 2005年03月03日 22:42
トラックバック、ありがとうございました！★彡
いつかは３カラム化を実現させたいと思います。
その時は、参考にさせて頂きますね★彡
が、livedoorBlogの方で、いずれ３カラム化設定が出来るようになる事も
願っています。
いつかは３カラム化を実現させたいと思います。
その時は、参考にさせて頂きますね★彡
が、livedoorBlogの方で、いずれ３カラム化設定が出来るようになる事も
願っています。
Posted by ぶつよく★大王 at 2005年03月05日 02:05
TBありがとうございましたっ！
記事中に入る広告の幅がいじれないんですよねー。
一つ直せば一つ謎が増えるって感じです。３カラム。
いつかきれいにいくといいな。
記事中に入る広告の幅がいじれないんですよねー。
一つ直せば一つ謎が増えるって感じです。３カラム。
いつかきれいにいくといいな。
Posted by ぼんぼん at 2005年03月05日 18:58
TBありがとうございました。
参考にさせていただきますね★
参考にさせていただきますね★
Posted by 萌 at 2005年03月07日 01:54
TBありがとうございます！
３カラム化はできたものの、バナーの貼り付けに苦労してます・・・；；
アマゾンのバナーのフレームって取れないんですかねぇ？また教えてください！
３カラム化はできたものの、バナーの貼り付けに苦労してます・・・；；
アマゾンのバナーのフレームって取れないんですかねぇ？また教えてください！
Posted by すー at 2005年03月19日 11:51
