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

スポンサーサイト

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

Loading...

関連記事Loaderをさらにほんの少しだけカスタマイズ

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

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

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

 つまり、こんな感じに。

110803_01.jpg

 選択しているタブ(「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に変更しています。文字サイズはブログデザインに合わせてお好みでどうぞ。

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




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

にほんブログ村 PC家電ブログ パソコン・周辺機器へ 人気ブログランキングへ

Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。