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

投稿 2018年03月26日
テンプレ不具合・修正など
TemplateFC2GlitchModify

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

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

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

アイコンが崩れているサンプル
アイコンが崩れているサンプル

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

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

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

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

再DLで問題ない場合

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

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専用ページにて承ります。

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)