IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログ用簡易スライダーを作ってみた

はてなブログ用簡易スライダーを作ってみた

2017/11/1 javascript, WebTips, はてなプラグイン, はてなブログ

別ブログで縦長の新聞記事を引用しようとして、これ、幾つかに分けてスライダーにできないかなと思い立ち、簡易スライダーを作ってみました。

@半径とことこ60分

どういうものかは上の記事をご覧いただければわかると思いますが、6段の記事があり、そのまま画像にしますとデカすぎますので、6枚の画像をスライダーにしようというものです。もちろん写真などどんな画像でも使えます。

とりあえずは、進む、戻るのナビを出して、クリックすると1枚ずつスライドしていくという単純なものです。

  • 使い方
  • 注意事項など
  • Javascript
  • CSS

使い方

  1. 画像をどんどん放り込んで、<div id="imzSlider"></div> で括る
  2. その後ろに下の Javascript を追加する
  3. 下の CSS を「デザインCSS」に追加する

サンプル

<div id="imzSlider">
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204217j:plain" src="/wp-content/uploads/2017/10/20171031204217.jpg" alt="f:id:ausnichts:20171031204217j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204322j:plain" src="/wp-content/uploads/2017/10/20171031204322.jpg" alt="f:id:ausnichts:20171031204322j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204422j:plain" src="/wp-content/uploads/2017/10/20171031204422.jpg" alt="f:id:ausnichts:20171031204422j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204452j:plain" src="/wp-content/uploads/2017/10/20171031204452.jpg" alt="f:id:ausnichts:20171031204452j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204500j:plain" src="/wp-content/uploads/2017/10/20171031204500.jpg" alt="f:id:ausnichts:20171031204500j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204514j:plain" src="/wp-content/uploads/2017/10/20171031204514.jpg" alt="f:id:ausnichts:20171031204514j:plain" /></p>
</div>

Javascript を、予め「フッタ」に入れておけば、サンプルのように上の1番だけですみます。

注意事項など

急ぎ作りましたので、まだβ版程度です。

  • ナビの背景もわかりやすく赤になっていますが、CSS で変更できます
  • はてなの仕様では画像は <p></p> で括られるようですので、その想定です
    つまり、HTML を直書きした場合は、画像をそれぞれ <p></p> で括る必要があります
  • 対応ブラウザなど細かいチェックはしていませんので、使用は自己責任でお願いします

Javascript

<script>
function imzSlide(n){
    var wrapper = document.getElementById('imzSlider');
    var slider = wrapper.children;
    var total = slider.length - 2;   // ナビを除く
    for(var i=0; i<total; i++){
        if(slider[i].classList.contains('hiddenslide')){
            break;;
        }
    }


    if(n === 'n'){
        slider[i].classList.toggle('hiddenslide');
        if(i === 1) wrapper.classList.remove('noprev');
        if(i === (total-1)) wrapper.classList.add('nonext');
    }else{
        slider[i-1].classList.toggle('hiddenslide');
        if(i === 2) wrapper.classList.add('noprev');
        if(i === total) wrapper.classList.remove('nonext');
    }
}


(function(){
    var wrapper = document.getElementById('imzSlider');
    if(wrapper){
        var slider = wrapper.children;
        var total = slider.length;
        // slider[0]は表示しておく
        for(var i=1; i<total; i++){
            slider[i].classList.add('hiddenslide');
        }


        var divPrev = document.createElement('div');
        divPrev.classList.add('prevslide');
        divPrev.addEventListener('click', function(){imzSlide('p')}, false);
        var divNext = document.createElement('div');
        divNext.classList.add('nextslide');
        divNext.addEventListener('click', function(){imzSlide('n')}, false);
        wrapper.appendChild(divPrev);
        wrapper.appendChild(divNext);
        wrapper.classList.add('noprev');


        var style = document.createElement('style');
        document.head.appendChild(style);
        style.sheet.insertRule( '#imzSlider p.hiddenslide { right: -' + wrapper.clientWidth + 'px; }', 0 );
    }
}());
</script>

CSS

#imzSlider {
  position: relative;
  overflow: hidden; }
  #imzSlider p {
    -webkit-transition: right 400ms ease-in-out;
    transition: right 400ms ease-in-out;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0; }
    #imzSlider p:first-child {
      position: relative; }
  #imzSlider .prevslide {
    display: block;
    position: absolute;
    background: red;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
    cursor: pointer; }
    #imzSlider .prevslide::before {
      font-family: blogicon;
      content: "\f005";
      font-size: 2rem;
      color: white;
      line-height: 3rem; }
  #imzSlider.noprev .prevslide {
    display: none; }
  #imzSlider .nextslide {
    display: block;
    position: absolute;
    background: red;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
    cursor: pointer; }
    #imzSlider .nextslide::before {
      font-family: blogicon;
      content: "\f006";
      font-size: 2rem;
      color: white;
      line-height: 3rem; }
  #imzSlider.nonext .nextslide {
    display: none; }

1rem は 10pxです。使用している単位に合わせて変更してください。

はてなブログ「続きを読む」クリックで記事ページ「続き」位置に飛ばす
はてなブログの固定ページが役に立った!
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com