mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

黒だけど涼しげに・・

どうしても重くなりがちで敬遠してたんだけど、
光の写真を背景に使ってみたかったので、思い切って黒背景にしてみました。

blacklightsample.jpg

いままで作ってきたテンプレートとは、ちょっと雰囲気が違う感じで気にいってマス。
上部の写真はs3Sliderつうやつで、ちょっとキャプションの現れかたがかっこいい
フラッシュみたいなスライドショーです。
しかし、このスライドショー導入したはいいが、
上のナビゲーションに使用しているlavalampがなぜか動かなくなってしまった。
いろいろ手をつくしたけど、どうしても背景の画像が動かない。
なんでだろうな~、なんかどっかのスクリプトの表記が邪魔してんのかな?
よくわからないけど、とりあえず今の所lavalampを使うのは断念。
普通のナビゲーションに。残念だな~。

もう一つ工夫した所といえば、追記のリンクか。
これはいつもはボタンを記事の下において、javascriptで開閉してたけど、
今回は普通のリンクにして、フッターの横においてみた。
これはいつもとちょっと違うところかなあ。
工夫といってもこの程度だけど(爆)

さてさて、これももう少し手直しして、今週中には申請したいなあ・・。

●上部ナビゲーションの編集

<div id="menu">
<ul> 
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder">All post</a></li>
<li class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder">Twitter</a></li>
<li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder">Rss</a></li>
<li class="mail"><a href="mailto:?subject=問い合わせ&body=ご記入ください" onfocus="this.blur();" class="nonborder">Contact</a></li>
<li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder">Admin</a></li>
</ul>
</div>

これはいつもの通りメールとツイッターはご自分のアドレスを入れてください。

●上部写真の入れ替え

これは比較的簡単。

<div id="s3slider">
<div id="slider1">
        <ul id="slider1Content">
            <li class="slider1Image">
                <a href="#"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/blacklightphoto1.jpg" alt="1" /></a>
                <span class="left"><strong>人形</strong><br />ここに説明入れてください</span></li>
            <li class="slider1Image">
                <a href="#"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/blacklightphoto2.jpg" alt="2" /></a>
                <span class="right"><strong>宝石</strong><br />ここに説明入れてください</span></li>
            <li class="slider1Image">
                <a href="#"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/blacklightphoto3.jpg" alt="3" /></a>
                <span class="right"><strong>ワシントン</strong><br />ここに説明入れてください</span></li>

            <div class="clear slider1Image"></div>
        </ul>
    </div><!-- // slider1 -->
</div>

以下の部分が一つの画像のまとまりですね。

<li class="slider1Image">
                <a href="#"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/blacklightphoto1.jpg" alt="1" /></a>
                <span class="left"><strong>人形</strong><br />ここに説明入れてください</span></li>

この部分の画像のアドレスを差し替えて、記事などのリンクをいれたければ#の部分にリンクアドレスを入れます。
「人形」の部分にタイトルを入れて、「ここに説明入れてください」の部分にキャプションを入れます。
画像を増やしたい場合は、上部のHTMLひと固まりを増やしていきます。
画像の大きさは、635px×360pxです。

ちなみに、キャプションの半透明の部分の幅を調整するには、CSSの

.left {
top: 0;
left: 0;
width: 200px !important;
height: 350px;
}

.right {
right: 0;
bottom: 0;
width: 200px !important;
height: 350px;
}

の部分で調整します。
今は200pxになっていますが、100pxとかお好きな数値に変更できます。
leftとrightがありますが、キャプションがどちらに現れるかで違います。
キャプション部分のHTMLをみるとわかるとおり、クラス名がleftとrightに分けてつけられています。

写真の移り変わり速度の変更は

<script type="text/javascript">
$(document).ready(function() { 
   $('#slider1').s3Slider({ 
      timeOut: 4000 
   });
});
</script>

この部分の4000の数値を変更します。
4秒だと4000です。5秒にしたい場合は5000とします。

その他の詳しい情報は元ネタのページを参照。
s3Slider

●サイドバーの開閉について

こちらの記事を参考にしてください。
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

16 Comments

RUKA says..."はじめまして"
はじめまして。現在JUGEMユーザーなのですが
たまにFC2も併用しています。
ランキングなどがあることから、アメブロへ移行しようか
迷っていた所、貴方様のテンプレートを見つけました。

女性の画像が変わるものやスライドショーなど
文字の見にくさなどはあるものの、見る人を
退屈させないテンプレートがどうしても使いたくなりました。

