Axisテンプレートのスライダー前後ボタンが使い辛い方へ

Axisテンプレートのスライダー前後ボタンが使い辛い方へ

テンプレ不具合・修正など
2017/12/02 2
vanillaice (Akira)
vanillaice (Akira)

Axisテンプレートの一部メンテナンスを行いました。

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

Axisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。 設定ページ 更新履歴 2017.10.3 個別記事下ページ送り修正 ページ送りがおかしなことになっておりました。 早々の修正で申し訳ございません。 既にカスタマイズ済みの方は 個別記事用ページナビこ...

不具合ではありませんが、スマートフォンでスライダーの の前後ナビボタンが押しづらい と感じましたので、そちらを改善しました。

共有テンプレート公式配布ページの内容は修正済です。
現在既にご利用の方はまず間違いなくカスタマイズ済でしょうから、大変お手数ですが以下の手順で修正をお願いします。
繰り返しますが 不具合ではありません ので、任意で行って頂ければ、と思います。

変更点

前後リンクが反応する範囲が中央 40px × 40px と狭いのでボタンを押したつもりが個別記事へ移動してしまうことがありました。
赤い部分がタップで反応する範囲です。

反応する範囲を増やすことで意図しないページ遷移を極力防ぐことができるかと思います。

修正の仕方

DLはしたけどカスタマイズはまだだよ、という方は再DLをおすすめします。

DOWNLOAD

修正するのは CSSソース(テンプレート設定画面下段「スタイルシート編集」)のみ で、html内容は触りません。
Ctrl + F キー検索で

/* slide navigation */

上記を目印にし、以下のスクリーンショットと見比べながら対象範囲を一旦 削除 します。
削除を行なった同じ箇所に新たな内容をペーストしますので、場所を見失わないように注意してください。

クリックで別タブ拡大表示

以下の内容をコピー&ペースト(Copyクリックで一発コピーできます)

.flex-direction-nav a {
  display: block;
  width: 50px;
  height: 100%;
  color: rgba(0,0,0,.8);
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 10;
  font-size: 0;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255,255,255,.3);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.flex-direction-nav a.flex-prev {
  left: 0;
}

.flex-direction-nav a.flex-next {
  right: 0;
}

.flex-direction-nav a:before {
  margin-top: -20px;
  display: inline-block;
  color: rgba(255,255,255,.8); /* 注)スライダー左右矢印ボタンの色 */
  line-height: 40px;
  position: absolute;
  top: 50%;
  font-family: "FontAwesome";
  font-size: 40px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

.flex-direction-nav a.flex-prev:before {
  content: "\f104";
  left: 10px;
}

.flex-direction-nav a.flex-next:before {
  content: "\f105";
  right: 10px;
}

以上です。
わかりにくい点等ありましたらご指摘ください。
よろしくお願いします。

 2

There are no comments yet.
ぼっちん
ありがとうございます

私にとってなんともグッドタイミングな記事で「わぉ♪」って喜んでしまいました(笑)
先月中旬にやっとiPhone Xを手に入れて使い始めたんですけど、何故か < > ボタンでのタップミスが多くなって「あららら~」なんて苦笑するシーンが多くなってたものですから「ボタンの範囲を広げよう」って思ってた矢先のこの記事でした(笑)
おかげさまでなんの労を要せず修正出来ました ^^
いつも細やかなご配慮をありがとうございます m(_ _)m

2017/12/02 (Sat) 08:16
vanillaice (Akira)
Akira
To ぼっちんさん

ぼっちんさん、毎度です ( ゚Д゚)ノ

間に合って良かった ^^;
最初から気にかけていれば済んだので、私のポカです。またしても((((笑)
こちらこそお手数おかけします。いつもありがとうございます :)

2017/12/02 (Sat) 16:45

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレ不具合・修正など