My Vector Space

人生は寄り道してなんぼ

【TIPS｜ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大！

HTML / CSS Javascript
　zoom-slider-title-gazou
アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。
demo
「ズームスライダー」の設置手順
htmlファイル内にCSSファイルとJSファイルをリンクさせる

まず、以下のサイトから外部ファイルをダウンロードする。

元サイト

ダウンロードした外部ファイルから、「style.css」「demo.css」「component.css」の３つのCSSファイルとmodernizr.custom.jsをリンクさせる。

 【 html 】
 1
  <head>
 2
      <!-- Feather Icons -->
 3
      <link rel="stylesheet" type="text/css" href="fonts/feather/style.css">
 4
      <!-- General demo styles & header -->
 5
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 6
      <!-- Component styles -->
 7
      <link rel="stylesheet" type="text/css" href="css/component.css" />
 8
      <script src="js/modernizr.custom.js"></script>
 9
  </head>
スライダー遷移のフロント画面エリアの構造タグ

次に、スライダーさせる対象となる画像にhtmlタグを追加していく
(※画像２枚分のコード)

 【 html 】
 1
  <header class="bp-header cf">
 2
      <h1>Zoom Slider</h1>
 3
  </header>
 4
 
 5
  <!-- Grid(▼スライダー遷移のフロント画面エリア▼) -->
 6
  <section class="slider">
 7
      <div class="slide slide--current" data-content="content-1">
 8
          <div class="slide__mover">
 9
              <div class="zoomer flex-center">
 10
                  <img class="zoomer__image" src="images/iphone.png" alt="iPhone" />
 11
                  <div class="preview">
 12
                    <img src="images/iphone-content-preview.png" alt="iPhone app preview" />
 13
                    <div class="zoomer__area zoomer__area--size-2"></div>
 14
                  </div>
 15
              </div>
 16
          </div>
 17
          <h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
 18
      </div>
 19
 
 20
      <div class="slide" data-content="content-2">
 21
          <div class="slide__mover">
 22
              <div class="zoomer flex-center">
 23
                  <img class="zoomer__image" src="images/ipad.png" alt="iPad Mini" />
 24
                  <div class="preview">
 25
                  <img src="images/ipad-content-preview.png" alt="iPad Mini app preview" />
 26
                      <div class="zoomer__area zoomer__area--size-4"></div>
 27
                  </div>
 28
              </div>
 29
          </div>
 30
          <h2 class="slide__title"><span>The Fantastic</span> iPad Mini</h2>
 31
      </div>
 32
 
 33
      <nav class="slider__nav">
 34
          <button class="button button--nav-prev"><i class="icon icon--arrow-left"></i>
 35
          <span class="text-hidden">Previous product</span></button>
 36
          <button class="button button--zoom"><i class="icon icon--zoom"></i>
 37
          <span class="text-hidden">View details</span></button>
 38
          <button class="button button--nav-next"><i class="icon icon--arrow-right"></i>
 39
          <span class="text-hidden">Next product</span></button>
 40
      </nav>
 41
  </section>
 42
  <!-- /slider-->
各画像の詳細ページエリアの構造タグ

次に、画像のクリック先の詳細ページエリアを作っていく
(※画像２枚分のコード)

 【 html 】
 1
  <!--▼各画像の詳細ページエリア▼-->
 2
  <section class="content">
 3
      <div class="content__item" id="content-1">
 4
      <img class="content__item-img rounded-right" src="images/iphone-content.png"
 5
      alt="Apple Watch Content" />
 6
      <div class="content__item-inner">
 7
          <h2>The iPhone 6</h2>
 8
          <h3>Incredible performance for powerful apps</h3>
 9
          <p>コメント</p>
 10
      </div>
 11
  </div>
 12
 
 13
  <div class="content__item" id="content-2">
 14
      <img class="content__item-img rounded-right" src="images/ipad-content.jpg"
 15
      alt="iPad Mini Content" />
 16
      <div class="content__item-inner">
 17
          <h2>The iPad Mini</h2>
 18
          <h3>Desktop-class architecture without a desktop</h3>
 19
          <p>コメント</p>
 20
      </div>
 21
  </div>
 22
  <button class="button button--close"><i class="icon icon--circle-cross"></i>
 23
  <span class="text-hidden">Close content</span></button>
 24
  </section>
 25
  </div><!--containerおわり-->
 26
 
 27
    <script src="js/classie.js"></script>
 28
    <script src="js/dynamics.min.js"></script>
 29
    <script src="js/main.js"></script>
 30
 

 

 

