Home > FC2ブログ > basic_white > basic_white テンプレートを3カラムに変更する方法

basic_white テンプレートを3カラムに変更する方法

 2カラムのFC2公式テンプレート「basic_white」を3カラムにする方法です。「サイドバー+メインコンテンツ+サイドバー」「メインコンテンツ+サイドバー+サイドバー」などの並びに変更できます。

 テンプレートを編集する際にはなるべく複製して(バックアップを取って)ご利用ください。

 追加されるサイドバーにはプラグイン3のカテゴリが表示されます。表示したいプラグインを「プラグインの設定」でプラグイン3にカテゴリ変更する必要があります。

2014/07/08更新: 1. [HTML]のコードを修正・追加。外枠の線が調整されます。

変更する場所

1. [HTML] 約4分の1進んだ所 (14/07/08更新)

 Ctrl+Fキーで検索フォームに「function equalizeBoxHeight」を入れると見つかります。

function equalizeBoxHeight() {
  var leftHeight = jQuery( LEFT_COLUMN_ID ).height();
  var rightHeight = jQuery( RIGHT_COLUMN_ID ).height();
  
  var height = (leftHeight > rightHeight)? leftHeight: rightHeight;
  
  jQuery( LEFT_COLUMN_ID ).height(height + "px");
  jQuery( RIGHT_COLUMN_ID ).height(height + "px");

};

↓変更後

function equalizeBoxHeight() {
  if(jQuery("#outer").length){
    var outerHeight = jQuery("#outer").outerHeight() + (jQuery( LEFT_COLUMN_ID ).outerHeight(true) - jQuery( LEFT_COLUMN_ID ).outerHeight());
    var barHeight = jQuery("#sidebar").height() - (jQuery("#sidebar").css("padding-top").replace(/[^0-9]/g,""));
    jQuery("#main_contents, #sidemenu, #sidebar").height(((outerHeight > barHeight) ? outerHeight: barHeight) + "px");
  }else{
    var leftHeight = jQuery( LEFT_COLUMN_ID ).height(), rightHeight = jQuery( RIGHT_COLUMN_ID ).height();
    jQuery( LEFT_COLUMN_ID,RIGHT_COLUMN_ID ).height(((leftHeight > rightHeight) ? leftHeight: rightHeight) + "px");
  }

};

 HTMLの一番下にある次のURLを変更。

src="http://static.fc2.com/share/blog_template/equalbox.js"

↓変更後

src="http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic3-equalbox.js"

 上記で使用されているjsファイルはダウンロード(右クリック保存)して自分のブログにアップロードしてURLを差し替えることを推奨します。

2. [HTML] 約3分の1進んだ所

 Ctrl+Fキーで検索フォームに「id="wrap"」を入れると見つかります。

<div id="wrap">

↓変更後

<div id="wrap" class="clearfix"><div id="outer">

3. [HTML] 最後の少し手前

 Ctrl+Fキーで検索フォームに「plugin_third」を入れると見つかります。

<!--plugin-->
 <!--plugin_third-->
 <div class="content plg">
  <h3 class="plg_header" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>

(省略)

 </div>
 <!--/plugin_third-->
<!--/plugin-->

 上記部分を丸ごと削除します。


4. [HTML] 最後の方

 Ctrl+Fキーで検索フォームに「id="footer"」を入れると見つかります。

<div id="footer">

↓変更後

 <div id="sidebar">
<!--plugin-->
<!--plugin_third-->
  <div class="sidemenu_content plg">
   <h3 class="plg_header" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
   <!--plugin_third_description--><div class="plg_description" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div><!--/plugin_third_description-->
   <div class="plg_body" style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
   <!--plugin_third_description2--><div class="plg_footer" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div><!--/plugin_third_description2-->
  </div>
<!--/plugin_third-->
<!--/plugin-->
 </div>
</div>

<div id="footer">

5. [スタイルシート] 最初の方(Font Size)

 Ctrl+Fキーで検索フォームに「Font Size」を入れると見つかります。

#sidemenu /* サイドメニュー(プラグイン) */ { font-size:116%; /* 15px */ }
#sidemenu h3 /* サイドメニュー(プラグイン)タイトル */ { font-size: 131%; /* 20px */ }

↓変更後

