Bloggerにスライドショーを貼り付けてみる。 ~ TVは偏向報道が多い様で御座います。　　https://neovisionconsulting.blogspot.com/2024/11/tvcsisceo090-7555-5011.html

2023年1月13日金曜日

Bloggerにスライドショーを貼り付けてみる。

19:06 No comments

https://76log.blogspot.com/2019/11/blogger.html

2019/11/12 2021/10/31

Blogger

フリー写真素材ぱくたそ

Bloggerでスライドショーを簡単にできる方法はないかと試行錯誤した結果、最終的にたどりついたのはJavascriptのスライダープラグイン、Swiperでした。

Contents

簡単な手順

CSSとJavascriptファイルの読み込み

Bloggerの場合、テーマの「HTMLを編集」から、<head>〜</head>の間に貼り付けます。

<link href='https://unpkg.com/swiper/css/swiper.min.css' rel='stylesheet'/>

<script src='https://unpkg.com/swiper/js/swiper.min.js'/></script>

Javascriptは<body>の中に入れた方がいいらしいんだけど、できたんだからいいよねー！？

カスタマイズ

必要なければもっとシンプルにもできますが、自動再生やボタンの追加などをここでしています。

<script type="text/javascript">
  var Swiper = new Swiper('.swiper-container', {
   effect: 'fade', //フェード
   autoplay: {
    delay: 3000,
    stopOnLastSlide: false, //自動停止
    disableOnInteraction: false, //スワイプ検出時自動停止
    reverseDirection: false
   },
   navigation: {　//ボタン追加
    nextEl: '.swiper-button-next', //次へボタン
    prevEl: '.swiper-button-prev' //戻るボタン
   },
   pagination: { //ページネーション下部●
    el: '.swiper-pagination', //ページネーション
    type: 'bullets',
    clickable: true
   }
  });
</script>

こちらは、</body>の直前に貼りました。

投稿するとき

あとは、いつもの投稿のときに下記のコードを貼り付ければOKです。「表示したいコンテンツ」の部分は変更してください。写真だけでなく、テキストも表示可能です。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="表示したいコンテンツ"></div>
    <div class="swiper-slide"><img src="表示したいコンテンツ"></div>
    <div class="swiper-slide"><img src="表示したいコンテンツ"></div>
  </div>
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-pagination swiper-pagination-white"></div>
</div>

注意点

サイズを指定していないので、表示させたい写真のサイズがバラバラだとレイアウトがくずれるかもしれません。
表示がおかしい場合は、参考サイトを参照してサイズを指定してください。

CSSとJavascriptの読み込みファイルがサイトによって違う場合がありますが、バージョンの違いです。
旧バージョンでもおそらく動きますが、現時点での最新バージョンを使用しています。新しく導入する場合は、公式サイトを確認して最新のものにしたほうが良いと思います。

Bloggerでは、Javascriptの読み込みファイルのときも、</script>で閉じないと保存されませんでした。「"」は保存すると「'」に自動で変換されてしまったりしますが、どちらで貼り付けても大丈夫だと思います。

参考サイト

サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編） | ガリガリコード

Swiper - Most Modern Mobile Touch Slider

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

所感

ずいぶん前は、Bloggerにも標準でスライドショーというガジェットがあったはず。

今はなきPicasaウェブアルバムを使ったり、Flickrを試すもできなかったりとBloggerでスライドショーを表示させるのは大変。
PicasaウェブアルバムができたんだからGoogleフォトならできるだろうと思うも見当たらず。。。

検索してみると、Googleスライドを使った方法がありましたが、やってみると、割と手間がかかりました。

今回、Swiperを設置してみましたが、投稿するときに、写真のURLを簡単に取得できる方法が分からず、結局一度貼り付けてから、URLをコピーするという方法を取りました。

これだと割と大変かもしれません。何かいい方法があったら教えてください。

何かもっと簡単にできる方法はないものか。。。

Googleスライドでのスライドショー

下記の投稿（真ん中あたり）で実際にGoogleスライドで動かしています。
あとでGoogleスライドを編集すると貼りつけなおさなくても反映されていたのでそれは便利だと思いました。

TVは偏向報道が多い様で御座います。 https://neovisionconsulting.blogspot.com/2024/11/tvcsisceo090-7555-5011.html

2023年1月13日金曜日