関連記事他のスライドショー関連の記事

 

 

 

無料で利用できるオンラインストレージ (クラウドストレージ) サービスを徹底比較してみた

WEBサービス / ツール ライフハック

【 2018年9月20日(木)更新 】

無料で使えるWEBサービスであり、プライベートでもビジネスにおいても生産性アップ、業務効率化のためにおさえておきたいオンラインストレージ ( クラウドストレージ ) サービスについてまとめておきます。

オンラインストレージ ( クラウドストレージ )

インターネット上で、ストレージ ( 外部記憶装置 )、いわゆる保管用のディスクスペースを貸し出してくれるサービス。 有料のものと無料のものがある。
メールでは送れないような大容量のデータを転送したり、PCの容量を軽減できたり、保存先 ( バックアップ ) として使ったり、複数人でデータの共有をしたりと使い方は様々。

関連記事
f:id:ooigawa-bitter-sweet:20160623003012j:plain

オンラインストレージを使う際に必ず押さえておきたい事｜メリットとデメリットまとめ
オンラインストレージサービスとは、インターネット上でストレージ(外部記憶装置)、いわゆる保管用のディスクスペースを貸し出してくれるサービスです。

一口にオンラインストレージと言っても、現状、国内外を合わせれば、かなりの数に及び、各サービスによって無料から有料のものまであり スペックも様々です。
目的　用途によって使い分けられるようにするのが理想ですが、選定基準がなかなか難しいと思います。

機能が豊富でトラフィックが多いゆえに、価格が高い　使い辛いなど、スペックの高さが必ずしもプラスに作用するとも限りません。

個々人によって目的 用途は異なるので、この記事では各サービスの機能や特徴を徹底比較して最適なものを選べるようにまとめておこうと思います。

今回比較してみたオンラインストレージサービス14選
                                                                    
基本スペック

● 無料で使える容量：2GB(有料プランだと最大1TB)

●  1ファイルあたりの容量の上限：無制限

●  ファイル保存期間：90日間利用していない場合データ
削除される場合あり

● 共有：○

● 対応デバイス：Mac、Windows、Linux、iOS、
Android、BlackBerry

dropbox-thumbnail

オンラインストレージサービスとして定番となっているDropbox。
アメリカのDropbox Incが運営している。

パソコンやスマホに専用フォルダを作り、そこにDropboxのソフトウェア(専用アプリ)をインストールしてデータを保存すれば、自動的にWEB上のデータも更新され、ローカル上のデータをオンラインと同期することができる。

ハードドライブの容量を圧迫することなくクラウド上の大容量データを操作できるツールが備わっていて、残りの容量を気にしてデータを整理する必要もなく、重要な仕事に専念できます。

バックアップ機能も装備。誤ってデータを消してしまっても変更履歴から復元が可能。(30日間まで)

                                                                    
基本スペック

● 無料で使える容量：15GB(有料プランだと最大1TB)

● 1ファイルあたりの容量の上限：10GB

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS

googledrive-thumbnail

Googleドライブは2012年4月、googleが提供を始めたオンラインストレージサービス。

Googleの他のサービス(Googleプラス、Googleドキュメント、Googleスプレッドシートなど)と連携して使うことができるなど、共有機能に長けているのが特徴。

Googleアカウントを使って始められるので、すでにGmailやGoogle＋を使っていれば新たにアカウントを作成する必要がない。    

                                                                    
基本スペック

● 無料で使える容量：15GB(有料プランだと最大1TB)

● 1ファイルあたりの容量の上限：10GB

● ファイル保存期間：-

● 共有：1年以上ログインしていない場合アカウント削除

● 対応デバイス：Mac、Windows、Android、iOS

onedrive-thumbnail

Microsoftが提供しているオンラインストレージサービス。

WindowsのOSには標準でインストールされていて、ドキュメントや写真は OneDrive に自動的に保存されるようになっている。

Word、Excel、PowerPointなどのMicrosoftOfficeのアプリケーションとの連携が可能で、Officeがインストールされていない外出先のパソコンやスマホからでも、One Driveを使ってブラウザベース(オンライン上)でそれぞれのアプリケーションへアクセス、共有、共同作業ができる。

                                                                    
基本スペック

● 無料で使える容量：15GB(有料プランだと最大1TB)

