関連記事のスライダー化(2列ver レスポンシブ
How do I make an 関連記事のスライダー化(2列ver レスポンシブ?
What is a 関連記事のスライダー化(2列ver レスポンシブ? How do you make a 関連記事のスライダー化(2列ver レスポンシブ? This script and codes were developed by Hidekichi on 29 January 2023, Sunday.
関連記事のスライダー化(2列ver レスポンシブ Previews
関連記事のスライダー化(2列ver レスポンシブ - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>関連記事のスライダー化(2列ver レスポンシブ) Wordpress theme Simplicity用</title> <link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity/style.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> ※ 色々調整中
<div id="body-in"> <div id="main"> <div id="related-entries"> <h3>関連記事</h3> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity-20140822/" title="Simplicity20140822公開。タイトル下に小さなSNSボタン追加機能、メニューの不具合修正他。"> <img src="//wp-simplicity.com/wp-content/uploads/2014/08/IMG_1800-1300x8661-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity20140822公開。タイトル下に小さなSNSボタン追加機能、メニューの不具合修正他。" srcset="//wp-simplicity.com/wp-content/uploads/2014/08/IMG_1800-1300x8661-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2014/08/IMG_1800-1300x8661-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2014/08/IMG_1800-1300x8661-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity-20140822/" class="related-entry-title-link" title="Simplicity20140822公開。タイトル下に小さなSNSボタン追加機能、メニューの不具合修正他。"> Simplicity20140822公開。タイトル下に小さなSNSボタン追加機能、メニューの不具合修正他。 </a></h4> <p class="related-entry-snippet"> Simplicityをver20140822にバージョンアップしました。 今回の主な変更点は以下。 タイトル下に小さなSNS拡...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity-20140822/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity1-5-2/" title="Simplicity1.5.2公開。アイキャッチ自動設定機能追加など。"> <img src="//wp-simplicity.com/wp-content/uploads/2015/02/8bae8ccf07d0b828846358eb5f77818b3-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity1.5.2公開。アイキャッチ自動設定機能追加など。" srcset="//wp-simplicity.com/wp-content/uploads/2015/02/8bae8ccf07d0b828846358eb5f77818b3-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/02/8bae8ccf07d0b828846358eb5f77818b3-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/02/8bae8ccf07d0b828846358eb5f77818b3-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity1-5-2/" class="related-entry-title-link" title="Simplicity1.5.2公開。アイキャッチ自動設定機能追加など。"> Simplicity1.5.2公開。アイキャッチ自動設定機能追加など。 </a></h4> <p class="related-entry-snippet"> Simplicityを1.5.2 20150226にバージョンアップしました。 今回の主な変更点は以下。 アイキャッチを自動設定してくれ...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity1-5-2/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity1-7-3/" title="Simplicity1.7.3公開。広告を除外する「記事・カテゴリ」設定項目追加。"> <img src="//wp-simplicity.com/wp-content/uploads/2015/06/428ea6f60b4a63342f62e6baae25b4141-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity1.7.3公開。広告を除外する「記事・カテゴリ」設定項目追加。" srcset="//wp-simplicity.com/wp-content/uploads/2015/06/428ea6f60b4a63342f62e6baae25b4141-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/06/428ea6f60b4a63342f62e6baae25b4141-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/06/428ea6f60b4a63342f62e6baae25b4141-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity1-7-3/" class="related-entry-title-link" title="Simplicity1.7.3公開。広告を除外する「記事・カテゴリ」設定項目追加。"> Simplicity1.7.3公開。広告を除外する「記事・カテゴリ」設定項目追加。 </a></h4> <p class="related-entry-snippet"> Simplicityを1.7.2 20150621にバージョンアップしました。 今回の主な変更点は以下。 記事ID指定で広告を非表示にで...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity1-7-3/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/abolished-shortcode-blogcard/" title="Simplicityショートコードタイプのブログカードの一部廃止について"> <img src="//wp-simplicity.com/wp-content/uploads/2015/07/5a5b7693056428be8c0b94a1390401df1-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicityショートコードタイプのブログカードの一部廃止について" srcset="//wp-simplicity.com/wp-content/uploads/2015/07/5a5b7693056428be8c0b94a1390401df1-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/07/5a5b7693056428be8c0b94a1390401df1-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/07/5a5b7693056428be8c0b94a1390401df1-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/abolished-shortcode-blogcard/" class="related-entry-title-link" title="Simplicityショートコードタイプのブログカードの一部廃止について"> Simplicityショートコードタイプのブログカードの一部廃止について </a></h4> <p class="related-entry-snippet"> Simplicity1.8.0で、と書くタイプのブログカードショートコードは廃止しました。 これは、functions.php... </p> <p class="related-entry-read"><a href="//wp-simplicity.com/abolished-shortcode-blogcard/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity-20140810/" title="Simplicityをver20140810にバージョンアップ。【重要】サイドバーを完全ウイジェット化したので以前のように戻すには要簡単な設定。"> <img src="//wp-simplicity.com/wp-content/uploads/2014/08/IMG_0664-1300x8661-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicityをver20140810にバージョンアップ。【重要】サイドバーを完全ウイジェット化したので以前のように戻すには要簡単な設定。" srcset="//wp-simplicity.com/wp-content/uploads/2014/08/IMG_0664-1300x8661-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2014/08/IMG_0664-1300x8661-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2014/08/IMG_0664-1300x8661-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity-20140810/" class="related-entry-title-link" title="Simplicityをver20140810にバージョンアップ。【重要】サイドバーを完全ウイジェット化したので以前のように戻すには要簡単な設定。"> Simplicityをver20140810にバージョンアップ。【重要】サイドバーを完全ウイジェット化したので以前のように戻すには要簡単な設定。 </a></h4> <p class="related-entry-snippet"> Simplicityをver20140810にバージョンアップしました。 Simplicityをいろいろカスタマイズしたサイト... </p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity-20140810/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity-20140729/" title="Simplicityをver20140729にバージョンアップ"> <img src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_9135-1300x866-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicityをver20140729にバージョンアップ" srcset="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_9135-1300x866-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2014/07/IMG_9135-1300x866-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2014/07/IMG_9135-1300x866-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity-20140729/" class="related-entry-title-link" title="Simplicityをver20140729にバージョンアップ"> Simplicityをver20140729にバージョンアップ </a></h4> <p class="related-entry-snippet"> Simplicityをver20140729にバージョンアップしました。 今回の主な変更は以下。 feedlyのフォロ... </p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity-20140729/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity-20140806/" title="Simplicityをver20140806にバージョンアップ。全SNSシェア＆フォローボタンの表示・非表示機能を追加。"> <img src="//wp-simplicity.com/wp-content/uploads/2014/08/GOPR0214-1300x9751-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicityをver20140806にバージョンアップ。全SNSシェア＆フォローボタンの表示・非表示機能を追加。" srcset="//wp-simplicity.com/wp-content/uploads/2014/08/GOPR0214-1300x9751-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2014/08/GOPR0214-1300x9751-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2014/08/GOPR0214-1300x9751-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity-20140806/" class="related-entry-title-link" title="Simplicityをver20140806にバージョンアップ。全SNSシェア＆フォローボタンの表示・非表示機能を追加。"> Simplicityをver20140806にバージョンアップ。全SNSシェア＆フォローボタンの表示・非表示機能を追加。 </a></h4> <p class="related-entry-snippet"> Simplicityをver20140806にバージョンアップしました。 前回のバージョンアップから、数時間しか経っていませんが、不具...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity-20140806/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity1-4/" title="Simplicity1.4安定版公開。1.3→1.4変更点まとめ"> <img src="//wp-simplicity.com/wp-content/uploads/2015/01/a2f27a739bf27c872704d8aff029dc211-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity1.4安定版公開。1.3→1.4変更点まとめ" srcset="//wp-simplicity.com/wp-content/uploads/2015/01/a2f27a739bf27c872704d8aff029dc211-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/01/a2f27a739bf27c872704d8aff029dc211-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/01/a2f27a739bf27c872704d8aff029dc211-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity1-4/" class="related-entry-title-link" title="Simplicity1.4安定版公開。1.3→1.4変更点まとめ"> Simplicity1.4安定版公開。1.3→1.4変更点まとめ </a></h4> <p class="related-entry-snippet"> Simplicity1.4.0を安定版としました。 目立った不具合も、大体は修正できたと思うので、次1.5まで開発版として、バージョンアッ...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity1-4/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity-child-20150522/" title="Simplicity子テーマ（無印）をv20150522にバージョンアップ【公開中止】"> <img src="//wp-simplicity.com/wp-content/uploads/2015/05/HNCK5467-1300x8671-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity子テーマ（無印）をv20150522にバージョンアップ【公開中止】" srcset="//wp-simplicity.com/wp-content/uploads/2015/05/HNCK5467-1300x8671-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/05/HNCK5467-1300x8671-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/05/HNCK5467-1300x8671-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity-child-20150522/" class="related-entry-title-link" title="Simplicity子テーマ（無印）をv20150522にバージョンアップ【公開中止】"> Simplicity子テーマ（無印）をv20150522にバージョンアップ【公開中止】 </a></h4> <p class="related-entry-snippet"> Simplicity子テーマ（無印）を半年ぶりにバージョンアップしました。 新しい子テーマの呼び出し方法だと、スキン機能など不具合が出るの...</p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity-child-20150522/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <aside class="related-entry cf"> <div class="related-entry-thumb"> <a href="//wp-simplicity.com/simplicity1-4-8/" title="Simplicity1.4.8公開。サイドバーの背景色白塗り機能追加、あとは不具合修正のみ。"> <img src="//wp-simplicity.com/wp-content/uploads/2015/02/picjumbo.com_HNCK41571-100x100.jpg" class="related-entry-thumb-image wp-post-image" alt="Simplicity1.4.8公開。サイドバーの背景色白塗り機能追加、あとは不具合修正のみ。" srcset="//wp-simplicity.com/wp-content/uploads/2015/02/picjumbo.com_HNCK41571-300x300.jpg 300w, //wp-simplicity.com/wp-content/uploads/2015/02/picjumbo.com_HNCK41571-100x100.jpg 100w, //wp-simplicity.com/wp-content/uploads/2015/02/picjumbo.com_HNCK41571-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" height="100" width="100"> </a> </div> <!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="//wp-simplicity.com/simplicity1-4-8/" class="related-entry-title-link" title="Simplicity1.4.8公開。サイドバーの背景色白塗り機能追加、あとは不具合修正のみ。"> Simplicity1.4.8公開。サイドバーの背景色白塗り機能追加、あとは不具合修正のみ。 </a></h4> <p class="related-entry-snippet"> Simplicityを1.4.8 20150205にバージョンアップしました。 今回は主に、フォーラムで報告のあった不具合の修... </p> <p class="related-entry-read"><a href="//wp-simplicity.com/simplicity1-4-8/">記事を読む</a></p> </div> <!-- /.related-entry-content --> </aside> <!-- /.elated-entry --> <br style="clear:both;"> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
関連記事のスライダー化(2列ver レスポンシブ - Script Codes CSS Codes
@charset "UTF-8";
#related-entries { position: relative;
}
#related-entries .sslide-wrap { position: relative; overflow: hidden; -webkit-transition: .3s ease; transition: .3s ease;
}
#related-entries .sslide-wrap .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; justyfy-content: space-between; position: absolute; top: 0; left: 0; width: 100%;
}
#related-entries .sslide-wrap .inner .progress { position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: rgba(255, 0, 0, 0.8); z-index: 99; -webkit-animation-name: progress; animation-name: progress; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: liner; animation-timing-function: liner; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
#related-entries .sslide-wrap .inner .itemWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
#related-entries .sslide-wrap .inner .itemWrap a { -webkit-box-flex: 1; -ms-flex: 1 45%; flex: 1 45%; height: 100%;
}
#related-entries .sslide-wrap .inner a { display: block; color: inherit; font-weight: normal; -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%;
}
#related-entries .sslide-wrap .inner a:hover { color: inherit;
}
#related-entries .sslide-wrap .inner a::before { content: "\f28b"; font-family: "fontAwesome"; display: inline; padding: 10px; position: absolute; top: -100px; left: 50%; font-size: 10em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-shadow: 0 0 10px white; opacity: 0; -webkit-transition: .3s ease; transition: .3s ease; z-index: 9999; padding-left: 1px;
}
#related-entries .sslide-wrap .inner a:hover::before { top: 45%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1;
}
#related-entries .sslide-wrap .inner a .entry { width: 100%; position: relative; margin: 0;
}
#related-entries .sslide-wrap .inner a .entry .thumb { width: 100%; height: 0; padding: 0 0 100%; margin: 0; background-repeat: no-repeat; background-size: cover; background-position: center center;
}
#related-entries .sslide-wrap .inner a .entry .content { margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); color: #fff;
}
#related-entries .sslide-wrap .inner a .entry .content .title { font-weight: 100; color: #fff; font-size: 16px; padding: 5px 4px; margin: 0; line-height: initial;
}
#related-entries .sslide-wrap .inner a .entry .content .snippet { font-size: 12px; color: #ddd; padding: 0 10px 10px; margin: 0;
}
#related-entries .related-entry { display: none;
}
@-webkit-keyframes progress { 0% { width: 0; } 100% { width: 100%; }
}
@keyframes progress { 0% { width: 0; } 100% { width: 100%; }
}
@-webkit-keyframes progress-stop { 0%, 50%, 100% { width: 100%; background-color: rgba(255, 0, 0, 0.8); } 25%, 75% { width: 100%; background-color: white; }
}
@keyframes progress-stop { 0%, 50%, 100% { width: 100%; background-color: rgba(255, 0, 0, 0.8); } 25%, 75% { width: 100%; background-color: white; }
}
/*レスポンシブ用*/
@media screen and (max-width: 750px) { #body-in { width: 100%; } #main { width: 100%; }
}
関連記事のスライダー化(2列ver レスポンシブ - Script Codes JS Codes
(function($) { //アニメーションきりかえ時間 var tst = 10000; //cssのprogressクラスの中のanimation-durationも要変更 var resize_timer; //アニメーション処理 function slide() { var m, ml; var sWrap = $("#related-entries .sslide-wrap"); if (sWrap.find(".inner .itemWrap").length > 0) { m = sWrap.find(".inner .itemWrap:first"); ml = sWrap.find(".inner .itemWrap:last"); } else { m = sWrap.find(".inner a:first"); ml = sWrap.find(".inner a:last"); } var swHeight = sWrap.height() /** 0.5625*/ , clone = m.clone(true); //velocity.jsとjQueryを見比べるために設置 m.animate({ //m.velocity({ marginTop: swHeight * -1 }, { duration: 600, complete: function() { m.remove(); clone.clone(true).insertAfter(ml); } }); } var timer; function loop() { if (resize_timer !== false) { clearTimeout(resize_timer); } if (timer !== false) { clearInterval(timer); } timer = setInterval(slide, tst); var sWrap = $("#related-entries .sslide-wrap"); sWrap.find("a").hover(function() { clearInterval(timer); $(this).stop(true, false); sWrap.find(".progress").css({ "animation-name": "progress-stop" }); }, function() { sWrap.find(".progress").css({ "animation-name": "progress" }); timer = setInterval(slide, tst); }); } //メイン $(function() { // ラッパーを挿入 $("#related-entries h3").after("<div class='sslide-wrap' >"); //オリジナルの関連記事のエントリーをラッパーにクローン $("#related-entries .related-entry").clone().appendTo($("#related-entries .sslide-wrap")); //ラッパーの中のclass入れ替え(オリジナルと設定が被らないように var sWrap = $("#related-entries .sslide-wrap"); sWrap.find(".related-entry").attr("class", "entry"); sWrap.find(".related-entry-thumb").attr("class", "thumb"); sWrap.find(".related-entry-content").attr("class", "content"); sWrap.find(".related-entry-title").attr("class", "title"); sWrap.find(".related-entry-snippet").attr("class", "snippet"); //サムネイルを100x100 -> 300x300に変更 sWrap.find(".entry img").each(function() { var src = $(this).attr("src"), rSrc = src.replace(/100x100/i, "300x300"); $(this).attr("src", rSrc); }); //サムネイルを16:9にする sWrap.find(".entry").each(function() { var src = $(this).find("img").attr("src"); $(".thumb", this).css("background-image", "url(" + src + ")"); $(".thumb", this).empty(); //imgタグは不要なので中身をカラに }); //記事を読むのアドレスを利用してentryを囲み、記事を読むを削除 sWrap.find(".entry").each(function() { var href = $(".related-entry-read a", this).attr("href"); $(this).wrap("<a href='" + href + "' >"); $(".related-entry-read a", this).remove(); }); //記事タイトルからaを取り除く sWrap.find(".entry").each(function() { var text = $(".title", this).text(); $(".title", this).html(text); }); //entryをinnerでラップする sWrap.find("a").wrapAll("<div class='inner' >"); //そして擬似ゲージへ sWrap.find(".inner").prepend("<div class='progress' >"); do { sWrap.find(".inner").children("a:lt(2)").wrapAll("<div class='itemWrap' >"); } while (sWrap.find(".inner").children("a").length); //sslide-wrapの高さを決める var swHeight = sWrap.find(".inner .thumb").first().width() /** 0.5625*/ ; sWrap.css("height", swHeight); loop(); }); //メイン終了 //ブラウザサイズ監視 $(window).on("load resize", function() { if (resize_timer !== false) { clearTimeout(resize_timer); } resize_timer = setTimeout(function() { var sWrap = $("#related-entries .sslide-wrap"); var bw = window.innerWidth, mode; //console.log(bw); if (bw > 450) { if (sWrap.find(".inner .itemWrap").length < 1) { //innerの中のa(entry)を2つずつにwrap while (sWrap.find(".inner > a").length) { sWrap.find(".inner > a:lt(2)").wrapAll("<div class='itemWrap' >"); } } //sslide-wrapの高さを決める var swHeight = sWrap.find(".inner .thumb:first").width() /** 0.5625*/ ; sWrap.css("height", swHeight); //console.log(swHeight) } else { if (sWrap.find(".inner .itemWrap").length > 0) { sWrap.find(".inner a").unwrap(); } //sslide-wrapの高さを決める var swHeight = sWrap.find(".inner .thumb:first").width() /** 0.5625*/ ; sWrap.css("height", swHeight); } }, 200); });
})(jQuery);
| Developer | Hidekichi |
| Username | Hidekichi |
| Uploaded | January 29, 2023 |
| Rating | 3 |
| Size | 7,501 Kb |
| Views | 4,048 |
Do you need developer help for 関連記事のスライダー化(2列ver レスポンシブ?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hidekichi (Hidekichi) Script Codes
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Sticky div | Kaslab | 2,225 Kb |
| CSS eye follow | Pedrocampos | 2,592 Kb |
| See Through | Larrygeams | 77,410 Kb |
| Add This API | ThatGuySam | 2,848 Kb |
| Image Hover | Johnheiner | 3,409 Kb |
| CSS Hover Effects | Alen | 3,613 Kb |
| Count up | Alanshortis | 2,391 Kb |
| Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
| Twitch | SarahDunlap | 2,937 Kb |
| CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!