二段組レイアウトを三段組にする / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 二段組レイアウトを三段組にする / カスタマイズ

二段組レイアウトを三段組にする / カスタマイズ

二段組レイアウトを三段組にする / カスタマイズ

カスタマイズ(10)

二段組レイアウトを、三段組にする方法について書きます。「わたし、二段なんかじゃ、満足できない!出来ないんだかんね!」という人はご覧ください。

お話は、次の順番で進みます。

▲ページの先頭に戻る

段組レイアウトを変更にする前に考えること

段組レイアウトを変更するのは、けっこう面倒です。やり方を知っていても、テンプレートによっては、IEのバグなどで苦戦する可能性があります。

段組レイアウトを変更する作業に入る前に、立ち止まって考えてみてください。本当に必要でしょうか?

  • 検索してみたら、実は三段組レイアウトのものもあったなんてことはありませんか?
  • テンプレート制作者に問合せてみた方が、早くはないですか?
  • 他の三段組レイアウトで、背景画などを変更した方が早くないですか?

よく検討した上で、カスタマイズに取り組みましょう。だって、時間がもったいないから。

▲ページの先頭に戻る

二段組レイアウトを三段組にする

1:テンプレート「air」

(01)

今回は、テンプレート「air」を使います。共有テンプレート追加からダウンロードして、適用してください。

テンプレート「air」

▲ページの先頭に戻る

2:HTMLの構成を把握する

(02)

まず、HTMLコードを眺めて、レイアウトの状態を理解する必要があります。

例えば、二段組レイアウトの場合、たいてい大きく4つに分かれているはずです。このグループ分けを、しっかり把握する必要があります。

  • ヘッダー
  • 記事(メイン)
  • メニュー(サイド)
  • フッター
一般的な二段組レイアウト

(03)

それでは実際に、「air」のHTMLソースを眺めてみましょう。たいてい<div>タグでグループ化されているはずです。

それぞれの主要な<div>タグに付いている idやclassを書き出してみます。広告の裏などに、実際に書いてみると良いように思います。

airの二段組レイアウト

しかし、どうやってその配置や役割が分かるのか?と言うと、これはちょっと難しいお話です。私の場合は、次のようなことを足がかりにして推測します。

  • 経験(勘)
  • HTMLコード内のコメント
  • borderを入れてみる

テンプレート「air」は、<div>タグの始まりと終わりなど明確に(コメントが)記述されていない箇所があります。例えば、「#d1」がどこからどこまで包んでいるか分かりません。

その時点で、面倒なので他のテンプレートを探した方が良いかもしれませんが、「どうしても!」という場合は、試験的に「#d1」に「border:1px solid #000;」などを入れて領域を特定するわけです。

▲ページの先頭に戻る

3:幅を決める

(04)

次に、CSSコードで主要な<div>領域の幅を、書き出していきます。(「width」で検索をかけます)

#d1

770px

.header

770px

#main

502px

#menu

268px

.navi

502px

(05)

幅については、よく注意して設定する必要があります。縦のスクロールはマウスのホイールなどもあるので寛容ですが、横へのスクロールは、ユーザに非常に嫌われます。

現在、最も利用されている1024×768サイズのモニタであれば、ブラウザの表示領域は、おおよそ1007pxです。

計算してみましょう。三段組にするとすれば、あと237pxほど使えるようです。

1007px - 770px = 237px

間に余白を10~20px程度は入れることを考えると、217~227pxくらいが使える幅と言えそうです。