● 1ファイルあたりの容量の上限：無制限

● ファイル保存期間：3ヶ月間未使用の場合削除される
場合あり

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS、
Linux、BlackBerry

copy-thumbnail

2013年に開始された新しいオンラインストレージサービスとして注目されているCopy。

スペックや使い勝手がDropboxと似ていて、Copyのソフトウェア(専用アプリ)をインストールするとデスクトップ上に自動的に「Copy」フォルダが作成され、ローカル上でオンラインと同期させることができる。他のPCやスマホでも同様の作業が可能。

また、初期状態で無料で使える容量がDropboxが2GBなのに対し、Copyは15GBなので容量の大きいデータはCopyに保存するなどの使い方もできる。

                                                                    
基本スペック

● 無料で使える容量：10GB

● 1ファイルあたりの容量の上限：250MB(有料プランだと
2GB)

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS

box-thumbnail

2005年に創業した米Box。2014年6月にBox Japanを立ち上げ、日本でのサービスを開始。

コンシューマなどの個人向けというよりも、企業向け(エンタータープライズの領域や大規模なプロジェクトを始めとしたビジネスシーン全般)のプラットフォームとしての機能が充実したオンラインサービスを提供している。

ビジネスシーンでは必須のタスク管理機能、セキュリティ環境、高度なコンテンツマネジメント機能などに優位性があるのが特徴。

                                                                    
基本スペック

● 無料で使える容量：20GB(有料プランだと最大無制限)

● 1ファイルあたりの容量の上限：無制限

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS、Linux

bitcasa-thumbnail

Bitcasa(ビットカーサ)は、2011年に設立されたアメリカのベンチャー企業Bitcasa Incが運営するオンラインストレージサービス。

ローカルストレージとのリアルタイムなデータ同期は行われない点でDropboxなどの同期型オンラインサービスとは異なる。
ローカル上のデータをクラウド経由で同期させる形ではなく、プライマリーストレージとして最初からクラウド上に置く仕組みのため、ローカルドライブの容量に左右されず”容量無制限のHDD”として利用できるのが特徴。

これは、オンライン環境が前提となる”モバイルファースト”で設計しているためであるが、ミラーリング機能(ローカルフォルダ内のデータを更新した場合自動的にクラウドにアップロード、バックアップしてくれる)や、スマートフォンの写真を自動でアップロードする機能なども備わっているので、同期型のサービスに近い運用もできる。

                                                                    
基本スペック

● 無料で使える容量：5GB(有料プランだと最大無制限)

● 1ファイルあたりの容量の上限：300MB

● ファイル保存期間：3年間アクセスがない場合全てのデ
ータ削除

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS

yahoo-thumbnail

Yahoo!ボックスは、Yahoo!が提供するオンラインストレージサービス。
Yahoo!プレミアム会員は、50GBまで無料で使うことができたり様々な特典をつけるなどサービス向上を図っている。

容量無制限の有料プランでは、米Cloud Engines社が運営するオンラインサービスのPogoplugを採用しているなど、他のオンラインストレージサービスとは異なる運用方法になっている。

                                                                    
基本スペック

● 無料で使える容量：5GB(有料プランだと最大1TB)

● 1ファイルあたりの容量の上限：2GB

● ファイル保存期間：無制限

● 共有：×

● 対応デバイス：Mac、Windows、Android、iOS

amazon-clouddrive-thumbnail

Amazon Cloud Driveは、オンラインショッピングサイト大手のAmazonが提供するオンラインストレージサービス。

Amazonの音楽配信サービス「Amazon MP3」で曲を購入した場合、容量制限の適用なしとするなど独自のサービスを提供している。

2013年5月に写真共有を目的としたスマホ専用アプリAmazon Cloud Drive Photos(スマホで撮影した写真データを自動的にアップロードする機能を備えたアプリ)をリリースした。

                                                                    
基本スペック

● 無料で使える容量：5GB

● 1ファイルあたりの容量の上限：25MB

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、iOS

iclouddrive-thumbnail

i cloud Driveは、Appleが運営するオンラインストレージサービス。

従来までのi cloudでは特定のデータを保存することしかできなかったが、i cloud Driveは様々なファイルをクラウド上に保存　共有できるようになり、ホーム画面上にあるFinderという一つの場所からフォルダやファイルに直接アクセスし管理　運用していくことができるようになった。

