ブログテンプレート『clover』『pink pattern』
2012.05.14 13:51｜ブログテンプレ｜
▲FC2ブログ用テンプレート：36_clover
▲FC2ブログ用テンプレート：37_pinkpattern
いつもありがとうございます。
やっと新しいテンプレートができました。
おそろいのスマフォ版も共有しています。
背景のパターンが印象的なテンプレートですが、
以前ブログでもご紹介したiPhoneアプリのカレイドスコープ（万華鏡）で撮った枝葉の写真から加工しました。
あたためすぎて半年ほど経ってしまいました。。。
また、四ツ葉のクローバーを探していたところ、Twitterを通じて画像を提供していただきました。
SAKI様、仲介してくださった穂波 光様、ありがとうございました！
温かいつながりに感動したこと、忘れません！！
この四ツ葉、いわゆるクローバーよりハート形になってます♡
様々な困難に立ち向かっている人に、幸運が訪れるよう願いを込めて。
どちらも左右カラムの入れ替えは簡単にできます。サイドバーの折りたたみメニューも常時表示になります。
必要な方はHTMLやスタイルシートにコメント入れてありますので見てみてくださいね。
グリーンベースでクローバーの代わりにカレンダーを、ピンクベースでクローバーを
といったカスタマイズもできるようコメント入れました。
記事部分はいつものように超シンプル！
読みやすくしたつもりです。
気に入ってくれると嬉しいです。
以前ブログでもご紹介したiPhoneアプリのカレイドスコープ（万華鏡）で撮った枝葉の写真から加工しました。
あたためすぎて半年ほど経ってしまいました。。。
また、四ツ葉のクローバーを探していたところ、Twitterを通じて画像を提供していただきました。
SAKI様、仲介してくださった穂波 光様、ありがとうございました！
温かいつながりに感動したこと、忘れません！！
この四ツ葉、いわゆるクローバーよりハート形になってます♡
様々な困難に立ち向かっている人に、幸運が訪れるよう願いを込めて。
どちらも左右カラムの入れ替えは簡単にできます。サイドバーの折りたたみメニューも常時表示になります。
必要な方はHTMLやスタイルシートにコメント入れてありますので見てみてくださいね。
グリーンベースでクローバーの代わりにカレンダーを、ピンクベースでクローバーを
といったカスタマイズもできるようコメント入れました。
記事部分はいつものように超シンプル！
読みやすくしたつもりです。
気に入ってくれると嬉しいです。
- 関連記事
-
- FC２ブログテンプレート『ferris wheel』
- ブログテンプレート『clover』『pink pattern』
- ブログテンプレート『girl』
No title
初めまして。
いつもうららんさんの作るテンプレートは
シンプルでとても気に入っています。
早速、新しいテンプレートDLさせていただきました。
ひとつ質問があります。
今まで「whiteblog」を使用していたのですが、
「whiteblog」で画像を横並びのレイアウトしていたものが
「clover」に変更すると縦並びに崩れてしまいました。
解決策はございますか？
いつもうららんさんの作るテンプレートは
シンプルでとても気に入っています。
早速、新しいテンプレートDLさせていただきました。
ひとつ質問があります。
今まで「whiteblog」を使用していたのですが、
「whiteblog」で画像を横並びのレイアウトしていたものが
「clover」に変更すると縦並びに崩れてしまいました。
解決策はございますか？
Re: No title
やまりんご 様
はじめまして♪
ダウンロードありがとうございます。
お問い合わせの件ですが、他のことを設定するために、画像をブロック要素（改行される）にしていました。
申し訳ありません。
テンプレを修正しますので再DLしていただくか、
すでに何かカスタマイズをされているようでしたら、
次の記述を削除していただくと直ります。
お手数おかけしますが、よろしくお願いいたします。
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
（略）
ここから↓
div.entry_body img {
display: block; /*ロールオーバー時背景なし*/
}
ここまで↑
はじめまして♪
ダウンロードありがとうございます。
お問い合わせの件ですが、他のことを設定するために、画像をブロック要素（改行される）にしていました。
申し訳ありません。
テンプレを修正しますので再DLしていただくか、
すでに何かカスタマイズをされているようでしたら、
次の記述を削除していただくと直ります。
お手数おかけしますが、よろしくお願いいたします。
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
（略）
ここから↓
div.entry_body img {
display: block; /*ロールオーバー時背景なし*/
}
ここまで↑
鍵付きコメントへのお返事
鍵付きコメントをくださった c... 様
いつもありがとうございます！
嬉しいです♪
コメントの中で、ブログタイトルの文字サイズのことがちらっと書かれていましたね。
タイトルについては、スタイルシートの次のところに記述していますので、
サイズを変更してみてくださいね。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
#header h1 {
margin: 0 0 20px;
font-size: 240%;
line-height: 1em;
font-weight: normal;
background: url(http://blog-imgs-51.fc2.com/u/r/a/uraraka01/36_line.png) repeat-x;
padding: 20px 10px 0;
}
がんばってくださいね！
よろしくお願いいたします。
いつもありがとうございます！
嬉しいです♪
コメントの中で、ブログタイトルの文字サイズのことがちらっと書かれていましたね。
タイトルについては、スタイルシートの次のところに記述していますので、
サイズを変更してみてくださいね。
/*--------------------------------------------------
ヘッダー
--------------------------------------------------*/
#header h1 {
margin: 0 0 20px;
font-size: 240%;
line-height: 1em;
font-weight: normal;
background: url(http://blog-imgs-51.fc2.com/u/r/a/uraraka01/36_line.png) repeat-x;
padding: 20px 10px 0;
}
がんばってくださいね！
よろしくお願いいたします。
No title
こんにちは。
botanicalに引き続き、こちらもお借りしますね。
こちらも素敵なテンプレートですね。
せっかく作っていただいて申し訳ないのですが、twitter、facebookともうひとつ（RRS?)のマークを削除させていただきたいのですが構いませんか？
前回botanicalの時は自分で削除したと思うのですが、方法を忘れてしまいました。
お手数ですが、お時間のあるときにでもご教示ください。
botanicalに引き続き、こちらもお借りしますね。
こちらも素敵なテンプレートですね。
せっかく作っていただいて申し訳ないのですが、twitter、facebookともうひとつ（RRS?)のマークを削除させていただきたいのですが構いませんか？
前回botanicalの時は自分で削除したと思うのですが、方法を忘れてしまいました。
お手数ですが、お時間のあるときにでもご教示ください。
mimosa 様
こんにちは。
コメント＆お問い合わせありがとうございます。
早速ですが、ボタン類をとるには、
HTML編集の後半にある以下の記述を削除してください。
<!--SNSボタンここから-->
<div class="social">
<!--フェイスブック※リンクを設定してください-->
<span id="facebook"><a href="http://www.facebook.com/" title="Facebook"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_facebook.png" alt="フェイスブック" width="40" height="40" /></a></span>
<!--ツイッター※リンクを設定してください-->
<span id="twitter"><a href="http://twitter.com/" title="twitter"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_twitter.png" alt="ツイッター" width="40" height="40" /></a></span>
<!--RSS-->
<span id="rss"><a href="<%url>?xml" title="RSS購読"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_rss.png" alt="RSS" width="40" height="40" /></a></span>
</div>
<!--SNSボタンここまで-->
cloverとpink patternのどちらかがわからないのですが、
サイドバーのレイアウトが多少崩れるかもしれません。
（このテンプレでは積極的に削除を推奨していないのですみません）
その際は調整してくださいね。
今後ともよろしくお願いいたします。
コメント＆お問い合わせありがとうございます。
早速ですが、ボタン類をとるには、
HTML編集の後半にある以下の記述を削除してください。
<!--SNSボタンここから-->
<div class="social">
<!--フェイスブック※リンクを設定してください-->
<span id="facebook"><a href="http://www.facebook.com/" title="Facebook"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_facebook.png" alt="フェイスブック" width="40" height="40" /></a></span>
<!--ツイッター※リンクを設定してください-->
<span id="twitter"><a href="http://twitter.com/" title="twitter"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_twitter.png" alt="ツイッター" width="40" height="40" /></a></span>
<!--RSS-->
<span id="rss"><a href="<%url>?xml" title="RSS購読"><img src="http://blog-imgs-43.fc2.com/u/r/a/uraraka01/28_rss.png" alt="RSS" width="40" height="40" /></a></span>
</div>
<!--SNSボタンここまで-->
cloverとpink patternのどちらかがわからないのですが、
サイドバーのレイアウトが多少崩れるかもしれません。
（このテンプレでは積極的に削除を推奨していないのですみません）
その際は調整してくださいね。
今後ともよろしくお願いいたします。
No title
はじめまして。
Honokaと申します＾＾
とても素敵なテンプレートをいつもありがとうございます！
背景を変更したいのですがよろしいでしょうか？
もし、よろしければ何処を変えていいのかわからないのですが教えていただけないでしょうか？
忙しい中、申し訳ありません<m(__)m>
宜しくお願いします<m(__)m>
Honokaと申します＾＾
とても素敵なテンプレートをいつもありがとうございます！
背景を変更したいのですがよろしいでしょうか？
もし、よろしければ何処を変えていいのかわからないのですが教えていただけないでしょうか？
忙しい中、申し訳ありません<m(__)m>
宜しくお願いします<m(__)m>
Honoka 様
ご利用＆コメントありがとうございます。
お返事が大変遅くなり、申し訳ありませんでした。
背景ですが、スタイルシート編集の
/*--------------------------------------------------
基本設定
--------------------------------------------------*/
のところ、
body {
background: url(http://blog-imgs-51.fc2.com/u/r/a/uraraka01/36_bg.jpg); ←ココ
略
}
になります。
ご自分でアップロードした画像のURLに書き換えてくださいね。
よろしくお願いいたします。
お返事が大変遅くなり、申し訳ありませんでした。
背景ですが、スタイルシート編集の
/*--------------------------------------------------
基本設定
--------------------------------------------------*/
のところ、
body {
background: url(http://blog-imgs-51.fc2.com/u/r/a/uraraka01/36_bg.jpg); ←ココ
略
}
になります。
ご自分でアップロードした画像のURLに書き換えてくださいね。
よろしくお願いいたします。
承認待ちコメント
このコメントは管理者の承認待ちです
Re: コメント枠内の色の変更
YAN 様
はじめまして。ダウンロードありがとうございます。
お返事が遅くなってすみません。
コメントの背景はスタイルーシートの以下のところで設定してあります。
/*--------------------------------------------------
コメント、トラックバック
全記事一覧、検索結果一覧
--------------------------------------------------*/
（略）
div.colum {
background-color: rgba(231,178,189,0.3); /* CSS3 */
background-color: #e7b2bd\9; /* IE用 */
filter: alpha(opacity=75); /* IE用 */
（略）
RGB値で指定しています（231,178,189。最後の0.3は透明度です。)。
設定したい色のRGB値が画像編集ソフトなどでわかると一番いいのですが、
6桁のカラーコードからでしたら変換ツールがネット上にたくさんありますので検索してみてください。
カラーコード自体も公開してくださっているサイトがいっぱいあります。
下2行は、IEでCSS3非対応の場合のための記述です。
#e7b2bdがカラーコードですので、変更してください。（\9はつけておいてくださいね。opacity=75が透明度です。）
ピンクのまま薄くということでしたら、透明度を下げるだけでもいいかもしれませんね。
CSSをご存知でなかったとしたら少し難しいと思いますが、
わからなければまたお気軽にどうぞ。
よろしくお願いいたします。
はじめまして。ダウンロードありがとうございます。
お返事が遅くなってすみません。
コメントの背景はスタイルーシートの以下のところで設定してあります。
/*--------------------------------------------------
コメント、トラックバック
全記事一覧、検索結果一覧
--------------------------------------------------*/
（略）
div.colum {
background-color: rgba(231,178,189,0.3); /* CSS3 */
background-color: #e7b2bd\9; /* IE用 */
filter: alpha(opacity=75); /* IE用 */
（略）
RGB値で指定しています（231,178,189。最後の0.3は透明度です。)。
設定したい色のRGB値が画像編集ソフトなどでわかると一番いいのですが、
6桁のカラーコードからでしたら変換ツールがネット上にたくさんありますので検索してみてください。
カラーコード自体も公開してくださっているサイトがいっぱいあります。
下2行は、IEでCSS3非対応の場合のための記述です。
#e7b2bdがカラーコードですので、変更してください。（\9はつけておいてくださいね。opacity=75が透明度です。）
ピンクのまま薄くということでしたら、透明度を下げるだけでもいいかもしれませんね。
CSSをご存知でなかったとしたら少し難しいと思いますが、
わからなければまたお気軽にどうぞ。
よろしくお願いいたします。
承認待ちコメント
このコメントは管理者の承認待ちです
Re: Re:コメント枠内の色の変更
YAN 様
こんばんは。ご報告ありがとうございます！
今後ともよろしくお願いいたします。
こんばんは。ご報告ありがとうございます！
今後ともよろしくお願いいたします。
