fc2ブログ
 カラム変更。現在、サイドバーは右側バージョンですが、これをテンプレート内捜索10秒、書き換え10秒、計20秒で(ホントかな…)簡単に変更することができます。
 今のところ、当サイトテンプレートであれば、だいたいのものには対応できます。(2カラムのものに限る)
 3カラム(サイドバーが縦2列に分かれているものを含む)のものは、フロートが複雑に絡んでいる場合が多いので、CSS知識のある人でないとカスタマイズは厳しいかも知れません。

Capu1457.jpg
(こんな感じです)

 非常に簡単なので、気になる方はぜひお試しください。
 テンプレート構築の時点で、カラム替えも想定してありますので、妙なレイアウト崩れも起こりません(たぶん…)。テンプレートのデザインレベルを維持したままカラム替えが行えます。

 手順は…


変える場所探し

 まず、「テンプレートの設定」画面を開きます。大きなテキストボックス、下のほう「スタイルシート編集」のテキストボックスに注目します。

 そこを、ズズズ~っとスクロールすると「レイアウト」と書いてある区画があります。

Capu1459.jpg

 上図のような場所があり、さらにその中の「#main」と「#side」に注目。
 ココで、左右のボックスの制御が行われています。
■豆知識

 ブラウザによっては、「ページ内検索」と言う機能があります。
「Ctrl」+「F」キーで、検索ボックスがニョキッと出てきますので、そこに「レイアウト」と入力すれば、比較的簡単にテンプレート内を捜索することができます。



カスタマイズ

 その、「#main」と「#side」内にある「float:left;」と「float:right;」と言う部分を、書き換えます。

「left」→「right」、「right」→「left」とそれぞれ書き換えてください。

Capu1460.jpg

 それだけで、カラムを左右交換が完了です。保存する前に「プレビュー」して様子を見てみることをおススメします。テンプレートのコピーを作っておいて、バックアップしておくと、より安全です。

■重要

 書き換えるときは、必ず半角文字を書きます。
 最後にある「;」は、必ず必要です。



■カスタマイズ一覧
テンプレート簡単カスタマイズ
このエントリーをはてなブックマークに追加
Mon.03.15.2010
Comment
128
カラム変更について
前回の疑問点についてはお世話になりました。

「3フェイス・ブラック」を使い自分なりにカスタマイズを始めた所なんですが、3カラムの場合での左右のカラム変更が上手くいかなかったという事でコメントさせていただきました。

上記の記事では3カラムのカラム変更は難しいと説明されているという事なので難しいかもしれませんが対処法を説明していただけると大変助かります。

お手数ですが、よろしくお願いします。

129
Re: カラム変更について
 3カラムのカラム左右交換でしたら、テンプレートをではなく、プラグインから「プラグイン1」の中身と「プラグイン2」の中身を一つ一つ入れ変えた方が、結果的には速いと思いますよ。FC2ブログは、そういう所にも気を遣って作られているので、頼もしいというか。
 プラグインの管理画面を開いたら、表の真ん中辺りに「カテゴリ」と言うのが出てきますから、「1」のものは「2」に、「2」のものは「1」に順次変えていきます。

 テンプレート側でも勿論可能ですが、その辺りはHTMLを覚えていけば、自然に分かるようになってきます。その辺りは勉強してみてください。

130
Re:Re: カラム変更について
やっぱりその方法一番好ましいですか。

分かりました、お手数かけしましたm(__)m

139
サイドバーの左右入れ替え
「standard_2variable」のテンプレートをダウンロードさせていただきました。
個人的にはサイドバーが左側にあるほうが好きなのでこちらのページを参考に変更しようと思ったのですが、「standard_2variable」のスタイルシートのレイアウトの区画にはfloatという部分がありませんでした。
感覚的に「position」のrelativeとabsoluteが関係してるとは思うのですが、案の定入れ替えただけじゃダメでした。。。
何か方法があれば教えてください。よろしくお願いします。

140
Re: サイドバーの左右入れ替え
  「standard_2variable」のカラム替えは、こちらを参照してください。