もちろんあらゆるデバイスや複数のアプリケーションから同じファイルにアクセスして作業することもできる。

                                                                    
基本スペック

● 無料で使える容量：5KB(有料プランで最大500KB)

● 1ファイルあたりの容量の上限：100MB

● ファイル保存期間：1年間

● 共有：○

● 対応デバイス：Mac、Windows、iOS

sugar-sync-thumbnail

Sugar Syncは、Sugar Sync Incが運営するオンラインストレージサービス。

特徴的なのは、バックアップや同期の対象となるフォルダを複数登録したりフォルダごとに同期対象のPCを選択できるという設定の柔軟性。
例えば、デスクトップPCでは容量の大きい画像フォルダや動画フォルダも同期したいけど、容量の少ないモバイルは同期から除外したい、といった場合にも対応可能。

またそうなると、バックアップや同期の設定は煩雑になりがちだけど、本サービスの利用時にダウンロードするクライアントソフト「Sugar Sync Manager」は、それらの設定を視覚的にわかりやすく、管理がしやすいように工夫されている。

                                                                    
基本スペック

● 無料で使える容量：無制限

● 1ファイルあたりの容量の上限：2GB(有料プランだと最
大8GB)

● ファイル保存期間：最大7日間(有料プランだと無制限)

● 共有：○

● 対応デバイス：Mac、Windows、スマホ非対応

firestorage-thumbnail

fire storageは、日本のロジックファクトリー株式会社が提供しているオンラインストレージサービス。

会員登録しない場合は、ファイル保存期間は7日間しかないが、会員登録するとファイル保存期間は無制限に。

保存容量が無制限というところが魅力ではあるものの、無料会員の場合1ヶ月以内にログインがないとデータが削除されてしまうため、大事なデータの保存はなるべく控えた方が無難。

                                                                    
基本スペック

● 無料で使える容量：50GB(有料プランだと無制限)

● 1ファイルあたりの容量の上限：2GB(有料プランだと
16GB)

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Linux、Android、iOS

adrive

A Driveは、米A Drive社が提供するオンラインストレージサービス。

同種のサービスの中でも他社を圧倒しているところが、無料で50GBという大容量が使える点。
サイトが英語版しかなく、規約や細かい仕様が把握しづらいところやSSLが使えないところなどが難点。

                                                                    
基本スペック

● 無料で使える容量：60MB(月間)

● 1ファイルあたりの容量の上限：(1ノートの上限サイズ)

25MB(有料プランだと最

大200MB)

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS、

BlackBerry

evernote-thumbnail

Evernoteは米EvernoteCorporationが開発　提供するソフトウェア(WEBサービス)。

テキスト、写真や画像、音声などの複数の形式のデータを一つのメモにまとめることができるという、多様な用途を果たすワークスペースとしての機能を備えた多機能型メモ帳。

専用クライアントをアプリケーションにアクセスすれば、各クライアント　ウェブページデバイスからでも、保存したデータの閲覧　編集が可能で、データの共有も可能。各クライアントで作成されたデータは、自動でクラウド上のデータベースに同期されるようになっている。

無料で使えるベーシック版の他に、より多くのアップロード容量やパワフルな機能が使えるプラス版、プレミアム版、企業向けのEvernote Businessという三つの有料プランにいつでもアップグレード可能。

ファイルを保存するための箱ではなく、あくまでもメモとしての機能に特化したサービスなので、保存容量も少なくオンラインストレージとしての使い方には不向きといえる。

                                                                    
基本スペック

● 無料で使える容量：3GB

● 1ファイルあたりの容量の上限：2GB

● ファイル保存期間：無制限

● 共有：○

● 対応デバイス：Mac、Windows、Android、iOS

drivee-thumbnail

日本製のレンタルサーバーで有名なエックスサーバー社が提供するオンラインストレージサービスdrivee。

他のオンラインストレージサービスのように専用ソフトをインストールしてから使用するというものではなく、webDAVという機能を用いて接続を行うため、ブラウザではなくWindowsエクスプロ－ラーでやり取りすることができ、自分のローカルのパソコンのデータを編集　保存するのと同じ感覚でサーバ上のファイルを扱うことができる。

従来では、サーバ上のファイルを編集したりアップロードするにはFTPソフトを使うのが一般的だったが、webDAVは特別なソフトを使わなくてもエクスプローラーで使用可能。

※webDAV(ウェブダブ)は、FTPソフトなしでデスクトップからWindowsエクスプロ－ラー(Mac環境では
     Finder)でサーバーにアクセスできる機能。

