レスポンシブ対応スライダー付きテンプレートカスタマイズ方法

author photo

Byinfobloger

レスポンシブ対応スライダー

最近ではレスポンシブに対応したスライダーを多く見かけるようになりました。

多くのアクセスがスマホユーザーである事を考えたら当然と言えるかもしれません。

このテンプレートもレスポンシブ対応のスライダーを組み込んであります。

現在表示されているようなヘッダー画像にするか、レスポンシブのスライダーにするかは好みや目的で変わってくるでしょう。

今回はヘッダー画像とレスポンシブ対応スライダーの使い方について紹介します。

スポンサーリンク

レスポンシブ対応スライダーの使用方法

Gifアニメーション

上のアニメーションがレスポンシブ対応スライダーを装備したアニメーションです。

大きい画面で見たい人は画像をクリックしてください。

それではスライダーの使用方法について説明します。

スライダーの特徴
  1. スライドさせる画像は基本的には何枚でも可能
  2. スライド画像にリンクを挿入可能
  3. プラグイン設定画面で簡単に画像を差し替え可能
基本的なスライド表示方法
  1. プラグイン設定画面で公式プラグインをクリック
  2. 拡張プラグイン「フリーエリア」をプラグイン1に追加
  3. 基本のHTMLコードをコピーして貼り付ける
HTML
<h4><span class="Gravitas-One Font30">Featured Article</span></h4>
<!-- Slider main container -->
<div class="swiper-container mb60">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- ↓ この下にスライドしたい記事などを記入↓  -->
<div class="swiper-slide"><a href="<!--記事のURL1-->"><img src="<!--画像のURL1-->" title="<!--記事のタイトル1-->" alt="<!--記事のタイトル1-->"></a></div>
<div class="swiper-slide"><a href="<!--記事のURL2-->"><img src="<!--画像のURL2-->" title="<!--記事のタイトル2-->" alt="<!--記事のタイトル2-->"></a></div>
<div class="swiper-slide"><a href="<!--記事のURL3-->"><img src="<!--画像のURL3-->" title="<!--記事のタイトル3-->" alt="<!--記事のタイトル3-->"></a></div>
<div class="swiper-slide"><a href="<!--記事のURL4-->"><img src="<!--画像のURL4-->" title="<!--記事のタイトル4-->" alt="<!--記事のタイトル4-->"></a></div>
<div class="swiper-slide"><a href="<!--記事のURL5-->"><img src="<!--画像のURL5-->" title="<!--記事のタイトル5-->" alt="<!--記事のタイトル5-->"></a></div>
</div>
<!-- ↑スライドここまで↑  -->
<!-- ↓ ページネーションの表示が必要がない場合は削除(表示推奨)↓ -->
<div class="swiper-pagination"></div>
<!-- ↑ページネーションここまで↑  -->
<!-- ↓スライドナビゲーション ↓-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
スライド使用時の注意点
画像サイズを統一する
例として「1,000px×420px」または「1,500px×630px」
画像の横幅は最低1,000pxにして、縦幅は同じサイズであれば自由に決めてもらっても大丈夫です。
タイトルについて
プラグインのタイトルは表示されませんが記入する必要があります。
基本のHTMLの中にある「h4~/h4」の中に記入したタイトルが表示されます。
表示するプラグインの数
プラグインカテゴリ1に表示するプラグインは必ず1つにしてください。 プラグインを何種類か導入しても表示するのはスライダー1つだけにしてください。

スライダーをヘッダー画像に切り替える方法

ヘッダー画像

人によってはスライダーが邪魔だと思う人もいるでしょう。

そんな時はヘッダー画像に切り替えてください。

ヘッダー画像の仕組み
  1. ヘッダーの画像はCSSで背景に指定しています
  2. 背景のヘッダー画像の上に画像を表示しています
  3. 画像ではなくテキストを表示させることも可能です
HTML
<h4><span class="Gravitas-One Font30"><!--ここにタイトルを記入--></span></h4>
<div class="keyvisual">
<a href="<!--URL-->"><img class="logo" src="<!--画像のURL-->" alt="<!--代替えテキスト-->"></a>
</div>
ヘッダー画像の注意点
  1. このブログの背景画像は「1,300×450」で作成しています
  2. 画像が小さすぎると背景画像が画面全体に表示されません
  3. 画像のサイズが大きくなると容量も大きくなるので注意が必要です

スライダーとヘッダーのまとめ

おそらく今回の説明だけでは分からない所が多いと思います。

細かい部分は会員制サイトの方で、動画などを使って解説しているので参考にしてください。

スライダーにはスライダーの良さがありますが弱点もあります。

ヘッダー画像も読者を引き止めるためには非常に重要な要素です。

どちらが最適かはブログのテーマにもよると思います。

まずはどんなテーマでブログを作成するかを考えてから、スライダーにするかヘッダー画像にするか決めても遅くはありません。

今回は以上となります。
さようなら!

関連記事
Share

Comments 0

Leave a reply