月別アーカイブ

タグ

twitter 2カラム(右) グリーン 3カラム スマートフォン    ブラウン ブルー ベージュ ピンク 2カラム(左)  イエロー ホワイト  ミントグリーン  写真  ゴールド  観覧車  グレー  オレンジ ハロウィン パープル パール  カラフル 植物  ネイビー  クローバー 2カラム ノート フレンチ ドット ブラック 水玉 lomo ディープブルー 和風 リボン 

記事検索

FC2ブログとは?

わたしが作成しているテンプレートは「FC2ブログ」というサービスで利用できます。
無料のブログサービスはいくつもありますが、1GBの大容量ということとギラギラした広告がなくデザインの自由度が高いという点でおすすめです!
オリジナリティが出せるので、個人はもちろんショップやサークルのオフィシャルブログとしても十分活用できると思います。
PCの他、携帯やスマートフォンからも閲覧・投稿ができるところもポイント。 これからはじめてみたい方はぜひ。
そして、このブログで紹介しているデザインは共有テンプレートとして配布(もちろん無料)していますので見てみてくださいね。

プロフィール

うららん

管理人:うららん
自作のブログテンプレートやツイッター背景を配布しています。
心がけているのは、記事やつぶやきが主役になるよう、邪魔しない、かつ居心地がいいデザインであること。よって、かなりシンプルです。
よろしければ、ご自由にお使いください。
ただの物好きがつくっていますので、至らない点が多々あると思いますが、大目にみてくださいね。


タイトルの由来は、日々、麗らかであるようにとの願いから。

うら-らか【麗らか】
1 空が晴れて、日が柔らかくのどかに照っているさま。
2 声などが晴れ晴れとして楽しそうなさま。
3 心にわだかまりがなく、おっとりしているさま。
(大辞林より引用)

My twitter

My facebook

お問い合わせ

名前:
メール:
件名:
本文:

フリーエリア

お休みのお知らせ

2013年9月以降、コメントやご質問、お問い合わせへのお返事をお休みしております。
どうぞご了承ください。

ブログで紹介しているテンプレートはFC2ブログ用です。ログイン後、管理画面の共有テンプレート追加からダウンロードしてご自由にご利用いただけます。商用利用もどうぞ。

※再配布不可との記載のは、テンプレートや使われている画像をご自分のものとして他の人に配布したり掲載したりを禁止しているだけですので、カスタマイズ中の不具合などで再度ダウンロードしていただくのは何回でもOKです!

PR

スポンサーサイト

--.--.-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログテンプレート『botanical』

2011.10.18 20:40|ブログテンプレ
30_thm_l.jpg
▲FC2ブログ用テンプレート:30_botanical

※共有テンプレートの承認までは数日のタイムラグがあります。

ボタニカルでナチュラルなテンプレートができました。



隠れテーマは「癒し」。
発信する人にもブログを読む人にもほっとひといき、リラックスできるような空間になるといいなと思ってつくりました。
蝶やお花というモチーフも甘くなりすぎないよう、ちょっとしたグリーンとあわせてすっきりナチュラルに仕上げました。

記事部分はいつものようにシンプルに、読みやすさを重視!
今回はリキッドデザインといって、ウィンドウの大きさに合わせて幅が可変するようになっています。
それから記事背景部分ですが、Chrome、Firefoxといったブラウザでは陰影のある角丸になるようにデザインしていますが、
IEですと(IE8まで)CSS3を解釈しないようなので四角くなります。

サイドバーのプラグインメニューは折りたたみになっていますが、
カスタマイズで常に表示させることもできます。
また、カレンダー、フェイスブックやツイッター、RSS購読のボタンも必要なければ簡単に削除していただけます。
どちらもHTMLにコメントを書いてありますのでカスタマイズしてくださいね。
プラグイン3にも対応しています。(トップページ記事上の薄いグリーンの部分)

追伸
おそろいのツイッター背景もありますよ♪→
関連記事

テーマ:共有テンプレート
ジャンル:ブログ

タグ:2カラム(右) ベージュ グリーン 植物

コメント

質問

『sky』を使わせてもらっています。シンプルさと、デザインされたかんじの中間具合が心地よくて素敵です。『wood green』とさんざん迷って決めました。本当は『wood green』の方が一目惚れだったんですけど。3カラムがどうしても使いたくて『sky』にしました。

今回の『botanical』も良いさじ加減にかわいくて良いですね。

『sky』のことで質問があります。(ココに書いてよいのでしょうか?)

文字の行間を少し詰めたいのですが…どうしたらよいのでしょうか?
というのも、改行の多い文章を書くと、少し間の抜けた感じになってしまうのです。

お返事頂ければ幸いです。

No title

先日はカラム落ちの件ありがとうございました。

別サイトですが、背景色がピッタリなので配布開始されましたら
使わせていただきます。

Re: 質問

miho 様

コメントありがとうございます。
『sky』を選んでいただいたということで嬉しいです。

早速ですが、お問い合わせの件、
記事の行間はスタイルシート編集の
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
のところ、

