はじめてのPC Life

PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

スポンサー広告
--年--月--日　--曜日

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

　先日紹介した関連記事Loaderのカスタマイズですが、色々いじくっているうちに「もしかしてこれもできるかも」と思い至り、さらにもうちょっとだけ手を加えてみました。

　今回してみたのは、タブのアクティブ時と非アクティブ時の文字の大きさを変えてみること。

　かいつまんで言うと、選択しているタブの文字は大きく、選択していないタブの文字は小さくなるようにカスタマイズしてみました。

　つまり、こんな感じに。

　選択しているタブ（「PCオーディオ」）と非選択のタブで、文字の大きさが異なっています。微妙ですが（選択タブは14px、非選択タブは12px）。

　方法は非常に簡単で、前回紹介したタブ部分の文字サイズを修正するためのHTML記述に、以下の記述を追加するだけです。

　#fthetfeed .gfc-tabHeader.gfc-tabhActive {
　　border-left: 1px solid #e9e9e9;
　　border-right: 1px solid #e9e9e9;
　　border-top: 2px solid #ff9900;
　　padding-top: 2px;
　　font-size: 14px;
　}

　追加する場所は、前回紹介した【タブ部分の文字サイズ修正】の記述の下あたりが分かりやすくていいかと。

　ちなみにこの記述は【タブ部分の文字サイズ修正】同様、作者サイトの「4.カスタマイズ」にある「選択中のタブの文字色を変更する」のサンプル表記に手を加えただけのもので、カスタマイズ点は

　■ color: white; を削除
　■ font-size: ○○px;（○○には適当な数値を記入）を追加

　しただけのものです。要は前回は削除した .gfc-tabhActive を削除せずに使っているだけです。つまり前回追加した

　■ #fthetfeed .gfc-tabHeader

　で、非アクティブ（選択していない）タブの文字サイズやタブのサイズ、色などを指定し、今回追加した

　■ #fthetfeed .gfc-tabHeader.gfc-tabhActive

　で、アクティブ（選択している）タブの文字サイズやタブのサイズ、色などを指定するというわけです。
　あと、ID #fthetfeed .gfc-tabHeader で指定する文字サイズも今回のカスタマイズに合わせて、12pxに変更しています。文字サイズはブログデザインに合わせてお好みでどうぞ。

　本当にちまっとしたカスタマイズですが、ちょっとしたアクセントになるかもと思って追加してみました。

▼ ランキング参加中です。興味を持っていただけたら、応援よろしくお願いします！