ヘッダーに最新記事一覧のスライドショーを表示するカスタマイズ
楽しいブログカスタマイズのお時間です。
ちょっと色々面倒ですが。
はじめに
僕のメインブログのヘッダー付近に最新記事一覧を表示させるスライドショーを付けてみました。
詳しい動作は実際に見て下さい。
nuruta.hatenablog.com
細部は変えていってるので、ちょいちょい画像と違うかもですが。
今回はこの設置について書いてみます。
あくまで自己責任の上カスタマイズしてみて下さい。
jqueryコード
先ずは、ヘッダーにjqueryコードを書き込んでください。
jqueryの宣言部(1~4行目)が既に書かれている場合は、動作が遅くなってしまう為削除して下さいね。
書き換え部分がいくつかありますので、気を付けて下さい。
1つ目。
【ここにブログURL】とある2か所をご自身のブログのurlに変える。
僕の場合は、こうなります。
http://nuruta.hatenablog.com/rss
rssを最後に付けると、feedになるようです。
2つ目。
これ重要。
テーマを僕と同じ「Brooklyn」で、かつ、シロマティさんのグローバルナビゲーションを付けている方はそのままでOK。
そうじゃ無い人は、ソース中の「ここを書き換える」とコメントした直下の「'#global-menu'」を適切なIDに書き換えて下さい。
大抵の人は「'#blog-title'」とかかな…。
CSS知ってる人なら伝わると思いますが、ここにCSSのID名を書くことで、その直後に表示されるようになっています。
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script> $.ajax({ //はてなrssファイルを読み込む //ブログのアドレスの最後にrssをつける url:'【ここにブログURL】rss', success: function(data){ //はてなrssの読み込み var rss_url = '【ここにブログURL】rss'; var htmlstr = ""; htmlstr += '<div id="wrapper2">'; htmlstr += '<div id="new-entry">最新記事</div>'; htmlstr += '<div id="slideshow">'; htmlstr += '<div class="slideContents">'; //アイテムの調整 $.get(rss_url, function(data) { $(data).find("item").each(function (i) { var el = $(this); var elimg = el.find("enclosure").attr("url"); htmlstr += '<section id="slide'; htmlstr += i+1; htmlstr += '">'; htmlstr += '<a href="' + el.find("link").text() + '" title="' + el.find("title").text() + '" target="_blank">'; htmlstr += '<img src="' + elimg + '" alt="" >' + el.find("title").text() + '</a>'; htmlstr += '</section>'; if(i === 4) { // 表示件数の設定 return false; }; }); htmlstr += '</div>'; htmlstr += '</div>'; htmlstr += '</div>'; //ここを書き換える $('#global-menu').after(htmlstr); }); } }); </script>
CSS
次にCSSです。
/*********************************************************/ /* スライドバー部 */ /*********************************************************/ /* :::::: slideshow :::::: */ #wrapper2 { overflow: hidden; width: 100%; padding: 0; } input[type="radio"] { display: none; } #slideshow { position: relative; width: 100%; } .slideContents { position: relative; background: #0097db; /* 基本となる背景色 */ text-align: center; -webkit-user-select: none; user-select: none; } .slideContents, .slideContents section { width: 100%; height: auto; } .slideContents section { position: absolute; top: 0; left: 0; /* 止まる位置を指定 */ -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: opacity .6s, -webkit-transform .6s; transition: opacity .6s, transform .6s; } .slideContents section img { box-sizing: border-box; -moz-box-sizing: border-box; height:200px; /* 画像の縦の長さ */ padding: 0px; vertical-align: middle; } /* リンクに関して */ #slide1 a, #slide2 a, #slide3 a, #slide4 a, #slide5 a { color: #fff !important; padding:10px; display:block; } /* 「最新記事」部分 */ #new-entry { font-weight:bold; background-color: #d3edfb; color: #008dcb; text-align:center; } /* ココから下は触るな危険 */ /* :::::: slideshow mechanism :::::: */ #switch1:checked ~ #slideshow .slideContents #slide1, #switch2:checked ~ #slideshow .slideContents #slide2, #switch3:checked ~ #slideshow .slideContents #slide3, #switch4:checked ~ #slideshow .slideContents #slide4, #switch5:checked ~ #slideshow .slideContents #slide5 { z-index: 1; position: relative; -webkit-transform: translateX(0); transform: translateX(0); } #switch1:checked ~ #slideshow .slideContents #slide1, #switch2:checked ~ #slideshow .slideContents #slide2, #switch3:checked ~ #slideshow .slideContents #slide3, #switch4:checked ~ #slideshow .slideContents #slide4, #switch5:checked ~ #slideshow .slideContents #slide5 { opacity: 1; } #switch1:checked ~ #slideshow .slideContents #slide5, #switch1:checked ~ #slideshow .slideContents #slide4, #switch2:checked ~ #slideshow .slideContents #slide1, #switch2:checked ~ #slideshow .slideContents #slide5, #switch3:checked ~ #slideshow .slideContents #slide2, #switch3:checked ~ #slideshow .slideContents #slide1, #switch4:checked ~ #slideshow .slideContents #slide3, #switch4:checked ~ #slideshow .slideContents #slide2, #switch5:checked ~ #slideshow .slideContents #slide4, #switch5:checked ~ #slideshow .slideContents #slide3 { -webkit-transform: translateX(-100%); transform: translateX(-100%); } #switch1:checked ~ #slideshow .slideContents #slide3, #switch2:checked ~ #slideshow .slideContents #slide4, #switch3:checked ~ #slideshow .slideContents #slide5, #switch4:checked ~ #slideshow .slideContents #slide1, #switch5:checked ~ #slideshow .slideContents #slide2, #switch1:checked ~ #slideshow .slideContents #slide4, #switch2:checked ~ #slideshow .slideContents #slide5, #switch3:checked ~ #slideshow .slideContents #slide1, #switch4:checked ~ #slideshow .slideContents #slide2, #switch5:checked ~ #slideshow .slideContents #slide3 { transition-duration: 0s; } .slideContents section { -webkit-animation: autoplay 30s infinite; animation: autoplay 30s infinite; } .slideContents section { -webkit-transform: none; transform: none; transition: none; } .slideContents #slide1 { position: relative; -webkit-animation-delay: 0; animation-delay: 0; } .slideContents #slide2 { -webkit-animation-delay: -24s; animation-delay: -24s; } .slideContents #slide3 { -webkit-animation-delay: -18s; animation-delay: -18s; } .slideContents #slide4 { -webkit-animation-delay: -12s; animation-delay: -12s; } .slideContents #slide5 { -webkit-animation-delay: -6s; animation-delay: -6s; } @-webkit-keyframes autoplay { 0% { -webkit-transform: translateX(0); } 16% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-100%); } 20.001% { -webkit-transform: translateX(100%); } 96% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @keyframes autoplay { 0% { transform: translateX(0); } 16% { transform: translateX(0); } 20% { transform: translateX(-100%); } 20.001% { transform: translateX(100%); } 96% { transform: translateX(100%); } 100% { transform: translateX(0); } }
背景色とか色々ご自身の好みに合わせて変えてみて下さい。
追記 ブログカード風
色々と弄ってみまして、ブログカードをスライドさせたいなという結論に至り、挑戦したのですが惨敗。
どうやっても何も表示されない。
なので、ちょっと小技を使って近しい表現で落ちつけました。
<script> $.ajax({ //はてなrssファイルを読み込む //ブログのアドレスの最後にrssをつける url:'【ここにブログURL】rss', success: function(data){ //はてなrssの読み込み var rss_url = '【ここにブログURL】rss'; var htmlstr = ""; htmlstr += '<div id="wrapper2">'; htmlstr += '<div id="new-entry">最新記事</div>'; htmlstr += '<div id="slideshow">'; htmlstr += '<div class="slideContents">'; //アイテムの調整 $.get(rss_url, function(data) { $(data).find("item").each(function (i) { var el = $(this); var elimg = el.find("enclosure").attr("url"); htmlstr += '<section id="slide'; htmlstr += i+1; htmlstr += '">'; htmlstr += '<iframe class="hatenablogcard" style="display: block; width: 100%; height: 150px; max-width: 500px;" title="' + el.find("title").text() + '" src="https://hatenablog-parts.com/embed?url=' + el.find("link").text() + '" frameborder="0" scrolling="no"></iframe>'; htmlstr += '</section>'; if(i === 4) { // 表示件数の設定 return false; }; }); htmlstr += '</div>'; htmlstr += '</div>'; htmlstr += '</div>'; //以下の「#global-menu」部分を変更 $('#global-menu').after(htmlstr); }); } }); </script>
CSSはaタグの部分が丸々不要になってくる感じです。
はてなスターは表示されませんけれど、まあ、いいやって。
終わりに
僕も細部がまだ気に入らないので、色々と弄ってみる予定。
もし気に入りましたら、挑戦してみて下さいませ。