div.entry_body {
text-align: left;
font-size: 100%;
margin: 0 30px;
line-height: 2.5em; ←ココ
}

で変更できます。
1emで行送りが一文字分つまり行間なしになりますので、
お好きな値にしてみてください。
ピクセルや%でも指定可能です。

これからもよろしくお願いいたします。

Re: No title

きくち 様

こんばんは。
コメントありがとうございます。
嬉しいです!

もう少しで承認がおりると思います。
お待ちくださいね。

今後ともよろしくお願いいたします。

出来ました!

ありがとうございます。

行間を無事つめる事が出来ました。
詰めた分、文字を少し大きくして読みやすさを失わないようにもしてみました。

うれしいです。これを一度やった事で気に入らなければ自分で元へも戻せますし、思い切って質問して良かったです。

新作のテンプレートも期待しています。(『sky』をずっと使わせていただく予定ですけど!)

Re: 出来ました!

miho 様

こんばんは。
行間や文字サイズのカスタマイズ、成功してよかったです。
確かにちょっと行間が広いかなと気づきましたm(_ _)m
ご報告ありがとうございました!

今後ともよろしくお願いいたします。

サイドバー常時表示の方法

タイトルの件、鍵付きでお問い合わせをいただきました。
ありがとうございます。

サイドバーを折りたたみにせず、表示する方法は
HTML編集にある下記の記述を探し、削除してください。
scriptタグごと思い切って削除して大丈夫です。

<script type="text/javascript">
//サイドバー折り畳みメニュー※折り畳みたくないときはこのスクリプトタグを削除してください
$(document).ready(function() {
$(".plg_title").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});
$(".open_close").css("display","none");
$(".plg_title").click(function(){
$(this).next().slideToggle("slow");
//$(this).next().css("display","block");
});
});
</script>

今後ともよろしくお願いいたします。

質問です

botanical を使わせていただいております。

シンプルで、折り畳みが出来たりデザインが好みになっていたりとてもよい気持ちで使わせてもらっています。

さて、この折り畳みについての質問なのですが、とても便利ではあるのですがプロフィールや表示したい物が隠れてしまうのは少し困ります。

なので、せっかくお作りになられ失礼かもしれませんが、折り畳みしない方法を詳しく教えて頂きたいのです。

お恥ずかしい事ながら無知に等しいほどなので・・

よろしければお願いします。

No title

連投申し訳ありません。

先ほどの件、詳しい記事がありましたね。

きちんと読まずにすみませんでした><

sena 様

サイドバー非表示の件でお問い合わせ、ありがとうございました。
こちらの記事で解決していただけたようでしたが、
わかりにくかったですよね。すみません。
その後、問題ありませんでしょうか?

また何かありましたらお気軽にお問い合わせください。
よろしくお願いいたします。

教えてください

右カラムにしたいのですが、できますか?

どこをどうすればできますか?

Re: 教えてください

Lee SoonKyu 様

はじめまして。

サイドバーを左にするのは、残念ながら難しいです。
右側の蝶がサイドバーの背景になっているので一緒に移動してしまうのと
植物がかかってしまうのでバランスがとれない、という理由です。
力技で左右の入れ替えはできますが、
いろいろな調整が必要になってしまいます。

ご希望にそえず、申し訳ありません。
よろしくお願いいたします。

No title

素敵なテンプレートですね。
できるなら記事の背景(白い部分)の色を有色にしたいのですが
色を変えることってできますか?

Re: No title

ゆみ 様

はじめまして。
お問い合わせありがとうございます。

背景は次のところで変更できます。

/*--------------------------------------------------
レイアウト
--------------------------------------------------*/
(略)

div#main {
background: #fff; ←ココ。
-webkit-box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
-webkit-border-radius: 10px; /* Safari, Chrome用 */
-moz-box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
-moz-border-radius: 10px; /* Firefox用 */
box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
border-radius: 10px; /* CSS3 */
margin: 5px;
padding: 30px;
}

背景色の下の記述で
CSS3に対応しているブラウザでは内側に薄いグリーンのシャドウをかけています。
変更する色によってはこちらも調節してみてください。

よろしくお願いいたします。

No title

わがまま言ってすみません。
無事に変更できました!
是非使わせていただきます
本当にありがとうございました!!

宜しければ教えてください

はじめまして、こんにちは。ゆずこと申します。
ずっとwoodygreenを使わせて頂いてましたが、こちらも可愛くてシンプルでオシャレで、しかも癒しもあって一目ぼれしました!とても素敵なテンプレートですね。
是非使わせて頂きたいのですが、すみません、質問を宜しいでしょうか?
ウィンドウの大きさに合わせて幅が変化するようで、とても便利だと思ったのですが、
読み物っぽいものを書くと改行が変わってしまうので、なんとか幅を固定したいです。
変えることはできますか?いろいろいじってみたのですが、ちょうちょが移動してしまったりで上手くいかず;;
もしこういったカスタマイズがOKでしたら、教えて頂けたら嬉しいです。宜しくお願いいたします。

ゆずこ 様

