mysticdiary

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

横幅いっぱいにスライダー

レスポンシブデザインにはまった管理人。
今度はトップに横幅いっぱいにスライダーをくっつけてみました。
横幅いっぱいだと、なんとなく広がりがあっていいですよね。

pinkandbluesample.jpg


ピンクとブルーを使ってすこし元気な感じにしてみました。
スライダーの写真はお好みで変更できます。

<div class="photoimage">
<ul class="rslides">
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo4.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/tphoto.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/tphoto2.jpg" alt=""></li>
</ul>
</div>


htmlのこの部分がスライダーです。
imgのリンクをご自分のサーバーにアップした画像リンクに差し替えてください。
何枚でも増やせます。画像の大きさは1500px×451pxですが、
あまりこの数値にこだわらなくてもいいと思います。

これはResponsiveSlides.jsを使っているので、詳しい使い方はそちらを読んでください。(英語だけど・・)

あとこのテンプレートはタイトルの下にあるイントロダクションは意図的に排除しています。
(入れるスペースがなかった(笑))

写真はフリッカーの方からお借りしているので、フッターのリンクは削除しないでくださいね。
ファイルは以下からダウンロードしてください。

pinkandblue
pinkandblue.html
pinkandblue.html

pinkandblue.css
pinkandblue.css


関連記事
baorin

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

10 Comments

ゆう  says..."はじめまして。"
はじめまして。
テンプレートをダウンロードさせていただきました。
どれもとても素敵で、うっとりさせていただきました。
画像を変更させていただきました。
どうもありがとうございました。
2013.05.14 17:37 | URL | #svfWGCro [edit]
Angie says..."スライダーの表示スピード"
はじめまして。いつもハイセンスなテンプレートをありがとうございます。
ところで、こちらのテンプレートでスライダーの写真表示スピードを調整したいと思って、ご紹介の英文サイトに飛ぼうとしたのですが、何度か試してもリンクがつながらないのです。失礼ですが、URLは間違いないでしょうか…?
2013.05.16 16:38 | URL | #- [edit]
管理人 says..."Angieさんへ"
こんにちは。
URLが変更されていたようなので直しました。
今度はつながると思います。
ありがとうございます。
2013.05.16 16:56 | URL | #i4E9Nobc [edit]
管理人 says..."ゆうさんへ"
こんにちは。
テンプレート気に入っていただけてよかったです。
お楽しみください。
2013.05.16 16:58 | URL | #i4E9Nobc [edit]
Angie says..."つながりました!"
早速のご対応、ありがとうございました。おかげさまで表示スピードのカスタマイズもでき、ついでにランダム表示も取りいれて楽しんでいます♪
2013.05.17 05:38 | URL | #- [edit]
あかり says..."現在のMysticDiaryのデザイン"
1年くらいずっとテンプレを使わせてもらっています。
ありがとうございます。
前後の記事へのリンクが出てこなくなったので直そうとしたのですが、
HTML初心者の私では対処できませんでした。
それで、テンプレート自体を変更しようと思うのですが、
現在のMysticDiaryのデザインのテンプレートを配信する予定はありますか?
1番クールで好きです!
2013.06.02 23:26 | URL | #ox98tKfQ [edit]
管理人 says..."あかりさんへ"
こんにちは。
テンプレート気に入っていただいてありがとうございます。
もうしわけありませんが、今のデザインは一応オリジナルなので
配信予定はないです。
今後ともよろしくお願いします。
2013.06.04 16:18 | URL | #i4E9Nobc [edit]
だーさん says..."こんにちわ"
2年程振りにテンプレお借りします。

こちらのテンプレート、やっぱり目が止まっちゃいますね。

素敵です。

まづは借用のご挨拶まで。
2013.07.08 10:31 | URL | #JalddpaA [edit]
says...""
こちらのテンプレートを使用させてもらおうと考えているのですが
CSSは開けますがhtmlが開けません
おそらくメモ張で開くと思われますが、なにか文字化けしたサイトにリンクしてしまいます・・・
2014.01.18 18:51 | URL | #- [edit]
管理人 says..."馬さんへ"
こんにちは。

うまくダウンロードできない場合は、こちらの記事
http://mysticdiary.blog99.fc2.com/blog-entry-413.html
を参考にしてください。
よろしくお願いします。
2014.01.20 11:34 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/432-fb592367
← なんか変わったレイアウトってないかなー → ミスティック・ウーマン2