関連記事
無料で利用できる便利なWEBサービスの紹介記事
f:id:ooigawa-bitter-sweet:20160623003012j:plain
PICK UP
注目記事セレクション

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3

HTML / CSS

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。

記述はまず、どのパターンでも共通に適用させるCSSを設定して ( ダウンロードした外部ファイルをリンクさせる ) 、あとはパターンごとに異なる個別のhtmlを書いていくという流れ。  

目  次
                                                                                                      
head内に共通のCSSを設定

まずは、全てのパターン共通になるCSSファイルをhead内にを設定する。

 【 html 】
 1
  <head>
 2
      <link rel="shortcut icon" href="../favicon.ico">
 3
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 4
      <link rel="stylesheet" type="text/css" href="css/style_common.css" />
 5
       <link rel="stylesheet" type="text/css" href="css/style1.css" />
 6
       <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
 7
  </head>

あとは、設定したいパターンのコードをhtmlに書いていく。

                                                                                                      
hover effect【１】
上下からテキストがスライドしてくるエフェクト

 

上下からテキストがスライドしてくるエフェクト

original-hover-effects-capture-1
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-first">
 3
          <img src="images/1.jpg" />
 4
          <div class="mask">
 5
              <h2>Hover Style #1</h2>
 6
              <p>A wonderful serenity has taken possession of my entire soul,  
 7
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
              <a href="#" class="info">Read More</a>
 9
          </div>
 10
      </div>
 11
 
 12
      <div class="view view-first">
 13
          <img src="images/4.jpg" />
 14
          <div class="mask">
 15
              <h2>Hover Style #1</h2>
 16
              <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
              <a href="#" class="info">Read More</a>
 19
          </div>
 20
      </div>
 21
  </div>
                                                                                                      
hover effect【２】
四方八方から時間差でフィルタとテキストをスライドしながら表示

 

    四方八方から時間差でフィルタとテキストをスライドしながら表示

original-hover-effects-capture-2
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-second">
 3
         <img src="images/5.jpg" />
 4
         <div class="mask"></div>
 5
         <div class="content">
 6
             <h2>Hover Style #2</h2>
 7
                <p>A wonderful serenity has taken possession of my entire soul,
 8
                 like these sweet mornings of spring which I enjoy with my whole heart.</p>
 9
                <a href="#" class="info">Read More</a>
 10
            </div>
 11
        </div>
 12
 
 13
        <div class="view view-second">
 14
            <img src="images/6.jpg" />
 15
            <div class="mask"></div>
 16
            <div class="content">
 17
                <h2>Hover Style #2</h2>
 18
                <p>A wonderful serenity has taken possession of my entire soul,
 19
                like these sweet mornings of spring which I enjoy with my whole heart.</p>
 20
                <a href="#" class="info">Read More</a>
 21
            </div>
 22
        </div>
 23
    </div>
                                                                                                      
hover effect【３】
四方八方から時間差でフィルタとテキストを表示

 

    四方八方から時間差でフィルタとテキストを表示(かぶさる効果がかかったエフェクト)

original-hover-effects-capture-3
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-third">
 3
         <img src="images/10.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #3</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-third">
 13
         <img src="images/12.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #3</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【４】
回転しながら画像とテキストが入れ替わる

 

    回転しながら画像とテキストが入れ替わる

original-hover-effects-capture-4
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-fourth">
 3
         <img src="images/14.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #4</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-fourth">
 13
         <img src="images/16.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #4</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【５】
テキストとフィルターが左からスライドして画像を押し出すエフェクト

 

    テキストとフィルターが左からスライドして画像を押し出すエフェクト

original-hover-effects-capture-5
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-fifth">
 3
         <img src="images/1.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #5</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-fifth">
 13
         <img src="images/2.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #5</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【６】
テキストをズームアップ表示からの配置

 

    テキストをズームアップ表示からの配置

original-hover-effects-capture-6
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-sixth">
 3
         <img src="images/6.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #6</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-sixth">
 13
         <img src="images/8.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #6</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【７】
画像を回転させながら消して、テキストをスライド表示

 

    画像を回転させながら消して、テキストをスライド表示

original-hover-effects-capture-7
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-seventh">
 3
         <img src="images/10.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #7</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-seventh">
 13
         <img src="images/14.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #7</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【８】