#sidemenu,#sidebar /* サイドメニュー(プラグイン) */ { font-size:100%; /* 15px */ }
#sidemenu h3,#sidebar h3 /* サイドメニュー(プラグイン)タイトル */ { font-size: 115%; /* 20px */ }

 文字サイズは後でお好みに調整してください。

6. [スタイルシート] 約6分の1進んだ所(Layout)

 Ctrl+Fキーで検索フォームに「#main {」を入れると見つかります。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -340px;
  text-align: left;
}
#main_contents {
  margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 320px; /* サイドメニューの幅 */
  padding-top: 35px;
}

↓変更後

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -220px;
  text-align: left;
}
#main_contents {
  margin: -36px 220px 0 220px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 205px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: right;
  margin-left: -220px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}
#sidebar{
  float: left;
  overflow: hidden;
  padding-top: 35px;
  width: 205px; /* 追加サイドバー横幅 */
  position:relative;
}

7. [スタイルシート] 約4分の3進んだ所(Sidemenu)

 Ctrl+Fキーで検索フォームに「sidemenu .sidemenu_content」を入れると見つかります。

#sidemenu {
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

#sidemenu .sidemenu_content {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFFFFF; /* サイドメニュー(プラグイン)の背景色、アイコン */
  border-bottom: 1px dotted #B5B5B6;
}

#sidemenu h3 {
  margin: -10px -10px 0;
  padding: 10px 10px 10px 25px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 10px 10px; /* サイドメニュー(プラグイン)のタイトルの背景色、アイコン */
  border-top: 1px dotted #B5B5B6;
  border-bottom: 1px dotted #B5B5B6;
}

↓変更後

#sidemenu,#sidebar {
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

#sidemenu .sidemenu_content,#sidebar .sidemenu_content {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFFFFF; /* サイドメニュー(プラグイン)の背景色、アイコン */
  border-bottom: 1px dotted #B5B5B6;
}

#sidemenu h3,#sidebar h3 {
  margin: -10px -10px 0;
  padding: 10px 10px 10px 25px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 10px 10px; /* サイドメニュー(プラグイン)のタイトルの背景色、アイコン */
  border-top: 1px dotted #B5B5B6;
  border-bottom: 1px dotted #B5B5B6;
}

 以上で完成です。

どうしても変更場所がわからない時

 テンプレートをコピー&ペーストで新たに作成します。アクセス解析などのコードは貼り付けし直す必要があるのでご注意ください。

1. 現在使用しているテンプレートを複製

2. 複製したテンプレートの編集

 元からあるHTMLとスタイルシートを全て削除して以下のコードと入れ替えます。

サイドバーの横幅の変更

 Ctrl+Fキーで検索フォームに「#main {」を入れると見つかります。

 「205」と「220」の部分がサイドバーの横幅です。横幅を増やす時はこの二つの数値を同じ数だけ増やします。25px横幅を広げたいときは次のようにします。「205→230」「220→245」

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -245px;
  text-align: left;
}
#main_contents {
  margin: -36px 245px 0 245px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 230px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: right;
  margin-left: -245px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}
#sidebar{
  float: left;
  overflow: hidden;
  padding-top: 35px;
  width: 230px; /* 追加サイドバー横幅 */
  position:relative;
}

 右のサイドバーだけ増やす時は「mainの数値」「main_contents の2番目の数値」「サイドメニューの幅」を変更し、左のサイドバーだけ増やす時は「main_contents の4番目の数値」「outerの数値」「追加サイドバー横幅」を変更します。

サイドバー2列を右端に並べる

 Ctrl+Fキーで検索フォームに「#main {」を入れると見つかります。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -220px;
  text-align: left;
}
#main_contents {
  margin: -36px 220px 0 220px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 205px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: right;
  margin-left: -220px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}
#sidebar{
  float: left;
  overflow: hidden;
  padding-top: 35px;
  width: 205px; /* 追加サイドバー横幅 */
  position:relative;
}

 上記を以下に変更。sidemenu、outer、sidebarのfloatを反対に変更します。mainのmargin-rightには2つのサイドバーの合計幅+10の値(420)、main_contentsの二番目のmarginにはそれプラス6の値(426)を指定します。四番目のmarginは0です。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -420px;
  text-align: left;
}
#main_contents {
  margin: -36px 426px 0 0px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: left;
  position:relative;
  overflow: hidden;
  width: 205px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: left;
  margin-right: -220px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}
