comments trackbacks you may also like

jQuery不要の「Swiper」で3次元スライダーに挑戦!FC2ブログにカスタマイズしてみた件

2019年11月24日
FC2ブログ日記(カスタマイズの所感など)
0
#FC2ブログ #FC2ブログテンプレート #FC2ブログテンプレートカスタマイズ #ブログ運営 #ウェブデザイン #jQuery #ブログカスタマイズ #ブログ日記 #Swiper #スライダー

Swiperを使って3次元風のスライダーをFC2ブログに実装してみた


FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。いつもご訪問いただき、ありがとうございます(^^)


今回もまた、FC2ブログテンプレートカスタマイズ報告をしたいと思います。


僕が現在ブログ運営するのに使っているテンプレートはFC2ブログテンプレート製作者Akiraさんの「Ample」です。


ところが、僕のブログには、ヘッダー画像の下にデフォルトされてないスライダーが設置してあるので「おや?」と思われた方もいらっしゃるのでは?


ちなみに、スライダーというのはこんな感じ。

FC2ブログで今まで実装していたスライダーの画像

Webサイト人気ブログなどに導入されているのをよく見かけますよね。


僕がスライダーを設置したきっかけは、一時期お借りしていたAkiraさんの「Southerly」というテンプレート。これに実装するスライダーがとても気に入っていた僕は、テンプレートを変えるたびに移植してきたわけです。

Southerly - FC2ブログテンプレート

Southerlyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ...

で、今回は、このスライダーをもう少し変わった感じにカスタマイズ出来ないかなぁ~と思いまして…。


いろいろと調べているうちに、jQueryも不要で簡単にスライダーが設置できる方法を知りました。そこで今回は、既存のスライダーを3次元風みたく表示させるカスタマイズに挑戦してみました!

jQueryも不要な「Swiper」の使い方、参考にしたWebサイト

僕のブログに設置したスライダーは「Swiper」というWebサイトのオンラインツール。もともと「Swiper」の使い方をよく知らずに実装していた僕は、今回のカスタマイズがよい機会だと思い、少し勉強してみようかなと。


それで参考になったのは、下記のWebサイトで紹介された記事でした。

便利すぎ!jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう

汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応して...

この記事を読んでみて、jQueryも不要Swiperの使い方はかなり簡単だと分かりました。それでも、僕のような初心者からするとかなり難しいレベルですけどね( ̄▽ ̄;)

Swiperの使い方や流れを整理していざ挑戦!JavaScriptも分かりやすかった

使い方の流れはだいたい理解できました。頭の中で整理するとこんな感じ。


  1. Swiper.jsのファイルをCDN経由で読み込む。
  2. スライダーのhtmlを記述する。
  3. CSSを指定する(最低限必要な設定はwidthheightだけなので非常に便利です)。
  4. スライダーを生成するJavaScriptを記述する。

上の手順で厄介なのが、いかにも取っ付きにくい印象のJavaScript。しかし、上にご紹介した記事で分かりやすく解説されているため、何とか記述することが出来ました(^^)


Swiper API
出典:Swiperパラメータ一覧


ポイントは、自分のやりたいことをJavaScriptに記述していくわけですが、オプションとして細かく分類された部品(パラメータ)のようなものを追加していくだけ。それぞれどのような働きをするのか説明されてるので、分かりやすかったです。

まとめ

やっと新しく完成した「3次元スライダー」がこちら。


Swiperを使って3次元風のスライダーをFC2ブログに実装してみた


ちゃんとJavaScriptが書けているのか自信はありませんけど( ̄▽ ̄;)いちおうちゃんと動作してくれました。


いろいろとブログテンプレートをカスタマイズするのは、失敗が怖かったりしてつい敬遠しがちになりますよね。


まあしかし、最初にバックアップを取っておきさえすれば、失敗したら元に戻せばいいわけです。そう考えると、気楽に楽しめますよ(^^)


興味がおありの方はぜひ挑戦してみて下さい。

\チェック/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

コメント(0)

There are no comments yet.
未分類 (0)
シン・胃がん闘病記 (31)
┣  AVANT: 癌の余命宣告~共存 (20)
┗  セントラルドグマ: 父親の胃癌 (11)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5948)
┣  胃がんブログ (285)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (85)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
がん のこと(ガン情報全般) (512)
┣  がんブログ (290)
┗  がんニュース (222)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (142)
┣  Amazonセール (2)
┗  📱kindleセール (139)
おもしろグッズ (11)
今日のエッセイ (114)
ニュース・芸能・話題 (778)
┗  転職・キャリアアップ (21)
占い・心理テスト (6)
恋愛・人間関係 (30)
終活ブログ (12)
グルメ (103)
┣  低糖質レシピ (25)
┗  お酒の飲み方 (2)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (74)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (244)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (187)
┣  FC2ブログ日記(カスタマイズの所感など) (10)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhone の使い方・アプリなど (32)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)