そしてお聞きしたいことがあるのですが、、、
アメブロでのテンプレ制作というのはやっておられますか?
また、再配布ではありませんが、FC2で配布されているものを
アメブロで使用するのは不可でしょうか?

いっそアメブロやめてこちらのテンプレを使いたいがために
FC2にしようかとも迷っております><

あと、希望なのですが、記事の文字のCSSが
情報提供として読みやすいと更にうれしいです!
2010.07.16 21:01 | URL | #kInBSwyc [edit]
管理人 says..."RUKAさんへ"
RUKAさんへ
こんにちは。
申し訳ないのですが、アメブロにテンプレートを提供する予定は
ありません。
また、テンプレートはfc2ブログのみ使用可能にさせていただいて
います。

文字が読みにくいとのことですが、フォント指定自体は、ごく一般的な
もので特に読みづらいものは使用していないのですが、
極端に見づらいということであれば、ブラウザの文字指定
(特にテンプレートでmonospaceをCSSで指定している場合)
が変になっている可能性もあります。
一度チェックしてみてください。
それでも変化がない場合は、CSSの文字指定を削除するという手があります。
その場合は、ユーザーさんのパソコンやブラウザの環境で自動的に
フォントが割り当てられます。
おそらく極端に見づらいフォントにはならないと思いますので、
一度お試しください。
2010.07.17 19:46 | URL | #JC3FHLh6 [edit]
momo says..."はじめまして"
こんにちは、すてきなテンプレート、FC2ブログの方で使わせていただいています。
改造の質問なのですが、カテゴリや最新記事などのMENU欄を、
開きっぱなしにする方法をもしよろしければお教えください。
自分なりにも調べては見たのですが、どうしてもわからなかったので、
よろしくおねがいします。
これからもすてきなテンプレート楽しみに拝見させていただきます。
2010.07.18 16:43 | URL | #- [edit]
管理人 says..."momoさんへ"
サイドバーの開閉についてはこちらの記事を参考に
なさってください。
下の方に記述があります。
http://mysticdiary.blog99.fc2.com/blog-entry-169.html
2010.07.19 14:06 | URL | #i4E9Nobc [edit]
isomin says..."blacklightの背景画像について"
はじめましてisominと申します。
管理人様の作品はどれも素敵ですね、その中でもblacklightが大変気に入りお借りいたしました。
スライドショーと開閉できるメニューがとても良いです!
現在、カスタマイズに励んでいる所なのですが、写真をカラーの物に入れ替えたら
大きさがあるだけに背景画像、キャプション、カラー写真、とちょっと五月蝿くなってしまいました。
できれば光の画像を取ってしまうか、変更したいのですが宜しいでしょうか?
「その他の変更場所」
・日付が2010.08.20に表示されるように変更
・文字の色、大きさを変更 ・キャプションの幅と背景を透明に変更
・ヘッダーの幅を少し狭く変更 ・上部ナビゲーションの使わない項目の削除です。
人様の作品を使わせて頂くのに何処までがカスタマイズで許されるのか心配なので
これは止めて欲しいと言うのがあるならば、直ぐに元に戻します。
お忙しい所申し訳ありませんがお返事お待ちしています。

2010.08.20 00:23 | URL | #OZO8Jvyk [edit]
管理人 says..."isominさんへ"
こんにちは。

テンプレート気に入っていただけてよかったです。
カスタマイズに関しては基本的になんでも自由ですが、
一つだけ禁止しているのが、画像の加工です。
画像をダウンロードしてご自分のパソコンで改変したり
加工したりはしないでくださいね、ということだけです。

あとは基本的にカスタマイズは自由です。
管理人の想像を超えてかっこよくカスタマイズ
している人を見かけると、管理人もうれしいです。
思いっきり楽しんでください!
2010.08.20 07:33 | URL | #- [edit]
isomin says..."プラグインが…"
お返事ありがとうございます。
カスタマイズも終って自分好みに近付いたのですが、一つ気になった所があります。
プラグインで一番上の最初から開いているのを1とすると8までは普通に表示されるのですが、
9個目からはずーっと左下に文字だけで表示されてしまいます。
現在はプラグイン8で使っていますが解決方法が分かりません。
ヒントをいただけるとありがたいのですが…<(_ _)>
2010.08.21 05:49 | URL | #OZO8Jvyk [edit]
管理人 says..."isominさんへ"
こんにちは。

すみません、管理人の方のテストだと何個プラグインをくっつけても
問題が発生しないので、実際にisominさんのブログを
拝見してみないとちょっとわからないです。
もしかしたらどこかに記述のおかしい部分があるのかも
知れません。

・・・いまダウンロード履歴からブログ拝見させて
いただいたのですが、いまのところ8個めまでは
開閉できるということで、9個めをつけてみた所が
拝見できないのでなんとも言えないのですが、
ブログ管理menuという項目でリンクが正常に閉じられて
ないとかのおかしな部分が一カ所はありましたが、
これを直すと正常になるかどうかわからないです。

ちなみに9個めのプラグインは共有プラグインですか?
もしそうならプラグイン名教えていただけますか?


2010.08.21 07:50 | URL | #- [edit]
isomin says..."お手数おかけします"
9個目とそれ以降のプラグインは公式のもので、何を入れ替えても同じ様です。
教えていただいたブログ管理menuの部分は削除しましたが変わりません。
IEだと8個目以降は左に少しずれてすぐ下に表示されます。
Fire foxだと画面左下に表示されます。
管理人様のテストで問題が無いのなら私が余計な事をしてしまったのでしょうね…
情けない事に当たって砕けろ方式でカスタマイズしてるので表示が崩れたり失敗が多いのです。
現在9個目以降を表示させていますが8個目までが問題ないならそのまま使わせて頂こうと思います。
お手数掛けて申し訳ありませんでした。<(_ _)>
2010.08.21 14:31 | URL | #OZO8Jvyk [edit]
isomin says..."無事解決いたしました!"
何度もすみません。
管理人様に教えて頂いたプラグインの余計なものを見直す作業をもう一度しました。
全部のプラグインのHTMLを確認し修正したところ問題解決いたしました!
もう、プラグインが鈴なりでもバッチリです。
IEもFire foxも正常に表示されています。
大切なお時間を使っていただいて本当にありがとうございました <(_ _)>
2010.08.21 15:16 | URL | #OZO8Jvyk [edit]
管理人 says..."isominさんへ"
おお!よかったですね。
ということは、管理人の方でテンプレートの修正は
しなくても大丈夫かな。

前に、開閉できないと言っていた人も
同じような感じだといいんですが・・。
2010.08.21 20:10 | URL | #- [edit]
isomin says..."15個!"
先ほど試しに15個までプラグインを付けてみたら問題ありませんでした。
大丈夫なようです(笑) 

2010.08.21 22:17 | URL | #- [edit]
isomin says..."全記事のカテゴリ別表示"
またまたお邪魔します。 先日はプラグインの件ありがとうございました!
今回はこんなのがあったら良いなのリクエストなんですけど…
全記事の表示をカテゴリ別にしたいと考えていたのですが上手くいきませんでした。
カテゴリ別表示のテンプレやカスタマイズの紹介しているサイトをみてみましたが、
私の脳みその限界値を越えたので諦めました(笑)
本文の上のカテゴリ横にテーマとジャンルを表示させる事が出来たんで自分なりに満足してます。
いつか新作のテンプレをお作りになるときは、カテゴリ別の表示出来るとありがたいのですが、
まぁ、何時か気が向いて作ってもいいぞっ!って時が来たら、どうぞよろしくお願いします
 <(_ _)>
2010.08.26 14:28 | URL | #OZO8Jvyk [edit]
管理人 says..."isominさんへ"
こんにちは。

全記事のカテゴリー別表示ですか・・。
どうやるんでしょうねえ?(笑)

あまり考えたことがないので、管理人も調べてみないと
わからないです。
もし、よさげだったら導入するかも知れませんが、
そうすると日付順がいいとか言う人も出てくるし、
どうにも悩ましい問題ですね(笑)
2010.08.27 11:36 | URL | #- [edit]
しづき says...""
管理人様はじめまして。テンプレート使わせていただいてます。

トップ画部分のサイドバーの開閉ですが、現在は初期設定の秒数のままなのですが、
ずっとブログを開いてると、なぜかだんだん開閉時間が短くなっていくのですがなぜでしょうか・・・?

あと、右から現れるときと左から現れるときと、画像は同じサイズを使っているはずなのに、
右からサイドバーが出るときだけ真ん中ぐらいでサイドバーが止まってしまいます。
これはなぜなのでしょうか?
2011.12.03 05:25 | URL | #- [edit]
しづき says...""
前回の質問の追記です。

こちらのテンプレートではなくホワイトボックスのほうをお借りしましたので
問題の件は大丈夫になりました。

どちらもとてもカッコイイテンプレートですね!
2011.12.04 19:04 | URL | #- [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/176-e1af0085
← 検索ボックスが上から出てくる → ブログデザイン変えてみた