f-blog

FC2ブログ用共有テンプレート制作ブログ。

TOPIC


※当ブログからの素材の持ち帰りはご遠慮願います。


 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
edit |  tb: -- | cm: --
 
fb02_3c

---確認環境---
WindowsVista
IE7.0・Firefox3.0
結構久しぶりなシンプル3カラム。
いつも通り画像の入れ替えは自由です。

始めて質問するときは最初にこちらを読んで下さい。
利用規約はこちらです。
------------------------------
追記に左2カラム化のためのhtmlとcssがあります。
2カラム版共有登録しました。詳しくはこちら
------------------------------
09/12/05
html及びCSSの見直しと修正を行いました。
12/05以前のコメント欄にあるクラス名が一部変わってますのでカスタマイズの際はご注意下さい。
------------------------------
10/04/07
html及びCSSの見直しと修正に伴い一部仕様を変更しました。
スポンサーサイト
パソコン用テンプレートの関連記事
edit |  tb: 0 | cm: 52

コメント

れん様はじめまして。




初めて質問させていただくRe:Dと申します。お手数をお掛けするかと思いますが、宜しくお願いいたします。

このたびブログの編集画面にさっそく出ていた新作テンプレートの「fb02_3c」を使わせていただきはじめたのですが、れん様のお作りになられるテンプレートは総じてfc2ブログの波線の効果が反映されないものなのでしょうか。他のものを試しにプレビューで表示させてみてもやはり反映されていなかったようなので……。
今までは波線やその他の効果が反映されないものは選んでいなかったのですが、テンプレートのデザインが余りにも素敵だったので、ぜひこれを使用させていただきたいと思っています。
…が、どうなのでしょうか。

まだHTMLやCSSにもそこまで詳しいわけではないので、こんな拙い質問をしてしまって申し訳ありません。
どうかご回答のほどを宜しくお願いいたします。

Re:D #sSDxEceg | URL | 2009/03/26 22:52 * edit *

Re:Dさんへ

こんばんは。
テンプレートをお使い頂きありがとうございます。

ご質問の件ですが波線とは何でしょうか?
一般的には「~」が波線だと思いますが、これはhtmlやcssは関係ありません。
その他の効果も反映されない、という部分も引っかかります。

もしかしたらブラウザとフォント設定によっては文字装飾が効かない事もあるのかなぁと思いますが情報が少ないため何とも言えません。
お使いのブラウザとその他の効果というのが何なのか、それを今一度詳しく説明して頂ければ幸いです。

れん #X.Av9vec | URL | 2009/03/27 01:24 * edit *

改めまして

先程は質問に答えて頂き、有難う御座いました。

お手数をかけて申し訳ないですが、改めて質問させて頂きます。

以下前回質問した内容と同じです。


初めまして、宜しくお願いします。

以前、本記事に質問されていた方と重なっている可能性がありますがどうしてもれん様の御力をお借りしたいと思い質問させて頂きます。

現在、新しく発表された「fb02_3c」テンプレートを使用させて頂いています。
ここで、注意書きに画像変更が可能ということですが、それはブログ・プラグインの背景画像も可能ということでしょうか?

もし可能であれば、「photoframe03-2l」のテンプレート内で使われている記事・プラグイン背景を使用し、それを「fb02_3c」に反映したいのですが、全くと言っていいほど太刀打ちできません。

かろうじてスタイルシートで行う編集だというのは分かるんですが、2カラム⇒3カラムということもあるためか、悪戦苦闘しています。
カスタマイズ初心者ですが、二つのテンプレートのスタイルシートを見比べながらも、詰んでしまいました。

どうか、もし画像が変更が可能ならば宜しくお願いします。

シャッフル #BjIfNwW. | URL | 2009/03/27 12:44 * edit *

れん様


れん様こんばんは、夜分に失礼致します。
私の質問に関しての表現が不適当であったためにれん様にお手間を取らせてしまい、申し訳ございませんでした。
そうですね、波線と言ってしまえば確かにそちらを連想される単語です。私が言いたかったのは波線でなく「斜体」の効果のことでした。語彙が少なく申し訳ないです。

