カテゴリ: マンガ

160703m

【関連リンク】
梅のお宿 温泉民宿 宮田荘
プラン・旅案内いろいろ、ご主人のお人柄を感じる。片瀬白田駅から徒歩5分、東伊豆の海そば。

しそジュース(facebook 梅のお宿 温泉民宿 宮田荘)
facebookで日々のお宿、あたりの様子が見られる。

梅のお宿 温泉民宿 宮田荘 - 宿泊予約は<じゃらん>
ありがとう、また行きたい、という高評価がずらり。

mimic_smp
2005年、プロバイダの漫画コンテンツに掲載された『ミミック』。5ページと短いので、タッチスライダーにしてみた。スマホからでも見られるが、縦表示だと画像が小さくなるので、パソコンからがおススメ。

http://tencount.main.jp/comic/mimic/

スライダーにする際、使用したJSスクリプトは「Swiper」。以下、コードサンプル。

/*---------------------------
</header>前でcssを読み込む
------------------------------*/

<link rel="stylesheet" href="CSSまでのパス/swiper.min.css">
/*---------------------------
<body>内にスライド内容を記述
------------------------------*/


<div class="swiper-container">
  <div class="swiper-wrapper">
     
      <!--1 Slide-->
      <div class="swiper-slide">
<img src="mimic1.jpg">
      </div>
     
      <!--2 Slide-->
      <div class="swiper-slide">
<img src="mimic2.jpg">
      </div>
     
      <!--以下、同様にスライド分を記述-->
     
  </div>
     

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
    
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
    
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
/*---------------------------
</body>前か後にJSを記述
------------------------------*/
<script src="JSまでのパス/swiper.min.js"></script>
<script>       
var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  mode: 'vertical',
  loop: true,
  
  // If we need pagination
  pagination: '.swiper-pagination',
  
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  
  // And if we need scrollbar
  scrollbar: '.swiper-scrollbar',
})       
</script>
CSSは割愛したが、該当部分では「.swiper-container」と「.swiper-slide img」を指定した。

以上、ご参考になれば幸いです。

【関連リンク】
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper | コリス

160619m
オチはあれでよかったと思う。職分を逸脱していると裁判でつつきあげられたら、無罪放免になりかねないし。少女のファイターぶりをよくあらわしている。

【関連リンク】
映画「ザ・コール」公式サイト
キャラ設定が鉄板で、細かいエピソードは省かれているので、お話に集中しやすい。

↑このページのトップヘ