はじめまして。
コメントありがとうございます。

早速、幅の固定についてですが、
簡単にできますのでお試しください。
変更箇所は次のところです。

/*--------------------------------------------------
レイアウト
--------------------------------------------------*/
(略)
div#wrap {
width: 55%; ←ココ。pxなどで固定。
margin: 0 30px 20px 180px;
float: left;
overflow: hidden;
}

ここが指すのはどこの幅かというと、メインの白背景の囲み(CSS3では影付きの角丸になっていますので影含む。)の幅になります。
現在は%で可変するようにしてありますので、
ピクセル単位で指定するなどしてみてください。

よろしくお願いいたします。

はじめまして。

はじめまして。素敵なデザインにひと目ぼれして使わせていただいてます。

初歩的な質問でお恥ずかしいのですが、記事や写真を中央に寄せる(センタリングする)には

どうしたらいいのでしょうか?

初心者なもので、ヘタにいじって直せなくなるのが怖くて・・・

お時間のある時でけっこうですので、ご指導いただけると幸いです。

宜しくお願いいたします。

Re: はじめまして。

しょ子ママ 様

はじめまして!
コメントありがとうございます。

センタリングするにはスタイルシートの記事本文に
text-align: center;
を追加してください。

場所は
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
(略)

div.entry_body {
font-size: 100%;
line-height: 1.8em;
margin: 0 5px;
}

です。

今後ともよろしくお願いいたしますm(_ _)m

ありがとうございます!

こんにちは。教えてくださり有難うございます!早速使わせて頂いてます。
とても癒されます。今後も新しいテンプレート楽しみにしてます!

No title

うららんサンこんばんは。
センタリング、無事にできました。
丁寧にご指導いただき、本当にありがとうございましたv-254v-353

はじめまして

初めまして、こんばんは。
一目惚れしてさっそく使わさせていただいているのですが、サイドバーが何故か右ではなく下に表示されてしまいます。
原因が分かりません…どうしたらいいでしょうか?

Re: はじめまして

殉 様

はじめまして。
ご利用、コメントありがとうございます。