#sidebar{
  float: right;
  overflow: hidden;
  padding-top: 35px;
  width: 205px; /* 追加サイドバー横幅 */
  position:relative;
}

 一番右端のサイドバーのみ横幅を180pxにするときは、左205+右180+10=395がmainのmargin-rightに。main_contentsの二番目のmarginには+6の401を指定します。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -395px;
  text-align: left;
}
#main_contents {
  margin: -36px 401px 0 0px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: left;
  position:relative;
  overflow: hidden;
  width: 205px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: left;
  margin-right: -195px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}
#sidebar{
  float: right;
  overflow: hidden;
  padding-top: 35px;
  width: 180px; /* 追加サイドバー横幅 */
  position:relative;
}

サイドバー2列を左端に並べる

 Ctrl+Fキーで検索フォームに「#main {」を入れると見つかります。

 mainのfloatをrightに変更します。margin-rightはleftに変更して2つのサイドバーの合計幅+10の値(420)に変更。main_contentsのmarginの四番目にはそれプラス6の値(426)を指定、二番目の数値を0にします。outerのmargin-rightをleftに変更します。

#main {
  float: right;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-left: -420px;
  text-align: left;
}
#main_contents {
  margin: -36px 0px 0 426px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 205px; /* サイドメニューの幅 */
  padding-top: 35px;
}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
#outer{
  float: right;
  margin-left: -220px; /* 追加サイドバー横幅+15のマイナス */
  overflow: hidden;
  text-align: left;
  width: 100%;
}

 以上で完成です。中央のサイドバーのみ横幅を180pxにするときは、左205+中央180+10=395がmainのmargin-leftに。main_contentsの四番目のmarginには+6の401を指定します。

#main {
  float: right;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-left: -395px;
  text-align: left;
}
#main_contents {
  margin: -36px 0px 0 401px; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 180px; /* サイドメニューの幅 */
  padding-top: 35px;
}


ログ

  • 14-07-08
    外枠の線を調整
  • 13-11-01
    サイドバー2列を左端に並べる追加
  • 13-08-23
    記事公開

 不具合等があればコメントにてご連絡ください。

関連記事
スポンサー リンク
コメント
#29 : No title
始めましてこんばんは
質問なのですが、サイドバーをく左に二列に並べるにはどのように
変更すればよいのでしょうか?
自分で弄ってもぐちゃぐちゃになるだけだったので、よろしければ教えていただきたいです
よろしくお願いします
#31 : サイドバーをく左に二列
コンバンハ。
このページに『サイドバー2列を左端に並べる』の説明を追加しました。
3カラム用のHTMLとスタイルシートに変更を完了させた上で
指定の通りに変更すると左に2列並ぶかと思います。
#33 : No title
#29の者です、素早い対応有難うございます。
無事に左にサイドバーを2列に並べることが出来ました!
basic_whiteは [margin-left: auto; margin-right: auto];で、「container」を真ん中に持ってくる方法しか知らない初心者にとっては難しかったので、とても助かりました。
有難うございました。
#126 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#127 : No title
いつもお世話になっております。
画面を全体的に中央に寄せるにはどうしたらいいですか?
このページのように左右に余白を入れたいです。
よろしくお願いいたします。
#132 : No title
記事みつけました。
希望通りのページになりました!
お騒がせしました。
#201 : プラグインの下線
いつもお世話になっています。
ここのページのように3カラムで利用をしているのですが、ここのページのようにプラグインに下線を入れるにはどうすればよいですか?
いつも質問ばかりで申し訳ございません><
#231 : Re: #201 プラグインの下線
コンバンハ。
大変遅くなり申し訳ございません。
既に必要ないかもしれませんが、サイドバーの最近記事などのリストに下線を表示する方法の記事を投稿いたしましたのでご参考くださいませ。

