中途半端で何が悪い

【スマホ】リンク付き画像がスライドするカスタマイズ導入したから紹介するよ!

f:id:sg178:20180111231654g:plain

 

 

どうも、もりたです!

 

今回は久しぶりにブログのデザインをカスタマイズしたので

紹介したいと思います!

 

 

 

 

 

 

気になってた方は是非トップページにスマホからアクセスして見てください

www.mori-tako.com

 

 

導入方法

1、ダウンロード

今回導入するに当たってこちらの記事を参考にさせていただきました!

ありがとうございます!

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

 

 

まず、スライダーを導入するに当たってまずjQueryというプラグインを

こちらのサイトから入れます。

 

 

リンクを踏んでいただくと

click here to installという画面があるのでそこをクリックします

 

 

するとこんな画面が出るので

 

f:id:sg178:20180111223715p:plain

 

 

the other ways の青下線のリンクを踏んでファイルをダウンロードします

 

 

ファイル内にある

プラグイン{jquery.bxslider.min.js}

スタイルシート{jquery.bxslider.css}

が必要になるのでわかりやすいところに取り出します。

 

 

それぞれのファイルはここにあります

 

ファイル>docs_src>assets>vendors>jquery.bxslider.min.js

 

ファイル>src>css>jquery.bxslider.css

 

 

 

2、コード配置

※CSS変更、デザインは自己責任でお願いいたします。

カスタマイズを紹介しておりますが変更デザインによって生じた不具合など一切の責任を負いかねます

 

取り出したjquery.bxslider.cssを開いて出てきたコードをデザイン設定の

デザインCSSに貼り付けます。

 

 

その後、スマホのデザイン設定画面からヘッダーに

HTMLを貼ります

 

僕はHTML打てないので

ひつじさんのHTMLを貼らせていただきました。( ;∀;)

  <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: 40, /*空白調節*/
  infiniteLoop: true, /*途切れなくループさせるか*/
  slideWidth: 660, /*スライドの幅*/
  minSlides: 1, /*1つの画面に表示させるスライドの最大数*/
  maxSlides: 1,/*1つの画面に表示させるスライドの最小数*/
  speed: 800, /*スライダーの移動スピード*/
  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>

 

 

 

 

 

完成

これでスライドは動くようになると思います。

このスライドに限らずこちらの記事で紹介されているカスタマイズをほぼ採用させていただいております笑

ありがとうございます(´;ω;`)

 

 

ちなみに

僕がスライドに載せている画像は横480、縦160とかで作りました

Illustratorで作ったのですが、なぜか画質が落ちるしデザインはパッとしないし

修行が必要です。。。笑

 

以上スライドの導入方法でした!