Axisテンプレートの一部メンテナンスを行いました。
Axisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。 設定ページ 更新履歴 2017.10.3 個別記事下ページ送り修正 ページ送りがおかしなことになっておりました。 早々の修正で申し訳ございません。 既にカスタマイズ済みの方は 個別記事用ページナビこ...
不具合ではありませんが、スマートフォンでスライダーの と の前後ナビボタンが押しづらい と感じましたので、そちらを改善しました。
共有テンプレート公式配布ページの内容は修正済です。
現在既にご利用の方はまず間違いなくカスタマイズ済でしょうから、大変お手数ですが以下の手順で修正をお願いします。
繰り返しますが 不具合ではありません ので、任意で行って頂ければ、と思います。
前後リンクが反応する範囲が中央 40px × 40px と狭いのでボタンを押したつもりが個別記事へ移動してしまうことがありました。
赤い部分がタップで反応する範囲です。
反応する範囲を増やすことで意図しないページ遷移を極力防ぐことができるかと思います。
DLはしたけどカスタマイズはまだだよ、という方は再DLをおすすめします。
修正するのは 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;
}
以上です。
わかりにくい点等ありましたらご指摘ください。
よろしくお願いします。