ブラウザはIEの、おそらく7を使用していると思います。ヘルプを参照したところそう出ていました。
自分で少し試してみましたが、ほかの方々が作られているテンプレートでも、斜体の出るテンプレートと出ないものに分かれているようなのです。ネットで検索をかけてもそれを解決してくれるような記事がヒットしなかったのでこうして質問をさせていただいた次第ですが、お忙しいところ申し訳ありません。
今一度ご回答のほどをよろしくお願いいたします。



Re:D #sSDxEceg | URL | 2009/03/28 00:18 * edit *

シャッフルさんへ

こんばんは。
テンプレートをお使い頂きありがとうございます。

ご質問の件ですが記事部分に関しては問題ありませんがカラム部分は構造的に微妙ですがそういう構造・デザインである事をご理解下さい。

全てスタイルシートの変更で赤字部分が追加・変更部分になります。
------------------------------
.entryblock {
margin: 13px 0 0;
padding: 0;
border: 1px solid #c1bfad;
position: relative;
background: url(http://blog80.fc2.com/f/flaw/file/pf03-mainbg.jpg);
}

.menutext {
font-size: 95%;
margin: 0 auto 10px;
padding: 5px 0;
color: #333;
width: 100%;
overflow: hidden;
background: url(http://blog80.fc2.com/f/flaw/file/pf03-sidebg.jpg);
}
------------------------------
なお素材の流用は私のテンプレートのみに留めて下さい。

れん #X.Av9vec | URL | 2009/03/28 00:30 * edit *

Re:Dさんへ

わざわざお知らせ頂きありがとうございます。

色々調べた結果、フォント指定が良くなかったのでスタイルシートの編集でbodyのfont-familyを下記のように書き換えて下さい。
------------------------------
font-family : "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", "Osaka",sans-serif;
------------------------------

れん #X.Av9vec | URL | 2009/03/28 01:00 * edit *

れん様、有難う御座います。

度々の質問にお答え頂き本当に感謝しています。

素材の流用などの留意点は勿論承知しております。

改めまして、本当にありがとうございました。

P.S:
ところで再び問題が発生しまして…今回は前回ほどではありませんが。
現在、記事のタイトルの画像を(http://blog80.fc2.com/f/flaw/file/pf03-entrybg.gif)にしていますが、記事のwidthが465pxの為か、途中で切れてしまいます(画像左部分が斜めにカットされている状態)。
これは解決可能でしょうか?
再びお手数をおかけしますが宜しくお願いします。

シャッフル #BjIfNwW. | URL | 2009/03/28 01:01 * edit *

シャッフルさんへ

記事タイトルにも同じ画像を、という事でしょうか?
それならh3のbackground:の#eceadcだけを削除して本文の画像を見える様にした方が良いですよ。

れん #X.Av9vec | URL | 2009/03/28 11:20 * edit *

お答え頂きありがとうございます。

無事解決いたしました。
何度も迅速な対応に、編集に慣れている間に済ませる事が出来ました、感謝します。

また、何かありましたら宜しくお願いします。

シャッフル #BjIfNwW. | URL | 2009/03/28 14:09 * edit *

お礼が遅くなってしまいました

れん様こんばんは、先日は紛らわしい質問にもご丁寧に答えてくださり、本当にどうもありがとうございました。
これで、これからも楽しくブログを見ていけそうです。本当に、ありがとうございます。

それではお礼文のみとなりましたが、失礼致します。

Re:D #sSDxEceg | URL | 2009/03/31 23:15 * edit *

こんにちは。

れん様。
「fb02_3c」テンプレートを使わせていただいています、美夜です。
はじめまして。
まことに初歩的なことで申し訳ないのですが、fc2の解説を読んでも分からなかったのでご質問させていただきます。

「fb02_3c」テンプレートですが、上のタイトル部分の画像の変更をしたいなと思うのですが、どこをどのように変えたらよいのかがいまいち分からないんです。
お時間があるときでいいのでご回答してくだされば幸いです。

美夜 #TUzGlKWc | URL | 2009/04/02 11:52 * edit *

美夜さんへ

こんにちは。
テンプレートをお使い頂きありがとうございます。

画像の変更はとても簡単でスタイルシートの編集から行います。
下記部分を探し出しurlを変更するだけです。
------------------------------
/* 画像URL */
#headBlock {
width: 646px;
height: 180px;
margin: 0 0 10px;
padding: 0;
border: 2px #c1bfad solid;
background: url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fb02-title.jpg);
}
------------------------------
サイズを変更したい場合は横(width)と縦(height)を変更しますが横については初期値を最大値とした方が良いです。

また画像を変更するとブログタイトルと説明文が読みづらくなる事があります。
その場合は同じくスタイルシートの変更で対応します。
------------------------------
h1 a:link { color: #fff; text-decoration: none;}
h1 a:visited { color: #fff; text-decoration: none;}
h1 a:hover { color: #fff; text-decoration: underline;}
h1 a:active { color: #fff; text-decoration: none;}

h2 {
color: #b6b6b6;
margin: 0;
padding: 10px;
font-size: 120%;
text-align: right;
}
------------------------------
カラーコードについては画像編集ソフトで探すか下記サイトなどが参考になります。
http://www.finitojapan.com/cltable.html
http://www.wanichan.com/web/resources/color.html

細かい説明は省いてますので気になる事がありましたら再度ご質問下さい。

れん #X.Av9vec | URL | 2009/04/02 15:23 * edit *

No title

れん様。
ご丁寧にありがとうございました。
とっても参考になりました!!
ありがとうございます。
これからちょっとやっとみようと思います。

美夜 #TUzGlKWc | URL | 2009/04/02 16:48 * edit *

No title

今から 新しいブログを書こうと こちらのテンプレをしようさせていただきたいのですが
写真や アイコンなどの画像を 記事内に貼り付けると
グレーの線で囲まれてしまうのですが
この枠線を消す方法があれば 教えていただきたいのですが

お時間のあるときで結構ですので
よろしくお願いいたします ○┓ペコリ

Lee #foei3Nxw | URL | 2009/04/07 15:47 * edit *

Leeさんへ

こんにちは。
テンプレートをお使い頂きありがとうございます。

スタイルシートの編集から赤字部分を削除してください。
------------------------------
.entrytext img {
margin: 3px;
padding: 2px 2px 4px;
background: #fff;
border: 1px solid #c1bfad;

}
------------------------------

れん #X.Av9vec | URL | 2009/04/08 16:13 * edit *

カラムについて質問です

れん様はじめましてREIと申します
共有テンプレート・fb02_3c を使用させて頂いてます
お忙しいとは思いますが質問の返答を宜しくお願い致します

質問:3カラムで作成されているのですがそれを2カラムに
    変更することは可能でしょうか?
    出来れば、サイドバーを左だけで統一したいのですが    可能でしたら、ご返答お願いします。

REI #- | URL | 2009/04/23 20:31 * edit *

REIさんへ

テンプレートをお使い頂きありがとうございます。

2カラム化はさほど難しくないので作りましたがhtmlとcssを入れ替える事になります。
記事にhtmlとcssを置きましたのでコピー&ペーストしてお使い下さい。
今お使いのテンプレートの複製を取り、そこにコピー&ペーストされると良いでしょう。

カスタマイズされていると面倒だとは思いますがご理解下さい。

それと多分大丈夫だとは思いますが何かありましたらご連絡下さい。

れん #X.Av9vec | URL | 2009/04/23 22:14 * edit *

有難うございました

ご返答有難うございましたm(__)m
早速カスタマイズさせて頂きました。
(デザインがとっても素敵で尊敬しちゃいます。)
お忙しいのにすみませんでした。


REI #- | URL | 2009/04/23 22:34 * edit *

こんばんは、はじめまして。
この度「fb02_3c」を使わせて頂きました。
シンプルかつオシャレでとても気に入ってます。

ですが一つだけ分からない事がありまして・・・。
記事が表示されている部分なのですが「-- read more」をクリックし追記部分を表示させると下にありました「go page top」の位置だけが変わらず表示されたままで記事に覆いかぶさって部分的に見えなくなってしまいます。
解決方法があれば教えて頂きたいのですがいかがでしょうか?

説明が下手で申し訳ありません。

マヴェ #mQop/nM. | URL | 2009/06/27 00:58 * edit *

マヴェさんへ

テンプレートをお使い頂きありがとうございます。

スタイルシートの編集から赤字部分を追加して下さい。
------------------------------
.entryblock {
width: 100%;
margin: 13px 0 0;
padding: 0;
border: 1px solid #c1bfad;
position: relative;
}
------------------------------
普段追記を使わないので確認不足でした。
共有の方もいずれ修正したいと思います。

ちなみにブラウザがIE6ですとこれでもうまく動作しないと思います。
その場合IEのバージョンを上げて下さい。

れん #X.Av9vec | URL | 2009/06/27 11:44 * edit *

返答ありがとうございます。
バッチリ改善されました!!


マヴェ #mQop/nM. | URL | 2009/06/27 15:23 * edit *

はじめまして、ICDIと申します。
分からない事があって、コメントいたしました。

ブログを書いてる時に、表を入れろうと思いまして
下記の様なものを記事の文中に書いてるんですけど


<table border="1"><tr><td>
ここに、画像や文字をいれてます。

</td><td>
同上

</td></tr><tr><td>
同上

</td><td>
同上

</td></tr></table>

こう言う風にやると、画像の周りに青い枠が入るのですが、なぜでしょうか?
ちなみに、この青い枠はクリックすると、紫に変わります。

もともと、囲まれていたグレーの枠は、このテンプレのコメントでLeeさんが質問されてた要領で、消してます。

ただ、こう言う風になるのは、IE(7と8で確認してます)で見る時になります。

尚、googleのchromeでは、この枠は表示されません。
その他のブラウザでは確認はしていません。

お忙しい所、申し訳ございませんが回答よろしくお願いします。



ICDI #- | URL | 2009/08/17 19:19 * edit *

ICDIさんへ

テンプレートをお使い頂きありがとうございます。

スタイルシートの編集から下記の設定を以下の様にして下さい。
(赤字削除・青字変更)
------------------------------
.entrytext img {
margin: 3px;
padding: 2px 2px 4px;
background: #fff;
border: none;
}
------------------------------

れん #X.Av9vec | URL | 2009/08/17 23:50 * edit *

お忙しい中、素早いご回答ありがとうございました。
お陰さまで、枠を消すことができました。

ICDI #- | URL | 2009/08/18 19:36 * edit *

何度も、すみません。

この質問に関しては、お時間がある時でぜんぜんかまわないのですが、

こちらのサイトに↓ http://naturalbreeze.cside.com/flash/menu/menu2.index.html

あるような、メニューつきの画像?をブログに設置することはできるのでしょうか?

ちなみに、こういった画像にメニューがついた、テンプレートの作成のご予定とかは、ありませんか?

くだらない、質問、失礼しました。







ICDI #- | URL | 2009/08/18 20:18 * edit *

ICDIさんへ

メニューというのは参考urlのflashコンテンツに使われているメニューの事ですか?
簡単なものならhtmlとスタイルシートのみで実装できます。
それ以外にもJavascriptと呼ばれるモノを使っても可能です。

参考urlがflashコンテンツを扱ってるサイトなので画像とセットになってますが、htmlとスタイルシート(もしくはJavascript併用)であれば画像とメニューは別々の設定になります。

例えば私のテンプレートだと最近のモノでは例外なく
Admin Newentry Upload Allarchives
を付けてます。
これは文字で設定してますが、画像に置き換えればよりメニューらしくなると思います。
ボタンを触るとイメージが変わる、いわゆるロールオーバーさせたり前述のJavascriptを使えばより洗練されたアクションを見せる事が出来ると思います。
参考urlを拝見する限りでは、そういったモノをイメージされてるのではないでしょうか。
まずは「メニュー スタイルシート」や「タブメニュー スタイルシート」などでネット検索し参考になるサイトを見つけると良いと思います。

私がテンプレートに付けてるメニューは補助的なモノなのでそこまで凝る事はないと思います。

れん #X.Av9vec | URL | 2009/08/18 23:54 * edit *

たびたび、すみません。

テンプレート上部のカレンダーの部分とか、記事のタイトル、カテゴリ、プロフィール等に使われてるメニューバー?と言うんでしょうか、灰色の枠で囲ってある部分なんですが、これを例えば

こんなやつ→ http://blog-imgs-30.fc2.com/i/c/d/icdi777/menubtn06-010.jpg

に変えるにはどこをいじればよろしいですか?

大変、めんどくさい質問で申し訳ないのですが、よろしくお願いします。

ICDI #- | URL | 2009/08/22 19:55 * edit *

ICDIさんへ

スタイルシートの編集で
------------------------------
h4 {
padding: 1px 5px;
font-size: 100%;
font-weight: normal;
color: #666;
background: #eceadc url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fb02-00.gif) no-repeat 99% 50%;
}



h4 {
padding: 1px 5px;
font-size: 100%;
font-weight: normal;
color: #666;
background: url(画像アドレス);
}
------------------------------
と変更して下さい。
使う画像によってはfont-colorやmargin、paddingなどを変更する必要があると思います。
タグについてはお調べ下さい。

れん #X.Av9vec | URL | 2009/08/23 15:36 * edit *

はじめまして!

テンプレートに一目ぼれしました!

是非使用させて頂きたいと思うのですが
今まで使っていたテンプレートの記事の幅が475だったため
それに合わせて画像を張り付けているので
こちらのテンプレートを使用させてもらうと
過去記事全ての写真が枠からはみ出してしまう状態になります。

記事部分、全体の幅を広くする事は可能でしょうか?

html・cssの知識が少ないため解決できずにおります。
お時間がある時でいいので教えて頂ければ
ありがたいです┌〇ペコリ

メリー #- | URL | 2009/09/06 19:54 * edit *

メリーさんへ

テンプレートをお使い頂きありがとうございます。

スタイルシートの編集から以下のIDクラスにあるwidthを変更して下さい。
#container 980px
#baseBlock 960px
#baseRight 750px
#mainBlock 540px
多少余裕を持たせた設定にしましたので後はお好みで調節して下さい。

タイトル画像も変更されるのであれば#headBlockを変更して下さい。

れん #X.Av9vec | URL | 2009/09/07 13:14 * edit *

ありがとうございました!

迅速な対応ありがとうございました┌〇ペコリ

今現在は別のテンプレートを使用しており、
れん様のテンプレートを表示させて頂いていない状態なので
URLを載せずに質問で申し訳ありませんでした。

もう1点ほどお伺いしたい点があります。


配布されているテンプレートには
記事上部のフリーエリア(れん様のBLOGでいう「TOPIC」
の部分がありませんが、それを表示させる事は可能でしょうか?

また、個人的に、記事上部のフリーエリアを
現在の自分のBLOGと同じように3つほど表示させたいのですが
それは可能ですか?

現在のBLOGでいう所の
「今月の使用口座」「MT4関連記事」「今月の成績」
この3つが現在はフリーエリアでの表示になっていて
それをれん様のテンプレートでも同じように表示したいと
思っているのですが・・・

(画像の下に2つのフリーエリアと記事上部に1つのフリーエリア)


お手数をおかけして申し訳ありません。
ゆっくりカスタマイズしてから公開しようと思っておりますので
お手隙の時で構いません┌〇ペコリ

よろしくお願いします。


メリー #- | URL | 2009/09/08 02:20 * edit *

メリーさんへ

urlが無いと回答しない、という事ではないのであまり気にしないで下さい。

本題ですがプラグインカテゴリ3を使って頂ければ記事上部に表示させる事が出来ます。
プラグインカテゴリ3にフリーエリアを追加し、そこに内容を書きます。
プラグインで管理しますので(基本的に)htmlやcssを触る必要が無く簡単だと思います。
公式マニュアルに詳しく載ってますので参考にして下さい。
http://fc2blogmanual.blog60.fc2.com/blog-entry-57.html

この記事にあるテンプレート画像をクリックするとプレビュー出来ますのでTOPICがどの様に表示されるかも参考になると思います。

れん #X.Av9vec | URL | 2009/09/08 20:12 * edit *

こんばんわ!

先日はご丁寧な回答大変ありがとうございました^^
その後とても快適にBLOGを利用させて頂いております。
大変感謝しております。


たびたびの質問で申し訳ありません。
いろいろといじってみたのですが、2つほどわからない点が
あり、質問させて頂きます。
お手隙の時で構いませんのでよろしくおねがいします。


①コメント欄を、追記同様折りたたみ方式にする方法

②現在はコメント欄を開くと、コメント記入のところにLINKが飛ぶようになっていて、その前の人までが書いたコメントを読むためにはスクロールでさかのぼって見るというスタイルになっているかと思うのですが、
開くと1番最初にコメントをくれた人のところから表示するようにはできますでしょうか?

ご迷惑をおかけしますが、よろしくお願いします。

メリー #- | URL | 2009/10/09 21:17 * edit *

メリーさんへ

コメントの折りたたみとは例えばウチのテンプレートではdeepblue01-2cの様なものでしょうか?
http://flaw.blog80.fc2.com/?template=deepblue01-2c&index
これなら実装は出来ますが複数ブラウザでのテストとデザインの兼ね合いもあるので直ぐには回答出来ません。
単純に組み込んでみたいという事であれば余所様のブログで申し訳ないのですが、解説しているところがあるのでそちらを参考にして下さい。
http://rgrg.blog61.fc2.com/blog-entry-171.html

コメントの個別リンクに関してはコメントにはそれぞれ個別の番号が割り当てられますが、コメントフォームへの移動リンクは一つの変数しか割り当てられないので特定コメントへのリンクは難しいと思います。
あるいはスクリプトで何とか出来るかも知れませんが専門外なので、現状ではコメントプラグインで個別コメントへ飛ぶのが一番かと思います。

れん #X.Av9vec | URL | 2009/10/10 00:27 * edit *

はじめまして!

やっと素敵なテンプレートにめぐり合えました。
PC&ブログ初心者で、わからないことがあります。
お時間のある時にご回答いただけると嬉しいです。

画像を違うのに貼りかえる方法は、他の方の質問でわかりましたが、
例えば私がマイピクチャに入れている写真を画像部分に入れるにはどのようにしたら良いのでしょうか?
マイピクチャの写真は「http://~」で始まってないので、貼り付けることができません。
初歩的なことで恥ずかしいのですが教えていただけると嬉しいです。

kayonar #- | URL | 2009/10/17 23:37 * edit *

kayonarさんへ

PC内にある素材を使うにはサーバーにアップロードする必要があります。
詳しくは公式マニュアルを参考にして下さい。
http://fc2blogmanual.blog60.fc2.com/blog-entry-27.html
素材のurlはアップロードした画像をクリックすればアドレスバーに表示されると思います。

それと申し訳ありませんがブログの使い方等はサポートしませんので予めご理解下さい。

れん #X.Av9vec | URL | 2009/10/18 13:17 * edit *

ありがとうございました

すみません。
ありがとうございました。
もう少し勉強します。

kayonar #- | URL | 2009/10/18 14:10 * edit *

いつもテンプレ使わせて頂いてます。
このテンプレートの幅を広くして使わせて頂いてます
(他の方が質問なさってたのを拝借しました。)

で、加えてなんですけど2カラムにする事はできますでしょうか(´ω`;)
(できれば左サイドがいいのですが。)
同質問を過去にされた方もいらっしゃったみたいなのですが、
css等削除されたみたいだったので…(・∀・;)

お手数ですがご検討いただけると幸いです(・∀・;;)

鶴陸 #ou8bOY3s | URL | 2009/10/27 22:27 * edit *

鶴陸さんへ

テンプレートをお使い頂きありがとうございます。

申し訳ありませんが現在のところ2カラムのソース掲載は見合わせています。
いずれ共有登録する方向で考えていますが何卒ご理解ください。

れん #X.Av9vec | URL | 2009/10/28 19:04 * edit *

こんにちは

本日素敵なテンプレートを見つけ一目惚れし、
さっそくダウンロードさせていただきました。
現在使っているテンプレートが少し崩れているので、
こちらを使わせて頂ければ嬉しいです。
使わせて頂く前にひとつお願いがございます。
タイトルの画像を左に寄せたいのですが、
どうしたらよいか教えて頂きたいです。
お忙しい中申し訳ございませんが、
どうぞ宜しくお願い致しますm(__)m

lip* #mQop/nM. | URL | 2010/02/05 15:55 * edit *

lip*さんへ

テンプレートをお使い頂きありがとうございます。

画像を左に寄せるにはカラムの変更という事になります。

スタイルシートの編集から4つのクラスにあるfloatの指定をrightはleft、leftはrightに変更します。

※スタイルシートより抜粋、変更後イメージ。
------------------------------
#baseRight {
width: 650px;
float: left;
}

#mainblock {
float: right;
width: 440px;
margin: 0;
}

#left {
float: right;
width: 200px;
}

#right {
float: left;
width: 200px;
}
------------------------------

れん #X.Av9vec | URL | 2010/02/05 17:45 * edit *

れん様
すばやいご対応に感謝致します。
昨日からあれこれいじり、
たった今設置を完了致しました。
素敵に新装できてとても嬉しいです♪
これからもどうぞ宜しくお願い致しますm(__)m

lip* #mQop/nM. | URL | 2010/02/06 14:19 * edit *

カテゴリの移動

こんにちは。
本日からブログを立ち上げる際、こちらのデザインが
素晴らしく一目惚れしてしまいました。

デザイン等、申し分が無いのですが、左下にあります「カテゴリ」の
一覧を右サイドに移動したいのですが可能でしょうか。
もし可能でしたら、どの部分を設定するばよいのか、お手数ですが
ご教授頂けないでしょうか。

お手数ですが宜しくお願い致します。m(_ _)m

r246c #- | URL | 2011/03/01 17:50 * edit *

大ボケしていました。。。

一つ上の質問の件、FC2の機能としてあるんですね。
大ボケしてしまいました。失礼致しました。m(_ _)m

また何かありましたら宜しくお願い致します。
本日より、このテンプレを一生使うと思います。
ありがとうございました。

r246c #- | URL | 2011/03/01 18:06 * edit *

全体幅・記事幅・横カレンダーの変更

素敵なテンプレで一目で使わせていただいています♪

さて、全体幅・記事幅の変更の事は既出のようですが、
#container 980px
#baseBlock 960px
#baseRight 750px
#mainBlock 540px
のIDクラスがみつけられません><

全体幅のみ下記のところで変更が出来ましたが、
記事幅変更箇所はどちらになりますでしょうか?
#wrap {
width: 1000px;

●ページ上部の横カレンダーを表示しない方法も、教えていただけますでしょうか。

お忙しい中申し訳ありませんが、よろしくお願いいたします。

みお #OmEQ3VCk | URL | 2012/06/21 06:19 * edit *

みおさんへ

テンプレートをお使い頂きありがとうございます。

全幅ですがテンプレートの改訂時に構造やクラス名を変更してますので、お手数ですが下記の新しい方法をお試しください。

#wrap、#contentsblock、#content、.header各クラスのwidthに広げたい分の数値を足してください。
加えて#leftの一部も修正します。
例えば200px広げるならスタイルシートを以下のように変更します。
------------------------------
#wrap {
width: 1060px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
}

#contentsblock {
width: 850px;
float: left;
margin: 0 0 0 210px;
}

#content {
float: left;
width: 640px;
margin: 0;
}

.header {
width: 846px;
height: 180px;
margin: 0 0 10px;
padding: 0;
border: 2px #c1bfad solid;
background: url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fb02-title.jpg);
}

#left {
float: left;
width: 200px;
margin: -224px 0 0 -100%;
}
------------------------------

記事幅を変更すると「go page top」の部分がズレますので必要に応じて変更してください。
------------------------------
.pagetop {
position: relative;
bottom: -0.9em;
left: 78%;
font-size: 100%;
padding: 0 5px;
color: #afafaf;
background: #fff;
border: 1px solid #afafaf;
}
------------------------------


横カレンダーの削除はhtmlから下記部分を削除します。
------------------------------
<div class="yoko">
<span class="yokocal"><a href="<%prev_month_link>"><%prev_month>«</a></span><!--calender2--><span class="yokocal"><%days>.</span><!--/calender2--><span class="yokocal"><a href="<%next_month_link>">»<%next_month></a></span>
</div>
------------------------------

スタイルシートの記述も不要になりますので下記部分を削除します。
------------------------------
.yoko {
text-align: center;
font-size: 100%;
margin: 0 0 10px;
color: #3c3c3c;
background: #eceadc;
}

.yokocal {
color: #ccc;
display: inline;
padding: 0 2px;
}
------------------------------

れん #X.Av9vec | URL | 2012/06/21 20:22 * edit *

記事の最後に同じ内容を表示させたい

とてもシンプルで素敵なテンプレートありがとうございます。
一目で気に入ってしまいました。

質問は毎回記事の下へランキングの画像やリンクを入れたいのです。
場所は記事と拍手アイコンの間に入れようとしています。
見よう見まねで入れて表示はされているのですが、どうも自信がありません。
よろしくお願いします。

yozo #- | URL | 2012/09/06 10:13 * edit *

yozoさんへ

テンプレートをお使い頂きありがとうございます。

ご質問の件は
・記事本文
・ランキングタグ
・拍手
の順にしたいという事ですが私の知る限りでは出来ません。

yozoさんのブログを見る限り一見出来ているように見えますが、個別画面では位置が違うのがお分かりかと思います。
これはブログ拍手と記事下広告の位置が勝手に決まっている事が原因で、これはHTMLとCSSでは対応できません。

恐らく今挿入されてる位置は<!--more-->の上だと思うのですが、これだと個別画面に飛んだときの位置が変わってくるため統一性がなく(見栄えが悪く)なりあまりおすすめ出来ません。
毎回記事下にタグを貼る場合は<!--/more-->の下が一般的だとは思います。

もしかするとscriptを使えば出来るかも知れませんが私にはそちらの知識はないため、申し訳ありませんがこの件に関してはお役に立てそうにありません。

れん #X.Av9vec | URL | 2012/09/06 22:10 * edit *

れん様

 素早い対応ありがとうございます。
 確かに<!--more-->の上へ入れました。
 <!--/more-->の下で確認してみます。
 ありがとうございました。

B級おやじ #- | URL | 2012/09/07 14:13 * edit *

「ブログ名の色の変更」

こんばんわ れん様 6月はfb02_3cを使わせて頂く
予定です いつも有難うございます。

質問はTOP画像にあるブログ名の色の変更なのですが
場所がわかりませんので宜しくお願い致します。

モズライト #5zjWDM/s | URL | 2013/05/27 18:32 * edit *

モズライトさんへ

テンプレートをお使い頂きありがとうございます。

ブログタイトルはh1リンク色の赤字部分を変更して下さい。
画像変更などでブログ説明文が読みづらくなる場合はh2の文字色を変更して下さい。
------------------------------
h1 {
font-size: 160%;
margin: 0;
padding: 10px;
font-weight: bold;
text-align: right;
}

h1 a:link, h1 a:visited { color: #f1f1f1; text-decoration: none;}
h1 a:hover, h1 a:active { color: #fdfdfd; text-decoration: underline;}

h2 {
color: #efefef;
margin: 0;
padding: 10px;
font-size: 120%;
text-align: right;
}
------------------------------

れん #X.Av9vec | URL | 2013/05/28 18:26 * edit *

れん様 色を変更できました 今はいいのですが
今後 画像を変更した時に困らないようにと
お聞きしました お忙しい中有難うございます。

モズライト #5zjWDM/s | URL | 2013/05/29 10:17 * edit *

▲Page top

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