http://designlabolatory.blog16.fc2.com/blog-entry-302.html

 そうです。デフォルトでは、absoluteでメインブロックの上にサイドバーを重ねている状態です。absoluteで左右だけを変えると、テキストの上にサイドバーが乗ってしまうので、テキストをpaddingでサイドバー分右側に寄せます。

142
Re: サイドバーの左右入れ替え
御礼が遅くなりました。
無事にサイドバーの左右入れ替えできました。しかもちょっと勉強になりました。ありがとうございました!

153
右側2カラムにする方法
はじめまして♪
先ほど、standard_3variableをダウンロードさせていただきました<m(__)m>
突然すみませんが、少しカスタマイズの方法を教えていただけると助かります。
右側2カラムにする場合、どのようにしたらいいでしょうか?
今までのテンプレートではそうしていたのですが、どうもうまくできないので。。
サイドバーが両側にありますと、読者さんは見にくいと思いますし、変更したいと思っています。
自分でももう少し調べてみますが、お返事をお願いいたします<m(__)m>

154
もう一点。。。
続きを読む、をクリックした時に、同じページに表示させるようにするにはどうしたらいいでしょうか。
下の方法でやってみたのですけど、一瞬同ページに表示されてすぐに新規ウインドウで表示されてしまいます。
http://10plate.blog44.fc2.com/?mode=m&no=75
こちらもお願いいたします!

155
Re: 右側2カラムにする方法
「3ヴァリアブルを片方2カラムに」

 ある程度HTMLが扱えるような感じなのでしたら、2ヴァリアブルをダウンロードしていただいて、「プラグイン1」と「プラグイン2」の部分で分割し、サイドーバー内で新たにブロックを組み、「float」させれば可能です。
 3ヴァリアブルから「まとめて横2カラム化」は結構書き換えるところが増えるので、大変かと思います。


 サイドバーサイズの変更は、サイドバー本体(#side)の「width」指定と、メインカラム(#main)の「padding」を同時に変更する必要があります。

http://designlabolatory.blog16.fc2.com/blog-entry-302.html

 こちらの図と、CSSを参考に、「左右替えをせずに幅だけ変更」すれば、サイドバーサイズ変更も可能です。



「記事を表示・非表示」

 スクリプトでということですよね?
 それでしたら、「<!--more-->」「<!--/more-->」のFC2変数を消し、「<div id="more">~</div>」のブロックを「「トップページ、カテゴリページ、日付表示、など各繰り返し表示エリア」」のみで「display:block」「display:none」の切り替えをする方法が簡単かと思います。
 こちらは注意事項がある上に、使い勝手も良さそうなので、記事にて説明させていただきますね。
 Javascriptで組むと汚くなりそうなので、jQueryで組むと良さそうです。すっきりしそうだし、エフェクトも使えますので。

 数日お待ちいただければ。。。

156
korukuma3のカラム変更
こんにちは。初めまして^^
korukuma3をダウンロードさせていただいたんですが、サイドバーが左側にあるほうが好きなのでfloatのrightとleft入れ替えたところ、カラムの変更は成功したもののデザインが崩れ、なんだか汚くなってしまいました。
綺麗なデザインのまま左右を入れ替えるには一体どうすればいいのか、教えていただきたいです。
お手数をお掛けして申し訳ありませんが、何卒よろしくお願いいたします。

157
Re: korukuma3のカラム変更
 コルクマですか、ダウンロードありがとうございます☆
 コルクマのカラムの件なのですが、このシリーズのテンプレートは基本的にカラム固定にててデザインしてまして、右カラムにしたときのみ画像がマッチングするようになっています。
 どうぞご了承くださいませ。。

158
Re: korukuma3のカラム変更
そうですか。わかりました。
お返事ありがとうございました^^

159
Re: もう一点。。。
 続きを読むを開閉式にする。

http://designlabolatory.blog16.fc2.com/blog-entry-333.html

 ちょっと難しいかも知れませんが、是非とも挑戦してみてください。

160
ありがとうございます♪
時間がある時にテンプレート、いじってみようと思います。。
丁寧にお返事をありがとうございました<m(__)m>
画像なども入れて自分好みにカスタマイズできたら、楽しそうですね~
(^^)/

231
分かりやすい解説ありがとうございました。大変参考になりました。

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.