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

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

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

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

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

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

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

変更点

前後リンクが反応する範囲が中央 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;
}

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

ぼっちん
2017/12/02 (Sat) 08:16

ありがとうございます

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

vanillaice (Akira)
Akira
2017/12/02 (Sat) 16:45

To ぼっちんさん

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

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)