お問い合わせの件ですが、タグを見ていないのでなんとも言えないのですが(;^_^A
記事の中にバナーなどはっていますか?
そういったときにダグの閉じ忘れ(だいたい</div>)をしやすく、
それでカラム落ちしていることが数件ありました。

解決せず、鍵付きまたはメールフォームなどでブログをお知らせいただけるようでしたら、
またお問い合わせくださいね。

よろしくお願いいたします。

お邪魔いたします*

素敵なテンプレートをありがとうございます*
とても気に入り、使わせて頂いています。

自分でも色々と調べたのですが、どうしても解決できないことが1点ありまして、こちらに参りました。
左上の「ブログタイトル」、メインの下の「Home」ボタンが機能していないようなのです。(javascript:void(0)と出ます)
うららん様のブログで確認いたしましたら、ここからちょうど右下にあります「page top」のボタンもそのように表示がでるようです。
全てのリンクの確認はできていないのですが…。

これはこちら側に問題のあることなのか、それとも設定で直せるのでしょうか。
(他のテンプレートでは正常にリンクが機能するのですが…)

お手数をおかけして申し訳ありません。
ご確認とご回答を、どうぞよろしくお願いします*

Re: お邪魔いたします*

manon 様

お問い合わせありがとうございます。

以前も同じお問い合わせをいただいたことがあり、
その際は解決できず、
トップページ以外では正常なのでサーバーの問題かもということでお許しいただいたのですが、
その後も気になっていて、今回いろいろ検証してみました。

どうしてブログURLへのリンクが、トップページだけ空と認識される、しかもjavascriptの記述になるのかがわからなかったので、
javascriptを外していろいろ試したら、原因がわかりました。
トップへ戻るスムーススクロールが影響していたみたいです。

テンプレートを修正しましたので、お手数ですが再度ダウンロードをお願いいたします。

お知らせいただいてありがとうございました。
大変勉強になりました。

よろしければ、今後ともよろしくお願いいたします。

ありがとうございます

迅速に対応して下さいまして、本当にありがとうございました。
さっそく再ダウンロードさせていただきました。

素敵なテンプレートに出会えるかどうかは、ブログを楽しく続けられるかということに大きく影響します。
どうしてもこのテンプレートじゃないと嫌だったので、とても嬉しいです*
これからも、実用性とデザイン性を兼ねた、うららん様の素敵なテンプレートに期待しています。

殉 様

ご連絡ありがとうございます。

こちらで殉さんのブログをブラウザテスターで検証してみましたが、
IE8も含め全て正常でした。
あと考えられる原因は、見るときブックマーク表示などによりブラウザの横幅が縮まっていたり、モニタ解像度が低く横幅の表示範囲が狭いとサイドバーが収まらなくなり、自動的に下に移動します。
(ブラウザによっては移動せずに隠れます)
大体910px以下になると落ちます。
モニタ解像度が1024pxだとしてもMAXで表示していればカラム落ちしないはずです。
ご使用環境はいかがですか?
パソコンの解像度を高めに設定して確認してみていただけますか?
それでもおかしければまた遠慮なくお問い合わせください。

解像度を高くすると更新などに不便を感じるようでしたら、
記事部分の幅を狭めに固定するなどでカラム落ちするまでの限界に猶予を設けることは可能です。

ちなみにこの原因の場合、殉さんのブログを見る方々には全く問題ありません。

よろしくお願いいたします。

No title

今晩和、うららん様。
ブクマ非表示にしたところ、無事解決致しました!
お忙しい中、丁寧な対応本当に有難うございました。

No title

始めまして、いつもうららんさんの素敵なテンプレートを使わせてもらっています。
サイドバーを常時表示の件について、例えばプロフィール部分のみ常時表示し
他は閉じてる状態にしたりする事は可能でしょうか?
(後で閉じれるように最初は開いてる状態にするだけでもかまいません)

まりも 様

はじめまして。
コメントありがとうございます。

他のテンプレで折りたたみメニューになっているものに以前同じ質問がありましたので、
転記させていただきますね。
--
サイドバーはプラグインに対応していますので、
どのプラグインを設定しても同じ機能・デザインになるように一括で指定しています。
ですから、折りたたみたくないものと折りたたみたいものを混在させるには、
折りたたみなくないものをカレンダーのようにHTMLに直接書いて固定表示にすることになります。
ちょっと難しいですが、HTMLやCSSを直せるようでしたらぜひお試しください。
(個別カスタマイズなので、ご自身でお願いしたいと思いますm(_ _)m)

ちなみに、各プラグインの内容は次のように確認できます。
プラグインの設定で、折りたたみたくないプラグインの「詳細」ボタンをクリックすると、
編集画面になり、プラグインの改造の欄に「HTMLの編集」ボタンがあるのでクリックします。
ここの記述をコピーして、HTMLにペーストします。

次のようなタグにして、<dl>~</dl>全体をカレンダーの下などお好きな位置に置いてみてください。

<dl class="sidemenu_body">
<dt class="plg_title" style="text-align:center">プラグインのタイトル</dt>
<dd>
<div class="plg_body">
ここにプラグイン内容をペースト
</p>
</dd>
</dl>

--

よろしくお願いいたします。

No title

他テンプレと共通だったのですね、教えていただきありがとうございます。
試しに記述された通りやってみた結果うまくいきました。

ただ今まで通りCSSで基本設定・基本要素部分で文字の大きさを指定しても
個別表示したプロフィール部分に文字の大きさが反映されず
元はfor without IE6&IE7[chrome用?]でfont-size: 11px
だったのですがデフォルトの大きさに戻ってしまいました。
chrome,IEそれぞれ個別でサイズ調整に関するなにかをタグに記述すればよいのでしょうか?

まりも 様

こんばんは。
前回の答えががちょっと足りなかったですね。すみません。
転記したタグは一例なのでCSSで調整が必要になります。
内容の<div class="plg_body">~</div>にはまだ何も指定をかけていないので、

div.plg_body {
border-top: solid 1px #999999;
padding: 10px 0 20px;
font-size: 90%;
line-height: 1.6em;
}

などの記述を追加してみてください。

よろしくお願いいたします。

No title

こんばんわ
CSSの下のほう『サイドバー(Plugin)』項目の一番下に追加して調整したところ無事解決しました。
追加する場所はどこでもいいものなんですかね
この度は丁寧に教えてくださって助かりました、ありがとうございます!

まりも 様

こんばんは!
うまくいってよかったです。
CSSを書く場所はどこでも大丈夫ですが、順番は関係があり、同じ対象や親子関係などではちょこっと注意がひつようです。

今後ともよろしくお願いいたしますm(_ _)m

No title

うららん様、はじめまして。土屋マルと申します。
PC用、スマフォ用共に、激烈に一目惚れしたbotanicalを使用させていただいています。

こちらのコメントなども参考にして、自分なりに少しだけカスタムしているのですが、どうしても自分では力及ばず、解決できないことがあり、お訪ねしました。
お手すきの時で構いませんので、ご教授下さい。

・右カラムの幅を少しだけ広くすることはできますか?
いろいろ調べて、ここかな?と思うCSSの数字をいじったら、カラム落ちしてしまいました。
どなたかのコメントにて、右カラムは背景の蝶と連動(?)しているためいじることは出来ない、というような返信がありましたので、無理ならこのままで構いません。

・未来記事でトップに持って来ているインデックスページの、リンクの色を変えたるにはどうすればいいですか?
マウスオンすると、ピンクに変わる指定がしてあるためかな、と思うのですが、CSSをいじっても反映されず、記事編集で色を指定しても、駄目みたいでした。
小説サイトなのですが、各話タイトルのリンクだけ、ページを開いた時に、すでに色がついているようにしたいです。

初歩的な質問ですみませんorz
タグもCSSもよくわかっておらず、ググってググって何とか今の状態まで辿りつきました。
この二つがクリアできれば、完璧に理想通りのテンプレートになるので、どうしても諦めがつかず‥‥orz
どうかよろしくお願い致します。

土屋マル 様

はじめまして。
ダウンロード、コメントありがとうございます。
お返事が遅くなって申し訳ありません。

・右カラムの幅を少しだけ広くすることはできますか?

できます!
スタイルシートの/*レイアウト*/のサイドバーのところで、お好きなピクセル数に増やしてください。

div#sidemenu {
width: 200px;
(略)
}

