FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
01:30
テンプレート名 : snowdance
最新バージョン : 2.4
白の季節へ。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(snowdance 2.2以降)。ご了承ください。
更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
以下の項目は簡易カスタマイズとしてまとめられています。
詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)
記事中での使用を想定したいくつかのクラスが用意してあります。
これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。
指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。
<img src="画像のurl" class="f-left" />
太字の部分を追加すればOKです。
なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、
<img src="画像のurl" class="f-left photo" />
というように、半角スペースとともにクラス名を追加してください。
画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="photo"」を追加してください。
<img src="画像のurl" class="photo" />
太字の部分を追加すればOKです。
画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="imgbox"」を追加してください。
<img src="画像のurl" class="imgbox" />
太字の部分を追加すればOKです。
記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。
指定方法 imgタグに 「class="noimgbox"」を追加してください。
<img src="画像のurl" class="noimgbox" />
太字の部分を追加すればOKです。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
kei | Fjqb2npw
Re: [template] snowdance
このテンプレートお借りしています。
画像を自分の雪の写真に差し替えさせて頂きました。
又 フッターのライセンス部分も削除させて頂きました。
テンプレトの作者さんへのリンクは残してあります。
もし良ければ、お時間のある時でけっこうですので、
訪問頂いて、注意点とかありましたらお知らせ下さい。
Re: [template] snowdance
keiさん、はじめまして!
テンプレートをお使いいただきありがとうございます。
写真、とても素敵ですね!
テンプレートに関しては問題はありませんよー。
注意ではないのですが、記事中に貼られている写真が縮小版でも結構横幅が大きく、ブラウザのウィンドウサイズによってはスクロールバーが出てしまうので、もし気になるようでしたら固定幅に変更して使用してみるといいかもしれません。
固定幅に変更する方法はスタイルシートの上部に記述してあります。固定する幅の大きさは、/* 固定幅の設定 */という部分のwidthの値を変更すれば変えることが出来ます。
よろしければ、一度お試しくださいませ
Re: [template] snowdance
こんにちは!
固定幅の件、変更してみました。
ご指摘ありがとうございました。
これからも、どうぞ宜しくお願いします。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント4番の方へ
初めまして。
お使いいただきありがとうございます。
画像を多く使われているようですので、記事によってはスクロールバーが表示されてしまうかもしれません。もしそれらが気になりましたら表示幅の固定+幅の変更をしてみてくださいね。
今はプラグイン3で「Templates Information」を表示させています。まだこれは調整中のもので、Snowdanceにはプラグイン3を記事上に表示するという機能をつけておりません。
一応今後の更新で対応させる予定ですので、少しお待ちいただければと思います。すみません。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
お世話になっております。
snowdanceのテンプレートを使用させてもらっています。
Fioreのようにバックを白にすることは可能なのでしょうか。
それとタイトルが現在は赤ですが色の変更は可能なのでしょうか。
すでに他の人の質問で回答済であれば申し訳ありません。よろしくお願いします
rimse | 4HNZ8mMg
appleさん初めまして。
お返事が遅れてしまいまして申し訳ありません。
背景を白にする場合は、スタイルシートの最後に
#page { background : #fff; }
という記述を追加していただければ大丈夫です。なお、この編集をすると、タイトル画像の読み込み中のアニメーションは非表示になります。ご了承ください。
タイトルの色などは、スタイルシート内の
/*[3.4.2]*/
#title h1 a:link ,
#title h1 a:visited {
color : #fff;
text-decoration : none;
}
/*[3.4.3]*/
#title h1 a:hover {
color : #c33;
text-decoration : none;
}
という部分で設定されていますので、ここを変更してくださいませ。
(ナンバリングを参考に探してみてください)
質問です
左上の空白の部分の事です。
記事の上の部分と言いましょうか・・・・
この部分の幅を狭くしたいのですが、どのようにすればよいのですか?
rimse | 4HNZ8mMg
Re: 質問です
あおねこさん初めまして。
スタイルシート中に以下の記述があります。ナンバリングを参考にさがしてみてください。
/*[4.2]*/
#main .main-container{
min-height : 800px; /* ※1 */
_height : 800px; /* ※2 */
padding : 6em 0 2em;
}
この、padding : 6em 0 2em; の下線部分で上部の余白が設定されています。この部分の数値を小さくしていただければOKです。
ray | VLzUnvlc
Snowdance 2.0.0は…?
はじめまして、Snowdance使わせていただいてます。
「共有テンプレート追加」からダウンロードしてきたテンプレートのフッタ部分にはテンプレートのヴァージョンが書かれてないのですが、Snowdance 2.0.0はどちらでダウンロード可能でしょうか?
ヘッダ部分にナビゲーションが欲しいので、よろしくお願いします。
Re: Snowdance 2.0.0は…?
rayさん、初めまして。コメントありがとうございます。
Snowdanceのver.2.0.0は今テストでして、まだ共有などには登録しておりません。
ただ、もう結構長いことテスト期間を設けてきたのですが、表示が崩れているといった報告もありませんので、コメントその他の微調整をして早いところ更新したいなと思っております。
すみませんが、もうちょっとだけお待ちくださいませ
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
> コメント13・14番の方へ
コメントありがとうございます。
お使いの画像のサイズがかなり大きめですので、「横幅の固定」のカスタマイズと、「固定した横幅を大きくする」カスタマイズ、それと「カラム幅の割合調整」のカスタマイズを組み合わせると良いでしょう。
「横幅の固定」に関しては、テンプレートのスタイルシート上部「幅可変/固定の切り替え」という項目に方法が書かれておりますので、そちらをご覧になってください。
幅を固定するカスタマイズをした後に、同じ箇所に
/* 固定幅の設定 */
.fixed-on { width : 800px; }
という記述がありますので、太字の部分の数値を大きく取ってください。
ただ、テンプレートの画像の関係上、1100が上限となっています。(画像を差し替えてお使いの場合は、その限りではありません)
ここを最大値にしたとしても、そのままでは横スクロールバーが出てしまうので、「カラム幅の割合調整」によってメインカラムの幅を広く、サブカラムの幅を狭くしていきます。カラム幅の割合調整に関してはhttp://rimse.blog73.fc2.com/blog-entry-203.htmlこちらを参考にどうぞ。
変更の工程が多く、ちょっと面倒かもしれませんが、snowdanceのデザイン上これが最適な方法となっています。ごめんなさい。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
> コメント18番さんへ
お返事遅れてしまいました。
コメントの入力と、コメントの表示で幅etcを一致させるのは、現在の仕様上難しくなっております(変更箇所が多い・IE6のバグの影響を受けてしまう、など)。
申し訳ありませんが、この部分に関しては仕様としてお使いいただけますか。ごめんなさい。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント20・21番の方へ
コメントありがとうございます。
追記の折りたたみ機能は、このサイトでの動作と同様、開閉式が本来の動作です。
[1]jQuery読み込み→[2]追記部分読み込み→[3]処理完了という流れで処理を行っているのですが、jQueryの読み込みに多少時間がかかってしまうので、[1]や[2]の段階で追記部分をクリックすると意図せぬ動作となることが考えられます。
(1).開閉式が仕様であるならば、閉ができるときに絵文字がでないのは、どうしてか
独自の絵文字が追記部分で使用できないのは、独自の絵文字への変換をするタイミングと、追記部分を読み込むタイミングのズレが原因と考えられます。(Ajax的に追記部分を読み込んでいるため)
(2).開閉式が仕様でなく、あるタイミングでそれが発生してしまうなら修正はあるのか
(3).)条件によって開閉式ならば、閉ができる条件というのはどういうときか
前述の通り開閉式が本来の仕様です。
追記部分の開閉が必須でなければ、HTMLの<!--more_link-->と<!--/more_link-->の間にある、
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('.entry-extend-<%topentry_no>').attr('href','#').after('<div id="entrymore-visible-<%topentry_no>" class="entrymore-visible"></div>');
$('#entrymore-visible-<%topentry_no>').hide().prepend('<br />').load("<%topentry_link> .entry-more",function(){
$.ajax({complete: function(){$('#entrymore-visible-<%topentry_no> .fc2_footer').empty();}});
});
$('.entry-extend-<%topentry_no>').click(function(){$('#entrymore-visible-<%topentry_no>').slideToggle("slow");return false;
});
});
</script>
というスクリプト部分を削除していただければ通常の動作に戻ります。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント23番の方へ
記事の方の記述がちょっと古かったので、修正致しました。
情報ありがとうございます。とても助かります!
京 | -
はじめまして。
このテンプレートをお借りしています。
失礼ながら、いろいろカスタマイズさせていただきました。
カスタマイズについての質問なんですが、サブカラム上のプラグインが左詰めになってしまうのは変更できないのでしょうか?
もう少し右の余白を狭くできないかなぁ…なんて思ってます。
あと、
もしよければ訪問していただいて、注意点、改善点など教えてくれるとうれしいです。
お暇なときでよろしいのでよろしくお願いします!
京さん、はじめまして。コメントありがとうございます。
> サブカラム上のプラグインが左詰めになってしまうのは変更できないのでしょうか?
snowdanceはプラグイン1とプラグイン2が横並びで表示される、変則的な3カラム形式となっていますので、プラグイン2にプラグインを何も配置していないと偏って見えてしまいます。
プラグイン1からプラグイン2へいくつかプラグインを移動させるか、もしくは
プラグイン1と2の横並びを解除するカスタマイズを施すと良いでしょう。
プラグインの横並び解除の方法については、
http://rimse.blog73.fc2.com/blog-entry-203.html
こちらをご覧ください。(記事中に「■プラグインの横並び解除」という項目があります)
ブログを拝見させていただきましたが、どこをどのように変更したのかわからず^^;
とりあえず、何の問題も無く表示されているように思いますよ。
何かありましたら、お気軽にコメントなどしてくださいね。
京 | -
解決しました♪
どうもありがとうございます。
もしかしたら、まだ更新してなかったからかもしれません^^;
やっとカスタマイズもほとんど完成しました。
よかったら見てみてくださいm
京さん、うまくいったようでなによりです。
ブログを拝見致しました。
かなり細かいところになりますが、ページ上にある前後のページへのリンク(「HOME」「NEXT」のところ)にマウスを載せると、雰囲気に合わない背景色(snowdanceのデフォルトの色)になってしまうので、そこを変更すると良いかもしれませんね。
編集箇所は以下の部分です。
/*[15.2.6]*/
dl#pagetop-link a:hover {
color : #fff;
border-bottom : 2px solid #fff;
background-color : #666;
}
このなかの、background-colorの値を変更してみてください。
京 | -
訪問&アドバイスありがとうございます。
確かに、色変えた方がいい感じですね;
色ついでの質問なんですが、
左右の黒い部分は色を変えられないのでしょうか?
京さん、コメントありがとうございます。
> 左右の黒い部分は色を変えられないのでしょうか?
この部分はbodyに対する背景の設定になります。
/*[2.1]*/
body {
margin : 0;
padding : 0 25px;
line-height : 1.5;
font-family : "Verdana" , "MS UI Gothic" , "Osaka" , sans-serif;
font-weight : normal;
text-align : center;
background-color : #333;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/manicstar_background.png");
background-repeat : repeat-x;
background-position : 0 0;
background-attachment : fixed;
}
このbackground-○○に関する設定を変更することになります。
色の変更に関してはbackground-colorプロパティを変更してください。
その際、初期設定ではびみょーなグラデーションを画像によってつけていますので、それらに関する記述(background-image/repeat/position/attachment)は削除する必要があります。
京 | -
遅れましたがありがとうございます。
自分の願ってた通りにできました。
とてもわかりやすい説明感謝です。
テンプレートダウンロードさせて頂きました!
しかしながら、左の記事のフォントすべてに太字になるようになっていて、自分としては少し見づらいです。
でもどこをどうすれば細くなるか分からないので悩んでいます。
失礼かと思いますが教えてください。お願いします。
とうもりさん、初めまして。コメントありがとうございます。
> しかしながら、左の記事のフォントすべてに太字になるようになっていて、自分としては少し見づらいです。
テンプレート側では記事が太字になるような設定は一切しておりません。
おそらく、記事中(もしくは、使っていればプラグイン3の中)で使われている「太字にするタグ」がきちんと閉じられていないため、それ以降がすべて太字になってしまっているんだとおもいます。
非公開コメントで結構ですので、とうもりさんのブログのアドレスを教えていただけませんでしょうか。
ソースを見ないと該当部分を見つけるのは難しいかと思います。
申し訳ありません、説明不足だったのか、それとも太く見えるのかよくわからないのですが
自分はSnowdanceを使わせてもらってるのですがFioreのほうと記事の書体を比べると若干Snowdanceの方が文字がつぶれて見えてしまいます。
これは書体の影響か何かなのでしょうか?
FioreとSnowdanceで使っているフォントは同一のものです。
Fioreと比較するとSnowdanceは背景色と文字色の明度差が若干小さくなっているので、それによって文字が太く(というよりも、不鮮明に)見えるのかもしれません。
また、明るい色は広がって見え、暗い色は縮んで見えるといわれていますので、Fioreは黒字が引き締まって見えるのに対し、Snowdanceの配色では文字が広がって見えるのかもしれません。
文字色に関しましては、スタイルシート上部にある簡易カスタマイズ項目内に【文字色の変更】という部分がありますので、そちらを編集することで変更可能です。
はじめまして。
Snowdanceを使わせていただいてます。
CSS編集で、固定幅900ピクセル、記事欄を70%、プラグイン側を1列表示で30%にしました。
IE7とかFirefoxでは問題なく表示できるのですが、
何故かIE6で表示するとヘッダーの写真のところだけが
全体の50%で表示されてしまします。
なにか対処法はございますでしょうか?
宜しくお願い致します。
AZさんはじじめまして。コメントありがとうございます。
> IE7とかFirefoxでは問題なく表示できるのですが、
> 何故かIE6で表示するとヘッダーの写真のところだけが
> 全体の50%で表示されてしまします。
SnowdanceはIEのバグ対策としてIE用の記述を分けております。
なので、おそらくはIE6用の記述を編集し忘れているんじゃないかなと思われますが、もしかするとバグの可能性もありますので、直接ソースを見て確かめたいです。
お手数おかけいたしますが、非公開コメントで結構ですので、AZさんのブログのアドレスを教えていただけませんでしょうか。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
わー、ごめんなさい。テンプレートのミスだったようです・・・。
/*[3.1-b:for IE5-IE7]*/
.lt-ie8 #header {
width : 49.5%;
}
こちらを削除してくださいませ。
ただ、これだとIE8では大丈夫なはずなんです。もう少し調べてみますね。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
ギムレット | -
質問なのですが
ブログタイトルやカテゴリーなどがある部分を2列(rimseさんのように)するにはどうすればいいのでしょうか?
CSSについてあまり知識がないので初歩的な質問かもしれませんが変更する箇所を教えて頂けませんでしょうか?
宜しくお願いします!!
Re: 質問なのですが
ギムレットさん初めまして。コメントありがとうございます。
> ブログタイトルやカテゴリーなどがある部分を2列(rimseさんのように)するにはどうすればいいのでしょうか?
これはCSSは特にいじる必要はありません。
管理画面の「プラグインの設定」を見ればわかるかと思いますが、プラグインカテゴリというものが1から3まであります。Snowdanceの場合、プラグインの横並びを解除するカスタマイズを行っていなければ、プラグイン1とプラグイン2がサブカラムに並び、プラグイン3が記事上部に表示されるように設定されています。
ですので、適当なプラグインをプラグインカテゴリ1からプラグインカテゴリ2に移動していただければ結構です。
ギムレット | -
返信有難う御座います
CSSをいじるものだと思い込んでたので盲点でした。
試してみたところ、無事2列にすることが出来ました!
この記事にあったタイトル画像をランダムに変更させる方法を試したんですが、画像が変わりません。
</head>の上に書いてあったscriptを入れて画像のURLを貼ったのですが変わりませんでした。画像は全部で7枚貼りました。
読み込みの画像?が続いてたので調べたところ、()を入れたままだったのが原因と分かり、()を消したんですが変化無しです。
スタイルシートの「タイトル部分の変更」の#headerのところの画像が表示されるだけでHTMLのscriptが機能していない状態です
スタイルシートの画像の縦幅の調整などのピクセルを変更しているとランダムにならないということはありますか?
javascriptを使わないように設定されているかが分からないので、よろしければ設定の確認方法なども教えて頂けないでしょうか?
使用ブラウザはFireFoxのバージョン3.5.2です
Re: 返信有難う御座います
> この記事にあったタイトル画像をランダムに変更させる方法を試したんですが、画像が変わりません。
ブログの方を確認しましたが、今は記述を消していますか?
だとすると記述ミスかどうかも調べることが出来ないので、何とも言えません。
一応、このカスタマイズで実際にランダム表示できることは確認済みです(テスト環境、および利用していただいている方の報告から)。
ページを更新するたびに表示する画像をランダムで選択するというものなので、運が悪ければ同じ画像が連続して表示されることもあります。七枚だと確率的にちょっと低めですが、とりあえず何度か再読み込みをしてみてください。
> スタイルシートの画像の縦幅の調整などのピクセルを変更しているとランダムにならないということはありますか?
無いと思います。
> javascriptを使わないように設定されているかが分からないので、よろしければ設定の確認方法なども教えて頂けないでしょうか?
使わないように設定しているかわからないのであれば、おそらくは使うように設定されているとは思いますが、Firefoxですとメニュー上の「ツール」→「オプション」から、「コンテンツ」のページを開いたところにjavascriptの使用についての設定があります。
また、このページのプラグインに「Design Select」という項目があります。
そこでブログのデザインを切り替えることが出来るようになっているのですが、この切り替えにjavascriptを使っております。切り替えがうまくいけばjavascriptが動作しているはずです。
★その他、ちょっと気になったこと
もしかして、http://rimse.blog73.fc2.com/blog-entry-203.htmlこちらの記事の編集を一部でしていらっしゃいますか?
こちらは古いバージョン用のものなので、適用しない方が良いと思います。
あと、
/*[3.2]*/
.header-container {
background-image : url("http://blog-imgs-41-origin.fc2.com/r/i/m/rimse/snowdance_title_border-y.gif");
background-repeat : no-repeat;
height : 100%;
}
太字部分についてです。あえて編集したのであれば問題ありませんが、この部分は「repeat-y」でなければタイトルと記事の間のボーダーがきちんと表示されなくなります。
ギムレット | -
確率が低かっただけだったようです。すみません。
何度か更新したところ動作確認しました!
javascriptは有効になっていたようです。
http://rimse.blog73.fc2.com/blog-entry-203.htmlの記事は色々やってる時に更新して、そのまま戻すのを忘れてたみたいです。
/*[3.2]*/
.header-container {
background-image : url("http://blog-imgs-41-origin.fc2.com/r/i/m/rimse/snowdance_title_border-y.gif");
background-repeat : no-repeat;
height : 100%;
}
これも試してた時に戻すのを忘れてたようです。
ご指摘・返答有難う御座いました。
うまくいったようで何よりです。
これからもどうぞよろしくお願いします
教えてくださいませ
snowdance_1を使わせて頂いておりますムネミツと申します。
実は記事のエントリー部分、本文中のリンク色だけを変更したいと思いスタイルシートをあれこれといじってみたのですが、どうも上手くいきません。
何処を変更したら良いのかご教授頂きたいと思います。
宜しくお願いします。
URLはmoamunemitsu.blog63.fc2.com/です。
Re: 教えてくださいませ
ムネミツさん、初めまして。コメントありがとうございます。
> 実は記事のエントリー部分、本文中のリンク色だけを変更したいと思いスタイルシートをあれこれといじってみたのですが、どうも上手くいきません。
記事本文のみ、リンク色を変えるとなると新しく記述を追加する必要があります。
以下の記述を追加してください。
/*[記事本文中リンク色]*/
.entry-body a:link ,
.entry-body a:visited {
color : #c66;
}
/*[記事本文中リンク色:マウスオーバー時]*/
.entry-body a:hover {
color : #c33;
}
後は適宜文字色を変更してください。
有難う御座いました
rimse様お忙しいでしょうに早速のご回答有難う御座いました。
無事にリンク色を変える事ができました。
rimse様には関係が無いのですが、私が書いている記事の内容上、記事の下に挿入されるFC2の広告が許せないので、それも目立たせてしまっているのが癪にさわるところです(笑)
今回は有難う御座いました。
また何かありましたら寄らせていただきます。
KALONJI | EgRjt5do
2.4へのバージョンアップについて
始めまして、snowdance2.3愛用させて頂いております。
早速質問で恐縮ですが、10/8の記事にて2,4へのバージョンアップを、共有テンプレートからの再ダウンロードで行うようご指示がありましたが、ダウンロード済みと表示されバージョンアップできません。
どの様にすればいいのでしょうか?
ご回答お待ちしております。
Re: 2.4へのバージョンアップについて
KALONJIさん、はじめまして。コメントありがとうございます。
> 早速質問で恐縮ですが、10/8の記事にて2,4へのバージョンアップを、共有テンプレートからの再ダウンロードで行うようご指示がありましたが、ダウンロード済みと表示されバージョンアップできません。
テンプレート名を変更すると、ダウンロードができるようになります。
snowdanceのテンプレートの編集画面をひらき、テンプレート名の部分を適当なもの(たとえばsnowdance-oldなど)に変更してください。
後ほど、記事のほうも修正しておきますね。
貴重な情報ありがとうございました。
KALONJI | EgRjt5do
無事できました
回答おりがとうございます。
無事バージョンアップできました、また宜しくお願いします。
正宗 | -
はじめまして。
はじめまして。snowdanceをダウンロードして現在カスタマイズ中です。凄く個人的質問で、申し訳ないのですが、
タイトルとブログ説明が書かれている場所のすぐ下の位置に現在私のブログで使っている「横メニューバー」を設置したいのですがHTMLの挿入位置がわかりません。どの位置に挿入したらいいのかご教授お願い致します。
もう一つ質問です。
メインカラムのブログ記事とサブカラムのプラグインカテゴリ3の背景を画像にしたいと思っているのですがどうすればいいですか?
ご教授お願い致します。
正宗さん初めまして。コメントありがとうございます。
> タイトルとブログ説明が書かれている場所のすぐ下の位置に現在私のブログで使っている「横メニューバー」を設置したいのですがHTMLの挿入位置がわかりません。
<div id="introduction">
<p><%introduction></p></div>
と、
</div></div>
の間の部分か、もしくは
<p><%introduction></p>と</div>の間あたりに追加してみてください。
(※試していません)
> メインカラムのブログ記事とサブカラムのプラグインカテゴリ3の背景を画像にしたいと思っているのですがどうすればいいですか?
HTMLとスタイルシートの両方を編集します。
まず、HTMLの
<div id="sub"><div class="sub-container">
という部分を、
<div id="sub"><div class="sub-temp"><div class="sub-container">
としてください。(赤部分を追加)
また、
</div></div>
<!-- 【 ▲サブエリア ここまで 】 -->
という部分を、
</div></div></div>
<!-- 【 ▲サブエリア ここまで 】 -->
としてください。
次にスタイルシートを編集します。
以下の記述をスタイルシートの最後尾に追加してください。
#sub { padding-top : 0; }
.sub-temp { background:url("画像のurl"); }
「画像のurl」という部分には使用したい画像のurlを入れてください。
画像の繰り返しや位置などを設定することも可能です。
適当なCSSリファレンスから、backgroundプロパティを調べてみてください。
正宗 | -
ありがとうございます。
回答ありがとうございます。
さっそくカスタマイズに挑戦してみます。
本当にありがとう御座いました。
また、なにかありましたら寄らせていただきます。
正宗 | -
何度も申し訳ありません。
メニューバーの表示はうまくいったのですが、画像の方がサブカラムの全体(テンプレート右側)になってしまいました。
トップページの記事の上にのみ表示されるプラグイン3の背景の方をを画像にしたいと思っています。
現在プラグイン3に設置しているのは「最新記事」を設置しています。
どうかご教授のほどよろしくお願い致します。
すみません、激しく勘違いしておりました。
わーー、すみません。「プラグイン」と「背景画像」という言葉が自分の中で一人歩きしてしまってました。「プラグイン部分に背景画像を設定する」というカスタマイズとしては正解なのですが、全くもって回答になってませんでしたね…。ごめんなさいっ!
慌ててカスタマイズ方法を考えてみました。
以下の記述をスタイルシートの最後に追加してください。
div.plugin3 {background:none;}
.shift-off div.plugin3-container {background-position : 2.5em 0;}
.shift-on div.plugin3-container {background-position : 2em 0;}
div.plugin3-container {
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/border-y.gif");
background-repeat : repeat-y;
}
div.plugin3 {
background : url("画像のurl");
}
画像のurlという部分を表示させたい画像のurlに書き換えてください。
「プラグイン3」をどの部分までとするか、ちょっと分からなかったので、とりあえず一度これで試してみてくださいませ。
正宗 | -
ありがとうございます。
ご回答有難う御座います。
プラグイン3に画像を入れることができました。画像の大きさなどで雰囲気にあうようにいろいろ試してみます。
ご教授ありがとうございました。
正宗 | -
たびたび申し訳ありません
何度も申し訳ありません。snowdanceをカスタマイズ中です。
プラグイン3に画像を入れたのはいいんですが挿入位置の変更方法がわかりません。点線の枠の中に表示させたい時はどのようにすればいいのでしょうか?現在は縦の線の左側にも表示されてしまい左側の画像を消したいです。
もう一つ・・・
オリジナルのリンクバナーを記事内の
Thread
ジャンル:○○ テーマ:○○
の上に表示させたいのですがHTMLタグをどの位置に挿入すればいいですか?
あと、何度か挿入してみたんですがバナーが
(■一つがバナーと思ってください)
■
■
と縦に表示されてしまいます。
■■と並べて表示させたい時はどのようにすればいいのでしょう?
何度も質問してしまい申し訳ありません。ご教授お願い致します。
よろしくお願いします。
Re: たびたび申し訳ありません
> プラグイン3に画像を入れたのはいいんですが挿入位置の変更方法がわかりません。点線の枠の中に表示させたい時はどのようにすればいいのでしょうか?現在は縦の線の左側にも表示されてしまい左側の画像を消したいです。
プラグインタイトルの部分まで含めようとした場合、変更箇所が多くなってしまうため、とりあえずそこは含まないようにしたカスタマイズを紹介します。
(つまり、十字に破線がクロスしているところの、右下部分にのみ、背景が適用されるというものです)
コメントNo.58で追加した部分を削除し、以下の記述を新たに追加してください。
h2.plugin3-title { margin : 0;}
.plugin3-container{margin-left:1px;}
.shift-off div.plugin3-container {padding : 0 1em;}
.shift-on div.plugin3-container {padding : 0 1em 0 0.5em;}
.shift-off div.plugin3-body {padding:1em;margin:0 0 0 1.5em;}
.shift-on div.plugin3-body {padding:1em;margin:0 0 0 1.5em;}
.plugin3-body {
background : url("画像のurl");
}
画像のurlという部分は、使いたい画像のURLに書き換えてください。
> オリジナルのリンクバナーを記事内の
>
> Thread
> ジャンル:○○ テーマ:○○
>
> の上に表示させたいのですがHTMLタグをどの位置に挿入すればいいですか?
ユーザータグを使うと記事のスレッド表示の上にタグリストが表示されるようになっていますので、それも考慮し、
<div class="entry-footer"><div class="entry-footer-container">
という部分の下に記述を追加すると良いかと思います。
> あと、何度か挿入してみたんですがバナーが
> (■一つがバナーと思ってください)
> ■
> ■
> と縦に表示されてしまいます。
> ■■と並べて表示させたい時はどのようにすればいいのでしょう?
どういった記述を追加しようとしているのか分からないので、正確なことは何も言えないのですが、普通にバナーをimg要素を使って表示させた場合はそのまま横並びで表示されるハズです。
divやp、li、ddといった要素で、バナー部分が囲まれていませんか?
または、追加しようとしている記述の中にbr要素が入っていませんか?
正宗 | -
有難うございます。
>プラグイン3背景
線の枠の中に表示できました。
>バナー
希望の場所に表示する事ができました。
>バナーを並べる
バナーのHTMLタグを見てみたらbr要素が入っていました。それを消して解決する事ができました。
沢山質問してしまって申し訳ありませんでした。
ご返答有難う御座いました。本当に助かりました。
V2.0をつかわせていただいています。
V2.0を使わせていただいているのですが、ネットから遠ざかっている間にV2.4になっていたのですね。
そのままでいいかなぁとおもっていたのですが、V2.0で水平線を記事にかくと、水平線が美しくみえなくなってしまったため2.4に近いうちにアップしようとおもっています。
テンプレがバージョンアップした場合、過去のバージョンだと表示がくずれたりしちゃうものなのでしょうか。(カストマイズ部分が多いのでできるならさわりたくなかったもので・・><)
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: V2.0をつかわせていただいています。
さふぁぃぁさん、お久しぶりです。コメントありがとうございます。
> V2.0で水平線を記事にかくと、水平線が美しくみえなくなってしまったため2.4に近いうちにアップしようとおもっています。
> テンプレがバージョンアップした場合、過去のバージョンだと表示がくずれたりしちゃうものなのでしょうか。
いえ、そういったことは無いハズです。
URLを拝見いたしましたが、確か元々こういったデザイン(スタイル無指定の状態)だったような気がします…(記憶が曖昧ですが)。
以前はどのような感じに表示されていましたか?
ありがとうございます。
以前、こちらでご質問した時はIE6.0を使用しており、現在は8.0です。それも関係してるんでしょうか・・(OSもVISTAに変わってます)
以前は水平線は、普通に直線一本でみえていたのですが、今は縦に幅がある直方体(縦といっても1mm以下なのですが2本線のようにみえます)みたいにみえています。(私のPCで表示される画像をブログ記事で書いてみました。)
rimse様が当方のブログをみていただいて1本線にみえたということでしたらIE8のせいなのかもしれないですね。ということはsnoudanceをアプデしてもそこは変わらないということなのかもしれないですねぇ・・
木刀・正宗 | -
こんばんは。
snowdanceを使わせてもらってます。
質問があるのですがよろしいでしょうか?
いただいたトラックバックにブログ名といただいた日付と時刻を表示させたいのですが現在は「記事のタイトル」と「ブログの冒頭の部分」しか表示されません。
ブログ名と日付などを表示させたいときはどのようにすればいいですか?
それとトラックバックを一件ずつ線で区切りたいのですがどのようにすればいいでしょう?
ご教授お願いいたします。
Re: ありがとうございます。
> 以前、こちらでご質問した時はIE6.0を使用しており、現在は8.0です。それも関係してるんでしょうか・・(OSもVISTAに変わってます)
なるほど、それが原因ですw
以前は水平線に対してスタイルを指定していなかった、つまりブラウザに表示の方法を任せていたため、ブラウザを変更したりすると今回のように表示が変化することがあったのですね。
ver.2.4でスタイルを変更したというのは、水平線に対してきちんとスタイルを指定し、ブラウザによる表示を統一したということです。
ですので、
> ということはsnoudanceをアプデしてもそこは変わらないということなのかもしれないですねぇ・・
ver.2.4にアップデートすれば、水平線に関しての表示は変化します。
ちなみに、変更後のスタイルは、http://rimse.blog73.fc2.com/blog-entry-247.htmlこちらの記事中で使われているような、ドット線になっています。
> 以前は水平線は、普通に直線一本でみえていたのですが、今は縦に幅がある直方体(縦といっても1mm以下なのですが2本線のようにみえます)みたいにみえています。(私のPCで表示される画像をブログ記事で書いてみました。)
> rimse様が当方のブログをみていただいて1本線にみえたということでしたらIE8のせいなのかもしれないですね。
これは以前のバージョンでは仕様通りの表示だったりします。お騒がせいたしました。
正宗さん、お久しぶりです。
> いただいたトラックバックにブログ名といただいた日付と時刻を表示させたいのですが現在は「記事のタイトル」と「ブログの冒頭の部分」しか表示されません。
> ブログ名と日付などを表示させたいときはどのようにすればいいですか?]
HTMLの編集を行います。
「トラックバックエリア ここから」と「トラックバックエリア ここまで」の間に、以下の記述があります。
<p class="trackback-list-title"><a href="<%tb_url>" name="trackback<%tb_no>" id="trackback<%tb_no>"><%tb_title></a></p>
この部分を、
<p class="trackback-list-title"><a href="<%tb_url>" name="trackback<%tb_no>" id="trackback<%tb_no>"><%tb_title></a> (<%tb_year>/<%tb_month>/<%tb_day>)</p>
としてください。(赤字部分を追加)
> それとトラックバックを一件ずつ線で区切りたいのですがどのようにすればいいでしょう?
スタイルシートの最後に、以下の記述を追加してください。
/*[14.2]*/
dd.trackback-list {
margin : 0 0 0 1em;
padding : 1em 0;
border-bottom : 1px dotted #999;
}
/*[14.3]*/
p.trackback-list-title {
margin : 0;
}
/*[14.4]*/
p.trackback-list-excerpt {
margin : 0 0 0 2em;
}
ちょっとだけ、表示を調整してあります。
2.4にあげてみましたが・・
知識も乏しいのに、カストマイズしたことで足をひっぱっています><
いろいろカストマイズできる2.4にアップデートしてみたのですが、各記事のコメントを各場所では、1,2カラムがブログの右側にきちんと表示されるのですが、ホームや単独の記事をひらいたときに1,2カラムが下に表示されてくずれてしまいます。
またお時間あるときで結構ですので、ご指摘いただけると助かります。よろしくお願いいたします。
Re: 2.4にあげてみましたが・・
カスタマイズによって崩れてしまった原因を見つけ、修正するというのは、どこをどのように編集したのか分からない外部の人間が行うのは非常に難しく、手間がかかります。本来はそういったことまでサポートつもりはありません。
ソースコードなど確認してみましたが、「<div id="entry_area">」というのを追加しましたか?おそらく、それに対応する</div>が追加されていないため、テンプレートの構造が崩れています。
個別ページでカラムが正常であるのは、コメント投稿部分に追加した絵文字用のスクリプト部分で、</div>が単独で記述されているからです。(これもこれで、HTMLとしては間違っています)
ということで、以下のような修正を施してください。
1.
<div id="entry_area">を削除
2.追加したスクリプト部分、
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'entry_area';
を
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'main';
に変更。
3.絵文字入力のために追加したであろうスクリプト部分、
<dd><script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
(略)
}
writeCustmizeEmojiTagList();
// -->
</script></dd>
</div>
最後の</div>を削除
以下はカラム崩れとは関係なく、修正が必要な部分です。
HTML上部に、
</head>
<body class="<!--not_index_area-->not-<!--/not_index_area-->index-area<!--not_plugin--> plugin-off<!--/not_plugin--><!--permanent_area--> permanent-area<!--/permanent_area-->(※長いので省略)<!--/tag_area-->">
<!-- FC2のアクセス解析をつける場合はこの下にHTMLを追加してください -->
という記述が、よく見ると二個あります。
下の方にある記述(アクセス解析を実際に追加していない方)を削除してください。
たぶん、こんな感じで大丈夫なんじゃないかなと思います。
ありがとうございました
おかげさまで表示できるようになりました。
お時間とっていただけありがとうございました。
木刀・正宗 | -
ありがとうございます。
有難うございました。
ご教授していただきとても助かりました。
僕ちゃん | -
初めまして、お世話になっております。snowdanceを使わせていただいているのですが、少し質問があるのでよろしいでしょうか。
個別記事を開いた時に、カラムを表示しないで記事だけを表示する事は可能なのでしょうか?分かりづらいとは思いますが、もし可能であればご教授お願いいたします。
僕ちゃんさん、初めまして。コメントありがとうございます。
> 個別記事を開いた時に、カラムを表示しないで記事だけを表示する事は可能なのでしょうか?
あまりテストをしていないのですが、以下の記述をスタイルシートの最後に追加してみてください。
.permanent-area #header ,
.permanent-area #sub {
display : none;
}
.permanent-area #main {
float : none;
width : 100% !important;
}
.permanent-area #page {
background-image : none;
}
僕ちゃん | -
ご返事ありがとうございます。
やってみたのですが、変わった様子は見られません・・・お忙しいところご迷惑をおかけして申し訳ありません。何とかよろしくお願いします。
?
変わっていますが…?
編集中の「プレビュー」では、変更部分はトップページにしか適用されません。
更新を適用した後に個別記事を開いてみてください。
僕ちゃん | -
申し訳ありませんでした。私の早とちりで、ちゃんと望んだとおりになり、本当に助かりました。
また、何かあったらその時はお手数ですが、またよろしくお願いします。お忙しいところご丁寧にどうもありがとうございました。
朔 | mQop/nM.
初めまして、朔と申します。
snowdanceを使わせていただいております。
今回は、記事タイトルの横にある△の部分の色の変更についてお聞きしたいのですが、、こちらはどこを変更したら宜しいでしょうか?
お時間のある時でよろしいので、教えていただけたらと思います。
よろしくお願いいたします。
朔さん、初めまして。コメントありがとうございます。
> 今回は、記事タイトルの横にある△の部分の色の変更についてお聞きしたいのですが、、こちらはどこを変更したら宜しいでしょうか?
この部分は画像を使っていますので、画像自体を編集する必要があります。
まず、次の画像をダウンロードして、色を編集し、ファイルアップロードをつかって画像をサーバーにアップロードしてください。
http://blog-imgs-41.fc2.com/r/i/m/rimse/fragment_entrytitle.gif
次に、スタイルシート中の、
/*[7.2]*/
h2.entry-title {
(省略)
}
という部分と、
★追加部分ここから★
/*[11.1-a]*/
div.comment h3 ,
div.trackback h3 ,
div.edit-comment h2 {
(略)
}
★追加部分ここまで★
…という部分を探してください(ナンバリングを参考にどうぞ)。
この部分にそれぞれ、
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/fragment_entrytitle.gif");
という記述がありますので、
「url("」と「");」の間にある部分を、アップロードした画像のURLに書き換えてください。
このとき、「background-image : url("」から「");」までに改行を入れてしまうと、InternetExplorer以外のブラウザで正常に表示されません。改行を入れないように気をつけてください。
(「折り返される」のは表示上の処理ですので問題ありません。「改行コード」が問題になります)
朔 | mQop/nM.
できました!
rimse様
お礼が遅れて申し訳ありません。
さっき、無事に画像を取りかえることができました^^
丁寧なご説明、ありがとうございました!
ただ、画像の色の変更がわからなかったので、自分で作って貼りつけました。。
rimseさんの方で問題があれば、なんとか元の画像での色変更に挑戦して再度画像を取り替えますのでおっしゃっていただけたらと思います。
:追記:
お返事が遅れて申し訳ありません!
お教えいただいた通り、修正しました。
丁寧に教えてくださり、本当にありがとうございました。
Re: できました!
わわわー、ごめんなさい。
編集箇所がもう一カ所ありましたので、コメントの方を編集してあります…!
> rimseさんの方で問題があれば、なんとか元の画像での色変更に挑戦して再度画像を取り替えますのでおっしゃっていただけたらと思います。
全く問題ありませんので、ご安心くださいませー!
化三 | -
はじめまして
お世話になっています。
snowdanceのテンプレートを使用させてもらっています。
質問なのですが、
このテンプレートのbodyの部分は左右で違う画像を張ることはできないのでしょうか?
素人質問で、すいません。
よろしくお願いします。
Re: はじめまして
化三さん、コメントありがとうございます。
> このテンプレートのbodyの部分は左右で違う画像を張ることはできないのでしょうか?
すみません、"bodyの部分"というのはどこのことを指していらっしゃいますか?(該当しそうな部分がいくつかあるので…)
また、画像の大きさや画像の表示の仕方(背景にするのか、繰り返しをするのか)など、ご希望をもうすこし詳しくお聞かせいただければ幸いです。
化三 | cyyEb6GE
はじめまして
返信、ありがとうございます。
えーと、具体的には
スタイルシートの編集の
/* ■■ [2] ページ全体の設定 ■■
───────────────────────────────────────
ページ全体に適用するスタイルを設定しています。*/
/*[2.1]*/
body {
margin : 0;
padding : 0 25px;
line-height : 1.5;
font-family : "Verdana" , "MS UI Gothic" , "Osaka" , sans-serif;
font-weight : normal;
text-align : center;
background-color : #333;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/manicstar_background.png");
background-repeat : repeat-x;
background-position : 0 0;
background-attachment : fixed;
}
のbackground-imageの部分において、画像を張り替えたのですが。
これを左右?で違う画像を使うことなどはできないのでしょうか?
分かりにくい、質問ですいません。
化三さん
スタイルシートの仕様上、一つの要素に対して設定できる背景画像は一つだけです。
つまり、スタイルシートの変更だけでは二つ以上の画像を設定することは出来ず、HTMLなどの編集が必要になります。
ところで、化三さんのおっしゃっている「左右」の部分とは、ページの左右にある余白部分の事でよろしいですか?
もしそうであれば、以下の編集を行ってみてください。
まずHTMLの編集です。
「<!-- 【 ▼幅可変/固定の切り替え 】 -->」の直前に、
<div id="temp">
を、「</body>」の直前に
</div>
を追加してください。
次にスタイルシートの編集を行います。
/*[2.1]*/
body {
margin : 0;
padding : 0 25px;
line-height : 1.5;
font-family : "Verdana" , "MS UI Gothic" , "Osaka" , sans-serif;
font-weight : normal;
text-align : center;
background-color : #333;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/manicstar_background.png");
background-repeat : repeat-x;
background-position : 0 0;
background-attachment : fixed;
}
という部分を、次のように書き換えてください。
/*[2.1]*/
body {
margin : 0;
padding : 0 0;
line-height : 1.5;
font-family : "Verdana" , "MS UI Gothic" , "Osaka" , sans-serif;
font-weight : normal;
text-align : center;
background-color : #333;
background-image : url("左側に表示させる画像のurl");
background-repeat : no-repeat;
background-position : 0 0;
background-attachment : fixed;
}
#temp {
margin : 0;
padding : 0 25px;
background-color : transparent;
background-image : url("右側に表示させる画像のurl");
background-repeat : no-repeat;
background-position : right top;
background-attachment : fixed;
}
赤文字部分が変わっています。
下線部はご希望に合わせて書き換えるようにしてください。
化三 | cyyEb6GE
rimse様
無事に画像を貼り付けることができました。
分かりにくい質問だったにもかかわらず、
HTMLの編集まで分かりやすくご説明いただき、
誠にありがとうございました。
どうも、初めまして。
「Snowdance」か「Fiore」のどちらかを使わせていただきたいのですが、どうすればよいのでしょうか。初めての事なので全く分からないのです。
何時間もかけて調べてみたのですがさっぱりでした。
あまりにも初心者すぎるコメントだと思いますが、教えてくださると嬉しいです。
Re: タイトルなし
イチさん、コメントありがとうございます。お返事が大変遅れてしまって申し訳ありません。
> 「Snowdance」か「Fiore」のどちらかを使わせていただきたいのですが、どうすればよいのでしょうか。初めての事なので全く分からないのです。
> 何時間もかけて調べてみたのですがさっぱりでした。
ごめんなさい、今SnowdanceもFioreも、更新作業中ということで非公開にしており、ダウンロードは出来ません。更新作業が終わるのをお待ちいただきたく思います。
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments