Home > FC2ブログ > business-u1 > business-u1 テンプレートを3カラムにする方法

business-u1 テンプレートを3カラムにする方法

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

 元のテンプレートをほとんどカスタマイズしていない場合や変更が面倒な場合はどうしても変更場所がわからない時にあるコードをコピー&ペーストしてください。

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

変更する場所

1. [HTML] 最初の方

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

<div id="container">

↓変更後

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

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

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

<!--plugin-->
  <!--plugin_second-->
  <dl class="sidemenu_body">
  <dt class="plg_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></dt>
  <!--plugin_second_description--><dd class="plg_header" style="text-align:<%plugin_second_ialign>"><%plugin_second_description></dd><!--/plugin_second_description-->
  <dd class="plg_body" style="text-align:<%plugin_second_align>"><%plugin_second_content></dd>
  <!--plugin_second_description2--><dd class="plg_footer" style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></dd><!--/plugin_second_description2-->
  </dl>
  <!--/plugin_second-->
<!--/plugin-->

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


3. [HTML] 最後の方

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

<div id="footer">

↓変更後

 <div id="sidebar">
<!--plugin_second-->
 <dl class="sidemenu_body">
  <dt class="plg_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></dt>
  <!--plugin_second_description--><dd class="plg_header" style="text-align:<%plugin_second_ialign>"><%plugin_second_description></dd><!--/plugin_second_description-->
  <dd class="plg_body" style="text-align:<%plugin_second_align>"><%plugin_second_content></dd>
  <!--plugin_second_description2--><dd class="plg_footer" style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></dd><!--/plugin_second_description2-->
 </dl>
<!--/plugin_second-->

 </div>
</div>


<div id="footer">

4. [スタイルシート] 以下を追加

/* WIDTH
--------------------------------------------- */
body #header {width: 1010px;}
body #container { width: 1030px;
 background: #fff url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/business-u3-540-200.gif) repeat-y left top;
}
body #footer #footer_inner { width: 750px;
 padding: 52px 260px 20px 20px;
 background: url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/business-u3f-540-200.png) no-repeat left top;
}
body #main {width: 540px !important; margin: 0 15px 20px 15px;}
body #sidemenu {width: 200px;}

#outer{ overflow: hidden; text-align: left; float: right; width: 800px; }
#sidebar{
  float: left; overflow: hidden;
  margin:-10px 0 0 10px; padding: 0 10px;
  background-color: #f0f2f6; width: 200px;
}
/* ------------------------------------------ */
* html body #main {margin-left: 7px;}
* html #sidebar {margin-left: 5px;}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
/* END */

 以上で完成です。


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

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

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

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

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


横幅の変更

 いずれかの幅を選択すると下にコードが表示されるのでそれをスタイルシートのWIDTHの中身と差し替えてください。

サイド+メイン+サイド
970 1030 1150
メイン+サイド+サイド
970 1030 1150

side
main
side

/* WIDTH
--------------------------------------------- */

 ここにあるコードと交換(上書き差し替え)

/* ------------------------------------------ */
* html body #main {margin-left: 7px;}
* html #sidebar {margin-left: 5px;}
.clearfix:after {content: ''; display: block; clear: both; height: 0;}
.clearfix {min-height: 1px;}
/* END */

 背景画像の読み込みに問題があるときはコード内の画像アドレスに直接アクセスしてその画像を保存。自分のブログにアップロードしてアドレスを差し替えてください。


ログ

  • 13-08-26
    記事公開

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

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

関連記事
スポンサー リンク
コメント

コメントの投稿

  

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

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

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

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

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

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