このテンプレはメインカラムとサイドバーを合わせてウィンドウ幅の55%という、可変レイアウトになっていますので、サイドバーを広げた分メインが狭くなります。
場合によっては、div#wrapの幅の%も調節してみてくださいね。


・未来記事でトップに持って来ているインデックスページの、リンクの色を変えたるにはどうすればいいですか?

プラグイン3でないとすると、未来記事に直接スタイルシートを書くのが早いかなと思います。
リンクなので<a href="~">タイトル</a>となっていると思いますが、

<a href="~" style="color:#カラーコード;">タイトル</a>

タイトルがとても多い場合は、全体をdivで囲ってクラス指定だけしてそのクラスに対してスタイルシート編集のほうに書いたほうがいいですね。


いかがですか?
ちょっと難しい言い回しがあったかもしれません。
また何かありましたらお問い合わせくださいね。

今後ともよろしくお願いいたします。

ありがとうございますっ。

うららん様、お忙しい中、こんな小さな質問にお答え下さり、ありがとうございます。
右カラムの幅、無事に調整できました!ばっちりでした!

でも‥‥
> タイトルがとても多い場合は、全体をdivで囲ってクラス指定だけしてそのクラスに対してスタイルシート編集のほうに書いたほうがいいですね。
↑これが、どうしてもわかりませんでした(泣)
初心者には難しいでしょうか?

<a href="~" style="color:#カラーコード;">タイトル</a>
↑こっちは、一つずつ未来記事の記事編集で追加すればいいのですよね?
さっそくやってみます♪

