またまたAxisテンプレート修正のお知らせです

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

2018/03/26

2022/10/03

vanillaice (Akira)

もう本当に度々の修正で申し訳ないことこの上ない (；´Д｀)
今回は iPhoneXでSVGの表示がおかしい件の修正です。

これは恐らく機種固有バグだと思いますのでiPhoneX以外のデバイスをお使いの方は症状が出ていないと思います(がはっきりは言えません)、そちらを改善ました。

症状・スライダーの前後矢印アイコンの表示が崩れる

この現象に関し何が「what」はわかっていますが、何故「why」がはっきりわかっていません。
what --- Font AwesomeのSVGアイコンが
why --- (iPhoneXの)iOS11がSVGのtransform-box値を誤解釈(？と推察)

また、毎回必ず起きるというわけではなくランダムに発生するというご報告も頂いてます。
iOS毎度謎い(笑)

というわけでこのアイコン表示に関しましてFont Awesomeの使用を取りやめまして、ユニコード表記に変更しようと思います。

既にカスタマイズ済みの方は何度も再DLして頂くのも忍びないので、ご自身のカスタマイズ分量と照らされましてより工程が少ないと思われる方法で修正をお願いします。
一部CSSの修正のみでhtmlの追加・編集等はありません。

再DLで問題ない場合

以下のリンクから通常の手順で公式ページからお願いします。

DOWNLOAD

CSS内容をご自身で修正して頂く場合

修正対象箇所は以下の部分です。

.flex-direction-nav a.flex-prev::before {
  content: "\f104";
  display: none;
  font-family: 'Font Awesome 5 Solid';
}

.flex-direction-nav a.flex-next::before {
  content: "\f105";
  display: none;
  font-family: 'Font Awesome 5 Solid';
}

.flex-direction-nav a.flex-prev .svg-inline--fa {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -20px;
  color: rgba(255,255,255,.8);/* 注)スライダー左右矢印ボタンの色 */
  font-size: 40px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3));
}

.flex-direction-nav a.flex-next .svg-inline--fa {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -20px;
  color: rgba(255,255,255,.8);/* 注)スライダー左右矢印ボタンの色 */
  font-size: 40px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3));
}

最初の行にある .flex-direction-nav a.flex-prev::before で
Ctrl + F キー検索するとすぐに特定できます。
(Macユーザーの方は Ctrl を Command に置き換えてください)

上記対象部位を以下の内容と差し替えてください。
Copy クリックで一発コピーできますので、対象部位をよく確認した上で
Ctrl + V キーでペースト。

.flex-direction-nav a.flex-prev::before {
  content: "\2039";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.8);/* 注)スライダー左右矢印ボタンの色 */
  font-weight: bold;
  font-size: 5rem;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

.flex-direction-nav a.flex-next::before {
  content: "\203A";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.8);/* 注)スライダー左右矢印ボタンの色 */
  font-weight: bold;
  font-size: 5rem;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

この処理で対象部位CSS内容が4項目から2項目に減ります。

font-size: 5rem; がアイコンの大きさ指定です。
上限 10rem として調整可能です。

最近というか平素より大変ミスが多くて本当にご迷惑おかけします。
これに懲りずよろしくお願いします ^^;
ごめんねーーー！

本件をご報告頂きましたぼっちんさんにお礼申し上げます。
(スクリーンショット原本もお借りしました)

ご質問等は以下のリンクからAxis専用ページにて承ります。