投稿者: yasuhara@accorder.co.jp

【EIDAI】CSSとJSのキャッシュがなかなか更新されない

永大産業様のブラウザだけの問題(?)でcssとjsのキャッシュがなかなか更新されないようです。

アコーダーのパソコンで正常に表示されているのに、永大産業様の方でスーパーリロードをしてもうまくいかない場合はcssとjsのファイルの名前を変えてアップロードしないといけない時があります。

その後、面倒ですが一週間くらい経った後に、名前を元に戻すという作業が発生します。

＜作業手順＞

①cssとjsファイルの名前を変更したものを作成
◯◯.html
css/style.css
js/common.js

↓

◯◯.html
css/style.css
js/common.js
css/style_acc.css
js/common_acc.js
②htmlのhead内を変更
・index.html
<link href="renewal/css/style.css" rel="stylesheet" type="text/css" media="all">
<script src="renewal/js/common.js"></script>
↓ 

<link href="renewal/css/style_acc.css" rel="stylesheet" type="text/css" media="all">
<script src="renewal/js/common_acc.js"></script>
③下記のセットをアップロードしていただく
◯◯.html
css/style.css
js/common.js
css/style_acc.css
js/common_acc.js

〜一週間後〜

④htmlのhead内を元に戻す
<link href="renewal/css/style_acc.css" rel="stylesheet" type="text/css" media="all">
<script src="renewal/js/common_acc.js"></script>
↓ 

<link href="renewal/css/style.css" rel="stylesheet" type="text/css" media="all">
<script src="renewal/js/common.js"></script>
⑤元にもどしたhtmlファイルをアップロードしていただく
⑥名前を変更したcssとjsを削除していただく
css/style_acc.css
js/common_acc.js

ハンバーガーを開いた時に背景を固定する方法

スマホサイトでよく見るのがハンバーガーメニュー。ハンバーガーをクリックすると、メニューがドロップダウンして出てくるものや、横からスライドして出てくるものなど様々です。

しかし、ハンバーガーが開いている間にスクロールすると、背景も一緒に動いてしまうサイトが少なくありません。背景はスクロールする必要がないですし、ユーザーが迷ってしまう原因にもなるので、固定したいところです。

ハンバーガーが開いている間に背景を固定するには、 

$('html').css('overflow','hidden').on('touchmove.noScroll', function(e) {
e.preventDefault(); });
上記のように書けばうまくいきます。

htmlをoverflow:hiddenにすれば、背景がスクロールされなくなると思っていましたが、なぜかiPhoneではスクロールされてしまったので、touchmove.noScrollを書き、タッチ動作のうちスクロールを禁止することで、iPhoneでも背景がスクロールされないようになりました。

スクロールできないようにしてもメニューを閉じた後は、スクロールできないといけません。 

$('html').css('overflow','').off('.noScroll');

上記のように書くと元に戻すことができます。
css(‘overflow’,”)でoverflowを元の値に戻し、off(‘.noScroll’)で先程設定したtouchmove.noScrollを解除しています。

hoverしてbackgroundを変える際に起こるちかちかを解消する方法

ホバーして背景の画像を変える際に、

HTML

<p class="foo"><a href="">アコーダー株式会社</a></p>

CSS

.foo { background: url(../images/bbb.jpg); } 
.foo:hover { background: url(../images/ccc.jpg); }
.foo a { width:200px; height:200px; display:block; }
と指定すると、ホバーして画像が切り変わる瞬間に一瞬白くなることがあります。今回はこの問題を解決する方法をお伝えします。変更するのはCSSだけです。

CSS

.foo { background: url(../images/ccc.jpg); } 
.foo a { background: url(../images/bbb.jpg); width:100%; height:100%; display: block; }
.foo a:hover { background: none; }

hoverしたら見える画像を「foo」の背景にして、ホバー前に見えている画像を<a>の背景にしています。 ホバーしたら<a>の背景が消えて、<li>の背景が見える仕組みです。これなら画像が切り替わる瞬間にちらつく問題を解決できます。

保守作業で気をつけること(LUSIC)

LUSIC様の保守作業をしていてミスしがちなことや気をつける点などを書いています。みなさんの方でも追加して、担当が変わっても同じミスをしないようにしましょう。

◯LUSIC

・投資物件情報の更新作業

投資物件情報の更新が１年に数回あると思います。
投資物件情報の項目はNEWSだけでなく、L-SELECTのページの下にもあるので、忘れずに更新します。

似ているフォント集めました（有料→Google font）

フリーフォント選びに悩んだら

TypeSquareのフォントを１つしか使ってはいけない案件が多いので、デザインと違う、似ているフォントをフリーフォントから探さないといけないことが少なくないと思います。

フリーフォントを探す作業はけっこう時間がかかります。そこで今回は、アコーダーでよく見る有料フォントに似ているフォントを共有しようと思います。
①じゅん　→　Rounded M+ 1c (Google font+日本語)
似てる度★★★★★

・じゅん


・Rounded M+ 1c


HTML 
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
CSS 
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; }
②見出ゴMB31　→　Noto Sans Japanese (Google font+日本語)
似てる度★★★

・見出ゴMB31


・Noto Sans Japanese


数字がまったく似ていませんが、日本語はよく似ています。

HTML 
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
CSS 
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }
①新ゴ R　→　M＋1p (Google font+日本語)
似てる度★★★★

・新ゴ R


・　M＋1p


HTML 
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet"/>
CSS 
.wf-mplus1p { font-family: "Mplus 1p",sans-serif !important;}