スライダーと見出しで簡単にオシャレなはてなブログを作る方法

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<div class="bx-top">
  <ul class="bxslider">
    <li><a href="URLリンク"><img src="画像リンク" title="タイトル"/></a></li>
    <li><a href="URLリンク"><img src="画像リンク" title="タイトル"></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(function() {
  $('.bx-top').fadeIn('slow');
});
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    moveSlides: 1, /*一度に動かすスライドの数*/
    slideMargin: 20, /*空白調節*/
    infiniteLoop: true, /*途切れなくループさせるか*/
    slideWidth: 250, /*スライドの幅*/
    minSlides: 2, /*1つの画面に表示させるスライドの最大数*/
    maxSlides: 4,/*1つの画面に表示させるスライドの最小数*/
    speed: 500, /*スライダーの移動スピード*/
    pager: false, /*ページャーを表示させるかどうか*/
    captions: false,　/*スライダーの画像にタイトルを被せる場合はTRUE*/
    auto: true
  });
});
</script>

<script type="text/javascript">
/* ### ゆっくり表示 ### */
$(function() {
  $('.bxslider').fadeIn('slow');
});
</script>

<style type="text/css">
/* ### 最初は非表示 ### */
.bx-top{
	display:none;
}

/* ### 各種調整 ### */
.bx-wrapper {
	position: relative;
	margin-bottom:0px !important;
	padding: 0;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}
</style>