スポンサーサイト

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

[mixi]Stylishで「お知らせ」をヘッダに表示してみた

[before]お知らせ

                      ↓

[after]お知らせ

Firefoxのアドオン「Stylish」で、mixiの「お知らせ」をヘッダのほうに表示させてみました。

前に公開してたmixi用のスタイルが仕様変更で使えなくなったので、小分けにして更新したって感じです。


導入は以下からどうぞ。


「Stylish」をすでにインストール済みの人はuserstyles.orgへアクセスし、「How to install」の「Install with Stylish」(下の画像参照)をクリックしてください。

まだインストールしていない方は記事「Firefoxのアドオン「Stylish」をインストールする」を参照してください。

How to install

クリックすると適用サイトの確認が表示されるので、「保存」をクリック。
これでインストール完了です。簡単でしょ?


試しにmixiにアクセスしてみてください。


一応コードも載っけときますね。


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url(http://mixi.jp/), url-prefix(http://mixi.jp/home.pl) {

/* ★オプション★ */
#mixiInfo h2, #mixiInfo ul
{
height: 54px; /* ←数値変更で「お知らせ」ボックスの高さを変更 */
}
#bodyContents #mixiInfo
{
top: 8px; /* ←数値変更で上の余白調整 */
}
/* ★オプションここまで(以下はいじるとレイアウトが崩れる恐れがあります)★ */


.adBanner { visibility: hidden !important; } /* 上部の広告非表示 */
#mixiInfo
{
position: absolute !important;
}
#mixiInfo .contents
{
padding: 7px 0 2px !important;
width: 441px;
}
#mixiInfo h2
{
font-size: 0 !important;
background: transparent url(http://img.mixi.jp/img/basic/home/bg_mixiinfo_bottom001.gif) no-repeat scroll left bottom;
margin-top: 15px !important;
top: 0 !important;
left: 0 !important;
width: 441px;
}
#mixiInfo ul
{
background-image: none !important;
padding-bottom: 0 !important;
width: 337px !important;
position: relative;
z-index: 0;
overflow-y: auto;
}
}


[仕様]
・上部の広告を非表示にします
・お知らせの内容量にかかわらず決まった高さで表示します
・内容が多い場合はボックス内でスクロールできるようになります
・オプション部分の数値を変更することでボックスの高さ(デフォルトでは文字サイズ「標準」で3行分)、および上の余白を変更できます


HTMLとCSSの分離を図ってるのかわかりませんが、「お知らせ」部分のCSSが見た目の直感とは異なる記述でした。

なので、内容が4行とかになったときに出てくるスクロールバー周りの調整に苦しみ、h2をやや強引に使ってます(´・ω・`)

「デフォルトで3行分も表示しなくていい」っていう人はオプションの値を適宜書き換えてください。

まぁ2行だと運営のお知らせで赤字が隠れちゃうこともあるのでおすすめしませんが。

テーマ : mixi
ジャンル : コンピュータ

コメントの投稿

非公開コメント

最新記事
最新コメント
カウンター
月別アーカイブ
最新トラックバック
カテゴリ
タグ一覧

mixi Firefox Greasemonkey Stylish 

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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