【Webデザイナー必見】Slickスライダーのドットや矢印の文字化けを防ぐ方法




みなさまこんにちは。プロクラスの中本です。
暑い日が続いておりますがお元気でしょうか。

今年の暑さに耐えきれず、先日遮光1級の日傘を購入しました。
今までの日傘と比べてかなり涼しく感じるようになりました!
日中はそれなしではもう歩けないですね、、、みなさまもお身体にお気をつけてお過ごしください。

さて、本日はWebサイト制作した経験がある方なら一度は使ったことがあるスライダープラグインの「Slick」についての豆知識をご紹介します。

まずはじめに

まず、「Slick」をご存じない方のために簡単にご説明いたします。
Webサイトのメインビジュアルなどで写真が数秒ごとに移り変わるものをスライドショーといいます。
そのスライドショーを実装したいと思ったときに便利なのが「Slick」というプラグインです。
オプションの種類が豊富で、レスポンシブにも対応しているのが特徴です。

公式サイト:http://kenwheeler.github.io/slick/

文字化けした際の対処法

Slickを使用してスライドショーの実装をした際にドットや矢印が文字化けしてしまったご経験はないでしょうか?

その原因はSlickのデフォルトのCSSに指定されている記号です。
擬似要素のcontentに「→」や「●」が入っていることで文字化けが発生してしまいます。

この分を下記のようにCSSで上書きしてみてください。

←:\2190
→:\2192
• : \2022

たったこれだけで文字化け問題が解決します!
ぜひお試しください。