上からスライドしてきたフィルターとテキストがバウンドするエフェクト

 

    上からスライドしてきたフィルターとテキストがバウンドするエフェクト

original-hover-effects-capture-8
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-eighth">
 3
         <img src="images/2.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #8</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-eighth">
 13
         <img src="images/6.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #8</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>
                                                                                                      
hover effect【９】
両サイドからフィルターがスライド＋ひねりを加えたテキスト表示

 

    両サイドからフィルターがスライド＋ひねりを加えたテキスト表示

original-hover-effects-capture-9
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-ninth">
 3
          <img src="images/11.jpg" />
 4
          <div class="mask mask-1"></div>
 5
          <div class="mask mask-2"></div>
 6
          <div class="content">
 7
              <h2>Hover Style #9</h2>
 8
              <p>A wonderful serenity has taken possession of my entire soul,
 9
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 10
              <a href="#" class="info">Read More</a>
 11
          </div>
 12
      </div>
 13
 
 14
      <div class="view view-ninth">
 15
          <img src="images/12.jpg" />
 16
          <div class="mask mask-1"></div>
 17
          <div class="mask mask-2"></div>
 18
          <div class="content">
 19
              <h2>Hover Style #9</h2>
 20
              <p>A wonderful serenity has taken possession of my entire soul,
 21
               like these sweet mornings of spring which I enjoy with my whole heart.</p>
 22
              <a href="#" class="info">Read More</a>
 23
          </div>
 24
      </div>
 25
  </div>
                                                                                                      
hover effect【１０】
画像ズームアップ表示してからのテキスト表示にフワッと切り替え

 

    画像ズームアップ表示してからのテキスト表示にフワッと切り替え

original-hover-effects-capture-10
demo
 【 html 】
 1
  <div class="main">
 2
      <div class="view view-eighth">
 3
         <img src="images/2.jpg" />
 4
         <div class="mask">
 5
             <h2>Hover Style #8</h2>
 6
             <p>A wonderful serenity has taken possession of my entire soul,
 7
             like these sweet mornings of spring which I enjoy with my whole heart.</p>
 8
             <a href="#" class="info">Read More</a>
 9
         </div>
 10
     </div>
 11
 
 12
     <div class="view view-eighth">
 13
         <img src="images/6.jpg" />
 14
         <div class="mask">
 15
             <h2>Hover Style #8</h2>
 16
             <p>A wonderful serenity has taken possession of my entire soul,
 17
              like these sweet mornings of spring which I enjoy with my whole heart.</p>
 18
             <a href="#" class="info">Read More</a>
 19
         </div>
 20
     </div>
 21
  </div>

 

以上、ここまでが10パターンのまとめ。

参考サイトhttp://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

 

 

関連記事画像ホバー時に効果をつけるtips記事

プラグイン不要！！ページネーション設置方法

WordPress
f:id:ooigawa-bitter-sweet:20181025201442j:plain  

僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。

プラグインにしても なるべく使わずに作業を進めていきたいと思っている今日この頃‥。

注意点

違うプラグイン同士が同じ関数を呼び出そうとする際に、エラーとなり画面が真っ白になるケースがあります。プラグイン設置の際は、あらかじめバックアップをとっておくことを忘れずに！！

ということで、ここでは「プラグインを使わずにページネーションを設置する方法」をまとめておきます。

 

【 完成画像 】

　　　　　　pagenation     

手順としては、functions.phpで読み込んで　index.phpで出力して　CSSで調整していくという流れです。

この手順で以下のコードを記述していきます。

プラグイン不要！！のページネーション設置手順
「function.php」ファイルに記述

まずは「functions.php」に以下のコードを記述していきますが、その前に「functions.php」ファイルを編集する際の注意点から。

この「functions.php」ファイルは、関数ファイルが集約されていて 管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。

カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。

編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。

つまり データが消えてしまうということです。

そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。

なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。

注意点

「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。

