FC2ブログ共有テンプレート作ってみた。スライドショー
slideshow テンプレートイメージ
本当はもっといろいろな画像を使いたかったけど、著作権フリー画像だとはっきり証明できないと審査が通らなかった。
画像は自由に変更してご使用ください。
どうも前回作った背景を動画にするタイプが、他のスクリプトとの相性の問題で安定感が無いので、スライドショーのjavascriptを利用してみた。
★補足・更新情報
2013年2月3日、申請中・承認待ちです。2013年2月27日承認されました。
【 インターネット 】カテゴリーの記事一覧
- WordPressの「永続オブジェクトキャッシュを使用してください」問題を改善した話
- カラーミーショップからBASEに移転した時のリダイレクト方法
- メタキーワード（meta keyword）は俺的に必要
- 【FC2ブログからロリポップWordPressへ引っ越し】リダイレクト方法とconfでハマった話
- 2016年、アクセスが多かった記事
- 2015年、アクセスが多かった記事
- ジャッケスカード
- 2014年、アクセスが多かった記事
- 2013年、アクセスが多かった記事
- FC2ブログ共有テンプレート作ってみた。スライドショー
- FC2ブログ共有テンプレート作ってみた。奥入瀬
- FC2ブログ共有テンプレート作ってみた。月と木
- FC2ブログ共有テンプレート作ってみた。破れた紙風
- FC2ブログ共有テンプレート作ってみた。WANTED張り紙風
- 2012年、アクセスの多かった記事
- FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
- 2011年、アクセス数の多かった記事と検索キーワード
- 2010年、アクセス数の多かった検索キーワード
- ふざけながらも感動を与えるギャップが良い
- ■□君の隣で□■
- サポートも大変だろうけど、やっぱ電話窓口は必要
- やほお ごおｇぇ せお
- ２００９年のネット流行語大賞は「※ただしイケメンに限る」
- 俺と親父とネトゲ
- ジーンときた、いい話 「おばあちゃんのすごろく」
- ジーンときた、いい話 「天使です、これは」
- ジーンときた、いい話 「着物の少女」
スライドショーのテンプレが非常にかっこよく気に入ったので
お借りしました。
ありがとうございます。
ひとつ気になったのが、ブログを表示してみると
readmore の表示が出ずに
全ての文章が表示されてしまいます。
これは何か原因がありますでしょうか？
個別記事ページ（URLの最後がblog-entry-○○.htmlのページ）で全て表示されるのはFC2ブログの仕様です。他のテンプレートでも同じだと思います。
個別記事ページ以外のページでも全文表示されてしまうのであれば、どこかに問題があるのかも知れませんが、私の環境では再現できませんでした。
非公開コメントでもいいので、URLを教えてもらえたら確認して修復に努めますがどうでしょう。
テンプレお借りしております。
ありがとうございます。
質問なのですが、同じページ内のリンクがどんな名にしてもすべてページの一番に戻ってしまいます。
idでも、nameでも同じでした。
何か原因はありますでしょうか？
はじめまして、こんばんは。
スムーズスクロールのスクリプトが邪魔をしてるみたいなので、htmlの中から下記記述を探して削除してください。
<script src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/jquery-page-scroller-308.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
virtualTop = 0;
</script>
スムーズスクロールしなくなりますが、トップ以外にも対応しているものもあると思いますので、必要であれば探してみてください。
さっそくの返答ありがとうございます！
無事にできるようになりました。
ありがとうございました！
初めましてこんばんは。
シンプルでおしゃれな見た目に惚れて
テンプレートをお借りしています。
ありがとうございます！
一つ、欲を出してお伺いしますが、
背景の画像を時間で指定してランダムに表示することは
できませんか？
例えば、
朝の時間帯には画像A～Cを、
昼には画像D～Fを…といったイメージなのですが。
私がテンプレートに詳しくなく、
自分でいろいろ探してみたのですが、
のようなものしか見つけられず、
思ったような表示ができません。
勿論、今のままでも十分素敵だと思います。
ご気分を損ねられましたらすいません。
はじめまして、こんにちは。
このテンプレートで使用しているスクリプトは、更新する度にランダムで変更するオプションはありますが、基本的にスライドショー用なので、決められた時間で変えるという事は出来ません。
またスクリプト自体、他の方が作った物をお借りしているので、私自身そのようにカスタマイズする事もできません。
オプションで１枚ごとの画像の停止時間は変えられます。
たぶん1000＝1秒だと思うのですが、3600000（1時間）とかにしたらどうなるでしょうね。
短い時間しか試した事がないため正常に動作するかわかりませんが、そのような長時間の切り替えが機能するようであれば、画像の順番を決めて、８時間毎に切り替えなどにすれば、似たような事はできるかも知れません。
あとは、ご提示のURLにあるような別のスクリプトを利用するしか方法はないと思います。
「時間ごと css 切り替え」などのキーワードで検索すると、時間帯でcssを切り替えるスクリプトも見つかります。
「思ったような表示ができない」というのがどのような問題なのかわかりませんが、cssを切り替えるタイプの方が自由にレイアウトできると思います。
私もまだ扱った事がないスクリプトなので、具体的なアドバイスはできませんが、必要であれば探して試してみてください。
素早いご回答ありがとうございます。
なるほど、
時間をいじればいいというのは盲点でしたっ！
私ももう少し頭を柔らかくして
スクリプトなどを探してみます。
検討していただきありがとうございました！
はじめまして。
今回こちらのテンプレートが気に入り
お借りしました。
記事を作成したのですが
本文とテンプレートが連動できず
苦戦しております。
ブログを見て頂き
アドバイス頂ければ幸いです。
お忙しい所恐縮ですが
宜しくお願いします。
タカ
はじめまして、こんばんは。
ブログも拝見しましたが「本文とテンプレートが連動できない」の意味がわかりません。
もう少し具体的に教えてもらえますか？
この共有テンプレートは、自分の好きな画像に変更可能でしょうか？
商用としての、使用も可能でしょうか？
お忙しいとは思いますが、質問よろしくお願い致します。
画像の変更は可能です。
テンプレートをダウンロードすると、下部に説明がありますので、そちらを参考に変更してください。
テンプレートやスクリプトの商用利用は可能です。
ただし、デフォルトで設定されている画像は著作権フリーのものなので、そのまま使う分には問題ありませんが、新たに画像を追加する場合は、ご自身の責任でご使用ください。
こんにちは。シンプルな動作が素敵でテンプレートお借りいたしました。
さて、FC2で設定したブログ名とブログの説明がメニューバーのところの表示されてしまい、その下と最初の記事との間が空いてしまい、ちょっと間が抜けてしまいます。Oiraseでは、これがちょうどよく表示されましたが、解決方法はありますでしょうか。お願い致します。
なかなかまとまった時間が取れず、返信が遅くなり申し訳ありません。
コメントの制限があるため、複数にまたがって返信致します。
さて、テンプレートoiraseとslideshowですが、レイアウトは似たような感じですが、微妙に変えている箇所が多く、どこを変更すればいいのか検証するのに時間がかかります。
手っ取り早く理想の状態にするためには、テンプレートslideshowを直すのではなく、テンプレートoiraseをベースに背景動画部分を画像スライドショーに変更してCSSを少し変更するほうが簡単なので、その方法を説明します。
必要に応じてテンプレートoiraseとslideshowを新たにダウンロードしてください。
また、もしものために複製する事もおすすめします。
oiraseをベースに変更していきます。
まずは背景動画部分を削除します。
1.oiraseのhtmlの<header>にある次の部分を削除してください。
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/jquery-mb-CSSAnimate.js"></script>
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/jquery-mb-YTPlayer.js"></script>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/YTVPlayer.css" media="all" />
<script>
$(function(){
$(".player").mb_YTPlayer();
});
</script>
2.<body>のすぐ下にある次の部分を削除してください。
<a id="bgndVideo" class="player" data-property="{videoURL:’http://www.youtube.com/watch?v=hmSe1VTuFKM’,containment:’body’,autoPlay:true, mute:true, startAt:0, opacity:1}">background movie</a>
次に背景スライドショーを追加します。
3.次の記述を1で削除した部分に挿入します。
<script src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/jquery-page-scroller-308.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
virtualTop = 0;
</script>
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/jquery_easing_min.js"></script>
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/o/r/e/oreshiten/supersized327.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
random : 1,
transition : 1,
transition_speed : 1000,
slide_interval : 3000,
slides : [
{ image : ‘http://blog-imgs-50.fc2.com/o/r/e/oreshiten/futta001.jpg’ },
{ image : ‘http://blog-imgs-50.fc2.com/o/r/e/oreshiten/futta028.jpg’ }
]
});
});
</script>
4.CSSを全て削除し、下記のCSSと入れ替えます。
@charset "UTF-8";
/*************************************************
▼CSSリセット
*************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}
/*************************************************
▼デフォルト
*************************************************/
html{overflow-y:scroll;word-wrap:break-word;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
h1,h2{display:inline;font-weight:normal;}
ul,li{list-style:none}
img{max-width:100%;height:auto;}
iframe{max-width:100%;}
input{max-width:100%;}
pre{
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
white-space:pre-wrap;
word-wrap:break-word;
}
a{text-decoration:none;}
a:link,
a:visited{color:#888;text-decoration:none;}
a:focus,
a:hover,
a:active{color:#fff;text-decoration:none;}
body{
color:#fff;
text-align:left;
font-family:"メイリオ",Meiryo,arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
line-height:1.8;
font-size:12px;
background:#111;
}
/*************************************************
▼背景スライドショー
*************************************************/
#supersized-loader{
position:absolute;
top:50%;
left:50%;
z-index:0;
width:60px;
height:60px;
margin:-30px 0 0 -30px;
text-indent:-999em;
background:url(img/progress.gif) no-repeat center center;
}
#supersized{
display:block;
position:fixed;
left:0;top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
#supersized img{
width:auto;
height:auto;
position:relative;
display:none;
outline:none;
border:none;
}
#supersized.speed img{
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-moz-crisp-edges;
}
#supersized.quality img{
-ms-interpolation-mode:bicubic;
image-rendering:optimizeQuality;
}
#supersized li{
display:block;
list-style:none;
z-index:-30;
position:fixed;
overflow:hidden;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
}
#supersized li.image-loading{
background:#111 url(img/progress.gif) no-repeat center center;
width:100%;
height:100%;
}
#supersized li.prevslide{z-index:-20;}
#supersized li.activeslide{z-index:-10;}
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img,
#supersized li.activeslide img{display:inline;}
#supersized a{width:100%; height:100%;display:block;}
/*************************************************
▼レイアウト
*************************************************/
#mainbody{position:relative;width:100%;}
#container{
width:800px;
margin: 0 auto 900px auto;
position: relative;
z-index: 5;
}
.content{
padding:0 20px;
background:url(http://blog-imgs-48.fc2.com/o/r/e/oreshiten/png_b80.png);
overflow:auto!important;
overflow /**/: hidden;
}
.content_t{
width:800px;
height:20px;
background:url(http://blog-imgs-48.fc2.com/o/r/e/oreshiten/rtb80.png);
}
.content_b{
width:800px;
height:20px;
background:url(http://blog-imgs-48.fc2.com/o/r/e/oreshiten/rbb80.png);
margin-bottom:50px;
}
/*************************************************
▼最上部メニュー
*************************************************/
.MegaMenu{
text-align:center;
width:100%;
background:#000;
position: fixed;
top:27px;
left:0;
z-index: 7;
font-size:11px;
}
.MegaMenu a.MegaMenuLink:link,
.MegaMenu a.MegaMenuLink:visited{
display: inline-block;
padding: 5px 10px;
color: #fff;
z-index: 1000;
}
.MegaMenu a.MegaMenuLinkActive:link,
.MegaMenu a.MegaMenuLinkActive:visited{
background: #999;
color: #fff;
}
.MegaMenu a.MegaMenuLinkOff:link,
.MegaMenu a.MegaMenuLinkOff:visited{
display: inline-block;
padding: 5px 10px 5px 10px;
color: #fff;
background: #555;
z-index: 1000;
margin-right:20px;
}
.MegaMenu a.MegaMenuLinkOff:hover{
background: #fff;
color: #000;
padding: 5px 10px 5px 10px;
padding-right: 10px;
margin-right:20px;
}
.MegaMenu .MegaMenuContent{
display: none;
}
#MegaMenuContent,
#MegaMenuContentShadow{
background: #FFF;
border-top: none;
position: absolute;
z-index: 10;
text-align:left;
}
#MegaMenuContentShadow{
margin:3px 0 0 3px;
z-index: 9;
background:url(http://blog-imgs-48.fc2.com/o/r/e/oreshiten/png_b20.png);
}
/*Non IE CSS Starts*/
html>body .MegaMenu a.MegaMenuLink:link,
html>body .MegaMenu a.MegaMenuLink:visited{position: relative;}
html>body #MegaMenuContent, html>body #MegaMenuContentShadow{}
/*************************************************
▼ヘッダー
*************************************************/
#header{
width:800px;
height:310px;
position:fixed;
top:0px;
left:50%;
margin-left:-400px;
}
#header_content{
position: relative;
width:800px;
height:130px;
margin:0 auto;
text-align:center;
}
h1{
font-size:40px;
margin-top:100px;
padding:0 20px;
line-height:1;
}
h1 a{color:#fff !important;}
h1 a:hover{color:#000 !important;}
h2{
font-weight:normal;
padding:5px 20px;
color:#fff;
line-height:1.4;
}
/*************************************************
▼フッター
*************************************************/
#footer_content{
width:100%;
position: relative;
font-size:11px;
text-align:center;
margin-bottom:10px;
}
.copy{margin-bottom:3px;font-size:16px;color:#fff !important;}
.copy a{color:#fff !important;}
.copy a:hover{color:#fff !important;}
.ad{font-size:11px;color:#fff !important;}
.ad a{color:#fff !important;}
/*************************************************
▼ページナビ
*************************************************/
.page_navi{text-align:center;margin:0 auto 50px auto;font-size:16px;font-weight:bold;}
.page_navi a:link,
.page_navi a:visited{color:#fff !important;background:#555;padding:1px 8px;}
.page_navi a:focus,
.page_navi a:hover,
.page_navi a:active{color:#000 !important;background:#fff;padding:1px 8px;}
.pagetop{text-align:right;padding:10px 10px 0 10px;}
#cm,#tb,#myedit{width:800px;height:60px;margin:-55px auto 0 auto;}
/*************************************************
▼記事
*************************************************/
.entry_header{border-bottom:solid 1px #888;margin-bottom:10px;padding:0 0 10px 5px;font-size:20px;line-height:1;color:#fff;}
.entry_body{margin-bottom:10px;overflow:hidden;margin:0 5px;font-size:14px;}
.entry_body blockquote{margin:5px 0 !important;padding:10px !important;border:solid 1px #888;background:#000;color:#fff;}
.entry_body pre{margin:5px 1px !important;padding:10px !important;border:solid 1px #888;color:#fff;}
.entry_more{margin-top:30px;}
#more{margin-top:30px;}
.fc2_footer{margin:30px 0;}/* 拍手など */
/*************************************************
▼関連記事
*************************************************/
.relate_box{margin:0 0 30px 0;}
.relate_box_title{border-bottom:solid 1px #888;padding:3px 5px;}
.relate_box ul li{border-bottom:dotted 1px #888;padding:3px 5px;}
/*************************************************
▼テーマ・ジャンル・ユーザータグ
*************************************************/
.entry_community{padding:0 5px;text-align:right;font-size:12px;}
.entry_community ul{display:inline;margin-left:-5px;}
.entry_community li{display:inline;margin-left:5px;}
/*************************************************
▼記事情報
*************************************************/
.entry_footer{border-top:solid 1px #888;padding:0 5px;text-align:right;font-size:12px;}
.entry_footer li{display:inline;}
/*************************************************
▼コメント・トラックバック共通
*************************************************/
.sub_header{
border-bottom:solid 1px #888;
margin-bottom:10px;
font-size:14px;
font-weight:bold;
}
.sub_title{margin-bottom:5px;color:#fff;font-weight:bold;}
.sub_body{margin:0px 10px;}
.sub_footer{
border-top:dotted 1px #888;
margin:10px 0 20px;
text-align:right;
padding-right:5px;
}
.sub_footer li{display:inline;}
/*************************************************
▼コメント編集
*************************************************/
.form dl{margin-right:10px;margin-left:10px;}
.form dl dd{margin-bottom:5px;}
.form dl dd textarea{width:400px;height:150px;}
.form input#himitu{margin-right:8px;}
.form .form_btn{margin:15px 10px;}
.form .form_btn input{margin-right:3px;}
/*************************************************
▼トラックバック
*************************************************/
.trackback_url{margin:15px 10px 10px 10px;}
.trackback_url input{padding: 3px;width: 90%;}
/*************************************************
▼全記事・検索結果ページ
*************************************************/
.list_header{
border-bottom:solid 1px #888;
margin-bottom:10px;
font-size:14px;
font-weight:bold;
}
.list_body{margin:0 10px 10px 10px;}
.list_body li{border-bottom:dotted 1px #888;}
/*************************************************
プラグイン
*************************************************/
.plugin1_body{width:190px;padding:10px 5px;color:#000;}
.plugin1_body a{text-decoration:none;}
.plugin1_body a:link,
.plugin1_body a:visited{color:#777;text-decoration:none;}
.plugin1_body a:focus,
.plugin1_body a:hover,
.plugin1_body a:active{color:#000;text-decoration:none;}
.plugin2_body{float:left;width:190px;margin-right:20px;}
.plugin3_body{float:left;width:550px;}
.plg_body{margin:0 5px;}
.plg_body li{
border-bottom: 1px dotted #888;
padding: 4px 0px 2px 0px;
}
.plugin_cont{margin-bottom:30px;font-size:12px;}
.plugin_cont li{
border-bottom: 1px dotted #888;
padding: 4px 0px 2px 0px;
}
.plg_title{color:#fff;font-weight:bold;background:#000;padding:2px 10px;margin-bottom:5px;}
.plg_header_description,
.plg_footer_description{font-weight:bold;margin:0 5px;}
/*************************************************
▼カレンダー
*************************************************/
table.calender{width:100%;margin:0px auto;font-size: 100%;}
table.calender caption{margin:0px auto;}
table.calender th,
table.calender td{text-align:center;}
table.calender td a{display:block;color:#999;background-color:#fff;font-weight:bold;}
table.calender td a:hover{background-color:#333;color:#fff;}
table.calender th#sun{color:#f00;}
table.calender th#sat{color:#00f;}