*All archives* |  *Admin*

2017/09
<<08  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30  10>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【tl_cuteclover】3カラムへの変更について
テンプレートのご利用ありがとうございます。
配布中のtl_cutecloverを3カラムにしたいというご質問をいただきました。
同じように変更したい方がいらっしゃるかもと思い、カスタマイズ方法を記事にしました。


テンプレートによっては、TOP画像を幅に合わせて作ったり、記事部分にテーブルを使ったりしているので、カラム変更が難しいものもあります。
【tl_cuteclover】は、幅の修正などで3カラムへの変更が可能です。
ここのテンプレート全てに当てはまる訳ではないという事をご了承ください。


ひとつずつ順番にやっていけば、変更は難しくありませんので。
テンプレートを修正する時は、複製してからカスタマイズしていただくようお願いします。

3カラムへのカスタマイズ方法はたたみます。
続きからご覧になってくださいね。
よろしくお願いします。


管理画面のテンプレート管理から、tl_cutecloverを複製してください。
(カスタマイズするのは、元のテンプレでも、複製したものでもどちらでもかまいません)

HTMLの記述から以下に表示する該当箇所を探して、それぞれそこに赤字の部分を追加してください。

<!--▲横カレンダーここまで-->

<!--▼左プラグイン+記事部分ここから-->
<div id="wrap">


<!--▼メイン部分ここから-->
<div id="main">


<!--▼左プラグインここから-->
<div id="sidemenu1">



<!--/plugin_first-->
<!--/plugin-->
</div><!-- /sidemenu -->
<!--▲左プラグインここまで-->


</div><!--/wrap-->
<!--▲左プラグイン+記事部分ここまで-->


<!--▼右プラグインここから-->
<div id="sidemenu2">
<!--plugin-->

<!--plugin_second-->



<!--/plugin_third-->
<!--/plugin-->
</div><!-- /sidemenu2 -->
<!--▲右プラグインここまで-->




次にCSSの記述を変更していきます。
同じようにCSSの記述から
/* -------------------------------------------------
レイアウト
------------------------------------------------- */
の部分を探してください。
/*ブログ表示部分*/

html>div#footer {
font-size: 11px;
}
までを削除して、同じ箇所に以下の記述を全てコピペしてください。


/*ブログ表示部分*/
div#container {
width: 920px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

/*ヘッダー*/
div#header {
width: 920px;
height: 180px;
background-image: url(http://blog-imgs-30.fc2.com/t/e/m/templabo/clover01b.gif);
background-repeat: repeat-x;
background-position: bottom;
margin-bottom: 10px;
}

/*左プラグイン+記事部分*/
div#wrap {
float: left;
width: 700px;
}

#wrap:after {
content: "";
overflow: hidden;
display: block;
height: 1px;
clear: both;
}
/*\*/
* html #wrap {
overflow: visible;
height: 1px;
}
/**/

/*メイン*/
div#main {
float: right;
width: 480px;
margin-right: 0px;
margin-left: 0px;
}

/*左プラグイン*/
div#sidemenu1 {
float: left;
width: 210px;
padding: 0px;
margin-right: 10px;
margin-bottom: 20px;
overflow: hidden;
}

/*右プラグイン*/
div#sidemenu2 {
float: right;
width: 210px;
padding: 0px;
margin-left: 10px;
margin-bottom: 20px;
overflow: hidden;
}

/*フッター*/
div#footer {
clear: both;
width: 920px;
height: 150px;
background-image: url(http://blog-imgs-30.fc2.com/t/e/m/templabo/clover01a_20090517183857.gif);
background-repeat: repeat-x;
background-position: bottom;
font-size: 11px;
voice-family: "\"}\"";
voice-family: inherit;
padding: 10px 0px;
margin-top: 10px;
}

html>div#footer {
font-size: 11px;
}



最後にCSS内から
/* -------------------------------------------------
プラグイン1・2設定
------------------------------------------------- */
の部分を探してください。
その中の #sidemenu li { の部分を以下のように変更してください。

#sidemenu1 li,
#sidemenu2 li{



以上で3カラムに変更完了です。

Secret
(非公開コメント受付不可)