うららん様、本当にありがとうございました♪
これからも、うららん様の素敵なテンプレの配信を期待しております(*´ω`*)テレ

コメントの文字サイズ変更教えて下さい

はじめまして、〔botanical〕を使わせて頂いておりますありがとうございます。

早速質問ですが、コメント(表示)の文字サイズを変更したいのですが
スタイルシートのどの部分がコメントの文字サイズの箇所なのか解りません

エントリー部分の文字サイズは大きく出来たのですが、
コメントの文字サイズの箇所が解らず質問致しました。
宜しくご指導頂けます様お願い致します。

Re: コメントの文字サイズ変更教えて下さい

うにひん 様

こんばんは。
ダウンロードありがとうございます。

コメントに関する記述はスタイルシートで

/*--------------------------------------------------
コメント、トラックバック
全記事一覧、検索結果一覧
--------------------------------------------------*/
以下になります。

コメントのタイトルは
h3.sub_title {
font-size: 125%;
color: #d83fa1;
line-height:1.2em;
font-weight: bold;
margin-bottom: 10px;
border-bottom: dotted 1px #d83fa1;
padding: 5px 0;
}

コメントの本文はこちら
div.sub_body {
margin: 0 10px;
line-height: 1.8em;
font-size: 値を追加;←現在は100%なので特に記述していませんので追加してください。
}

コメントのフッターはこちら
ul.sub_footer {
margin: 10px 10px 0;
font-size: 90%;
font-weight: bold;
text-align: right;
}

どのようなわたしは%で指定していますが、pxなどお好きな単位で指定してみてください。

よろしくお願いいたします。

お返事ありがとうございました

うららんさん

早速のご回答ありがとうございます

ですが...文字サイズ変わらないです
コメント頂いた表示の文字サイズを変えたいのですが
この箇所で宜しいんでしょうか?

出来れば記事の文字サイズ(130%に変更しました)を変えましたので
それに近いサイズに変更したいのですが...

コメント欄の中の文字はプレビューでは確認出来ず
更新後に変わるのでしょうか...

度々お手数をお掛けします

無事出来てました!

うららんさん

お騒がせしました!無事コメントの文字サイズ変更する事が出来ていました!
プレビューではサイズが変わった事を確認出来ないんですねぇ~

更新してようやく文字サイズ変更が可能なんですね
ご指導ありがとうございました

リンク色について質問です

うららんさんこんにちはぁ

度々お世話になります。
テンプレート『botanical』で
リンクした箇所の色変更と仕様を変更したい場合
現在この様になってますが...

リンク
--------------------------------------------------*/
a {text-decoration: none;}
a:link,
a:visited {color: #3d3d3d;}
a:hover,
a:active {color: #d83fa1;}

a {text-decoration: none;}とあるのですが
記事内でカーソルをリンク箇所に乗せても下線が出ません。
カーソルを乗せた時だけ下線が出て欲しい事が1点

次に、記事内のみだけリンク色の指定
(通常表示時の色変更、カーソルを乗せた時の色変更)を
したい場合のカスタマイズ方法が知りたい事が1点

現在の文字の色ですと、記事の文字色と同じなので
そもそもリンクされてるのかどうか、カーソルを乗せないと
リンク箇所が解らないのです。

色変更もしてみましたが、すると全てのリンク文字(タイトル他全て)の色が
変わってしまいました...記事内リンクのみの指定方法を教えて下さい。

宜しくご指導下さいお願いします。

Re: リンク色について質問です

うにひん 様

こんにちは。
お問い合わせ、ありがとうございます。

リンクについての2点のご質問ですが、
まず記事内のみを対象にするCSSは
/*--------------------------------------------------
メインコンテンツ
--------------------------------------------------*/
以下、

div.entry_body {
font-size: 100%;
line-height: 1.8em;
margin: 0 5px;
}

になります。
リンクに関するCSSは擬似セレクタを使いますので、すぐ下に追加してください。

div.entry_body a {
color: #カラーコード; /*リンク部分のカラーを設定*/
}
div.entry_body a:hover {
text-decoration: underline; /*カーソルを載せたとき下線*/
}

やってみてくださいね!
よろしくお願いいたします。

テンプレートお借りしました。

はじめまして。
botanicalのブログ用テンプレ、
ツイッター用壁紙、スマフォ用テンプレをDLさせていただきました 
ありがとうございます。

またカスタマイズ記事やテンプレユーザーの皆さんの質問等を参考に
私なりにカスタマイズして使わせていただいております。

これからも素敵なテンプレートをたくさん作成して下さいね。

Re: テンプレートお借りしました。

+れもん+ 様

はじめまして♪
お返事が遅くなり申し訳ありません。
セットでダウンロードしてくださって、嬉しいです!
どんどんカスタマイズして使ってくださいね。

今後ともよろしくお願いいたします。

No title

こんばんは。
このbotanicalに一目ぼれして、使わせていただいています!
ですが、どうしてもカスタマイズしたい部分があるのですが、
自力ではできなかったので、ご指南をお願いいたします。

・メインの幅を固定
・その後、全体をセンタリング

といった2つです。
幅の固定は過去のコメントを拝見していじってみたのですが、
手持ちのiPadでみると、どうしても崩れてしまいます。
何かほかの設定が必要なのかとも感じているのですが・・・
どのようにすればまたはどれぐらいのpx指定をすればよいものなのでしょうか?
(理想としてはcirclewood_2c程度の幅です)

また、固定した後で、ウインドウを最大化したときに
センターに来るようにしたいのですが、その方法も教えていただきたいです。

どうしてもbotanicalが使いたいので、もしよろしければご指南お願いいたします。
お手数をおかけして申し訳ありません・・・

Re: No title

こぐま 様

コメントありがとうございます。
お返事が遅れまして申し訳ございませんm(_ _)m

こぐまさんがCSSの知識がある!とみてお答えします。

1、メインの幅を固定
これは#wrapの幅指定をピクセルにします。
現在55%と可変になっているので、『circle wood』と同程度にするなら550pxとしてみてください。
iPadでは、サイトの幅をもっと広く設定した場合でも自動的に縮小して全体表示するはずなのでこれで大丈夫かと思います。
ただし、共有しているテンプレはPC用でiPadは想定して作っていないのでどうぞご了承下さいね。

2、全体をセンタリング
できなくはないのですが、多少込み入ったお話になります。
まず、1のように#wrapの幅を固定します。
その幅、例えば550pxに、サイドバーの200pxとメインとサイドの間の余白30pxと左側の蝶を表示するスペース180pxを足します。
合計960pxを#containerに幅指定して固定した上で、margin: 0 auto;でセンタリングします。

/*--------------------------------------------------
レイアウト
--------------------------------------------------*/
(略)
div#container {
background: url(http://blog-imgs-43.fc2.com/u/r/a/uraraka01/30_chou1.png) no-repeat left 330px;
width: 960px;
margin: 0 auto;
}
div#wrap {
width: 550px;
margin: 0 30px 20px 180px;
float: left;
overflow: hidden;
}

このテンプレは植物がちょっとメインの上にかかるようにしてあったり、
複雑につくってあるのでカスタマイズしづらいかもしれませんね。。。

今後ともよろしくお願いいたします。

No title

うららん様

丁寧なご説明、ありがとうございました!
教えていただいた設定をしましたら、固定もセンタリングもできました~!

しかし、センタリングをすると、左の葉っぱ部分がかからなくなってしまうのですね・・・
あの重なり具合がかわいらしかったので、残念です><
とはいえ、希望のカスタマイズができ、とてもうれしいです。

もしかしてあの重なりがほしいがために、センタリングはやめてしまうかもしれませんが、
うららんさんのbotanicalを使わせ続けさせていただきます^^
でもうららんのテンプレはどれも素敵なので、浮気してしまうかも・・・・ww

この度は本当にありがとうございました!

No title

はじめまして。
「botanical」のブログ、ツイッターのテンプレートを使用させていただいております。
ありがとうございます。

そこで一つ質問がございます。
フェイスブック、ツイッター、RSS購読ボタンがありますが、このフェイスブックボタンのリンク先を変えたいのですが、変更の仕方を教えていただけないでしょうか?
初めどのように設定したのか全く思い出せないため、いざ変更しようと思ってらどこを触っていいかが分からなくて。。。

ご連絡宜しくお願い致します。

No title

うららん 様

はじめまして。
このbotanicalが気に入って、使わせていただいています!。
ありがとうございます。

早速、カスタマイズしたいところがあるのですが、教えていただけないでしょうか?

フェイスブック・ツイッター・RSSのボタンがありますが、そこのフェイスブックのリンク先を変えたいのですが、やり方が分からなかったので教えていただけないでしょうか?

初め、設定したときどのようにしたのか覚えていなくて、いざ変更しようと思ってもやり方がわからなくて、どうしようもなくなりご質問です。

ご回答、宜しくお願い致します。

※ちなみに前回お送りしたメッセージは名前を入れ忘れていました。すみません。。。
それに気づき、改めてメッセージさせていただきました。宜しくお願いします。

Re: No title

案山子倶楽部 様

お問い合わせありがとうございます!
お返事が大変おそくなり、申し訳ありませんでした。

HTML編集のだいぶ後半に、以下のような箇所があります。
3つのボタンのうち、ひとつ目がフェイスブックになりますので、
リンク(a href="URL")を書き換えてください。

<!--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ボタンここまで※不要なら削除してください-->

2週間も経ってしまいましたのですでに解決済みかもしれませんね。
すみませんでした。

今後ともよろしくお願いいたします。

No title

うららん 様

ご回答ありがとうございました。
無事に解決いたしました。

もう一つ、気になることがあったので質問させて下さい。

右上にカレンダーがありますが、それの”日””月”がいつの日からか消えていて今もそのままなんです。

どうやって修正したらいいのですか?

何どもすみませんが、ご回答お願い致します。

Re: No title

案山子倶楽部 様

いつもありがとうございます♪

早速ですが、カレンダーの件、以前も他のテンプレートでご報告をいただいています。
ご確認いただいてこれと同様の状況でしたら、下のようにHTML編集のカレンダー部分を上書きしてみてください。
http://uraraka01.blog27.fc2.com/blog-entry-137.html

<!--固定カレンダーここから※不要なら削除してください-->
<div class="plg_body">
<table summary="カレンダー" class="calender">
<caption>
<a href="<%prev_month_link>"><%prev_month></a>
| <%now_year>/<%now_month> |
<a href="<%next_month_link>"><%next_month></a>
</caption>
<tr>
<th abbr="日曜日" scope="col" id="sun">日</th>
<th abbr="月曜日" scope="col">月</th>
<th abbr="火曜日" scope="col">火</th>
<th abbr="水曜日" scope="col">水</th>
<th abbr="木曜日" scope="col">木</th>
<th abbr="金曜日" scope="col">金</th>
<th abbr="土曜日" scope="col" id="sat">土</th>
</tr>
<!--calender-->
<tr>
<td><%calender_sun></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><%calender_sat></td>
</tr>
<!--/calender-->
</table>
</div>
<!--固定カレンダーここまで※不要なら削除してください-->

よろしくお願いいたします。

No title

ご回答ありがとうございました。

無事に解決いたしました。

今後とも、うららん様のテンプレートを末永く利用させていただきます。

いろいろご丁寧にご回答ありがとうございました。

困りました~。教えてください。

こんにちわ。とってもステキな「botanical」のテンプレートをお借りしています。

今日、新しい記事を投稿した後まで何の問題もなかったのですが、
再度ログインして自分のページを見たら、サイドバーのプラグインメニューがなくなっており、
「あれれー!?」と思ったら、記事の左下に表示されるようになっていました。

テンプレートの編集などとにかく何もさわっていないのに、
突然サイドバーが左下に行ってしまって困りました。
再度テンプレートをダウンロードして設定してみたのですが、
何の変化もなく、未だサイドバーが左下に移動したままです・・・

どうしたら修正できるのかお手数ですがお教えいただけないでしょうか?
どうぞよろしくお願い致します。

nico♪ 様

...その後、過去の質問で解決していただいたとのことでありがとうございました。

お礼が言いたかったので、最初のコメント、表示にしました。
テンプレートご使用いただいて、嬉しいです!ありがとう。
今後ともよろしくお願いいたしますm(_ _)m

No title

こんにちわ。
先日は↑お騒がせなコメントすみませんでした。

ところで、もう1つ質問があります。
ブログの記事の最後にランキングのタグを貼りたいのですが、
リンクタグを貼ると、記事の背景が白ではなく、テンプレート本体の背景色になってしまいます。
(最新記事は白の背景を保ったまま、過去の記事の背景が本体の背景色になる場合が多いです)
何か上手にタグを貼り付ける方法がありますでしょうか?もしあるようでしたら是非教えて頂きたいです。
どうぞよろしくお願い致します。

Re: No title

nico♪様

こんにちは。お返事が大変遅くなり、申し訳ありません。

ご質問の件ですが、以前も同じお問い合わせが数件ありましたが、
皆さん、ランキングバナーを貼るとき記事本文の閉じタグ</div>が抜けてしまうことによって起こる不具合だと思います。
</div>がきちんとあるかどうか確認してみてくださいね。

よろしくお願いいたします。

No title

うららん様

「botanical」使わせてていただいています 有難うございます。

アクセス解析を入れたいのですが、入れることができません。
方法がありましたら、教えてください。
よろしくお願いいたします。

No title

初めまして!!
こちらのテンプレート使わせてもらっています。
そこで質問です。
「続きを読む」を押すとページが一旦更新されて、表示されるようですが、更新されないで表示させたいのですが方法はありますか?
お忙しい中すみません。
どうぞよろしくお願いします。

Re: No title

しろくま 様

お返事に時間が経ってしまい、申し訳ありませんでした。
その後、解決されたでしょうか。

アクセス解析はいろいろありますが、入れたいアクセス解析の手順書やヘルプに必ず書いていると思います。
だいたいはタグをHTMLのどこかにコピペしろっていうものかと思います。
テンプレートの編集でHTMLのしかるべきところに追加してみてくださいね。

よろしくお願いいたします。

Re: No title

みわ 様

はじめまして。お返事が遅くなって申し訳ありません。

「続きを読む」について、FC2の独自変数を利用しているため、
動作をコントロールするのはできないのではないかなと思います。(間違っていたらすみません)
折りたたみにするような方法がどこかでレクチャーされていれば、
カスタマイズできるかもしれませんが、
こちらのテンプレートでは採用していませんのでご了承くださいね。

お役に立ちませんでしたが、今後ともよろしくお願いいたします。

サイドカラムの文字の大きさ

初めまして 4月用に春らしいbotanicalを使わせて頂きたいと思っています
素敵なテンプレート有難うございます
サイドカラムの文字(記事名等の)を大きくしたいのですが どこの数値を変えたら
宜しいでしょうか?
サイドバー(plugin)欄のdt.plg_title {
font-size: 100%;
ここの font-sizeを変えてみたのですが変化ありませんでした 
お忙しいなかすみません。 

Re: サイドカラムの文字の大きさ

モズライト 様

はじめまして。
お問い合わせありがとうございます。

サイドカラムは
dt.plg_title { ←プラグインタイトル
font-size: 100%; ←文字サイズ
(略)
}
dd.open_close { ←プラグイン本文全体
(略)
font-size: 90%; ←文字サイズ
line-height: 1.6em;
}
となっていますので、数値を大きくしてみてください。
%でなくピクセルなど絶対値での設定も可能です。

よろしくお願いいたします。

ごめんなさい

うららん様 質問したのをすっかり忘れていました
大変失礼いたしました ご教示ありがとうございました。

はじめまして

ほんとに素敵なテンプレートばかりで、決めきれない感じでしたが、
こちらの自然な風を感じるような雰囲気に魅かれ使用させて頂きます。
どうもありがとうございます。

さっそくなのですが、ご教授頂きたいのが、
背景のベージュ系を白系に変更し、
メイン部分の淡いブルーの囲いを淡いピンク系にして
どんな感じになるか見てみたいのですが、なかなか上手くいきません。

どうかアドバイス頂けませんでしょうか。

よろしくお願い致します。

Re: はじめまして

さちーぶ 様

はじめまして。
お返事が遅くなり、申し訳ありません。

まず背景ですが、スタイルシート編集で次の箇所を変更してください。
背景画像になっていますので他の画像を用意していただくか、
画像の設定をやめて、背景色を設定してくださいね。

/*--------------------------------------------------
基本設定
--------------------------------------------------*/
(略)
body {
background: url(http://blog-imgs-43.fc2.com/u/r/a/uraraka01/30_bg.jpg); ←ココ
color: #3d3d3d;
font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
font-size: 75%;
overflow:visible;
height: 100%;
}

メイン部分は以下の箇所です。
内側に向かうぼかしは下線の部分(3つとも)なので、お好きな色に変更してみてください。

div#main {
background: #fff;
-webkit-box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
-webkit-border-radius: 10px; /* Safari, Chrome用 */
-moz-box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
-moz-border-radius: 10px; /* Firefox用 */
box-shadow: 0px 1px 4px 0px #aaa, inset 0px 0px 2px 5px #e7fce9;
border-radius: 10px; /* CSS3 */
margin: 5px;
padding: 30px;
}

よろしくお願いいたします。

質問です。

うららんさん、こんにちは。

素敵なテンプレート、有難く使わせていただいております!

ちょっと不具合がでておりまして、質問です。

一つ目の記事の下からフレームが消えてしまっています。

どうしたら、復活することができるでしょうか?

ご教示くださいませ。

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

治りました!

すみません、先ほどの件、自力で治せました!

お騒がせして恐縮です。

今後ともよろしくお願い申し上げます。

Re: 治りました!

よかったです!
今後ともよろしくお願いいたします。

(お返事が遅くなって申し訳ありませんでした。。。)
非公開コメント

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