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

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

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

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

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

変更する場所

1. [HTML] 最初の方

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

<div id="main">

↓変更後

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

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-->
</div><!-- /sidemenu -->

 上記部分を丸ごと以下に変更します。

</div><!-- /sidemenu -->
</div>
<div id="sidebar">
 <!--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-->
</div>


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

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

 「/* Sidemenu */」にあります。Ctrl+Fキーで検索フォームに「/* Sidemenu」を入れると見つかります。各項目の強調部分を追加します。カンマのつけ忘れに注意してください。

div#sidemenu dt.plg_title, dt.plg_title {
  margin: 0;
  padding: 0 0 15px 23px;
  width: 177px;
  font-weight: normal;
  text-align: left;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_side_title.png") left 4px no-repeat;
  font-size: 115%;
}

div#sidemenu ul, #sidebar ul {
  list-style-position: outside;
  list-style-type:none;
  width: 200px;
  margin: 0;
  padding:0;
  color:#62931c;
}

div#sidemenu li, #sidebar li{
  border-bottom: 1px solid #EFEFEF;
  margin: 0 0 3px 0;
  padding: 0 0 3px 0;
}

div#sidemenu a,
div#sidemenu a:hover, #sidebar a,#sidebar a:hover {
  text-decoration: none;
}

 以上で完成です。

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

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

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

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

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


横幅の変更

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

サイド+メイン+サイド
935 975 1055 1135
メイン+サイド+サイド
935 975 1055 1135

side
main
side

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

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

/* ------------------------------------------ */

body div.entry_body {margin-right: 31px; width: auto;}
以下略...
/* END */

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


ログ

  • 13-08-28
    記事公開

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

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

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

コメントの投稿

  

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

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

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

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

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

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