SIRIUSレスポンシブテンプレート【fine&grandk】

ランキング機能のボタンカラー・フォントサイズ変更方法

SIRIUS特典テンプレートfine&grandランキングボタンカラー変更方法

 

ランキング機能のボタンカラーはCSSの16進数コードで割り当てています。

 

ブルーテンプレートであれば、以下のようになっています。

 

 

詳細ページはこちら・・・#64B5F6
公式ページはこちら・・・ #FF0047

 

これらのボタンカラーはCSSを編集することで、どんな色にも変更することが出来ます。

 

 

 

ボタンカラーの変更方法

最初に変更したいカラーコードを調べておきましょう。

 

カラーコードについては、WEB色見本 原色大辞典 - HTMLカラーコードが良いと思います。

 

 

SIRIUSスタイルシート編集

 

編集のタブをクリックして、「スタイルシート」をクリックして開く。

 

SIRIUSランキング機能詳細こちらボタンカラー変更

 

詳細ページはこちらのボタンカラーは、「#main .rank .more a」の部分を探して、カラーコードを書き換えます。

 

 

SIRIUSランキング機能公式こちらボタンカラー変更

 

公式ページはこちらのボタンカラーは、「#main .rank .more span.official a」の部分を探して、カラーコードを書き換えます。

 

保存してプレビューすればボタンの色が変更されます。

 

プレビューで反映されていない場合は、スタイルシートを変更した後に「保存」をクリックしなかった、または「#」「;」などが抜けていたり、全角になっている可能性がありますので見直してください。

 

 

ボタン内テキストフォントサイズの変更方法

ランキングボタン内のテキストフォントサイズは、デフォルトだと

 

  • PC・・・・16px
  • タブレット&スマホ・・・14px

 

で表示されるようになっています。

 

ですが、人によってはボタン内テキストを変更して、ボタン内テキストが2行になってしまうケースがあります。

 

その場合、フォントサイズを小さく変更するなどして対処することになります。

 

それぞれのスタイルシートを開いて、次に解説する部分のフォントサイズの数値を適宜変更してください。

 

 

「詳細ページはこちら」のフォントサイズ変更箇所

SIRIUSランキング機能フォントサイズ変更箇所PC

 

SIRIUSランキング機能フォントサイズ変更箇所スマホ

 

 

「公式ページはこちら」のフォントサイズ変更箇所

SIRIUSランキング機能フォントサイズ変更箇所公式PC

 

SIRIUSランキング機能フォントサイズ変更箇所公式スマホ

 

 

最後にサイト生成+アップロードをお忘れなく

ウェブサイトに変更を反映させるアップロード方法

 

アップロードしたサイトに反映させるには、サイト生成 → アップロード → styles.cssを右クリックしてアップロードすればOKです。

 

プレビューでは反映されているのにネットで見ると反映されていない場合は、ブラウザのキャッシュが働いていると考えられますので、数回リロードするか時間を空けて再び見てください。

 

 

 

 

【著者:マナ】

ランキング機能のボタンカラー・フォントサイズ変更方法

岩手県盛岡市の専業アフィリエイター。やり方は楽しさと役立ちを優先したホワイトハット。趣味はバイオリンと盛岡さんさ踊り。

【運営サイト】SIRIUSアピールサイト
【twitter】  @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。

スポンサーリンク
スポンサーリンク