WordPressテーマ「sparkling」のsliderをカスタマイズ

このサイトは、現在Wordpressテーマの「sparkling」をカスタマイズして使用しています。

このテーマのsliderのナビボタンは黒っぽい色が使われており、暗いslider画像を使用するとほとんど見えなかったので、白くして使っています。
簡単に、sliderのデザインを変更する方法を紹介します。

このデザインを定義している場所は、flexslider.cssというスタイルシートです。ファイルがある場所は、「サイトURL/wp-content/themes/sparkling/inc/css/」

flexslider.css

<pre>/* Direction Nav */
.flex-direction-nav {*height: 0; line-height: 80px;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 50px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: 50px;}
.flex-direction-nav .flex-next { right: 50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 0px; text-align: center; }
.flexslider:hover .flex-next { opacity: 0.7; right: 0px; text-align: center; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: FontAwesome; font-size: 40px; display: inline-block; content: '\f104'; }
.flex-direction-nav a.flex-next:before  { content: '\f105'; }

 

.flex-direction-nav a:before  { font-family: FontAwesome; font-size: 40px; display: inline-block; content: '\f104'; color:#fff; }

ここに、color:#fff;を追加ました。
これでsliderのナビボタンの色が変更できます。

 

ちなみに、sliderの背景色を変更する場所は42行目です。

.flexslider { margin: 0; background: #000; border: 4px solid #fff; position: relative; }