「FC2人気ページランキング」の表示体裁を変更するユーザースタイルシート

人気のページをランキング形式で表示する「FC2人気ページランキング」は、色関係のカスタマイズが可能だが、表示項目の枠サイズのことになると手が出せない。そこで、ユーザースタイルシートを設定して、体裁を強制的に変更することにした。

表示例
18361277523_5f9571ed65_o.png

当ブログは、レスポンシブデザインを採用しているので、表示枠は250px(右サイド)~728px(フッター)と可変長になる。以下、ユーザースタイルシートについて簡単に説明する。 (FC2側のカスタマイズでは横幅250pxに設定)

<!-- FC2人気記事ランキング 開始 -->
<div class='side-title'>Popular Posts</div>
<div class='popular-list'>
<script type="text/javascript" src="http://xxxxxxxx.ranking.fc2.com/accessory.js?rtype=page" charset="utf-8"></script>
<style type="text/css">
.popular-list a {color: #000 !important;}
.popular-list a:hover {color: #dc143c !important;text-decoration: none !important;}
.popular-list table {width: 100% !important;}
.popular-list table td:last-child {width: 30px !important;}
</style>
</div>
  • リンク文字色を強制的に変更する。
  • 横幅を可変にするために100%と強制的に変更する。
  • カウント枠幅を30pxと強制的に変更する。

これだけのことで、かなり体裁がよくなる。

admin
カテゴリ:ウェブサービス
タグ:FC2
2015/06/20 11:06 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