こういった注意点を踏まえて、「functions.php」ファイルに以下のコードを記述していきます。

 【 functions.php 】
 1
  function pagination($pages = '', $range = 4)
 2
  {
 3
      $showitems = ($range * 2)+1;
 4
 
 5
      global $paged;
 6
      if(empty($paged)) $paged = 1;
 7
 
 8
      if($pages == '')
 9
      {
 10
          global $wp_query;
 11
          $pages = $wp_query->max_num_pages;
 12
          if(!$pages)
 13
          {
 14
              $pages = 1;
 15
          }
 16
       }
 17
 
 18
       if(1 != $pages)
 19
      {
 20
          echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
 21
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
 22
        .get_pagenum_link(1)."'>&laquo; First</a>";
 23
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
 24
        ."'>&lsaquo; Previous</a>";
 25
 
 26
        for ($i=1; $i <= $pages; $i++)
 27
        {
 28
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
 29
        $pages <= $showitems ))
 30
        {
 31
             echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
 32
            .get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
 33
            }
 34
        }
 35
 
 36
        if ($paged < $pages && $showitems < $pages) echo "<a href=\""
 37
        .get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 38
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)
 39
        echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 40
        echo "</div>\n";
 41
        }
 42
    }
 43
 
index.phpファイルに記述

次に、ページネーションを設置したい箇所に、出力するためのコードを記述。

ここでは、index.phpファイルの＜div id=”content”＞～＜/div＞の閉めタグの直前に設置しました。

 【 index.php 】
 1
  <!-- ページネーションエリア -->
 2
  <?php if (function_exists("pagination")) {
 3
      pagination($additional_loop->max_num_pages);
 4
      } ?>
 5
  <!-- /ページネーションエリア   -->
デザインやレイアウトをCSSで調整していく

デザインはデフォルトのままになっているので、あとはCSSで調整していきます。

 【 style.css 】
 1
  /*ページネーションエリア*/
 2
  div.pagination {
 3
      clear:both;
 4
      position:relative;
 5
      font-size:11px;
 6
      line-height:13px ;
 7
      vertical-align: middle;
 8
      width:550px;
 9
      height:20px;
 10
      }
 11
 
 12
  div.pagination span, .pagination a {
 13
      display:block;
 14
      float:left ;
 15
      margin: 2px 2px 2px 0 ;
 16
      padding:6px 9px 5px 9px ;
 17
      text-decoration:none;
 18
      width:auto ;
 19
      background-color: #ffffff;
 20
      border:1px solid #E47273;
 21
      color:#E47273;
 22
      border-radius:3px
 23
    }
 24
 
 25
  div.pagination a:hover{
 26
      color:#fff ;
 27
      background-color:#E47273
 28
    }
 29
 
 30
  div.pagination .current{
 31
      padding:6px 9px 5px 9px ;
 32
      background-color:#E47273;
 33
      color:#fff
 34
      }
 35
 

参考サイト

http://sgwordpress.com/teaches/how-to-add-wordpress-pagination-without-a-plugin/

 

 

関連記事WordPressカスタマイズ関連の記事

サイドバー以外の場所にも複数のウィジェットを設置する方法

WordPress
f:id:ooigawa-bitter-sweet:20150607161831j:plain
サイドバーというひとかたまりのエリアだけでなく、ヘッダー部分などページのあらゆる箇所ウィジェットの機能を複数設置する方法。
設置したいウィジェットの数だけ「 register_sidebar(); 」の設定を記述して有効化させる

まず、functions.phpファイルを開いて、register_sidebar();の設定を設置したいウィジェットの数だけ記述する。

1箇所に設定するのであれば1個設定し、2箇所に設定するのであれば以下の図のように2個設定する。

 【 functions.php 】
 1
  <?php
 2
  register_sidebar();
 3
  register_sidebar();
 4
  ?>

上記のように2つ記述して、管理画面から「ウィジェット」画面を開いて確認すると、「サイドバー1」「サイドバー2」という名前で二つのウィジェットエリアが作成されているので、あとは右側にドラッグしてメニューを有効化する。

無効化したい場合は、同じようにドラッグして戻せば無効化される。

f:id:ooigawa-bitter-sweet:20150603154210j:plain
有効化したウィジェットエリアを出力させる

上記までの操作で有効化するまでが完了しているので、次に実際に画面上に出力する設定をしていく。

複数の有効化されたウィジェットエリアがある場合、「サイドバー1」というウィジェットエリアを出力するには、テンプレートに＜！?php dynamic_sidebar(1);?＞と記述。

 【 index.php 】
 1
  <?php dynamic_sidebar(1);?>

「サイドバー2」というウィジェットエリアを出力するには、テンプレートに＜!?php dynamic_   sidebar(2);?＞と記述。

 【 index.php 】
 1
  <?php dynamic_sidebar(2);?>

 

 

関連記事WordPressカスタマイズ関連の記事

PAGE TOP