※「記事下プラグイン3のタイトルなどのデザイン調整」のコメントで紹介したカスタマイズを利用している場合はそちらで追加したリストのスタイルコードを削除すると正常に反映されます。
#263 : No title
本当にありがとうございます。
#288 : No title
こんばんは、いつも利用させてもらっています。
こちらの記事を参考にして
3カラムにしたところ、ウィンドウのサイズが小さいときに
横スクロールしても右のサイドバーを見ることが出来ず、
スクロールがそこでとまってしまいます。
なにか解決方法はないでしょうか?
よろしくお願いします。
#299 : http://myviewthroughkateyes.com/tkjpclothes/WalletsAccessories/8hY5QsbUoS.html
4月3日よりTOKYO MXにて「2PM(トゥーピーエム)」のメンバー6人と「2AM(トゥーエーエム)」のメンバー4人を合わせた10人での初のテレビレギュラー番組「2PM2AM Wander Trip」(毎週火曜日24:0024:30放送)がスタートする。「2PM」と「2AM」の2グループが共同でレギュラー番組を持つのは世界初となる「2PM」と「2AM」の歴史は、韓国Mnetの新人育成TV番組「熱血男児」から始まる。過酷な訓練の中、ライバルでありながらも徐々に熱い友情が育くまれる姿を映し出し注目された。そして勝ち残ったメンバーのうち、歌唱力中心の「2AM」とダンスパフォーマンス中心の「2PM」に分かれてチームが結成された。その「2PM」と「2AM」が、今回世界初のTVレギュラー番組をスタートすることとなった番組のタイトルは「2PM2AM Wander Trip」。「wanderぶらぶらする」という名前の通り、「2PM」と「2AM」のメンバーが東京のある街を訪れ、日本人ゲストと共に、その街をぶらぶらしながら、街の魅力を発見していくという番組。東京の観光スポット・グルメ情報はもちろん、ステージや音楽番組では見られない、メンバーの素の表情や意外なキャラクター、普段の楽屋のテンションそのままのメンバー同士の会話も見所だ4月3日に放送される記念すべき第1回は、「2PM」のテギョンとニックン、「2AM」のスロンが、芸人・カンニング竹山を案内役に迎えて東京のシンボル・東京タワーと神谷町をぶら歩き。東京タワーでは、スリリングな外階段にメンバー大興奮。また、神谷町のぶら歩きでは、見慣れない日本の文化に好奇心を刺激され、あちこちに寄り道。案内役の竹山をほったらかして、メンバーだけで大いに盛り上がる。プライベート感満載の「2PM」と「2AM」を堪能できる、ファン必見の番組になりそうだ「2PM」のメンバー、テギョンと「2AM」のリーダー、チョ・グォンは下記のようにコメントを述べている。「2PMと2AMの新しい姿をお見せできると思うとすごくうれしいです。僕たちの素の姿を観て頂けると思っています。ぜひご期待ください」(テギョン)、「ステージ上でお見せする姿とは違った姿をお見せできると思います。僕たちもとても楽しみながら撮影をしているので、皆さんにも楽しんで頂ける番組になるとうれしいです」(チョ・グォン)。
#307 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#316 : No title
うわー、大変だあ。
#324 : No title
HMTL、CSS両者を変更する必要があるのですね!
コレは初心者からしたら根気が必要ですが、、、
頑張ってみよう!

ちなみに、Basic_whiteのサイドバーを左側に変更する
方法はどうすれば良いのでしょうか??;;
該当記事等あれば助かります!

提供されてる側なのにいつもわがままですみませんっ;;
#330 : 私だけでしょうか?
「元からあるHTMLとスタイルシートを全て削除して以下のコードと入れ替えます。」で
HTMLとCSSを全て入換え3カラムにしたのですが

新しく作った3カラム目の左のサイドバーが
メインコンテンツの真ん中のカラム、つまり記事が読み込まれると
右のカラムの下に左のカラムが回りこんでしまいます。

幅の調整の問題なのでしょうか?
良い解決法ありますでしょうか?
#334 : No title
こんばんは。
ブログの下のほうにある検索フォーム、リンクをプロフィールなどが置かれているところに移動させるにはどうすればよいのでしょうか?
#341 : No title
ここの通りにやって3カラムになったのですけど、[続きを見る]で記事を見ると、元々の2カラムで表示されます(>_<)
常に3カラムで表示するにはどうしたら良いのでしょうか?

よろしくお願いします。
#362 : 拡大すると記事欄が狭くなる
利用させて頂きありがとうございます。

3カラムへ変更できたのですが、拡大すると記事欄が狭くなってしまいます。
記事欄中心で拡大できる方法をお教えください。

よろしくお願いします。
#363 : No title
3カラムにすると記事内の画像が大きいとはみ出して表示されてしまいます。幅が自動調整されるようにするにはどのようにすればいいでしょうか。
#369 : はじめまして。
こんばんは。
3カラムへ変更できたのですが、記事下のプラグインがプラグイン2になっています。
記事下のプラグインを2列にしたいのですがどうすればいいでしょうか?

よろしくお願いします。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered