*All archives* |  *Admin*

2017/05
<<04  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 31  06>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
3カラムへの変更について
先日3カラムへの変更方法を書いたのですが、もう一度こちらに記述させていただきます。
ソースが長くなるので途中省略していましたが、その部分をコピペできるようにしてみました。

追加する箇所とコピペできる箇所と書き直しましたので、続きからご覧になってくださいね。

よろしくお願いします。


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

まずはHTML部分の変更からしていきます。

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

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

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


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




 コピペ部分です。
同じくHTMLの記述から、<!--▼左プラグインここから-->と書いてある部分を探してください。
<!--▼左プラグインここから-->~<!--▲左プラグインここまで-->
の部分を全て削除して、以下の記述を同じ箇所に全てコピペしてください。


<!--▼左プラグインここから-->
<div id="sidemenu1">
<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></dt>
<!--plugin_first_description--><dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description-->
<dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd>
<!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2-->
</dl>
<!--/plugin_first-->
<!--/plugin-->
</div><!-- /sidemenu -->
<!--▲左プラグインここまで-->

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

<!--▼右プラグインここから-->
<div id="sidemenu2">
<!--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_third-->
<dl class="sidemenu_body">
<dt class="plg_title" style="text-align:<%plugin_third_talign>"><%plugin_third_title></dt>
<!--plugin_third_description--><dd class="plg_header" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></dd><!--/plugin_third_description-->
<dd class="plg_body" style="text-align:<%plugin_third_align>"><%plugin_third_content></dd>
<!--plugin_third_description2--><dd class="plg_footer" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></dd><!--/plugin_third_description2-->
</dl>
<!--/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 {
list-style-type: disc;
list-style-position: outside;
margin-left: 15px;
}
の部分を削除して、以下の記述を同じ箇所にコピペしてください

#sidemenu1 li,
#sidemenu2 li {
list-style-type: disc;
list-style-position: outside;
margin-left: 15px;
}



変更箇所は以上です。
変更したら更新ボタンを押す前に、プレビューでブログの確認をしてください。
確認できたら、更新ボタンを押してください。

コピーする時は、点線で囲まれている中の文字を全てコピーしてください。
ひとつでも文字や記号が抜けていると、表示されなくなったり、レイアウトが崩れたりします。

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

花子さんへ
お返事が遅くなってすみませんv-435
メールの方へお返事させていただきましたので、よろしくお願い致します。
変更後の背景色につきまして。
はじめまして、余りの可愛さに感動してます。

ブログを始めようとして、響さまのテンプレートがどれも可愛く
迷ってました。どうしても、3カラムで始めたく、そこで
こちらのページを見つけることが出来ました。

初心者のくせに、挑戦。
大好きなてんとうむしが嬉しくて。
ぶじに、3カラムに変更が出来たのですが、
背景が全面、黄色になったり、ところどころ
黄色になったりで、不安定です。

もし、お教え願えましたらと、コメントを致しました。
不適切な質問なら、削除願います。

どうぞよろしくお願い致します。
ありがとうございました。
無事3カラム変更出来ました。
が・・・すでに配布されているこのクローバーのテンプレも
今回チャレンジしてみたてんとう虫がいるクローバーも3カラムにして表示した際、
下の方にあるプラグインの1部がダブって表示されてしまいます。
うまく説明できなくてすみません。
私の場合、片方だけで8個くらいのプラグインを載せているのですが
文字と、枠組み(緑の線「---」)がダブって表示されます。
例えば・・・響さんの場合で例えると、
左プラグインラストの「ご訪問ありがとうございます」の
「カウンター数字」と「----(緑の枠)」のみが続けて表示されている状態です。
プラグインが少なければ出ないので、多分何かの容量を越すと?出てしまうのかなーって思います。

はじめまして
可愛いテンプレートで、3カラムに変更したいと思ってやって、
無事に3カラムにできました!
大事に使います。
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様からお借りしました
カレンダー
04 | 2017/05 | 06
- 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 31 - - -
メールフォーム
ご訪問ありがとうございます
全記事表示リンク

全ての記事を表示する

プロフィール

*響*

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

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

この人とブロともになる

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