もちろん、記事部分(#main)や、右メニュー部分(#menu)を削っても良いわけですが、記事部分(#main)は 500pxを下回ると、かなり厳しくなります。

右メニュー部分(#menu)と、新たに追加するメニュー部分で調整していく必要があります。

記事部分が 500pxを下回ると、文字サイズにもよりますが改行が増えて読み難くなったり、画像を使う場合にも画像内の文字が読み難くなるなどの問題が増えます。

(06)

広告の裏などで計算してみて、どのくらいの幅にするか決めましょう。

「air」の右メニュー部分(#menu)は268pxです。10pxほど減らして 258pxにしてみます。間の余白は 10pxずつで、残りを左メニュー部分として使うことにします。

*:本当はもっと余裕をもって設定する方が良いです

幅を決める

実際に運営してみると分かりますが、必ずしも左右のサイド幅が同じでなければいけないということもありません。

例えば、Google AdSense広告でお馴染みのワイドスカイスクレイパーという広告の幅は 160pxです。幅に余裕があり過ぎると逆に間抜けな感じになる場合があります。

最新の記事、最近のコメントなどをサイドに配置する場合は、より多めに幅を必要とします。

どちらかを大きめに取っておくと、使い勝手が良い場合が多いように思います。

▲ページの先頭に戻る

4:画像の調整

(07)

メニュー部分を調整する場合は、タイトル部分の背景画像が問題となる可能性があります。

何しろ画像ですから、幅が固定されています。

メニュー部分の幅を削ることで、背景画像がおさまらなければ、実際の画像の幅を削る必要があるわけです。

airのタイトル部分の背景画像

タイトル部分に使われている画像ファイル名は「06_title.gif」で、サイズは248×60です。右サイドはこのまま使用して、左サイドは 227×60にしてみます。

airのタイトル部分の背景画像を短くしてみた

幅の調整は、GIMPなどを使って削りましょう。

出来たら、画像をアップロードして、URLを控えておきましょう。

▲ページの先頭に戻る

5:二段組を三段組にする

(08)

とりあえず、準備が出来たので、ひとつずつ試してみます。

まずは全体の幅「d1」を、1007pxに変更します。

widthをびっちり入れているので、びっちびちで入っています。(しつこいですけれど、本当は余裕をもって作成する方が良いですよ)

全体の幅「d1」を1007pxに変更

(09)

左サイドにする部分を加えます。

「#main」の下あたりに、HTMLコードを加えます。「#left-menu」として中には、プラグインの2を入れておくことにします。

プラグイン2は、「plugin_second」などで検索をかければ見付かるはずです。(元の方は、もちろん削除します)

プラグインをご存知でない人は、記事「FC2プラグインとは?」をご覧ください。

(10)

「#left-menu」のCSSコードを加えます。

とりあえず最低限必要な、幅(width)と回り込み(float)だけ指定しておくことにします。

(11)

ブラウザで確認してみましょう。とりあえず、三段組レイアウトになっているはずです。

とりあえず、三段組レイアウトになった

昨今、こういう「記事」-「メニュー1」-「メニュー2」というレイアウトも多いですね。

おそらくですが、「メニュー2」にカテゴリーなどのリンクを配置して、「メニュー1」に広告を入れることで、視線が広告をまたぐようにする意図があるのではないかしら。

両サイドにメニューを配置して、どちら側かに広告を置いておくと、常連さんは無意識に「必要のないもの」として視界に入れなくなります。

こういうレイアウトの方が、クリック率が高いのかもしれません。

(12)

プラグイン内の設定も、ちゃんとしておこうと思います。

HTMLコードの左側のメニューの「class="rtitle"」を、「class="ltitle"」にします。

(13)

CSSコードで、「.ltitle h3」の設定を追加します。(「.rtitle h3」の指定をコピーしてしまえば楽です)

違う指定を行う箇所だけ変更します。widthを、227pxにし、前述(07)でアップした短いタイトル背景画像のURLを指定してください。

(14)

ブラウザで表示してみましょう。短くした方の背景画像が設定されているはずです。

短くした方の背景画像が設定される

(15)

次に、追加したメニュー(#left-menu)を、左側に配置します。

「#wrap」付きdivで囲む

方法は、「#left-menu」が付いている<div>と、「#main」が付いている<div>を、さらに<div>で包んで「#wrap」というCSSコードの指定で「float:left;」をかけます。

「#menu」に、「float:right;」をかけることで、左右に配置できます。

そして更に、「#wrap」の中で、「#left-menu」に「float:left;」、「#main」に「float:right;」をかけて、左右に配置します。

(16)

それでは、実際に変更してみましょう。

まず、HTMLコードに「<div id="wrap">」と「</div>」を追加書きします。

(17)

そして、「#wrap」にCSSコードを指定します。

「#main」と「#left-menu」の幅を足して、739pxを指定します。前述(12)の通り、「float:left;」も指定しておきます。

(18)

「#main」のfloatを左から右に変更します。

(19)

ブラウザで表示してみましょう。予定していた三段組レイアウトが出来ているはずです。

予定していた三段組レイアウト

(20)

「#wrap」と「#menu」の間が、ちょっと多めに空いています。まず、「#menu」にmarginやpaddingがないか調べて、無ければその中を見ます。

「.rtitle」で、「padding-left:20px」が入っていました。これを「padding-left:10px」に変更してみます。

(21)

ブラウザで表示してみましょう。余白が調整できているはずです。

予定していた三段組レイアウト

必ずしも、いつもズバッ!ズバッ!とうまく予測があたるわけでもありません。とりあえず試しに変更してみれば、何かしら分かると思います。恐れず、トライ!トライ!です。

理屈じゃないのです。

ゆえに、いつでも元に戻せるようにバックアップを取っておくことが重要なのです。

▲ページの先頭に戻る

おまけ

「三段組やから言うて、三段組になりましたでお終いでは、冷たいんちゃうの?」という感じもするので、もう少し続けます。

1:不要になった箇所

上の方に、以前の背景色(グレー)や背景画像の指定が残っています。言わば「body」の次の指定は不要なので、削除できます。(「body」自体はいりますよ)

▲ページの先頭に戻る

2:ヘッダー回り

「.header」の幅が、770pxなので、1007pxにして背景画像をバランスよく調整しても宜しいかと思います。

背景画像の変更については、記事「背景の画像を変更する / カスタマイズ」が参考になると思います。

▲ページの先頭に戻る

3:あとがき

おそらく他にも、変更したことで不要になった箇所が、いくつかあるかもしれません。また、「俺ならこう書くぜ!」という箇所もあるはずです。

時間の許す限り、お好きなだけ変更してください。出来ればひと通りコードに目を通した方が良いとは思います。

ひとが書いたコードを見るのは大変ですけれどもね。

▲ページの先頭に戻る

次回予告

次回は、トップページだけ違う表示(ページ)にする方法ついて書く予定です。

▲ページの先頭に戻る

関連記事

カスタマイズに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/06/06 更新日:2008/06/06

« 「画像を中央揃えにする」|「トップページだけ別の表示をする」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

3段組みかっちょいい

こんにちは!
3段組みの中の段に広告を持ってくるっていうのは
来た人の視線に入る為であったんですね!


今自分がよくお邪魔しているブログさん達に行って見て来ましたが
3段組みの中の段には広告が入っているところが多かったです。
以前から、なんでここに広告?と思っていたのですがその為だったのかー!


ところで、画面いっぱいの3段組みって非常にかっこいいと個人的に思っています。
なんでだろうなあ。

画面いっぱいに渡る水平線?みたいなのが非常にかっこいい。

ドンキホーテ方式

ひろこさん、こんにちは!
コメントありがとうございます。

おそらくですが、広告をはさんだり、混ぜこぜにすることで、
クリック率を高めているのではないかしら。

わざとユーザビリティを低くするというのもありなのかも。
ドンキホーテ方式みたいな感じ。

とにかく山と商品(コンテンツ)を積んで、
宝探しのような状態にするのですね。

ユーザは、探し難いことへの不満より、
見つけたときの恍惚感に酔いしれるわけです。

んー・・・ないか。

三段組って、きゅうきゅうとしてしまいます。
やっぱり、狭いッス。

本当は、黄金比なんかも取り上げた方がいいんでしょうけれど、
今回は、本当に余裕がありませんでした。

今どきの若者風に言えば、ちかりたびーです。

やはり・・・

こんばんは!
お疲れなのですね。やっぱり3段組にするのが疲れたのかな。


ドンキホーテ、ほんとゴチャゴチャしてますよね。
ここ数年行ってないけどやっぱりああいうスタイルなんでしょうね。
店内歩く時は、手荷物抱えて歩かないと商品落としそうでこわい^^;


なるほど、あえてユーザビリティを落としてクリック率上げるとか・・・
すごい発想だなあ。自分では思いつかん・・・


ブログだと、結構グリッドにそったデザインが主になるし、
黄金比にばっちりはまりそうですね。
kumaCrowさんが黄金比についてどんな風に書くか、興味あるなあ。
もし、そのうち予定があえば、是非取り上げて欲しいなあ、と思ってます。


今日はほんとおっつでした。

黄金比!

ひろこさん、こんばんは。
コメントありがとうございます。

そうなの、ややこしいネタを取り扱うときは、けっこう疲れます。
流れを書くだけでも、いっぱいいっぱいになってしまいます。

「分かりやすく」という部分が、おざなりになりがちです。

商品(情報)を求める欲があれば、多少の困難は、
逆にアドベンチャーとして楽しむものになるかもしれませんねー。

黄金比!難しいなぁ。(´Д`;)

KumaCrowさん こんにちは!

お久しぶりです^^
今回友人の紹介である居酒屋?さんのミニサイトを作る事になったのですが、Kumacrowさんの記事をみてピーンときたのですが、FC2ブログをカスタマイズして作ってみようかと思います。(出来ないかもしれません。)自分で写真を毎回更新したいらしいのですが、パソコンはあまり得意ではないらしく、お金も掛けられない感じでして。
一つ教えて下さい。m(__)m
トップページはお店の紹介という感じにして、ブログは中に入ってから見えるようにしたいのですが、
この場合は
記事にあったようにトップページは↓
<!--index_area-->
(A:トップページに表示する内容を書く)
お店の紹介内容
<!--/index_area-->
で、括る。

ブログ記事の部分を全て以下のように括ってトップページと同じHTML内に記入する。で、よろしいのでしょうか?
<!--not_index_area-->
(B:トップページ以外で表示する内容を書く)
ブログ記事部分
<!--/not_index_area-->

宜しくお願いいたします。

売れっこWebデザイナー

ichimarugo-いちまるごさん、こんにちは。
お久しブリトニースピアーズです。

ほっほー、さすが売れっこWebデザイナー!(´▽`)♪
ひっぱりダコですね。素晴らしい。
でも、頑張りすぎて、身体壊さないでね。

お金がかけられないということであれば、
FC2ブログでも、十分問題ないのではないかしら。

長期的にちゃんとやっていくつもりがあって、
独自ドメイン代くらいは捻出できるのであれば、
もう少し選択肢はあるかもしれません。

トップページに関する指定は、それでバッチリOKです。

<!--index_area-->についての記事を、
8日の01:00頃、「デスパレートな妻たち2」でも見ながら、
アップする予定でいます。

必要なさそうですが、良かったらご覧ください。
(明日になっちゃいますが)

アディオス!(o゚ω゚o)ノ゙

KumaCrowさん こんにちは!

こんにちは!トップページの指定の件ありがとうございました!
Kumacrowさん売れっ子だなんてとんでもないですyo
もーもー必死でアプローチをかけてると言う感じです。

デスパレートな妻たち2 こっ今夜ですね^^なんだか面白そうな
ドラマですね。私も今夜見てみたいと思います。

<!--index_area-->の記事参考にさせてもらいます!!!

ありがとうございました!

デスパレートな妻たち2

ichimarugo-いちまるごさん、こんにちは。
コメントありがとうございます。

どういたしまして!

売れっこってことにしておけば、実際はどうあれ、
それがきっかけで、いい仕事が回ってくるかもしれないし、
その仕事で結果を出せば、またいい仕事が回ってくるかもしれないし、
きっかけはいくらでも何でもあった方がいいと思うんだ。きっと。

デスパレートな妻たち2は、1のときほどの勢いはないんですが、
けっこうおもしろいです。

んー、あ、でも分かんないな。どうだろう。

お久しぶりです!

KumaCrowさん、お久しぶりです!
念願の2カラム→3カラム化に成功しました\(^o^)/
嬉し過ぎて今小躍り真っ最中です♪
なかなかうまくいかなかったので、喜びもひとしおですぅ(T_T)
それもこれもKumaCrowさんのお陰です。ありがとうございました♪
まだ細かい調整は残っているんですが、とりあえずご報告まで。
それではまた~



3カラム

yukiskiyukiさん、こんばんわん。▼・ェ・▼わんわん
コメントありがとうございます。

段組みは、くせをつかむまで、なかなか慣れないものですが、
すごいですねー。3カラム化できちゃったんだ。(´Д`;)びっくり

センスがあるのかもしれませんね。
素晴らしい。

微調整、がんばってね~ん。((o(´∀`)o))

画像を幾つか横に並べラれますか?

 いつもお世話になります。画像を幾つか横並びできますか?左寄せの場合、1つだと、スペースが無駄になります。中央揃えは理解しています。右側に別の画像を貼り付けるとか、画像の説明文が書けると良いのですが・・・。ヨロシクお願いいたします。敬具

複数の画像の横並びについて

komonjiさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

複数の画像の横並びは可能です。
連続して画像の挿入を行うことはできます。

高機能テキストエディタモードは、ご存知でしょうか?
(「W」ボタンでモード切替できます)

高機能テキストエディタモードにすると、
わりと簡単にできるはずです。


ただ、画像の横に説明文を書くのは、
おそらく期待する位置にならないように思います。

この辺、言葉だけではちょっと説明し難いので、
近いうちに記事にさせていただきます。

回答に御礼

ご回答有難うございました。おっしゃるとおりカーソルは画像の隣に移動するので難なく横並びできました。有難うございました。「画像の横に説明文書く」は近々記事にしていただけるそうで楽しみにしています。猛暑が続きます。体調には十分気をつけて下さい。ご活躍をお祈りいたします。まずは御礼まで。

記事のアップについて

komonjiさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

できちゃったみたいなので、
もう必要ないかもしれませんが、

明日(08/07)あたりから、ぼちぼちと、
複数画像を横並びにする方法であるとか、

画像の横に説明文を書く方法とかの
記事をアップしていきます。

お待たせして申し訳ないです。
もうしばらくお待ちください。

それでは、またー。(*´∀`)人(´∀`*)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/351-ba96d478
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて