mysticdiary

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

レスポンシブなスライダー

今回は、レスポンシブなスライダーをトップにつけて、
ちょっとかわいらしい感じにしてみました。

rainbowbird.jpg

スライダーの画像は変更できます。
htmlの
<div class="photoimage">
<ul class="rslides">
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/niji3.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/tori3.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/city2.jpg" alt=""></li>
</ul>
<div class="photoback"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photoback7.png"></div>
</div>

この部分の
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/niji3.jpg" alt=""></li>

画像リンクをこ自分のサーバーにアップロードした画像リンクに差し替えます。
画像の大きさは、672px×300pxになります。

これも共有にしないので、以下からソースをダウンロードしてください。
エンコードはutf-8です。

rainbowbird
rainbowbird.html

rainbowbird.html

rainbowbird.css

rainbowbird.css

関連記事
baorin

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

4 Comments

クロスライン says...""
こんばんは。いつも素敵なテンプレートをありがとうございます♪
以前、MDさんが使っていたこちらのテンプレート(http://blog-imgs-56.fc2.com/f/x/t/fxtrade193/wweduijhyyg.jpg)が忘れられなくてお願いにきました。
このテンプレートを使わせて頂けないでしょうか?
ご検討よろしくお願いします。(_ _。)
2013.04.04 00:06 | URL | #- [edit]
管理人 says..."クロスラインさんへ"
こんにちは。
すみません、こちらのテンプレートはmysticdiaryオリジナル
ということで作ったものなので、配布の予定はいまのところ
ありません。
よろしくお願いいたします。
2013.04.06 07:47 | URL | #i4E9Nobc [edit]
shinji says...""
うゎ!!めっちゃきれいですね!!!!
2013.04.07 11:36 | URL | #- [edit]
らぅ says..."テンプレート使用のご報告"
FC2の共有で アリスの可愛いテンプレートを拝見して
とても素敵なテンプレートを作った作者さまのサイトにお邪魔してみたくなって来てみましたっ。

そぉしたら とても素敵なテンプレートが沢山あって迷いましたが
フォントが可愛すぎる こちらのテンプレートを使用したく ご報告の為にコメントさせて戴きました。

まだまだ暑い日が続きますが 体調を崩されませんようご自愛ください。

2013.09.03 23:37 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/430-64d2221b
← ミスティック・ウーマン2 → はじめてのresponsivedesign