WPプラグイン

Meta Sliderで表示しているスライダーの端にできる微妙な丸みをなくす方法

投稿日: 更新日: 2017年11月24日

Meta Sliderのアップデートによって非表示にしていたナビゲーションが表示されるようになり、ついでにもう1つ細かい点に気づいてしまったでででーさん(@d3_dayo) です!

 
いま、このブログのヘッダー下でカルーセルスライダーを回転寿司のようにグルグルと表示させていますが、これはMeta SliderではなくbxsliderというjQueryのスライダープラグインで実装しています。
 
ですが、テスト環境ではMeta Sliderで同じようなことをしていまして、実はプラグインのアップデートによって少々のレイアウト崩れが起きてしまったので修正をしたのですが、その際にもっともっと細かいことに気がついてしまいました。
 
それはMeta Sliderで表示しているスライダーの両端には…非常に微かなものですがborder-radiusで角丸が適用されているということ。
 
本当に×100くらいで細かいことではあるんですが、私はどうしても気になってしまいました。そして、今この記事に検索でたどり着いた方は私と同じくその細かいことがすごく気になった方だと思うので、修正する手順を備忘録兼ねて載せておきます。
 
 

スポンサーリンク

Meta Sliderの角丸をなくす方法

Meta Sliderのプラグインデータ内のCSSを編集するのでFTP接続でサーバー上のファイルにアクセスすることができる環境が必要です。この記事ではFTPについては扱えるという前提で進めていこうと思います。
 
Meta Slider自体のCSSは以下のディレクトリに格納されています。
 
/wp-content/plugins/ml-slider/assets/sliders/flexslider
 
上記のディレクトリにアクセスしたらflexslider.cssを開いて、81行目から83行目までの以下コードをこのようにコメントアウトします。

手順は以上です。これで丸みが取れて、画面幅いっぱいにスライダーを表示している場合には、微妙な余白もなくなるかと思います。
 
 

Meta Slider

MetaSlider
今回の記事テーマとなったMeta Sliderは上記のページからダウンロードすることができます。
 
 

おわりに

この記事にたどり着く人は果たしているのかな…。もし、たどり着く人がいるとしたら…その人は私と同じで決して気にしなくても差し支えような細かいことが気になる人ですね。とても気が合う可能性があるので、よかったら他の記事も読んでいってください!(笑)
 
 
以下の記事では、私が実際に使用してみて便利だと思ったもの・役立ちそうだと思ったものを中心に紹介しているWordPressプラグインに関する記事まとめです!新発見もあるかもしれないので、ぜひこちらも覗いてみてください!
 
【保存版】これまでに書いてきた便利なWordPressプラグインの「機能・使い方」紹介記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