FC2ブログ

まつお研究所
Trudrの食用羊
10 « 123456789101112131415161718192021222324252627282930» 12

FC2カウンター

ブログ内検索

おしえてアミストル

プロフィール

はなみがわ

Author:はなみがわ
所属: まつお研究所

ROSNS: はなみがわ







最近のトラックバック


Copyright
© Gravity Co., Ltd. & Lee MyoungJin(studio DTDS). All rights reserved.
© GungHo Online Entertainment, Inc. All Rights Reserved.
当コンテンツの再利用(再転載・配布など)は、禁止しています。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
/ --/--/--(--)--:-- /
/ スポンサー広告 / / /
ROSNSレイアウト調整②


前回は、スマホ向けレイアウトについて考えてみました。
今回は、PCブラウザ向けのレイアウトについて。

標準のレイアウトだと、上部の大半が広告に奪われてしまい、メインコンテンツがまともに見えない状態です。
mixiなどのサイトでこのような状態であれば、批判が集中するところでしょう。
私が使用している画面の解像度1440x900ですと、このように見えます。


①標準の表示


今回は、この広告部分の面積を縮小し、メインコンテンツの上部くらいを見えるようにします。
調整したものはこのようになります。


②ユーザースタイルシート追加

調整項目
・インフォメーション欄のフォントサイズを80%に縮小
・広告バナーを50%に縮小

日記に他の人からのコメントがついたり、フレンド申請が来る場合、インフォメーション欄に表示されます。
80%のサイズでも見えることは間違いないのですが、この部分についてはより大きくして見やすくしました。


③注目部分


●設定手順

①スタイルシート(テキストファイル)を作成する。
 メモ帳を起動し、以下のテキストファイルを入力します。

--------------ここから
@charset "UTF-8";

/* ROSNS表示カスタマイズ */

#LayoutA #Top .homeInfoBox div.body {
font-size: 80%;
}

#LayoutA #Top .homeInfoBox .caution {
font-size: 150%;
font-weight: bold;
}

#LayoutA #Top p img {
width: 50%;
height: 50%;
}
--------------ここまで

保存ファイル名の拡張子は ".css" とします。
ファイル名、保存先などは任意で結構です。
説明の例では、ファイル名 "rosnscustom.ccs" です。
保存形式は、下記の例のとおり "UTF-8" を指定してください。


④名前をつけて保存(メモ帳)


②ユーザースタイルシートを設定する。
 お使いのWEBブラウザで、上記で作成したユーザースタイルシートを指定します。
 
InternetExplorer7での設定例を説明します。

 ・ツール-インターネットオプションを選択し、設定パネルを開く。


⑤インターネットオプション1

 ・インターネットオプションから「ユーザ補助」を選択。


⑥インターネットオプション2

 ・ユーザスタイルシートを設定する。


⑦ユーザー補助


●他のコンテンツとの整合性について

実は、上記で設定したユーザスタイルシートは、そのブラウザで表示される全てのサイトに適用されます。
影響は少ないですが、稀に既存のサイトの表示が崩れる場合があります。
私の場合、インターネットエクスプローラはROおよびROSNSで使用し、
他のあらゆるサイトは別のブラウザを使用しているため、
上記の設定による影響範囲はガンホーゲームズサイトにとどまり、
実際の表示には影響がありません。

インターネットエクスプローラをメインで使っている場合は、別のWEBブラウザをインストールし、
そちらに上記設定を行なった方がよいかもしれません。
/ 2012/03/16(Fri)13:39 /
/ / / /
/ まつお研究所 /

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