ブログテンプレート『summer sky』『circle wood』の2カラム版
2011.09.20 08:01｜ブログテンプレ｜
▲FC2用ブログテンプレート：27_summersky
▲FC2用ブログテンプレート：23_circlewood_2c
リクエストのあった3カラムのテンプレの2カラム版を共有しました！
すでにダウンロードしてくださった方、ありがとうございます。
3カラム版もそのまま共有になっていますので、お好きな方をどうぞ。
簡単にカラム違いにできるタイプとそうでないものがありますので、
ご要望いただいても対応できない場合もあります。
ご了承くださいねm(_ _)m
- 関連記事
-
- ブログテンプレート『woody yellow』『woody green』
- ブログテンプレート『summer sky』『circle wood』の2カラム版
- ブログテンプレート『summer sky』
タグ：2カラム（左）
教えてください！
うららんさん、はじめまして。
27_summerskyをDLし、写真を差し替えて使わせていただいております。
一つ分からないところがありコメントさせていただきました。
差し替えた写真が人物の集合写真なので、顔部分にブログタイトルがカブってしまいます。
ブログタイトルを下に下げるには何処を変更すれば宜しいのでしょうか？
また、ブログタイトルの文字も少し大きくしたいです。
お忙しいところ申し訳ございませんが、この初心者にレクチャーいただけたら助かります。
27_summerskyをDLし、写真を差し替えて使わせていただいております。
一つ分からないところがありコメントさせていただきました。
差し替えた写真が人物の集合写真なので、顔部分にブログタイトルがカブってしまいます。
ブログタイトルを下に下げるには何処を変更すれば宜しいのでしょうか？
また、ブログタイトルの文字も少し大きくしたいです。
お忙しいところ申し訳ございませんが、この初心者にレクチャーいただけたら助かります。
Re: 教えてください！
nene 様
はじめまして。
ダウンロードありがとうございます。
さっそくですが、お問い合わせのブログタイトルの位置、文字サイズの変更についてお答えしますね。
スタイルシートの下記のところを変更してください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0; ←上からの距離。下げたい場合は増やしてください。
margin-bottom: 5px;
font-size: 200%; ←文字の大きさ。数字を増やしてください。他の単位でも可。
line-height: 1em;
font-weight: normal;
color: #ededed;
}
写真に合わせて数値をちょっとずつ調整してみてください。
よろしくお願いいたします。
はじめまして。
ダウンロードありがとうございます。
さっそくですが、お問い合わせのブログタイトルの位置、文字サイズの変更についてお答えしますね。
スタイルシートの下記のところを変更してください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0; ←上からの距離。下げたい場合は増やしてください。
margin-bottom: 5px;
font-size: 200%; ←文字の大きさ。数字を増やしてください。他の単位でも可。
line-height: 1em;
font-weight: normal;
color: #ededed;
}
写真に合わせて数値をちょっとずつ調整してみてください。
よろしくお願いいたします。
ありがとうございました！
早々のご回答ありがとうございました。
おかげでキレイに変更できました！
うららんさんの丁寧なご回答に感謝です。
大切に大切に使わせていただきますね＾＾
おかげでキレイに変更できました！
うららんさんの丁寧なご回答に感謝です。
大切に大切に使わせていただきますね＾＾
No title
はじめまして。いつもお世話になっています。
23_circlewoodを使わせて頂いています。すごく気に入っています♪
それで、本当に初心者な質問で申し訳ないのですが、教えてください。
「本文」となっているところを「コメント」に替えたいんですが、どうすればよいのですか？友だちもPCオンチが多く、コメント欄がわかんなくて、携帯にメールしてくるもので・・・。
他の方が質問してあったらすみません。
２カラム版にしようかなぁ・・・と思ったのですが、やっぱり３カラムのほうが好きでした＊
よろしくお願いします。
23_circlewoodを使わせて頂いています。すごく気に入っています♪
それで、本当に初心者な質問で申し訳ないのですが、教えてください。
「本文」となっているところを「コメント」に替えたいんですが、どうすればよいのですか？友だちもPCオンチが多く、コメント欄がわかんなくて、携帯にメールしてくるもので・・・。
他の方が質問してあったらすみません。
２カラム版にしようかなぁ・・・と思ったのですが、やっぱり３カラムのほうが好きでした＊
よろしくお願いします。
「コメント」の置き換わりについて
アリンコさん 様
はじめまして！
コメントありがとうございます。
お問い合わせの件ですが、以前3カラムのほうに同じお問い合わせがありました。
そのときも今回もテンプレートをもう一度確認したのですが、間違いが見当たらず、ダウンロード時になにか置き換わってしまう現象なのかと思います。
お手数ですが、下記のように上書きしていただくことで解消しますのでやってみてくださいね。
HTML編集で
＜！ーーメインコンテンツ／エントリーここからーー＞から
＜！ーーメインコンテンツ／エントリーここまでーー＞の間の次の記述を探してください。
<div class="entry_footer">
Category: <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a>
<!--allow_comment-->
<a href="<%topentry_link>#cm" title="">Comment: <%topentry_comment_num></a>
<!--/allow_comment-->
<!--deny_comment--><!--/deny_comment-->
<!--allow_tb-->
<a href="<%topentry_link>#tb" title="">Trackback: <%topentry_tb_num></a>
<!--/allow_tb-->
<!--deny_tb--><!--/deny_tb-->
</div>
以前お問い合わせ下さった方は、<%template_body>になっていると教えてくれました。
アリンコさん（さん）もそうですか？
不思議です…。
よろしくお願いいたします。
はじめまして！
コメントありがとうございます。
お問い合わせの件ですが、以前3カラムのほうに同じお問い合わせがありました。
そのときも今回もテンプレートをもう一度確認したのですが、間違いが見当たらず、ダウンロード時になにか置き換わってしまう現象なのかと思います。
お手数ですが、下記のように上書きしていただくことで解消しますのでやってみてくださいね。
HTML編集で
＜！ーーメインコンテンツ／エントリーここからーー＞から
＜！ーーメインコンテンツ／エントリーここまでーー＞の間の次の記述を探してください。
<div class="entry_footer">
Category: <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a>
<!--allow_comment-->
<a href="<%topentry_link>#cm" title="">Comment: <%topentry_comment_num></a>
<!--/allow_comment-->
<!--deny_comment--><!--/deny_comment-->
<!--allow_tb-->
<a href="<%topentry_link>#tb" title="">Trackback: <%topentry_tb_num></a>
<!--/allow_tb-->
<!--deny_tb--><!--/deny_tb-->
</div>
以前お問い合わせ下さった方は、<%template_body>になっていると教えてくれました。
アリンコさん（さん）もそうですか？
不思議です…。
よろしくお願いいたします。
できました！
お返事ありがとうございました。
PCおんちのわたしも説明どうりやってみて、どうにか「コメント」表示にかえる事ができました！
以前他の方もお問い合わせがあったのですね・・・スミマセン
やはりその方とおんなじです。そこも訂正して「出来た!」と思ったら、「コメント」の後ろに数字が表示されなかったので、ずっと確認していったら、ところどころに「＆nbspi」という文字が５か所くらい入っていました。それを消去したら出来ました。（間違ってないですよねぇ・・？）
また解らないことが出てきたら教えてください。。。ご迷惑おかけします
ありがとうございました
PCおんちのわたしも説明どうりやってみて、どうにか「コメント」表示にかえる事ができました！
以前他の方もお問い合わせがあったのですね・・・スミマセン
やはりその方とおんなじです。そこも訂正して「出来た!」と思ったら、「コメント」の後ろに数字が表示されなかったので、ずっと確認していったら、ところどころに「＆nbspi」という文字が５か所くらい入っていました。それを消去したら出来ました。（間違ってないですよねぇ・・？）
また解らないことが出てきたら教えてください。。。ご迷惑おかけします
ありがとうございました
おはようございます♫
うららんさま
テンプレートをお借りして写真を色々と
代えさせて貰って楽しんでおいあす。
有難うございましたm(__)m
左サイドに貼り付けたキラキラを外したいの
ですが、入れた時にどうして入れたか忘れたので
教えて下さい。
あなたに聞くのも、おかしいのでしようが。
お願いします。
テンプレートをお借りして写真を色々と
代えさせて貰って楽しんでおいあす。
有難うございましたm(__)m
左サイドに貼り付けたキラキラを外したいの
ですが、入れた時にどうして入れたか忘れたので
教えて下さい。
あなたに聞くのも、おかしいのでしようが。
お願いします。
Re: 追伸
啓 様
コメント、お問い合わせありがとうございます。
返信が遅くなり申し訳ありません。
すでに解決されたということでよかったです！
ご報告ありがとうございましたm(_ _)m
今後ともよろしくお願いいたします。
コメント、お問い合わせありがとうございます。
返信が遅くなり申し訳ありません。
すでに解決されたということでよかったです！
ご報告ありがとうございましたm(_ _)m
今後ともよろしくお願いいたします。
カラムの左右を変更したいです
こんにちは。初めまして。
素敵なテンプレートなので少し前からお借りしています。
そこで、質問なのですが、
カラムの左右を反対にすることは可能でしょうか？
出来るようでしたら、教えて頂けないでしょうか？
よろしくお願いします。
素敵なテンプレートなので少し前からお借りしています。
そこで、質問なのですが、
カラムの左右を反対にすることは可能でしょうか？
出来るようでしたら、教えて頂けないでしょうか？
よろしくお願いします。
Re: カラムの左右を変更したいです
こんばんは。ご利用ありがとうございます♪
「summer sky」「circle wood」のどちらかがわからなかったのですが、
どちらにしてもスタイルシート編集で簡単に変更できます。
スタイルシート編集のレイアウトのところで
div#sidemenuとdiv#mainのfloatの左右を書き換えてくださいね。
flaot: right;はleftへ。leftはrightへ。
「summer sky」の場合はカラムの間に点線が設定してありますので、
div#mainのborder-leftをborder-rightにしてください。
スタイルシートの基本はご存知だと思ってお返事しています。
もしわからなければ、またお気軽におといあわせください。
よろしくお願いいたします。
「summer sky」「circle wood」のどちらかがわからなかったのですが、
どちらにしてもスタイルシート編集で簡単に変更できます。
スタイルシート編集のレイアウトのところで
div#sidemenuとdiv#mainのfloatの左右を書き換えてくださいね。
flaot: right;はleftへ。leftはrightへ。
「summer sky」の場合はカラムの間に点線が設定してありますので、
div#mainのborder-leftをborder-rightにしてください。
スタイルシートの基本はご存知だと思ってお返事しています。
もしわからなければ、またお気軽におといあわせください。
よろしくお願いいたします。
ありがとうございます！
さっそく教えて頂いたように設定を変更しましたところ、
無事左右を逆にすることができました！
丁寧に教えて頂いてありがとうございます。
右側の頭を、上の画像の右側にそろえたいのですが、
可能でしょうか？
説明がへたですみません。
URLを登録したので、ブログを見て頂くと伝わるかな・・・
summer skyを使わせて頂いています。
お忙しいところ更に質問をしてしまってすいません。
よろしくお願いしおます。
無事左右を逆にすることができました！
丁寧に教えて頂いてありがとうございます。
右側の頭を、上の画像の右側にそろえたいのですが、
可能でしょうか？
説明がへたですみません。
URLを登録したので、ブログを見て頂くと伝わるかな・・・
summer skyを使わせて頂いています。
お忙しいところ更に質問をしてしまってすいません。
よろしくお願いしおます。
すみません！
ごめんなさい。間違えました。
上の画像の左側にそろえたい。でした。
右と書いてました。訂正させてください。
上の画像の左側にそろえたい。でした。
右と書いてました。訂正させてください。
Re: すみません！
donna 様
こんにちは〜。お問い合わせありがとうございます。
簡単に左右の入れ替えについてお答えしていましましたが、
左側が確かに気になりますね。すみません。。。
このスペースは記事のタイトル＆日付、本文、フッターをそれぞれに左マージンを設けていて、
それぞれを修正する必要があります。
スタイルシートの
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
のところで、以下の箇所を変更してみてくださいね。
h2.kizi_title {
margin: 0 20px 5px 0; ←ココ
font-size: 120%;
color: #6088b9;
padding: 10px 5px 5px;
line-height:1.2em;
border-bottom: solid 1px #aaaaaa;
}
（略）
div.Date {
margin: 0 25px 0 5px; ←ココ
font-weight: bold;
}
div.entry_body {
font-size: 100%;
margin: 0 25px 0 5px; ←ココ
line-height: 2em;
}
（略）
div.entry_footer {
margin: 10px 20px 10px 0; ←ココ
padding: 5px 5px 0;
font-size: 90%;
font-weight: bold;
border-top: solid 1px #aaaaaa;
}
donnaさんのブログ、素敵ですね♪
よろしくお願いいたします。
こんにちは〜。お問い合わせありがとうございます。
簡単に左右の入れ替えについてお答えしていましましたが、
左側が確かに気になりますね。すみません。。。
このスペースは記事のタイトル＆日付、本文、フッターをそれぞれに左マージンを設けていて、
それぞれを修正する必要があります。
スタイルシートの
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
のところで、以下の箇所を変更してみてくださいね。
h2.kizi_title {
margin: 0 20px 5px 0; ←ココ
font-size: 120%;
color: #6088b9;
padding: 10px 5px 5px;
line-height:1.2em;
border-bottom: solid 1px #aaaaaa;
}
（略）
div.Date {
margin: 0 25px 0 5px; ←ココ
font-weight: bold;
}
div.entry_body {
font-size: 100%;
margin: 0 25px 0 5px; ←ココ
line-height: 2em;
}
（略）
div.entry_footer {
margin: 10px 20px 10px 0; ←ココ
padding: 5px 5px 0;
font-size: 90%;
font-weight: bold;
border-top: solid 1px #aaaaaa;
}
donnaさんのブログ、素敵ですね♪
よろしくお願いいたします。
ありがとうございます！
お忙しいところありがとうございます。
教えて頂いたように変更しましたら、とてもいい感じになりました！
本当にありがとうございました！
教えて頂いたように変更しましたら、とてもいい感じになりました！
本当にありがとうございました！
質問です
初めまして。
イメージにぴったりだったので、「summer sky」を使わせて頂きました。
有り難うございます。
質問が2点あります。
①ブログタイトル以外の文字をゴシック体に変更するのはどうしたら良いでしょうか？
②プロフィールの下にカテゴリ、その下に検索を持ってきたいのですが、どうしたら良いでしょうか？
お手すきの時にご回答頂けますと助かります。
どうぞよろしくお願いします。
イメージにぴったりだったので、「summer sky」を使わせて頂きました。
有り難うございます。
質問が2点あります。
①ブログタイトル以外の文字をゴシック体に変更するのはどうしたら良いでしょうか？
②プロフィールの下にカテゴリ、その下に検索を持ってきたいのですが、どうしたら良いでしょうか？
お手すきの時にご回答頂けますと助かります。
どうぞよろしくお願いします。
Re: 質問です
aijiro 様
はじめまして。
ご質問ありがとうございました。
お返事が大変遅くなりましたこと、お詫びいたします。
１、まずサイト全体をゴシック系にし、その後、ブログタイトルをお好きなフォントにしてください！
スタイルシート編集です。
/*--------------------------------------------------
基本設定
--------------------------------------------------*/
（略）
body {
background: #ededed;
color: #3e474e;
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro W3','ＭＳ Ｐ明朝','ＭＳ 明朝',serif; ←ココをゴシック系フォントに変更
font-size: 75%;
text-align: left;
overflow:visible;
height: 100%;
}
ブログタイトルは以下の箇所です。
フォントファミリーの記述を追加してください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0;
margin-bottom: 5px;
font-size: 200%;
line-height: 1em;
font-weight: normal;
color: #ededed;
font-family: ; ←ココに追加してください
}
フォントの種類などCSSの基本については調べてみてくださいね。
２、こちらのご質問はテンプレートではなく、FC2のプラグインという機能です。
管理画面左側の設定／プラグインの設定 から並び順を変えてみてください。
以上です。
今後ともよろしくお願いいたします。
はじめまして。
ご質問ありがとうございました。
お返事が大変遅くなりましたこと、お詫びいたします。
１、まずサイト全体をゴシック系にし、その後、ブログタイトルをお好きなフォントにしてください！
スタイルシート編集です。
/*--------------------------------------------------
基本設定
--------------------------------------------------*/
（略）
body {
background: #ededed;
color: #3e474e;
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro W3','ＭＳ Ｐ明朝','ＭＳ 明朝',serif; ←ココをゴシック系フォントに変更
font-size: 75%;
text-align: left;
overflow:visible;
height: 100%;
}
ブログタイトルは以下の箇所です。
フォントファミリーの記述を追加してください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0;
margin-bottom: 5px;
font-size: 200%;
line-height: 1em;
font-weight: normal;
color: #ededed;
font-family: ; ←ココに追加してください
}
フォントの種類などCSSの基本については調べてみてくださいね。
２、こちらのご質問はテンプレートではなく、FC2のプラグインという機能です。
管理画面左側の設定／プラグインの設定 から並び順を変えてみてください。
以上です。
今後ともよろしくお願いいたします。
サブタイトルの色変更は可能でしょうか？
うららんさん こんにちは
いつもお世話になっております。
シンプルで見やすいデザインが気に入ってます。
今までのwhiteblogからsummerskyの写真差し替えに変更して使わせていただいております。が
サブタイトルの色が画像の色とかぶってしまい…読みずらいので
色を変えてみたいと思うのですが。
可能でしょうか。
急ぎませんので お時間のある時に教えてください。
よろしくお願いいたします。
いつもお世話になっております。
シンプルで見やすいデザインが気に入ってます。
今までのwhiteblogからsummerskyの写真差し替えに変更して使わせていただいております。が
サブタイトルの色が画像の色とかぶってしまい…読みずらいので
色を変えてみたいと思うのですが。
可能でしょうか。
急ぎませんので お時間のある時に教えてください。
よろしくお願いいたします。
Re: サブタイトルの色変更は可能でしょうか？
mayu*maman 様
はじめまして。
お返事が大変遅くなりまして申し訳ありません。
タイトル、URL、サイトの説明文の文字色を変更するには、
スタイルシートのヘッダーの部分で、color:のところをお好きなカラーコードに書き換えてください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0;
margin-bottom: 5px;
font-size: 200%;
line-height: 1em;
font-weight: normal;
color: #ededed;
}
div#header h1 a{
color: #ededed;
}
div#header h1 a:hover {
color: #094081;
}
div#header div.url {
color: #094081;
font-family: sans-serif;
font-size: 75%;
letter-spacing: 0.2em;
margin: 0 40px 10px;
}
div#header p {
padding: 4px 0 0;
font-size: 90%;
line-height: 1.1em;
color: #ededed;
display: inline;
border-top: dotted 1px #ededed;
margin: 0 40px;
}
カラーコードについていは検索すると一覧表などで調べることができます。
よろしくお願いいたします。
はじめまして。
お返事が大変遅くなりまして申し訳ありません。
タイトル、URL、サイトの説明文の文字色を変更するには、
スタイルシートのヘッダーの部分で、color:のところをお好きなカラーコードに書き換えてください。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
div#header h1 {
padding: 25px 40px 0;
margin-bottom: 5px;
font-size: 200%;
line-height: 1em;
font-weight: normal;
color: #ededed;
}
div#header h1 a{
color: #ededed;
}
div#header h1 a:hover {
color: #094081;
}
div#header div.url {
color: #094081;
font-family: sans-serif;
font-size: 75%;
letter-spacing: 0.2em;
margin: 0 40px 10px;
}
div#header p {
padding: 4px 0 0;
font-size: 90%;
line-height: 1.1em;
color: #ededed;
display: inline;
border-top: dotted 1px #ededed;
margin: 0 40px;
}
カラーコードについていは検索すると一覧表などで調べることができます。
よろしくお願いいたします。