No title
こんにちは。
こちらの3カラムにしたくて何度も試みたのですが
画面が真っ白になって出来ません。
なにぶん不慣れなのでアドバイス頂けると嬉しいです(*- -)(*_ _)ペコリ
匿名さんへ
こんばんは^^
何度も頑張っていただいてv-356
コピペしやすいように再度記事を上げましたので、よかったらもう一度やってみてください。
画面が真っ白になるのは、もsかしたら管理画面のほうで不具合が出てるのかも・・・。
私もたまに真っ白になってしまうことがあるので。
nekoさんへ
こんばんは^^
何度もやっていただいたようでv-356
コピペしやすいように、再度記事を上げましたのでもしよかったらやってみてください。
私も更新していて真っ白になることがあるので、もしかしたら管理画面の方で不具合が出てるのかもしれませんが・・・。
ありがとうございました。
頑張ってみました。
何度も確認し、何度もやり直しましたが、更新すると
画面が真っ白です。難しいですね。
こんばんは
3カラムに変更しようと
コピペしてみましたがNG(?_?)
何度試みても表示ならず(真白)諦めました
Temp*laboへようこそ!
temp*laboにお越しいただき、ありがとうございます。
FC2ブログ用のPCと携帯のテンプレートを製作しています。

利用規約&テンプレート記事を必ずご確認いただくようお願い致します。
質問・不具合などありましたら、該当記事のコメントでお願いします。
現在非公開コメントは受付ておりません。コメントは公開になりますのでご了承ください。

使いやすいものを目指して試行錯誤真っ只中・・・。気に入っていただけるものがあると嬉しいです♪

PCテンプレート利用規約
携帯テンプレート利用規約
共有登録テンプレート
【PCテンプレート】
◆左メニュー2カラム
  ・tl_autumncafe
  ・tl_flower
  ・tl_sakurasaku
  ・tl_cocotte_2col
  ・tl_spring_smile
  ・tl_valentine2col
  ・tl_icigo_cake
  ・tl_cute_cosmos
  ・tl_cosmos
  ・tl_pureheart
  ・tl_crownEX

◆右メニュー2カラム
  ・tl_hanabi
  ・tl_summer
  ・tl_cuteclover
  ・tl_clover
  ・tl_green2col
  ・tl_sakura
  ・tl_neko
  ・tl_gerbera
  ・tl_ichigo2
  ・tl_ichigo
  ・tl_valentine_heart
  ・tl_yukidaruma
  ・tl_blueheart

◆左右メニュー3カラム
  ・tl_bluexmas
  ・tl_Halloween
  ・tl_cherry
  ・tl_sunflower
  ・tl_checkheart_3col
  ・tl_clover_3col
  ・tl_green_3col
  ・tl_checkheart
  ・tl_cocotte_3col
  ・tl_valentine
  ・tl_blueheart_3col

  ・共有登録テンプレート一覧

【携帯テンプレート】
  ・tl_autumncafe_mo
  ・tl_cosmos_mo
FC2投票
アンケートにご協力お願いします!
Special Thanks!
配布テンプレートに素材をお借りしています。

管理人 舞様 カワイイダケジャ様
ハートフォントをお借りして素材を作りました。

管理人 Tom様 +cherish+様

管理人 星村様 Spica*port様

管理人 Anezaki様 Egg*Station様

管理人 氷室夕霧様 Atelier Black/White様

管理人 橘 樹様 空色地図様

管理人 こもすけ様 MiniaureType様

管理人 あさひ様 ポカポカ色様

管理人 裕様 Abundant Shine様

管理人 なつる様 空に咲く花様

管理人 Honey様 Sweety様

管理人 芽生様 FOG.様

管理人 花散里様 はながら屋様

管理人 ハマ様 Kun様

管理人 あおい様 ミントBlue様

お役立ちサイト
月別アーカイブ
リンク
リンクバナー&アドレスです。
必要な方はお持ち帰りください。

  

temp*labo
http://templabo.blog61.fc2.com/

☆バナー台はMAPPY様からお借りしました
カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
メールフォーム
ご訪問ありがとうございます
全記事表示リンク

全ての記事を表示する

プロフィール

*響*

Author:*響*
テンプレ作成格闘中。
シンプルで可愛いく、使いやすいテンプレ目指して試行錯誤な日々。
巷で国民的アイドルと呼ばれるグループと某長男を応援中だったりします。

カテゴリ
最近の記事+コメント
ブログ内検索
RSSフィード
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
PIYO
StyleKeeper
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。