WordPressテーマSANGOの質問

評価ボックスのアイコンやリンクをカスタマイズしたい

アバター
ケンジ

こんばんは
非常に使いやすくて、見やすいデザインのSANGOを制作頂きましてありがとうございます。

下記カスタマイズについてアドバイス頂けますと幸いです。

1)ショートコード rate title について

サンプルにあります
[rate title="この本の評価"]
1.「この本の評価」の部分をアンカーテキストにする方法
2.この前に表示されているアイコンを変更したい(王冠にしたい)
3.アイコンの色を変更する方法
4.自分で用意した画像を表示したい
5.左側の項目の文字の幅を狭くする方法(サンプルの「読みやすさ」の部分)

2)ブログ全体の本文の文字の色を変更方法

以上、よろしくお願いします。

SANGOのショートコード一覧
SANGOのショートコード一覧
コメントへの回答
サルワカくん
サルワカくん
2018/11/23

1. 「この本の評価」の部分をアンカーテキストにする方法
⇒ショートコードのtitleを除き、その上にタイトルを配置すれば良いかと思います。

<h4 class="my-rate-title"><a href="リンクURL"><i class="fa fa-trophy"></i> ここにタイトル</a></h4>
[rate][value 3.5]読みやすさ[/value][value 4]面白さ[/value] [value 5]デザインの美しさ[/value][value 2]値段[/value][value 1.5]コレクション性[/value][value 4.5 end]総合評価[/value][/rate]

この場合、アイコンは<i class="fa fa-trophy"></i>を書き換えることで変更できます。FontAwesome4.7を使っているため、王冠はないですね…(こちらから探してください)。
色は以下のCSSを追加すれば変えられます。

/*タイトル文字色*/
.my-rate-title a {
  color: #色コード;
}
/*アイコン色*/
.my-rate-title a i {
  color: #色コード;
}

4の自分で用意した画像を表示したい、というのはどの部分にでしょうか。
5. 左側の幅は、以下のCSSを追加すれば狭くできます。

.rate-thing {
    max-width: 250px;/*左側の最大幅*/
}

2)ブログ全体の本文色は以下のCSSで変えられるかと思います。

body {
 color: #色コード;
}